Skip to content

feat(pfCard): Add a loading state to the pfCards #670

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Nov 14, 2017
Merged

feat(pfCard): Add a loading state to the pfCards #670

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
164 changes: 122 additions & 42 deletions src/card/aggregate-status/aggregate-status-card.component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,9 @@
* </ul>
* </ul>
* @param {boolean=} show-top-border Show/hide the top border, true shows top border, false (default) hides top border
* @param {boolean=} showSpinner Show/Hide the spinner for loading state. True shows the spinner, false (default) hides the spinner
* @param {string=} spinnerText Text for the card spinner
* @param {string=} spinnerCardHeight Height to set for the card when data is loading and spinner is shown
* @param {string=} layout Various alternative layouts the aggregate status card may have:<br/>
* <ul style='list-style-type: none'>
* <li>'mini' displays a mini aggregate status card. Note: when using 'mini' layout, only one notification can be specified in the status object
Expand All @@ -44,50 +47,75 @@
<example module="patternfly.card">

<file name="index.html">
<div ng-controller="CardDemoCtrl" style="display:inline-block;">
<div class="col-md-10">
<label>With Top Border</label>
<pf-aggregate-status-card status="status" show-top-border="true"></pf-aggregate-status-card>
<br/>
<label>No Top Border</label>
<pf-aggregate-status-card status="status"></pf-aggregate-status-card>
<br/>
<label>layout = "mini"</label>
<pf-aggregate-status-card status="miniAggStatus" show-top-border="true" layout="mini"></pf-aggregate-status-card>
<pf-aggregate-status-card status="miniAggStatus2" show-top-border="true" layout="mini"></pf-aggregate-status-card>
<br/>
<label>layout = "tall"</label>
<pf-aggregate-status-card status="aggStatusAlt" show-top-border="true" layout="tall"></pf-aggregate-status-card>
<br/>
<label>Alternate Layout</label>
<i>(depreciated, use layout = 'tall' instead)</i>
</br></br>
<pf-aggregate-status-card status="aggStatusAlt" show-top-border="true" alt-layout="true"></pf-aggregate-status-card>
<div ng-controller="CardDemoCtrl" class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-5 col-lg-4">
<label>With Top Border</label>
<pf-aggregate-status-card status="status" show-top-border="true" show-spinner="dataLoading" spinner-text="Loading" spinner-card-height="90"></pf-aggregate-status-card>
</div>
<div class="col-xs-12 col-sm-6 col-md-5 col-lg-4">
<label>No Top Border</label>
<pf-aggregate-status-card status="status2"></pf-aggregate-status-card>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-5 col-lg-4">
<label>layout = "mini"</label>
<pf-aggregate-status-card status="miniAggStatus" show-top-border="true" layout="mini"></pf-aggregate-status-card>
<pf-aggregate-status-card status="miniAggStatus2" show-top-border="true" layout="mini"></pf-aggregate-status-card>
</div>
<div class="col-xs-12 col-sm-6 col-md-5 col-lg-4">
<label>layout = "tall"</label>
<pf-aggregate-status-card status="aggStatusAlt" show-top-border="true" layout="tall"></pf-aggregate-status-card>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-5 col-lg-4">
<label>Alternate Layout</label>
<br>
<i>(depreciated, use layout = 'tall' instead)</i>
<pf-aggregate-status-card status="aggStatusAlt" show-top-border="true" alt-layout="true"></pf-aggregate-status-card>
</div>
<div class="col-xs-12 col-sm-6 col-md-5 col-lg-4">
<label>Loading State</label>
<br>
<br>
<pf-aggregate-status-card status="aggStatusAlt2" spinner-card-height="140" show-top-border="true" show-spinner="dataLoading" spinner-text="Loading" layout="tall"></pf-aggregate-status-card>
</div>
</div>
</div>
</file>

<file name="script.js">
angular.module( 'patternfly.card' ).controller( 'CardDemoCtrl', function( $scope, $window ) {
angular.module( 'patternfly.card' ).controller( 'CardDemoCtrl', function( $scope, $window, $timeout ) {
var imagePath = $window.IMAGE_PATH || "img";

$scope.dataLoading = true;

$scope.status = {
"title":"Nodes",
"count":793,
"href":"#",
"iconClass": "fa fa-shield",
"notifications":[
{
"iconClass":"pficon pficon-error-circle-o",
"count":4,
"href":"#"
},
{
"iconClass":"pficon pficon-warning-triangle-o",
"count":1
}
]
"notifications":[]
};

$scope.status2 = {
"title":"Nodes",
"count":793,
"href":"#",
"iconClass": "fa fa-shield",
"notifications":[
{
"iconClass":"pficon pficon-error-circle-o",
"count":4,
"href":"#"
},
{
"iconClass":"pficon pficon-warning-triangle-o",
"count":1
}
]
};
$scope.aggStatusAlt = {
"title":"Providers",
"count":3,
Expand All @@ -103,28 +131,72 @@
"href":"#"
}
]
};
};

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should setup the $scope.aggStatusAlt2 here with the title but the count and notifications being unknown.

$scope.aggStatusAlt2 = {
"title":"Providers",
"notifications":[]
};

$timeout(function () {
$scope.dataLoading = false;

$scope.status = {
"title":"Nodes",
"count":793,
"href":"#",
"iconClass": "fa fa-shield",
"notifications":[
{
"iconClass":"pficon pficon-error-circle-o",
"count":4,
"href":"#"
},
{
"iconClass":"pficon pficon-warning-triangle-o",
"count":1
}
]
};

$scope.aggStatusAlt2 = {
"title":"Providers",
"count":3,
"notifications":[
{
"iconImage": imagePath + "/kubernetes.svg",
"count":1,
"href":"#"
},
{
"iconImage": imagePath + "/OpenShift-logo.svg",
"count":2,
"href":"#"
}
]
};
}, 6000 );

$scope.miniAggStatus = {
$scope.miniAggStatus = {
"iconClass":"pficon pficon-container-node",
"title":"Nodes",
"count":52,
"href":"#",
"notification": {
"iconClass":"pficon pficon-error-circle-o",
"count":3
}
};
"iconClass":"pficon pficon-error-circle-o",
"count":3
}
};

$scope.miniAggStatus2 = {
$scope.miniAggStatus2 = {
"iconClass":"pficon pficon-cluster",
"title":"Adipiscing",
"count":9,
"href":"#",
"notification":{
"iconClass":"pficon pficon-ok"
}
};
"iconClass":"pficon pficon-ok"
}
};
});
</file>

Expand All @@ -135,6 +207,9 @@ angular.module( 'patternfly.card' ).component('pfAggregateStatusCard', {
bindings: {
status: '=',
showTopBorder: '@?',
showSpinner: '<?',
spinnerText: '@?',
spinnerCardHeight: '@?',
altLayout: '@?',
layout: '@?'
},
Expand All @@ -146,6 +221,11 @@ angular.module( 'patternfly.card' ).component('pfAggregateStatusCard', {
ctrl.shouldShowTopBorder = (ctrl.showTopBorder === 'true');
ctrl.isAltLayout = (ctrl.altLayout === 'true' || ctrl.layout === 'tall');
ctrl.isMiniLayout = (ctrl.layout === 'mini');
ctrl.showSpinner = ctrl.showSpinner === true;

if (ctrl.spinnerCardHeight) {
ctrl.spinnerHeight = {'height': ctrl.spinnerCardHeight};
}
};
}
});
24 changes: 19 additions & 5 deletions src/card/aggregate-status/aggregate-status-card.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<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}">
<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 : {}">
<h2 class="card-pf-title">
<a href="{{$ctrl.status.href}}" ng-if="$ctrl.status.href">
<image ng-if="$ctrl.status.iconImage" ng-src="{{$ctrl.status.iconImage}}" alt="" class="card-pf-icon-image"></image>
Expand All @@ -13,8 +13,15 @@ <h2 class="card-pf-title">
<span class="card-pf-aggregate-status-title">{{$ctrl.status.title}}</span>
</span>
</h2>
<div class="card-pf-body">
<p class="card-pf-aggregate-status-notifications">
<div class="card-pf-body" ng-class="{'show-spinner': $ctrl.showSpinner}">
<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>
<p class="card-pf-aggregate-status-notifications" ng-class="{'hide-for-spinner': $ctrl.showSpinner}">
<span class="card-pf-aggregate-status-notification" ng-repeat="notification in $ctrl.status.notifications">
<a href="{{notification.href}}" ng-if="notification.href">
<image ng-if="notification.iconImage" ng-src="{{notification.iconImage}}" alt="" class="card-pf-icon-image"></image>
Expand All @@ -28,7 +35,7 @@ <h2 class="card-pf-title">
</p>
</div>
</div>
<div ng-if="$ctrl.isMiniLayout" class="card-pf card-pf-aggregate-status card-pf-aggregate-status-mini" ng-class="{'card-pf-accented': $ctrl.shouldShowTopBorder}">
<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 : {}">
<h2 class="card-pf-title">
<a ng-if="$ctrl.status.href" href="{{$ctrl.status.href}}">
<image ng-if="$ctrl.status.iconImage" ng-src="{{$ctrl.status.iconImage}}" alt="" class="card-pf-icon-image"></image>
Expand All @@ -41,7 +48,14 @@ <h2 class="card-pf-title">
{{$ctrl.status.title}}
</span>
</h2>
<div class="card-pf-body">
<div class="card-pf-body" ng-class="{'show-spinner': $ctrl.showSpinner}">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Try moving the ng-style to here, it would be consistent with the !mini HTML above where we added the ng-style

<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>
<p ng-if="$ctrl.status.notification.iconImage || $ctrl.status.notification.iconClass || $ctrl.status.notification.count" class="card-pf-aggregate-status-notifications">
<span class="card-pf-aggregate-status-notification">
<a ng-if="$ctrl.status.notification.href" href="{{$ctrl.status.notification.href}}">
Expand Down
27 changes: 26 additions & 1 deletion src/card/card.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,10 @@
}
}

.card-pf.card-pf-aggregate-status .card-pf-body .spinner-container {
position: static;
}

.card-pf {
.hide-for-spinner {
opacity: 0;
Expand Down Expand Up @@ -64,6 +68,25 @@
}
}

.card-pf-info-status .card-pf-body .spinner-container{
top: 0px;
height: 100%;
&.with-title {
top: 12px;
}
}

.card-pf-aggregate-status-mini {
.card-pf-body {
&.show-spinner {
height: 40px;
}
.spinner-container {
top: -22px;
}
}
}

.card-pf-heading-no-bottom {
margin: 0 -20px 0px;
padding: 0 20px 0;
Expand Down Expand Up @@ -112,7 +135,6 @@

.card-pf-info-status {
display: flex;
margin: 0 10px;
.card-pf-info-image {
display: flex;
align-items: center;
Expand All @@ -133,4 +155,7 @@
margin-bottom: 15px;
}
}
.show-spinner {
width: 100%;
}
}
22 changes: 15 additions & 7 deletions src/card/examples/card-trend.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,10 @@
*
* @param {string} headTitle Title for the card
* @param {string=} subTitle Sub-Title for the card
* @param {string=} spinnerText Text for the card spinner
* @param {string=} spinnerCardHeight Height to set for the card when data is loading and spinner is shown
* @param {boolean=} showTopBorder Show/Hide the blue top border. True shows top border, false (default) hides top border
* @param {boolean=} showSpinner Show/Hide the spinner for loading state. True shows the spinner, false (default) hides the spinner
* @param {boolean=} showTitlesSeparator Show/Hide the grey line between the title and sub-title.
* True (default) shows the line, false hides the line
* @param {object=} footer footer configuration properties:<br/>
Expand Down Expand Up @@ -38,21 +41,26 @@
<pf-card head-title="Cluster Utilization" show-top-border="true" footer="footerConfig" filter="filterConfig" style="width: 50%">
<pf-trends-chart config="configSingle" chart-data="dataSingle"></pf-trends-chart>
</pf-card>
<pf-card head-title="Cluster Utilization" show-top-border="true" footer="footerConfig" filter="filterConfig" style="width: 50%">
<pf-trends-chart config="configRightLabel" chart-data="dataSingle"></pf-trends-chart>
</pf-card>
<pf-card head-title="Cluster Utilization" show-top-border="true" show-spinner="dataLoading" spinner-text="Loading" footer="footerConfig" filter="filterConfig" style="width: 50%">
<pf-trends-chart config="configRightLabel" chart-data="dataSingle"></pf-trends-chart>
</pf-card>
<label class="label-title">Card with Multiple Trends</label>
<pf-card head-title="Performance" sub-title="Last 30 Days" show-top-border="false"
show-titles-separator="false" style="width: 65%" footer="actionBarConfig">
<pf-card head-title="Performance" sub-title="Last 30 Days" show-top-border="false" show-titles-separator="false" style="width: 65%" footer="actionBarConfig">
<pf-trends-chart config="configVirtual" chart-data="dataVirtual"></pf-trends-chart>
<pf-trends-chart config="configPhysical" chart-data="dataPhysical"></pf-trends-chart>
<pf-trends-chart config="configMemory" chart-data="dataMemory"></pf-trends-chart>
</pf-card>
</div>
</div>
</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',
Expand Down
Loading