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:
parent
8f09d69786
commit
ff939428d7
@ -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) {
|
||||
|
@ -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);
|
||||
});
|
||||
|
40
app/js/services/progress.js
Normal file
40
app/js/services/progress.js
Normal 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);
|
73
app/styles/_nprogress.scss
Normal file
73
app/styles/_nprogress.scss
Normal 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); }
|
||||
}
|
@ -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';
|
||||
|
@ -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",
|
||||
|
Loading…
Reference in New Issue
Block a user