Added a “wait spinner” on the experiments list, the Card View, the Pr…

…iority list, the Users list, the Logs list, and the Superadmins list. Those seem to be all the places on Prod that seem slow enough that anyone will see the spinner.
intuit · Apr 5, 2017 · 8cc2848 · 8cc2848
1 parent 12f6351
commit 8cc2848
Show file tree

Hide file tree

Showing 9 changed files with 67 additions and 5 deletions.
diff --git a/modules/ui/app/index.html b/modules/ui/app/index.html
@@ -28,6 +28,7 @@
       <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
     <![endif]-->
 
+    <span us-spinner spinner-key="spinner-1"></span>
     <header>
         <div class="brandBanner">
             <div class="brandContent">
@@ -116,6 +117,7 @@ <h1></h1>
     <script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/tooltip.js"></script>
     <script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/popover.js"></script>
     <script src="bower_components/moment/moment.js"></script>
+    <script src="bower_components/angular-spinner/dist/angular-spinner.min.js"></script>
     <!-- endbower -->
     <!-- endbuild -->
 

diff --git a/modules/ui/app/scripts/app.js b/modules/ui/app/scripts/app.js
@@ -30,6 +30,7 @@ angular.module('wasabi', [
         'wasabi.services',
         'wasabi.controllers',
         'wasabi.directives',
+        'angularSpinner',
         'config'
     ])
 

diff --git a/modules/ui/app/scripts/controllers/ExperimentsCtrl.js b/modules/ui/app/scripts/controllers/ExperimentsCtrl.js
@@ -101,6 +101,14 @@ angular.module('wasabi.controllers').
                 }
             };
 
+            $scope.startSpin = function(){
+                UtilitiesFactory.startSpin();
+            }
+
+            $scope.stopSpin = function(){
+                UtilitiesFactory.stopSpin();
+            }
+
             $scope.doFavorites = function(experimentsList, forceGet) {
                 function applyFavorites(experimentsList) {
                     if ($scope.favoritesObj.favorites && $scope.favoritesObj.favorites.length && experimentsList) {
@@ -140,6 +148,8 @@ angular.module('wasabi.controllers').
                     return existingFilter += newFilterValue;
                 }
 
+                $scope.startSpin();
+
                 var queryParams = {
                     perPage: pageSize,
                     page: currentPage,
@@ -269,6 +279,7 @@ angular.module('wasabi.controllers').
                             $scope.applicationsWithReadOrBetterAccess.length === 0);
 
                     $scope.applicationsLoaded = true;
+                    $scope.stopSpin();
                 });
             };
 
@@ -383,6 +394,8 @@ angular.module('wasabi.controllers').
                         $scope.doFavorites($scope.cardViewExperiments, false);
                     }
 
+                    $scope.stopSpin();
+
                     //$scope.loadGridDataIfNecessary()
                 });
             };

diff --git a/modules/ui/app/scripts/controllers/LogsCtrl.js b/modules/ui/app/scripts/controllers/LogsCtrl.js
@@ -29,6 +29,14 @@ angular.module('wasabi.controllers').
             UtilitiesFactory.hideHeading(false);
             UtilitiesFactory.selectTopLevelTab('Tools');
 
+            $scope.startSpin = function(){
+                UtilitiesFactory.startSpin();
+            }
+
+            $scope.stopSpin = function(){
+                UtilitiesFactory.stopSpin();
+            }
+
             $scope.changePage = function(destinationApp) {
                 if (destinationApp !== undefined) {
                     $scope.data.applicationName = destinationApp;
@@ -77,7 +85,9 @@ angular.module('wasabi.controllers').
                             sort: ($scope.reverseSort ? '-' : '') + $scope.orderByField.replace('_', '.'),
                             filter: $scope.data.query
                         };
+                    $scope.startSpin();
                     LogsFactory.query(options).$promise.then(function (data) {
+                        $scope.stopSpin();
                         $scope.logs = data.logEntries;
                         $scope.totalItems = data.totalEntries;
 

diff --git a/modules/ui/app/scripts/controllers/PrioritiesCtrl.js b/modules/ui/app/scripts/controllers/PrioritiesCtrl.js
@@ -33,6 +33,14 @@ angular.module('wasabi.controllers').
             UtilitiesFactory.hideHeading(false);
             UtilitiesFactory.selectTopLevelTab('Priority');
 
+            $scope.startSpin = function(){
+                UtilitiesFactory.startSpin();
+            }
+
+            $scope.stopSpin = function(){
+                UtilitiesFactory.stopSpin();
+            }
+
             $scope.changePage = function(destinationApp) {
                 if (destinationApp !== undefined) {
                     $scope.data.applicationName = destinationApp;
@@ -121,8 +129,10 @@ angular.module('wasabi.controllers').
                 if (selectedApp) {
                     $scope.applicationName = $cookies.wasabiDefaultApplication = selectedApp;
                     $scope.noDrag = $scope.readOnly = !$scope.hasUpdatePermission(selectedApp);
+                    $scope.startSpin();
                     PrioritiesFactory.query({applicationName: selectedApp}).$promise.then(function (priorities) {
                         $scope.experiments = priorities;
+                        $scope.stopSpin();
                         $scope.doFavorites();
 
                         UtilitiesFactory.doTrackingInit();

diff --git a/modules/ui/app/scripts/controllers/SuperadminsTableCtrl.js b/modules/ui/app/scripts/controllers/SuperadminsTableCtrl.js
@@ -8,10 +8,20 @@ angular.module('wasabi.controllers').
 
             $scope.superadmins = [];
 
+            $scope.startSpin = function(){
+                UtilitiesFactory.startSpin();
+            }
+
+            $scope.stopSpin = function(){
+                UtilitiesFactory.stopSpin();
+            }
+
             // load superadmins from server
             $scope.loadSuperadmins = function () {
                 $scope.superadmins = [];
+                $scope.startSpin();
                 SuperadminsFactory.query().$promise.then(function(superadmins) {
+                    $scope.stopSpin();
                     $scope.superadmins = superadmins;
                     for (var i = 0; i < $scope.superadmins.length; i++) {
                         $scope.superadmins[i].doNotShow = (Session.userID === $scope.superadmins[i].userID);

diff --git a/modules/ui/app/scripts/controllers/UsersCtrl.js b/modules/ui/app/scripts/controllers/UsersCtrl.js
@@ -30,6 +30,14 @@ angular.module('wasabi.controllers').
             $scope.administeredApplications = [];
             $scope.appNames = [];
 
+            $scope.startSpin = function(){
+                UtilitiesFactory.startSpin();
+            }
+
+            $scope.stopSpin = function(){
+                UtilitiesFactory.stopSpin();
+            }
+
             // Load the list of applications the currently logged in user is an admin for.
             $scope.loadAdministeredApplications = function () {
                 $scope.administeredApplications = UtilitiesFactory.getAdministeredApplications();
@@ -40,8 +48,9 @@ angular.module('wasabi.controllers').
             $scope.loadUsers = function (orderByField) {
 
                 var users = [];
-
+                $scope.startSpin();
                 AuthzFactory.getUsersRoles().$promise.then(function(results) {
+                    $scope.stopSpin();
                     if (results && results.length > 0) {
                         for (var i = 0; i < results.length; i++) {
                             // Go through each object, which represents the access for one application.

diff --git a/modules/ui/app/scripts/services/UtilitiesFactory.js b/modules/ui/app/scripts/services/UtilitiesFactory.js
@@ -7,8 +7,8 @@
 // page success message before the first one has faded out.
 var globalPageSuccessMessageFadeOutTimer = null;
 
-angular.module('wasabi.services').factory('UtilitiesFactory', ['Session', '$state', 'AuthFactory', '$rootScope', 'AUTH_EVENTS', 'PERMISSIONS', 'USER_ROLES', '$filter', 'AuthzFactory', 'BucketsFactory', 'DialogsFactory', 'ExperimentsFactory', 'WasabiFactory', '$modal', '$injector', 'FavoritesFactory', 'StateFactory',
-    function (Session, $state, AuthFactory, $rootScope, AUTH_EVENTS, PERMISSIONS, USER_ROLES, $filter, AuthzFactory, BucketsFactory, DialogsFactory, ExperimentsFactory, WasabiFactory, $modal, $injector, FavoritesFactory, StateFactory) {
+angular.module('wasabi.services').factory('UtilitiesFactory', ['Session', '$state', 'AuthFactory', '$rootScope', 'AUTH_EVENTS', 'PERMISSIONS', 'USER_ROLES', '$filter', 'AuthzFactory', 'BucketsFactory', 'DialogsFactory', 'ExperimentsFactory', 'WasabiFactory', '$modal', '$injector', 'FavoritesFactory', 'StateFactory', 'usSpinnerService',
+    function (Session, $state, AuthFactory, $rootScope, AUTH_EVENTS, PERMISSIONS, USER_ROLES, $filter, AuthzFactory, BucketsFactory, DialogsFactory, ExperimentsFactory, WasabiFactory, $modal, $injector, FavoritesFactory, StateFactory, usSpinnerService) {
         return {
             // generate state image url
             stateImgUrl: function (state) {
@@ -1188,9 +1188,15 @@ angular.module('wasabi.services').factory('UtilitiesFactory', ['Session', '$stat
             displaySuccessWithCacheWarning: function(title, extraMsg) {
                 var msg = extraMsg + '  PLEASE NOTE that this change may not be available for assignment calls for up to 5 minutes.';
                 this.displayPageSuccessMessage(title, msg);
-            }
+            },
 
+            startSpin: function(){
+                usSpinnerService.spin('spinner-1');
+            },
 
+            stopSpin: function(){
+                usSpinnerService.stop('spinner-1');
+            }
         };
     }
 ]);
diff --git a/modules/ui/bower.json b/modules/ui/bower.json
@@ -12,7 +12,8 @@
     "jquery": "~1.11.0",
     "jquery-ui": "~1.11.0",
     "bootstrap-sass-official": "~3.1.0",
-    "moment": "~2.10.3"
+    "moment": "~2.10.3",
+    "angular-spinner": "^1.0.1"
   },
   "devDependencies": {
     "angular-mocks": "1.2.15",