Bug 1357447

Problem:
In the dashboard, the donut chart showing utilization information does not get updated whenever utilization values change, specifically the the donut is not re-drawn with the updated value unless the User forces a manual refresh.

USM is using angular-patternfly (which sits on top of a C3 chart), and there appears to be no re-draw function in there, and the C3 chart does have the redraw function.  Right now, the angular-patternfly does not provide any control over this redraw function.

UXD Feedback (from the PatternFly UI Dev team): 
This appears to be a known issue with C3 charts.  Firing a resize event seems to be the recommended way to refresh C3 charts.

We encountered this issue when we were creating the PatternFly website when switching between tabs.  This is the JS we're using to solve our particular problem.  Whenever the tab is toggled, a resize event is fired, and the C3 chart is refreshed.

<script>
    // Workaround for bug with hidden C3 charts in v0.4.11.
    $(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function () {
        if (window.dispatchEvent) {
            window.dispatchEvent(new Event('resize'));
        }
        // Special case for IE
        if ($(document).fireEvent) {
            $(document).fireEvent('onresize');
        }
    });
</script>

Per the PatternFly UI Development Team, the following are two choices to fix this issue:

1) Patch release the release of Angular Patternfly USM is currently using
  Small change but they need to update their version of Angular Patternfly

2) Provide a fix that works around the problem:

Currently they use the angular patternfly directive as such:

<div pf-donut-pct-chart class="fix-this" config="usedConfig" data="usedData" center-label="usedLabel"></div>
The fix would be to add another directive to wrap the pfDonutPctChart directive. Their HTML would become:

<div pf-donut-pct-chart-fixed>
   <div pf-donut-pct-chart class="fix-this" config="usedConfig" data="usedData" center-label="usedLabel"></div>
</div>

Then add the pfDonutPctChart directive (this could be named whatever USM wants and be in any module in USM):

angular.module('patternfly.charts').directive('pfDonutPctChartFixed', function (pfUtils, $timeout) {
  'use strict';
  return {
    restrict: 'A',
    transclude: true,
    template: '<div ng-transclude></div>',
    link: function (scope, iElm) {
      $timeout(function() {
        var pfDonutPctChart = iElm.find('span')[0];
        var innerScope = angular.element(pfDonutPctChart).isolateScope();
        innerScope.updateAll = function (scope) {
          scope.updateAvailable();
          scope.config.data = pfUtils.merge( scope.config.data, scope.getDonutData(scope));
          scope.config.color = scope.statusDonutColor(scope);
          scope.config.data.onclick = scope.config.onClickFn;
        };
      }, 200);
    }
  };
});

Basically, this outer directive gets the original directive and updates the erroneous method updateAll.

Please let us know which option they prefer and if we need to create the patch release.

@julim : we have preferred second option for this .. means created custom directive for updating this donut chart arc.

(In reply to kamlesh from comment #4)
> @julim : we had preferred second option for this .. means created custom
> directive for updating this donut chart arc.

Bug 1358267 will be solved in next version of Ceph. All other related BZ were filed so I verify this BZ.

Since the problem described in this bug report should be
resolved in a recent advisory, it has been closed with a
resolution of ERRATA.

For information on the advisory, and where to find the updated
files, follow the link below.

If the solution does not work for you, open a new bug report.

https://access.redhat.com/errata/RHEA-2016:1754