Add nprogress progress bars to timeline and test-details.

This adds support for loading progress bars from the nprogress library
and displays progress bars while loading the larger datasets on the
timeline and test details pages.

Change-Id: Ica10d348f67abc348aed2df0b158383ad035e604
This commit is contained in:
Tim Buckley 2016-01-23 15:59:14 -07:00
parent 8f09d69786
commit ff939428d7
6 changed files with 131 additions and 2 deletions

View File

@ -5,13 +5,15 @@ var controllersModule = require('./_index');
/**
* @ngInject
*/
function TestDetailsCtrl($scope, $location, $stateParams, datasetService) {
function TestDetailsCtrl($scope, $location, $stateParams, datasetService, progressService) {
// ViewModel
var vm = this;
$scope.datasetId = $stateParams.datasetId;
var testName = $stateParams.test;
$scope.testName = testName;
progressService.start({ parent: 'div[role="main"] .panel-body' });
// load dataset, raw json, and details json
datasetService.get($stateParams.datasetId).then(function(response) {
$scope.dataset = response;
@ -24,18 +26,25 @@ function TestDetailsCtrl($scope, $location, $stateParams, datasetService) {
}
}
$scope.item = item;
progressService.inc();
}).catch(function(ex) {
$log.error(ex);
progressService.done();
});
datasetService.details(response).then(function(deets) {
$scope.details = deets;
$scope.originalDetails = angular.copy(deets.data[testName]);
$scope.itemDetails = deets.data[testName];
progressService.done();
}).catch(function(ex) {
$log.error(ex);
progressService.done();
});
}).catch(function(ex) {
$log.error(ex);
progressService.done();
});
$scope.parsePythonLogging = function(showINFO, showDEBUG, showWARNING, showERROR) {

View File

@ -29,7 +29,7 @@ var parseWorker = function(tags) {
/**
* @ngInject
*/
function timeline($log, datasetService) {
function timeline($log, datasetService, progressService) {
/**
* @ngInject
@ -227,20 +227,25 @@ function timeline($log, datasetService) {
return;
}
progressService.start({ parent: 'timeline .panel-body' });
// load dataset details (raw log entries and dstat) sequentially
// we need to determine the initial date from the subunit data to parse
// dstat
datasetService.raw(dataset).then(function(response) {
progressService.set(0.33);
initData(response.data);
return datasetService.dstat(dataset);
}).then(function(response) {
progressService.set(0.66);
var firstDate = new Date(self.dataRaw[0].timestamps[0]);
var raw = parseDstat(response.data, firstDate.getYear());
initDstat(raw);
$scope.$broadcast('update');
progressService.done();
}).catch(function(ex) {
$log.error(ex);
});

View File

@ -0,0 +1,40 @@
'use strict';
var nprogress = require('nprogress');
var servicesModule = require('./_index.js');
/**
* @ngInject
*/
function ProgressService() {
return {
start: function(options) {
if (options) {
nprogress.configure(options);
}
nprogress.start();
},
done: function() {
nprogress.done();
},
remove: function() {
nprogress.remove();
},
set: function(val) {
nprogress.set(val);
},
inc: function() {
nprogress.inc();
}
};
}
servicesModule.service('progressService', ProgressService);

View File

@ -0,0 +1,73 @@
/* Make clicks pass-through */
#nprogress {
pointer-events: none;
}
#nprogress .bar {
background: #29d;
position: fixed;
z-index: 1031;
top: 0;
left: 0;
width: 100%;
height: 2px;
}
/* Fancy blur effect */
#nprogress .peg {
display: block;
position: absolute;
right: 0px;
width: 100px;
height: 100%;
box-shadow: 0 0 10px #29d, 0 0 5px #29d;
opacity: 1.0;
-webkit-transform: rotate(3deg) translate(0px, -4px);
-ms-transform: rotate(3deg) translate(0px, -4px);
transform: rotate(3deg) translate(0px, -4px);
}
/* Remove these to get rid of the spinner */
#nprogress .spinner {
display: block;
position: fixed;
z-index: 1031;
top: 15px;
right: 15px;
}
#nprogress .spinner-icon {
width: 18px;
height: 18px;
box-sizing: border-box;
border: solid 2px transparent;
border-top-color: #29d;
border-left-color: #29d;
border-radius: 50%;
-webkit-animation: nprogress-spinner 400ms linear infinite;
animation: nprogress-spinner 400ms linear infinite;
}
.nprogress-custom-parent {
overflow: hidden;
position: relative;
}
.nprogress-custom-parent #nprogress .spinner,
.nprogress-custom-parent #nprogress .bar {
position: absolute;
}
@-webkit-keyframes nprogress-spinner {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes nprogress-spinner {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

View File

@ -3,6 +3,7 @@
@import 'bootstrap';
@import 'font-awesome/font-awesome';
@import 'sb-admin-2';
@import 'nprogress';
@import 'directives/_test-details-search.scss';
@import 'directives/_timeline-details.scss';

View File

@ -55,6 +55,7 @@
"karma-jasmine": "^0.3.6",
"karma-phantomjs-launcher": "0.2.0",
"morgan": "^1.6.1",
"nprogress": "^0.2.0",
"phantomjs": "1.9.17",
"pretty-hrtime": "^1.0.0",
"protractor": "^2.2.0",