Merge pull request #661 from amarie401/card-loading-state

fix(pfCard): Add loading state for pfCard

Author: dtaylor113

src/card/basic/card.component.js

@@ -5,9 +5,11 @@
  *
  * @param {string} headTitle Title for the card
  * @param {string=} subTitle Sub-Title for the card
+ * @param {string=} spinnerText Text for the card spinner
  * @param {boolean=} showTopBorder Show/Hide the blue top border. True shows top border, false (default) hides top border
  * @param {boolean=} showTitlesSeparator Show/Hide the grey line between the title and sub-title.
  * True (default) shows the line, false hides the line
+ * @param {boolean=} showSpinner Show/Hide the spinner for loading state. True shows the spinner, false (default) hides the spinner
  * @param {object=} footer footer configuration properties:<br/>
  * <ul style='list-style-type: none'>
  * <li>.iconClass  - (optional) the icon to show on the bottom left of the footer panel
@@ -35,7 +37,7 @@
  <file name="index.html">
    <div ng-controller="ChartCtrl">
      <label class="label-title">Card With Multiple Utilization Bars</label>
-     <pf-card head-title="System Resources" show-top-border="true" style="width: 65%">
+     <pf-card head-title="System Resources" show-spinner="dataLoading" spinner-text="Loading" show-top-border="true">
        <pf-utilization-bar-chart chart-data=data2 chart-title=title2 layout=layoutInline units=units2 threshold-error="85" threshold-warning="60"></pf-utilization-bar-chart>
        <pf-utilization-bar-chart chart-data=data3 chart-title=title3 layout=layoutInline units=units3 threshold-error="85" threshold-warning="60"></pf-utilization-bar-chart>
        <pf-utilization-bar-chart chart-data=data4 chart-title=title4 layout=layoutInline units=units4 threshold-error="85" threshold-warning="60"></pf-utilization-bar-chart>
@@ -44,37 +46,44 @@
    </div>
  </file>
  <file name="script.js">
- angular.module( 'demo', ['patternfly.charts', 'patternfly.card'] ).controller( 'ChartCtrl', function( $scope ) {
+ angular.module( 'demo', ['patternfly.charts', 'patternfly.card'] ).controller( 'ChartCtrl', function( $scope, $timeout ) {
+
+       $scope.dataLoading = true;
 
        $scope.title2 = 'Memory';
        $scope.units2 = 'GB';
 
-       $scope.data2 = {
-         'used': '25',
-         'total': '100'
-       };
-
        $scope.title3 = 'CPU Usage';
        $scope.units3 = 'MHz';
 
-       $scope.data3 = {
-         'used': '420',
-         'total': '500'
-       };
-
        $scope.title4 = 'Disk Usage';
        $scope.units4 = 'TB';
-       $scope.data4 = {
-         'used': '350',
-         'total': '500'
-       };
 
        $scope.title5 = 'Disk I/O';
-       $scope.units5 = 'I/Ops';
-       $scope.data5 = {
-         'used': '450',
-         'total': '500'
-       };
+         $scope.units5 = 'I/Ops';
+
+       $timeout(function () {
+         $scope.dataLoading = false;
+
+         $scope.data2 = {
+           'used': '25',
+           'total': '100'
+         };
+
+         $scope.data3 = {
+           'used': '420',
+           'total': '500'
+         };
+
+         $scope.data4 = {
+           'used': '350',
+           'total': '500'
+         };
+         $scope.data5 = {
+           'used': '450',
+           'total': '500'
+         };
+      }, 3000 );
 
        $scope.layoutInline = {
          'type': 'inline'
@@ -91,6 +100,8 @@ angular.module('patternfly.card').component('pfCard', {
     subTitle: '@?',
     showTopBorder: '@?',
     showTitlesSeparator: '@?',
+    showSpinner: '<?',
+    spinnerText: '@?',
     footer: '=?',
     filter: '=?'
   },
@@ -104,11 +115,9 @@ angular.module('patternfly.card').component('pfCard', {
         ctrl.currentFilter = ctrl.filter.filters[0];
       }
     }
-
     ctrl.footerCallBackFn = function () {
       ctrl.footerCallBackResult = ctrl.footer.callBackFn();
     };
-
     ctrl.filterCallBackFn = function (f) {
       ctrl.currentFilter = f;
       if (ctrl.filter.callBackFn) {
@@ -130,6 +139,7 @@ angular.module('patternfly.card').component('pfCard', {
 
     ctrl.$onInit = function () {
       ctrl.shouldShowTitlesSeparator = (!ctrl.showTitlesSeparator || ctrl.showTitlesSeparator === 'true');
+      ctrl.showSpinner = ctrl.showSpinner === true;
     };
   }
 });

src/card/basic/card.html

@@ -1,15 +1,21 @@
-<div ng-class="$ctrl.showTopBorder === 'true' ? 'card-pf card-pf-accented' : 'card-pf'">
+<div class="card-pf" ng-class="{'card-pf-accented': $ctrl.showTopBorder === 'true'}">
   <div ng-if="$ctrl.showHeader()" ng-class="$ctrl.shouldShowTitlesSeparator ? 'card-pf-heading' : 'card-pf-heading-no-bottom'">
-    <div ng-if="$ctrl.showFilterInHeader()" ng-include="'card/basic/card-filter.html'"></div>
+    <div ng-if="$ctrl.showFilterInHeader()" class="card-pf-footer-in-header" ng-class="{'hide-for-spinner': $ctrl.showSpinner}" ng-include="'card/basic/card-filter.html'"></div>
     <h2 class="card-pf-title">{{$ctrl.headTitle}}</h2>
   </div>
-
   <span ng-if="$ctrl.subTitle" class="card-pf-subtitle">{{$ctrl.subTitle}}</span>
 
-  <div class="card-pf-body">
-    <div ng-transclude></div>
+  <div class="card-pf-body" ng-class="{'show-spinner': $ctrl.showSpinner}">
+    <div ng-class="{'hide-for-spinner': $ctrl.showSpinner}" ng-transclude></div>
+    <div ng-if="$ctrl.showSpinner" class="spinner-container">
+      <div class="loading-indicator">
+        <span class="spinner spinner-lg" aria-hidden="true"></span>
+        <span ng-if="$ctrl.spinnerText" class="loading-text">{{$ctrl.spinnerText}}</span>
+        <label ng-if="!$ctrl.spinnerText" class="sr-only">Loading</label>
+      </div>
+    </div>
   </div>
-  <div ng-if="$ctrl.footer" class="card-pf-footer">
+  <div ng-if="$ctrl.footer" class="card-pf-footer" ng-class="{'hide-for-spinner': $ctrl.showSpinner}">
     <div ng-if="$ctrl.showFilterInFooter()" ng-include="'card/basic/card-filter.html'"></div>
     <p>
       <a ng-if="$ctrl.footer.href" href="{{$ctrl.footer.href}}" ng-class="{'card-pf-link-with-icon':$ctrl.footer.iconClass,'card-pf-link':!$ctrl.footer.iconClass}">

src/card/card.less

@@ -29,6 +29,41 @@
   }
 }
 
+.card-pf {
+  .hide-for-spinner {
+    opacity: 0;
+  }
+  .card-pf-body {
+    &.show-spinner {
+      position: relative;
+    }
+    .spinner-container {
+      display: flex;
+      justify-content: center;
+      left: 0;
+      position: absolute;
+      right: 0;
+      top: -20px;
+      bottom: 0;
+
+      .loading-indicator {
+        align-items: center;
+        justify-content: center;
+        display: flex;
+
+        .loading-text {
+          font-size: 16px;
+          margin-left: 10px;
+        }
+
+        .spinner.spinner-lg {
+          display: inline-block;
+        }
+      }
+    }
+  }
+}
+
 .card-pf-heading-no-bottom {
   margin: 0 -20px 0px;
   padding: 0 20px 0;

src/card/examples/card-timeframe.js

@@ -5,9 +5,11 @@
  *
  * @param {string} headTitle Title for the card
  * @param {string=} subTitle Sub-Title for the card
+ * @param {string=} spinnerText Text for the card spinner
  * @param {boolean=} showTopBorder Show/Hide the blue top border. True shows top border, false (default) hides top border
  * @param {boolean=} showTitlesSeparator Show/Hide the grey line between the title and sub-title.
  * True (default) shows the line, false hides the line
+ * @param {boolean=} showSpinner Show/Hide the spinner for loading state. True shows the spinner, false (default) hides the spinner
  * @param {object=} footer footer configuration properties:<br/>
  * <ul style='list-style-type: none'>
  * <li>.iconClass  - (optional) the icon to show on the bottom left of the footer panel
@@ -45,10 +47,20 @@
           footer="footerConfig" filter="filterConfig" style="width: 50%">
         Card Contents
      </pf-card>
+     <label class="label-title">Loading State</label>
+     <pf-card show-spinner="dataLoading" spinner-text="Loading" head-title="Card Title" sub-title="Card Subtitle" show-top-border="true" filter="filterConfigHeader" style="width: 50%">
+       Card Contents
+     </pf-card>
    </div>
  </file>
  <file name="script.js">
- angular.module( 'demo', ['patternfly.charts', 'patternfly.card'] ).controller( 'ChartCtrl', function( $scope ) {
+ angular.module( 'demo', ['patternfly.charts', 'patternfly.card'] ).controller( 'ChartCtrl', function( $scope, $timeout ) {
+
+       $scope.dataLoading = true;
+
+       $timeout(function () {
+         $scope.dataLoading = false;
+       }, 3000 );
 
        $scope.footerConfig = {
          'iconClass' : 'fa fa-flag',

src/charts/utilization-bar/utilization-bar-chart.component.js

@@ -172,8 +172,16 @@ angular.module('patternfly.charts').component('pfUtilizationBarChart', {
       prevChartData = angular.copy(ctrl.chartData);
       prevLayout = angular.copy(ctrl.layout);
 
+      if (!ctrl.chartData) {
+        return;
+      }
+
       //Calculate the percentage used
-      ctrl.chartData.percentageUsed = Math.round(100 * (ctrl.chartData.used / ctrl.chartData.total));
+      if (!isNaN(ctrl.chartData.used) && !isNaN(ctrl.chartData.total) && (ctrl.chartData.total > 0)) {
+        ctrl.chartData.percentageUsed = Math.round(100 * (ctrl.chartData.used / ctrl.chartData.total));
+      } else {
+        ctrl.chartData.percentageUsed = 0;
+      }
 
       if (ctrl.thresholdError || ctrl.thresholdWarning) {
         ctrl.isError = (ctrl.chartData.percentageUsed >= ctrl.thresholdError);
@@ -201,11 +209,11 @@ angular.module('patternfly.charts').component('pfUtilizationBarChart', {
     };
 
     ctrl.usedTooltipMessage = function () {
-      return ctrl.usedTooltipFunction ? ctrl.usedTooltipFunction() : ctrl.chartData.percentageUsed + '% Used';
+      return ctrl.usedTooltipFunction ? ctrl.usedTooltipFunction() : _.get(ctrl.chartData, 'percentageUsed', 'N/A') + '% Used';
     };
 
     ctrl.availableTooltipMessage = function () {
-      return ctrl.availableTooltipFunction ? ctrl.availableTooltipFunction() : (100 - ctrl.chartData.percentageUsed) + '% Available';
+      return ctrl.availableTooltipFunction ? ctrl.availableTooltipFunction() : (100 - _.get(ctrl.chartData, 'percentageUsed', 0)) + '% Available';
     };
   }
 });

test/card/basic/card.spec.js

@@ -85,6 +85,36 @@ describe('Component: pfCard', function() {
 
     });
 
+    it("should show and hide the spinner", function() {
+
+      // When data is loaded, spinner should be hidden
+      $scope.dataLoading = false;
+      element = compileCard('<pf-card head-title="My card title" show-spinner="dataLoading" sub-title="My card subtitle title" show-top-border="false">Inner content goes here</pf-card>', $scope);
+      cardClass = angular.element(element).find('.spinner-lg');
+      expect(cardClass.length).toBe(0);
+
+      // When data is loading, spinner should be present
+      $scope.dataLoading = true;
+      $scope.$digest();
+      cardClass = angular.element(element).find('.spinner-lg');
+      expect(cardClass.length).toBe(1);
+    });
+
+    it("should show and hide the spinner text", function() {
+
+      // When no spinner text is given, it should be undefined
+      element = compileCard('<pf-card head-title="My card title" show-spinner="dataLoading" sub-title="My card subtitle title" show-top-border="false">Inner content goes here</pf-card>', $scope);
+      cardClass = angular.element(element).find('.loading-text');
+      expect(cardClass.html()).toBeUndefined();
+
+      // When data is loading, spinner text should be present
+      $scope.dataLoading = true;
+      element = compileCard('<pf-card head-title="My card title" show-spinner="dataLoading" spinner-text="Test Loading Message" sub-title="My card subtitle title" show-top-border="false">Inner content goes here</pf-card>', $scope);
+      cardClass = angular.element(element).find('.loading-text');
+      expect(cardClass.html()).toContain('Test Loading Message');
+
+    });
+
     it("should hide the action bar footer by default", function() {
 
       // by default, if footer not defined, footer should not be shown

test/charts/utilization-bar/utilization-bar.spec.js

@@ -106,4 +106,10 @@ describe('Directive: pfUtilizationBarChart', function() {
     expect(emptyChart.length).toBe(1);
   });
 
+  it("should handle no data given", function() {
+    element = compileChart('<pf-utilization-bar-chart chart-data=data2 chart-title=title units=units></pf-utilization-bar-chart>', $scope);
+    utilizationBar = angular.element(element).find('.progress-bar-remaining').css('width');
+    expect(utilizationBar).toBe("100%");
+  });
+
 });