Skip to content

Commit 5edb266

Browse files
author
Amineta Lo
committed
feat(pfCard): Add a loading state to the pfCards
1 parent 7bdaa9b commit 5edb266

File tree

8 files changed

+296
-63
lines changed

8 files changed

+296
-63
lines changed

‎src/card/aggregate-status/aggregate-status-card.component.js

Lines changed: 86 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,9 @@
3030
* </ul>
3131
* </ul>
3232
* @param {boolean=} show-top-border Show/hide the top border, true shows top border, false (default) hides top border
33+
* @param {boolean=} showSpinner Show/Hide the spinner for loading state. True shows the spinner, false (default) hides the spinner
34+
* @param {string=} spinnerText Text for the card spinner
35+
* @param {string=} spinnerCardHeight Height to set for the card when data is loading and spinner is shown
3336
* @param {string=} layout Various alternative layouts the aggregate status card may have:<br/>
3437
* <ul style='list-style-type: none'>
3538
* <li>'mini' displays a mini aggregate status card. Note: when using 'mini' layout, only one notification can be specified in the status object
@@ -44,32 +47,51 @@
4447
<example module="patternfly.card">
4548
4649
<file name="index.html">
47-
<div ng-controller="CardDemoCtrl" style="display:inline-block;">
48-
<div class="col-md-10">
49-
<label>With Top Border</label>
50-
<pf-aggregate-status-card status="status" show-top-border="true"></pf-aggregate-status-card>
51-
<br/>
52-
<label>No Top Border</label>
53-
<pf-aggregate-status-card status="status"></pf-aggregate-status-card>
54-
<br/>
55-
<label>layout = "mini"</label>
56-
<pf-aggregate-status-card status="miniAggStatus" show-top-border="true" layout="mini"></pf-aggregate-status-card>
57-
<pf-aggregate-status-card status="miniAggStatus2" show-top-border="true" layout="mini"></pf-aggregate-status-card>
58-
<br/>
59-
<label>layout = "tall"</label>
60-
<pf-aggregate-status-card status="aggStatusAlt" show-top-border="true" layout="tall"></pf-aggregate-status-card>
61-
<br/>
62-
<label>Alternate Layout</label>
63-
<i>(depreciated, use layout = 'tall' instead)</i>
64-
</br></br>
65-
<pf-aggregate-status-card status="aggStatusAlt" show-top-border="true" alt-layout="true"></pf-aggregate-status-card>
50+
<div ng-controller="CardDemoCtrl" class="container-fluid">
51+
<div class="row">
52+
<div class="col-xs-12 col-sm-6 col-md-5 col-lg-4">
53+
<label>With Top Border</label>
54+
<pf-aggregate-status-card status="status" show-top-border="true"></pf-aggregate-status-card>
55+
</div>
56+
<div class="col-xs-12 col-sm-6 col-md-5 col-lg-4">
57+
<label>No Top Border</label>
58+
<pf-aggregate-status-card status="status"></pf-aggregate-status-card>
59+
</div>
60+
</div>
61+
<div class="row">
62+
<div class="col-xs-12 col-sm-6 col-md-5 col-lg-4">
63+
<label>layout = "mini"</label>
64+
<pf-aggregate-status-card status="miniAggStatus" show-top-border="true" layout="mini"></pf-aggregate-status-card>
65+
<pf-aggregate-status-card status="miniAggStatus2" show-top-border="true" layout="mini"></pf-aggregate-status-card>
66+
</div>
67+
<div class="col-xs-12 col-sm-6 col-md-5 col-lg-4">
68+
<label>layout = "tall"</label>
69+
<pf-aggregate-status-card status="aggStatusAlt" show-top-border="true" layout="tall"></pf-aggregate-status-card>
70+
</div>
71+
</div>
72+
<div class="row">
73+
<div class="col-xs-12 col-sm-6 col-md-5 col-lg-4">
74+
<label>Alternate Layout</label>
75+
<br>
76+
<i>(depreciated, use layout = 'tall' instead)</i>
77+
<pf-aggregate-status-card status="aggStatusAlt" show-top-border="true" alt-layout="true"></pf-aggregate-status-card>
78+
</div>
79+
<div class="col-xs-12 col-sm-6 col-md-5 col-lg-4">
80+
<label>Loading State</label>
81+
<br>
82+
<br>
83+
<pf-aggregate-status-card status="aggStatusAlt2" spinner-card-height="150" show-top-border="true" show-spinner="dataLoading" spinner-text="Loading" layout="tall"></pf-aggregate-status-card>
84+
</div>
6685
</div>
6786
</div>
6887
</file>
6988
7089
<file name="script.js">
71-
angular.module( 'patternfly.card' ).controller( 'CardDemoCtrl', function( $scope, $window ) {
90+
angular.module( 'patternfly.card' ).controller( 'CardDemoCtrl', function( $scope, $window, $timeout ) {
7291
var imagePath = $window.IMAGE_PATH || "img";
92+
93+
$scope.dataLoading = true;
94+
7395
$scope.status = {
7496
"title":"Nodes",
7597
"count":793,
@@ -103,28 +125,54 @@
103125
"href":"#"
104126
}
105127
]
106-
};
128+
};
129+
130+
$scope.aggStatusAlt2 = {
131+
"title":"Providers",
132+
"notifications":[]
133+
};
134+
135+
$timeout(function () {
136+
$scope.dataLoading = false;
107137
108-
$scope.miniAggStatus = {
138+
$scope.aggStatusAlt2 = {
139+
"title":"Providers",
140+
"count":3,
141+
"notifications":[
142+
{
143+
"iconImage": imagePath + "/kubernetes.svg",
144+
"count":1,
145+
"href":"#"
146+
},
147+
{
148+
"iconImage": imagePath + "/OpenShift-logo.svg",
149+
"count":2,
150+
"href":"#"
151+
}
152+
]
153+
};
154+
}, 6000 );
155+
156+
$scope.miniAggStatus = {
109157
"iconClass":"pficon pficon-container-node",
110158
"title":"Nodes",
111159
"count":52,
112160
"href":"#",
113161
"notification": {
114-
"iconClass":"pficon pficon-error-circle-o",
115-
"count":3
116-
}
117-
};
162+
"iconClass":"pficon pficon-error-circle-o",
163+
"count":3
164+
}
165+
};
118166
119-
$scope.miniAggStatus2 = {
167+
$scope.miniAggStatus2 = {
120168
"iconClass":"pficon pficon-cluster",
121169
"title":"Adipiscing",
122170
"count":9,
123171
"href":"#",
124172
"notification":{
125-
"iconClass":"pficon pficon-ok"
126-
}
127-
};
173+
"iconClass":"pficon pficon-ok"
174+
}
175+
};
128176
});
129177
</file>
130178
@@ -135,6 +183,9 @@ angular.module( 'patternfly.card' ).component('pfAggregateStatusCard', {
135183
bindings: {
136184
status: '=',
137185
showTopBorder: '@?',
186+
showSpinner: '<?',
187+
spinnerText: '@?',
188+
spinnerCardHeight: '@?',
138189
altLayout: '@?',
139190
layout: '@?'
140191
},
@@ -146,6 +197,11 @@ angular.module( 'patternfly.card' ).component('pfAggregateStatusCard', {
146197
ctrl.shouldShowTopBorder = (ctrl.showTopBorder === 'true');
147198
ctrl.isAltLayout = (ctrl.altLayout === 'true' || ctrl.layout === 'tall');
148199
ctrl.isMiniLayout = (ctrl.layout === 'mini');
200+
ctrl.showSpinner = ctrl.showSpinner === true;
201+
202+
if (ctrl.spinnerCardHeight) {
203+
ctrl.spinnerHeight = {'height': ctrl.spinnerCardHeight};
204+
}
149205
};
150206
}
151207
});

‎src/card/aggregate-status/aggregate-status-card.html

Lines changed: 19 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div ng-if="!$ctrl.isMiniLayout" class="card-pf card-pf-aggregate-status" ng-class="{'card-pf-accented': $ctrl.shouldShowTopBorder, 'card-pf-aggregate-status-alt': $ctrl.isAltLayout}">
1+
<div ng-if="!$ctrl.isMiniLayout" class="card-pf card-pf-aggregate-status" ng-class="{'card-pf-accented': $ctrl.shouldShowTopBorder, 'card-pf-aggregate-status-alt': $ctrl.isAltLayout}" ng-style="$ctrl.showSpinner ? $ctrl.spinnerHeight : {}">
22
<h2 class="card-pf-title">
33
<a href="{{$ctrl.status.href}}" ng-if="$ctrl.status.href">
44
<image ng-if="$ctrl.status.iconImage" ng-src="{{$ctrl.status.iconImage}}" alt="" class="card-pf-icon-image"></image>
@@ -13,8 +13,15 @@ <h2 class="card-pf-title">
1313
<span class="card-pf-aggregate-status-title">{{$ctrl.status.title}}</span>
1414
</span>
1515
</h2>
16-
<div class="card-pf-body">
17-
<p class="card-pf-aggregate-status-notifications">
16+
<div class="card-pf-body" ng-class="{'show-spinner': $ctrl.showSpinner}">
17+
<div ng-if="$ctrl.showSpinner" class="spinner-container">
18+
<div class="loading-indicator">
19+
<span class="spinner spinner-lg" aria-hidden="true"></span>
20+
<span ng-if="$ctrl.spinnerText" class="loading-text">{{$ctrl.spinnerText}}</span>
21+
<label ng-if="!$ctrl.spinnerText" class="sr-only">Loading</label>
22+
</div>
23+
</div>
24+
<p class="card-pf-aggregate-status-notifications" ng-class="{'hide-for-spinner': $ctrl.showSpinner}">
1825
<span class="card-pf-aggregate-status-notification" ng-repeat="notification in $ctrl.status.notifications">
1926
<a href="{{notification.href}}" ng-if="notification.href">
2027
<image ng-if="notification.iconImage" ng-src="{{notification.iconImage}}" alt="" class="card-pf-icon-image"></image>
@@ -28,7 +35,7 @@ <h2 class="card-pf-title">
2835
</p>
2936
</div>
3037
</div>
31-
<div ng-if="$ctrl.isMiniLayout" class="card-pf card-pf-aggregate-status card-pf-aggregate-status-mini" ng-class="{'card-pf-accented': $ctrl.shouldShowTopBorder}">
38+
<div ng-if="$ctrl.isMiniLayout" class="card-pf card-pf-aggregate-status card-pf-aggregate-status-mini" ng-class="{'card-pf-accented': $ctrl.shouldShowTopBorder}" ng-style="$ctrl.showSpinner ? $ctrl.spinnerHeight : {}">
3239
<h2 class="card-pf-title">
3340
<a ng-if="$ctrl.status.href" href="{{$ctrl.status.href}}">
3441
<image ng-if="$ctrl.status.iconImage" ng-src="{{$ctrl.status.iconImage}}" alt="" class="card-pf-icon-image"></image>
@@ -41,7 +48,14 @@ <h2 class="card-pf-title">
4148
{{$ctrl.status.title}}
4249
</span>
4350
</h2>
44-
<div class="card-pf-body">
51+
<div class="card-pf-body" ng-class="{'show-spinner': $ctrl.showSpinner}">
52+
<div ng-if="$ctrl.showSpinner" class="spinner-container">
53+
<div class="loading-indicator">
54+
<span class="spinner spinner-lg" aria-hidden="true"></span>
55+
<span ng-if="$ctrl.spinnerText" class="loading-text">{{$ctrl.spinnerText}}</span>
56+
<label ng-if="!$ctrl.spinnerText" class="sr-only">Loading</label>
57+
</div>
58+
</div>
4559
<p ng-if="$ctrl.status.notification.iconImage || $ctrl.status.notification.iconClass || $ctrl.status.notification.count" class="card-pf-aggregate-status-notifications">
4660
<span class="card-pf-aggregate-status-notification">
4761
<a ng-if="$ctrl.status.notification.href" href="{{$ctrl.status.notification.href}}">

‎src/card/card.less

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,25 @@
6464
}
6565
}
6666

67+
.card-pf-info-status .card-pf-body .spinner-container{
68+
top: 0px;
69+
height: 100%;
70+
&.with-title {
71+
top: 12px;
72+
}
73+
}
74+
75+
.card-pf-aggregate-status-mini {
76+
.card-pf-body {
77+
&.show-spinner {
78+
height: 40px;
79+
}
80+
.spinner-container {
81+
top: -22px;
82+
}
83+
}
84+
}
85+
6786
.card-pf-heading-no-bottom {
6887
margin: 0 -20px 0px;
6988
padding: 0 20px 0;
@@ -133,4 +152,7 @@
133152
margin-bottom: 15px;
134153
}
135154
}
155+
.show-spinner {
156+
width: 100%;
157+
}
136158
}

‎src/card/examples/card-trend.js

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,10 @@
55
*
66
* @param {string} headTitle Title for the card
77
* @param {string=} subTitle Sub-Title for the card
8+
* @param {string=} spinnerText Text for the card spinner
9+
* @param {string=} spinnerCardHeight Height to set for the card when data is loading and spinner is shown
810
* @param {boolean=} showTopBorder Show/Hide the blue top border. True shows top border, false (default) hides top border
11+
* @param {boolean=} showSpinner Show/Hide the spinner for loading state. True shows the spinner, false (default) hides the spinner
912
* @param {boolean=} showTitlesSeparator Show/Hide the grey line between the title and sub-title.
1013
* True (default) shows the line, false hides the line
1114
* @param {object=} footer footer configuration properties:<br/>
@@ -38,21 +41,26 @@
3841
<pf-card head-title="Cluster Utilization" show-top-border="true" footer="footerConfig" filter="filterConfig" style="width: 50%">
3942
<pf-trends-chart config="configSingle" chart-data="dataSingle"></pf-trends-chart>
4043
</pf-card>
41-
<pf-card head-title="Cluster Utilization" show-top-border="true" footer="footerConfig" filter="filterConfig" style="width: 50%">
42-
<pf-trends-chart config="configRightLabel" chart-data="dataSingle"></pf-trends-chart>
43-
</pf-card>
44+
<pf-card head-title="Cluster Utilization" show-top-border="true" show-spinner="dataLoading" spinner-text="Loading" footer="footerConfig" filter="filterConfig" style="width: 50%">
45+
<pf-trends-chart config="configRightLabel" chart-data="dataSingle"></pf-trends-chart>
46+
</pf-card>
4447
<label class="label-title">Card with Multiple Trends</label>
45-
<pf-card head-title="Performance" sub-title="Last 30 Days" show-top-border="false"
46-
show-titles-separator="false" style="width: 65%" footer="actionBarConfig">
48+
<pf-card head-title="Performance" sub-title="Last 30 Days" show-top-border="false" show-titles-separator="false" style="width: 65%" footer="actionBarConfig">
4749
<pf-trends-chart config="configVirtual" chart-data="dataVirtual"></pf-trends-chart>
4850
<pf-trends-chart config="configPhysical" chart-data="dataPhysical"></pf-trends-chart>
4951
<pf-trends-chart config="configMemory" chart-data="dataMemory"></pf-trends-chart>
5052
</pf-card>
51-
</div>
5253
</div>
54+
</div>
5355
</file>
5456
<file name="script.js">
55-
angular.module( 'demo', ['patternfly.charts', 'patternfly.card'] ).controller( 'ChartCtrl', function( $scope ) {
57+
angular.module( 'demo', ['patternfly.charts', 'patternfly.card'] ).controller( 'ChartCtrl', function( $scope, $timeout ) {
58+
59+
$scope.dataLoading = true;
60+
61+
$timeout(function () {
62+
$scope.dataLoading = false;
63+
}, 3000 );
5664
5765
$scope.footerConfig = {
5866
'iconClass' : 'fa fa-flag',

0 commit comments

Comments
 (0)