From b7e658ee231a2368a0d56f7a89aad2a61bb3229b Mon Sep 17 00:00:00 2001 From: Neil MacDougall Date: Fri, 6 Oct 2017 13:30:47 +0100 Subject: [PATCH] Improve the loading indicators on initial console load (#1286) * Improve the loading indicators on initial console load * A better way of having a global busy state and indicator * Fix unit tests * Fix lint issue --- .../app-core/frontend/i18n/en_US/common.json | 2 + .../frontend/src/utils/busy.service.js | 72 +++++++++++++++++++ .../src/view/application.directive.js | 15 +++- .../frontend/src/view/application.html | 4 +- .../global-spinner.directive.js | 23 +++--- .../global-spinner/global-spinner.html | 15 ++-- .../global-spinner/global-spinner.scss | 33 ++++++++- .../frontend/i18n/en_US/app-wall.json | 1 + .../frontend/i18n/en_US/cloud-foundry.json | 1 + .../view/applications/applications.module.js | 9 ++- .../src/view/applications/list/list.module.js | 19 ++++- .../applications/applications.module.spec.js | 5 +- .../applications/list/list.module.spec.js | 3 +- 13 files changed, 174 insertions(+), 28 deletions(-) create mode 100644 components/app-core/frontend/src/utils/busy.service.js diff --git a/components/app-core/frontend/i18n/en_US/common.json b/components/app-core/frontend/i18n/en_US/common.json index 330b919a47..d604d7c4aa 100644 --- a/components/app-core/frontend/i18n/en_US/common.json +++ b/components/app-core/frontend/i18n/en_US/common.json @@ -6,6 +6,8 @@ "terms": "Terms of Use", "endpoint": "Endpoint", + "preparing.console": "Preparing Console ...", + "buttons": { "ok": "OK", "cancel": "Cancel", diff --git a/components/app-core/frontend/src/utils/busy.service.js b/components/app-core/frontend/src/utils/busy.service.js new file mode 100644 index 0000000000..e86129b053 --- /dev/null +++ b/components/app-core/frontend/src/utils/busy.service.js @@ -0,0 +1,72 @@ +(function () { + 'use strict'; + angular + .module('app.utils') + .factory('appBusyService', appBusyServiceFactory); + + /** + * @namespace appBusyService + * @memberof app.utils + * @name appBusyService + * @description The application busy service + * @param {object} appEventService - the event service + * @returns {object} the busy service + */ + function appBusyServiceFactory() { + + var nextBusyId = 0; + + // Maintain a list of outstanding busy messages - only show the most recent + var busyStack = []; + + var busyStates = {}; + + return { + + busyState: {}, + + _update: function () { + if (busyStack.length === 0) { + this.busyState.active = false; + } else { + // Get the last item - that is the most recent + var newestId = busyStack[busyStack.length - 1]; + var busyInfo = busyStates[newestId]; + this.busyState.label = busyInfo.label; + this.busyState.local = busyInfo.local || false; + this.busyState.active = true; + } + }, + + set: function (label, nonModal) { + var id = nextBusyId; + nextBusyId++; + busyStates[id] = { + id: id, + label: label, + local: nonModal || false + }; + busyStack.push(id); + this._update(); + return id; + }, + + clear: function (id) { + if (busyStack.length === 0) { + return; + } + var newestId = busyStack[busyStack.length - 1]; + delete busyStates[id]; + _.remove(busyStack, function (v) { + return v === id; + }); + + // If we removed what was the newest, then we need to show the next newest, or hide the busy message if none left + if (id === newestId) { + this. _update(); + } + } + }; + } + +})(); diff --git a/components/app-core/frontend/src/view/application.directive.js b/components/app-core/frontend/src/view/application.directive.js index 77f0f856b2..23e4cee234 100644 --- a/components/app-core/frontend/src/view/application.directive.js +++ b/components/app-core/frontend/src/view/application.directive.js @@ -39,6 +39,7 @@ * @param {$rootScope} $rootScope - Angular $rootScope service * @param {$scope} $scope - Angular $scope service * @param {appLoggedInService} appLoggedInService - Logged In Service + * @param {appBusyService} appBusyService - Application Busy Service * @property {app.utils.appEventService} appEventService - the event bus service * @property {app.model.modelManager} modelManager - the application model manager * @property {app.view.appUpgradeCheck} appUpgradeCheck - the upgrade check service @@ -61,7 +62,8 @@ $window, $rootScope, $scope, - appLoggedInService + appLoggedInService, + appBusyService ) { var vm = this; @@ -82,6 +84,9 @@ vm.logout = logout; vm.reload = reload; + // Global spinner state + vm.spinner = appBusyService.busyState; + if (loginManager.isEnabled()) { $timeout(function () { verifySessionOrCheckUpgrade(); @@ -187,9 +192,12 @@ vm.failedLogin = false; vm.serverErrorOnLogin = false; vm.serverFailedToRespond = false; - vm.showGlobalSpinner = true; + //vm.showGlobalSpinner = true; + //vm.globalSpinnerLabel = 'preparing.console'; vm.redirectState = false; + vm.appBusyId = appBusyService.set('preparing.console'); + // If we have a setup error, then we don't want to continue login to some other page // We will redirect to our error page instead var continueLogin = true; @@ -239,7 +247,8 @@ } }) .finally(function () { - vm.showGlobalSpinner = false; + vm.appBusyId = appBusyService.clear(vm.appBusyId); + if (continueLogin) { // When we notify listeners that login has completed, in some cases we don't want them // to redirect to their page - we might want to control that they go to the endpoints dashboard (for example). diff --git a/components/app-core/frontend/src/view/application.html b/components/app-core/frontend/src/view/application.html index 4546c87a33..1d7b5923c8 100644 --- a/components/app-core/frontend/src/view/application.html +++ b/components/app-core/frontend/src/view/application.html @@ -14,6 +14,8 @@ diff --git a/components/app-framework/src/widgets/global-spinner/global-spinner.directive.js b/components/app-framework/src/widgets/global-spinner/global-spinner.directive.js index c7b83d553d..183e964a3a 100644 --- a/components/app-framework/src/widgets/global-spinner/global-spinner.directive.js +++ b/components/app-framework/src/widgets/global-spinner/global-spinner.directive.js @@ -10,18 +10,23 @@ bindToController: { classes: '@?', spinnerActive: '=', - spinnerType: '@?' + spinnerType: '@?', + spinnerLabel: '=?', + spinnerLocal: '=?' }, controller: GlobalSpinnerController, controllerAs: 'globalSpinnerCtrl', - link: function (scope) { - scope.$watch('spinnerActive', function (spinnerActive) { - if (spinnerActive) { - $document.find('body').addClass('global-spinner-active'); - } else { - $document.find('body').removeClass('global-spinner-active'); - } - }); + link: function (scope, element, attrs, ctrl) { + // Check to see if other spinners are already active + if (!ctrl.spinnerLocal) { + scope.$watch('spinnerActive', function (spinnerActive) { + if (spinnerActive) { + $document.find('body').addClass('global-spinner-active'); + } else { + $document.find('body').removeClass('global-spinner-active'); + } + }); + } }, scope: {}, templateUrl: 'framework/widgets/global-spinner/global-spinner.html', diff --git a/components/app-framework/src/widgets/global-spinner/global-spinner.html b/components/app-framework/src/widgets/global-spinner/global-spinner.html index 1aaa029915..8e08d7d0cf 100644 --- a/components/app-framework/src/widgets/global-spinner/global-spinner.html +++ b/components/app-framework/src/widgets/global-spinner/global-spinner.html @@ -1,7 +1,10 @@ -