loader animation added to pages
Change-Id: Id8c890714d0a90ae913b6581cd655abcf6cd6781
Signed-off-by: Michael Davis <michael.s.davis@ibm.com>
diff --git a/app/common/directives/loader.html b/app/common/directives/loader.html
index 65f818b..fd6e0cb 100644
--- a/app/common/directives/loader.html
+++ b/app/common/directives/loader.html
@@ -1,3 +1,4 @@
-<div class="loader__wrapper"><svg class="loader" viewBox="25 25 50 50">
+<div class="loader__wrapper" ng-show="loading"><svg class="loader" viewBox="25 25 50 50">
<circle class="loader__path" cx="50" cy="50" r="20"/></circle>
-</svg></div>
\ No newline at end of file
+</svg></div>
+<div class="loader__overlay" ng-show="loading"></div>
\ No newline at end of file
diff --git a/app/common/directives/loader.js b/app/common/directives/loader.js
new file mode 100644
index 0000000..9a06055
--- /dev/null
+++ b/app/common/directives/loader.js
@@ -0,0 +1,16 @@
+window.angular && (function (angular) {
+ 'use strict';
+
+ angular
+ .module('app.common.directives')
+ .directive('loader', function () {
+ return {
+ 'restrict': 'E',
+ 'templateUrl': 'common/directives/loader.html',
+ scope: {
+ loading: '='
+ }
+ };
+ });
+
+})(window.angular);
\ No newline at end of file
diff --git a/app/common/styles/elements/loader.scss b/app/common/styles/elements/loader.scss
index a711e04..1f1cd56 100644
--- a/app/common/styles/elements/loader.scss
+++ b/app/common/styles/elements/loader.scss
@@ -8,11 +8,12 @@
.loader__wrapper {
width: 115px;
height: 115px;
- position: relative;
- top: 0;
+ position: fixed;
+ top: 50%;
left: 50%;
- transform: translateX(-50%);
+ transform: translate(-50%, -50%);
margin: 3em 0;
+ z-index: 91;
}
.loader{
@@ -20,7 +21,7 @@
height:100%;
transform: translateZ(0) rotate(360deg);
transform-origin: center center;
- -moz-transform-origin: 50px 50px; /* firefox requires fixed values */
+ -moz-transform-origin: center center; /* firefox requires fixed values */
animation: rotate 1s linear infinite;
}
@@ -37,4 +38,17 @@
transition: stroke-dashoffset 1s cubic-bezier(.5,.08,0,1);
-webkit-animation: a 4s ease-out infinite;
animation: a 4s ease-out infinite;
+}
+
+.loader__overlay {
+ display: block;
+ position: fixed;
+ top: 0;
+ left: 0;
+ background: #fefefe;
+ height: 100%;
+ z-index: 90;
+ opacity: .7;
+ width: 100%;
+ -webkit-animation: fade 1s ease-in;
}
\ No newline at end of file
diff --git a/app/index.html b/app/index.html
index 2026eb6..7d1e813 100644
--- a/app/index.html
+++ b/app/index.html
@@ -54,6 +54,7 @@
<script src="common/directives/toggle-flag.js"></script>
<script src="common/directives/firmware-list.js"></script>
<script src="common/directives/file.js"></script>
+ <script src="common/directives/loader.js"></script>
<script src="login/index.js"></script>
<script src="login/controllers/login-controller.js"></script>
diff --git a/app/overview/controllers/system-overview-controller.html b/app/overview/controllers/system-overview-controller.html
index a3d22ed..e555641 100644
--- a/app/overview/controllers/system-overview-controller.html
+++ b/app/overview/controllers/system-overview-controller.html
@@ -1,3 +1,4 @@
+<loader loading="loading"></loader>
<div class="overview">
<div class="row column">
<h1 class="inline">IBM Power Witherspoon 2</h1>
@@ -78,14 +79,14 @@
<!-- Power metadata -->
<div class="row column overview__event-log event-log__events" ng-show="logs.length">
<div class="page-header">
- <h3 class="bold h4 inline">High priority events</h3>
- <a href="#/server-health/event-log" class="inline float-right">View all event logs</a>
+ <h3 class="bold h4 inline">High priority events ({{logs.length}})</h3>
+ <a href="#/server-health/event-log/high" class="inline float-right">View all event logs</a>
</div>
<!-- show when there are no critical events from event log -->
<!-- <p class="disabled">No high priority events</p> -->
<!-- single event -->
- <a href="#/server-health/event-log" ng-repeat="event in logs|orderBy:'+Id'">
+ <a href="#/server-health/event-log/high" ng-repeat="event in logs|orderBy:'+Id'">
<div class="row column event-log__single-event">
<div class="row">
<div class="column small-1 large-1 event-log__col-check">
@@ -113,13 +114,15 @@
</div>
<div class="row column overview__event-log event-log__events" ng-show="!logs.length">
- <h3 class="bold h4">High priority events</h3>
- <p>There are no high priority events to display at this time.</p>
+ <div class="page-header">
+ <h3 class="bold h4">High priority events (0)</h3>
+ <p>There are no high priority events to display at this time.</p>
+ </div>
</div>
</div>
<div class="column large-4 no-padding">
<div class="quick-links">
- <a href="#/server-health/event-log" class="quick-links__item quick-links__events event-log__events" ng-show="logs.length">
+ <a href="#/server-health/event-log/high" class="quick-links__item quick-links__events event-log__events" ng-show="logs.length">
<p class="inline quick-links__event-copy">{{logs.length}} High priority events</p><!-- link to event log filtered to the high priority events -->
</a>
<div class="quick-links__item no-icon">
@@ -127,7 +130,7 @@
<p class="inline courier-bold float-right">3:20:12 5/22/2017 UTC</p>
</div>
<div class="quick-links__item no-icon">
- <p class="inline quick-links__label">Turn on server indicator</p>
+ <p class="inline quick-links__label">Turn <span ng-if="dataService.LED_state == 'off'">on</span><span ng-if="dataService.LED_state == 'on'">off</span> server indicator</p>
<div class="toggle inline float-right">
<input id="toggle__switch-round"
class="toggle-switch toggle-switch__round-flat"
diff --git a/app/overview/controllers/system-overview-controller.js b/app/overview/controllers/system-overview-controller.js
index 5468d6f..4dd012d 100644
--- a/app/overview/controllers/system-overview-controller.js
+++ b/app/overview/controllers/system-overview-controller.js
@@ -17,7 +17,8 @@
'$window',
'APIUtils',
'dataService',
- function($scope, $window, APIUtils, dataService){
+ '$q',
+ function($scope, $window, APIUtils, dataService, $q){
$scope.dataService = dataService;
$scope.dropdown_selected = false;
$scope.tmz = 'EDT';
@@ -26,24 +27,33 @@
$scope.bmc_info = {};
$scope.bmc_firmware = "";
$scope.server_firmware = "";
+ $scope.loading = false;
loadOverviewData();
function loadOverviewData(){
- APIUtils.getLogs(function(data){
- $scope.displayLogs(data);
- });
- APIUtils.getFirmwares(function(data, bmcActiveVersion, hostActiveVersion){
- $scope.displayServerInfo(data, bmcActiveVersion, hostActiveVersion);
- });
- APIUtils.getLEDState(function(state){
- $scope.displayLEDState(state);
- });
- APIUtils.getBMCEthernetInfo(function(data){
- $scope.displayBMCEthernetInfo(data);
- });
- APIUtils.getBMCInfo(function(data){
- $scope.displayBMCInfo(data);
- });
+ $scope.loading = true;
+ var promises = {
+ logs: APIUtils.getLogs(),
+ firmware: APIUtils.getFirmwares(),
+ led: APIUtils.getLEDState(),
+ ethernet: APIUtils.getBMCEthernetInfo(),
+ bmc_info: APIUtils.getBMCInfo()
+ };
+ $q.all(promises)
+ .then(function(data){
+ $scope.displayLogs(data.logs.data);
+ $scope.displayServerInfo(
+ data.firmware.data,
+ data.firmware.bmcActiveVersion,
+ data.firmware.hostActiveVersion
+ );
+ $scope.displayLEDState(data.led);
+ $scope.displayBMCEthernetInfo(data.ethernet);
+ $scope.displayBMCInfo(data.bmc_info);
+ })
+ .finally(function(){
+ $scope.loading = false;
+ });
}
$scope.displayBMCEthernetInfo = function(data){
$scope.mac_address = data.MACAddress;
diff --git a/app/server-health/controllers/inventory-overview-controller.html b/app/server-health/controllers/inventory-overview-controller.html
index e9f0e1c..e47c7b1 100644
--- a/app/server-health/controllers/inventory-overview-controller.html
+++ b/app/server-health/controllers/inventory-overview-controller.html
@@ -1,3 +1,4 @@
+<loader loading="loading"></loader>
<div class="inventory-overview">
<div class="row column no-padding">
<h1>Hardware status</h1>
@@ -18,7 +19,6 @@
<input id="content__search-submit" type="submit" class="btn btn-primary content__search-submit" value="Filter" ng-click="doSearchOnClick()"/>
</div>
</div>
-
</section>
<!-- end search -->
<section id="inventory-categories" class="row column">
diff --git a/app/server-health/controllers/inventory-overview-controller.js b/app/server-health/controllers/inventory-overview-controller.js
index 81fd833..c5e6189 100644
--- a/app/server-health/controllers/inventory-overview-controller.js
+++ b/app/server-health/controllers/inventory-overview-controller.js
@@ -23,10 +23,13 @@
$scope.originalData = {};
$scope.customSearch = "";
$scope.searchTerms = [];
+ $scope.loading = false;
APIUtils.getHardwares(function(data, originalData){
+ $scope.loading = true;
$scope.hardwares = data;
$scope.originalData = JSON.stringify(originalData);
+ $scope.loading = false;
});
$scope.doSearchOnEnter = function (event) {
diff --git a/app/server-health/controllers/log-controller.html b/app/server-health/controllers/log-controller.html
index 0975e7f..2e48093 100644
--- a/app/server-health/controllers/log-controller.html
+++ b/app/server-health/controllers/log-controller.html
@@ -1,3 +1,4 @@
+<loader loading="loading"></loader>
<div id="event-log">
<div class="row column">
<h1>Event log</h1>
@@ -55,7 +56,7 @@
<button class="inline btn-delete" ng-show="selectedEvents.length || all" ng-click="confirm= ! confirm">
<img class="event__icon" src="assets/images/icon-trashcan-white.svg" alt="">Delete
</button>
- <button class="inline btn-resolve" ng-show="selectedEvents.length || all" ng-click="resolve()">
+ <button class="inline btn-resolve" ng-class="{'disabled': ((selectedEvents|unResolvedCount) == 0)}" ng-show="selectedEvents.length || all" ng-click="resolve()" ng-disabled="(selectedEvents|unResolvedCount) == 0">
<img class="event__icon" src="assets/images/icon-check-white.svg" alt="">Mark as resolved
</button>
<a ng-href="data:text/json;charset=utf-8,{{export_data}}" class="inline btn-export" download="{{export_name}}" ng-show="selectedEvents.length || all">Export</a>
diff --git a/app/server-health/controllers/log-controller.js b/app/server-health/controllers/log-controller.js
index cf3f248..b53dae0 100644
--- a/app/server-health/controllers/log-controller.js
+++ b/app/server-health/controllers/log-controller.js
@@ -17,11 +17,16 @@
'APIUtils',
'dataService',
'Constants',
- function($scope, $window, APIUtils, dataService, Constants){
+ '$routeParams',
+ function($scope, $window, APIUtils, dataService, Constants, $routeParams){
$scope.dataService = dataService;
$scope.logs = [];
$scope.tmz = 'EDT';
$scope.itemsPerPage = Constants.PAGINATION.LOG_ITEMS_PER_PAGE;
+ $scope.loading = false;
+
+ var sensorType = $routeParams.type;
+
// priority buttons
$scope.selectedSeverity = {
all: true,
@@ -29,6 +34,12 @@
medium: false,
high: false
};
+
+ if(sensorType == 'high'){
+ $scope.selectedSeverity.all = false;
+ $scope.selectedSeverity.high = true;
+ }
+
$scope.selectedStatus = {
all: true,
resolved: false
@@ -39,9 +50,11 @@
$scope.selectedEvents = [];
$scope.loadLogs = function(){
- APIUtils.getLogs(function(data, originalData){
- $scope.logs = data;
- $scope.originalData = originalData;
+ $scope.loading = true;
+ APIUtils.getLogs().then(function(result){
+ $scope.logs = result.data;
+ $scope.originalData = result.original;
+ $scope.loading = false;
});
};
$scope.jsonData = function(data){
diff --git a/app/server-health/controllers/sensors-overview-controller.html b/app/server-health/controllers/sensors-overview-controller.html
index a310b9d..8ee8d8a 100644
--- a/app/server-health/controllers/sensors-overview-controller.html
+++ b/app/server-health/controllers/sensors-overview-controller.html
@@ -1,3 +1,4 @@
+<loader loading="loading"></loader>
<div id="sensors-overview">
<div class="row column">
<h1>Sensors</h1>
diff --git a/app/server-health/controllers/sensors-overview-controller.js b/app/server-health/controllers/sensors-overview-controller.js
index d68b31f..90616b1 100644
--- a/app/server-health/controllers/sensors-overview-controller.js
+++ b/app/server-health/controllers/sensors-overview-controller.js
@@ -32,6 +32,7 @@
critical: false
};
$scope.export_name = "sensors.json";
+ $scope.loading = false;
$scope.jsonData = function(data){
var dt = {};
data.data.forEach(function(item){
@@ -110,11 +111,13 @@
}
$scope.loadSensorData = function(){
+ $scope.loading = true;
APIUtils.getAllSensorStatus(function(data, originalData){
$scope.data = data;
$scope.originalData = originalData;
dataService.sensorData = data;
$scope.export_data = JSON.stringify(originalData);
+ $scope.loading = false;
});
};