Job detail page

Added 'Loading...' message to each table. Loading message is turned on at initial page load. It is turned off at the last possible second after completion of page rendering. It is turned on before each API call and back off after the API call completes.

awx/ui/static/js/controllers/JobDetail.js

@@ -33,6 +33,12 @@ function JobDetailController ($location, $rootScope, $scope, $compile, $routePar
     scope.tasksMaxRows = 200;
     scope.playsMaxRows = 200;
 
+    // Set the following to true when 'Loading...' message desired
+    scope.playsLoading = true;
+    scope.tasksLoading = true;
+    scope.hostResultsLoading = true;
+    scope.hostSummariesLoading = true;
+
     scope.liveEventProcessing = true;     // true while job is active and live events are arriving
     scope.pauseLiveEvents = false;        // control play/pause state of event processing
 
@@ -137,6 +143,7 @@ function JobDetailController ($location, $rootScope, $scope, $compile, $routePar
     scope.removeInitialLoadComplete = scope.$on('InitialLoadComplete', function() {
         var url;
         Wait('stop');
+
         if (JobIsFinished(scope)) {
             scope.liveEventProcessing = false; // signal that event processing is over and endless scroll
             scope.pauseLiveEvents = false;      // should be enabled
@@ -529,6 +536,12 @@ function JobDetailController ($location, $rootScope, $scope, $compile, $routePar
     scope.removeLoadJobRow = scope.$on('LoadJob', function() {
         Wait('start');
         scope.job_status = {};
+
+        scope.playsLoading = true;
+        scope.tasksLoading = true;
+        scope.hostResultsLoading = true;
+        scope.LoadHostSummaries = true;
+
         // Load the job record
         Rest.setUrl(GetBasePath('jobs') + job_id + '/');
         Rest.get()
@@ -939,6 +952,7 @@ function JobDetailController ($location, $rootScope, $scope, $compile, $routePar
         // check for more plays when user scrolls to bottom of play list...
         if (((!scope.liveEventProcessing) || (scope.liveEventProcessing && scope.pauseLiveEvents)) && scope.next_plays) {
             $('#playsMoreRows').fadeIn();
+            scope.playsLoading = true;
             Rest.setUrl(scope.next_plays);
             Rest.get()
                 .success( function(data) {
@@ -989,6 +1003,7 @@ function JobDetailController ($location, $rootScope, $scope, $compile, $routePar
                         skipped = (event.skipped_count) ? event.skipped_count : 0;
 
                         scope.plays[scope.plays.length - 1].hostCount = ok + changed + failed + skipped;
+                        scope.playsLoading = false;
                     });
                     $('#playsMoreRows').fadeOut(400);
                 })
@@ -1003,6 +1018,7 @@ function JobDetailController ($location, $rootScope, $scope, $compile, $routePar
         // check for more tasks when user scrolls to bottom of task list...
         if (((!scope.liveEventProcessing) || (scope.liveEventProcessing && scope.pauseLiveEvents)) && scope.next_tasks) {
             $('#tasksMoreRows').fadeIn();
+            scope.tasksLoading = true;
             Rest.setUrl(scope.next_tasks);
             Rest.get()
                 .success(function(data) {
@@ -1060,6 +1076,7 @@ function JobDetailController ($location, $rootScope, $scope, $compile, $routePar
                         });
                     });
                     $('#tasksMoreRows').fadeOut(400);
+                    scope.tasksLoading = false;
                 })
                 .error(function(data, status) {
                     $('#tasksMoreRows').fadeOut(400);
@@ -1073,6 +1090,7 @@ function JobDetailController ($location, $rootScope, $scope, $compile, $routePar
         // check for more hosts when user scrolls to bottom of host results list...
         if (((!scope.liveEventProcessing) || (scope.liveEventProcessing && scope.pauseLiveEvents)) && scope.next_host_results) {
             $('#hostResultsMoreRows').fadeIn();
+            scope.hostResultsLoading = true;
             Rest.setUrl(scope.next_host_results);
             Rest.get()
                 .success(function(data) {
@@ -1121,6 +1139,7 @@ function JobDetailController ($location, $rootScope, $scope, $compile, $routePar
                             msg: (row.event_data && row.event_data.res) ? row.event_data.res.msg : '',
                             item: item
                         });
+                        scope.hostResultsLoading = false;
                     });
                     $('#hostResultsMoreRows').fadeOut(400);
                 })
@@ -1135,6 +1154,7 @@ function JobDetailController ($location, $rootScope, $scope, $compile, $routePar
     scope.hostSummariesScrollDown = function() {
         // check for more hosts when user scrolls to bottom of host summaries list...
         if (((!scope.liveEventProcessing) || (scope.liveEventProcessing && scope.pauseLiveEvents)) && scope.next_host_summaries) {
+            scope.hostSummariesLoading = true;
             Rest.setUrl(scope.next_host_summaries);
             Rest.get()
                 .success(function(data) {
@@ -1157,6 +1177,7 @@ function JobDetailController ($location, $rootScope, $scope, $compile, $routePar
                         });
                     });
                     $('#hostSummariesMoreRows').fadeOut();
+                    scope.hostSummariesLoading = false;
                 })
                 .error(function(data, status) {
                     $('#hostSummariesMoreRows').fadeOut();

awx/ui/static/js/helpers/JobDetail.js

@@ -665,7 +665,7 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Ge
         url = scope.job.url + 'job_plays/?page_size=' + scope.playsMaxRows + '&order_by=id';
         url += (scope.search_play_name) ? '&play__icontains=' + scope.search_play_name : '';
         url += (scope.search_play_status === 'failed') ? '&failed=true' : '';
-
+        scope.playsLoading = true;
         Rest.setUrl(url);
         Rest.get()
             .success(function(data) {
@@ -717,6 +717,7 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Ge
                     id: (scope.plays.length > 0) ? scope.plays[0].id : null,
                     callback: callback
                 });
+                scope.playsLoading = false;
             })
             .error(function(data) {
                 ProcessErrors(scope, data, status, null, { hdr: 'Error!',
@@ -774,6 +775,8 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Ge
                 return true;
             });
 
+            scope.tasksLoading = true;
+
             Rest.setUrl(url);
             Rest.get()
                 .success(function(data) {
@@ -852,6 +855,8 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Ge
                         callback: callback
                     });
 
+                    scope.tasksLoading = false;
+
                 })
                 .error(function(data) {
                     ProcessErrors(scope, data, status, null, { hdr: 'Error!',
@@ -909,7 +914,7 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Ge
             url += (scope.search_host_name) ? 'host__name__icontains=' + scope.search_host_name + '&' : '';
             url += (scope.search_host_status === 'failed') ? 'failed=true&' : '';
             url += 'event__startswith=runner&page_size=' + scope.hostResultsMaxRows + '&order_by=host__name';
-
+            scope.hostResultsLoading = true;
             Rest.setUrl(url);
             Rest.get()
                 .success(function(data) {
@@ -963,6 +968,7 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Ge
                                 item: item
                             });
                         }
+                        scope.hostResultsLoading = false;
                     });
                     if (callback) {
                         scope.$emit(callback);
@@ -995,6 +1001,7 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Ge
         url += '&page_size=' + scope.hostSummariesMaxRows + '&order_by=host_name';
 
         scope.hosts = [];
+        scope.hostSummariesLoading = true;
 
         Rest.setUrl(url);
         Rest.get()
@@ -1017,6 +1024,7 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Ge
                         failed: event.failures,
                         status: (event.failed) ? 'failed' : 'successful'
                     });
+                    scope.hostSummariesLoading = false;
                 });
                 if (callback) {
                     scope.$emit(callback);
@@ -1399,6 +1407,13 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Ge
 
         DrawHostSummaries({ scope: scope });
 
+        setTimeout(function() {
+            scope.playsLoading = false;
+            scope.tasksLoading = false;
+            scope.hostResultsLoading = false;
+            scope.LoadHostSummaries = false;
+        },100);
+
         if (scope.host_summary.total > 0) {
             DrawGraph({ scope: scope, resize: true });
         }

awx/ui/static/partials/job_detail.html

@@ -178,7 +178,10 @@
                                             <td class="col-lg-1 col-md-2 col-sm-2 col-xs-2 status-column" aw-tool-tip="{{ play.status_tip }}" data-tip-watch="play.status_tip" data-placement="top"><i class="fa icon-job-{{ play.status }}"></i></td>
                                             <td class="col-lg-7 col-md-6 col-sm-6 col-xs-4">{{ play.name }}</td>
                                         </tr>
-                                        <tr ng-show="plays.length === 0">
+                                        <tr ng-show="plays.length === 0 && playsLoading">
+                                            <td colspan="4" class="col-lg-12 loading-info">Loading...</td>
+                                        </tr>
+                                        <tr ng-show="plays.length === 0 && !playsLoading">
                                             <td colspan="4" class="col-lg-12 loading-info">No matching plays</td>
                                         </tr>
                                     </tbody>
@@ -239,7 +242,10 @@
                                             <td class="col-lg-3 col-md-3 col-sm-6 col-xs-4" id="">{{ task.name }}</td>
                                             <td class="col-lg-4 col-md-3 hidden-sm hidden-xs"><div class="status-bar"><div class="successful-hosts inner-bar" id="{{ task.id }}-successful-bar" aw-tool-tip="Hosts OK" data-placement="top" ng-style="task.successfulStyle">{{ task.successfulCount }}</div><div class="changed-hosts inner-bar" id="{{ task.id }}-changed-bar" aw-tool-tip="Hosts Changed" data-placement="top" ng-style="task.changedStyle">{{ task.changedCount }}</div><div class="skipped-hosts inner-bar" id="{{ task.id }}-skipped-bar" aw-tool-tip="Hosts Skipped" data-placement="top" ng-style="task.skippedStyle">{{ task.skippedCount }}</div><div class="failed-hosts inner-bar" id="{{ task.id }}-failed-bar" aw-tool-tip="Hosts Failed" data-placement="top" ng-style="task.failedStyle">{{ task.failedCount }}</div><div class="unreachable-hosts inner-bar" id="{{ task.id }}-unreachable-hosts-bar" aw-tool-tip="Hosts Unreachable" data-placement="top" ng-style="task.unreachableStyle">{{ task.unreachableCount }}</div><div class="missing-hosts inner-bar" id="{{ task.id }}-misssing-hosts-bar" ng-style="task.missingStyle">{{ task.missingCount }}</div><div class="no-matching-hosts inner-bar" id="{{ task.id }}-{{ task.play_id }}-no-matching-hosts-bar" aw-tool-tip="No matching hosts were found" data-placement="top" style="width: 100%;" ng-show="task.status === 'no-matching-hosts'">No matching hosts</div></div></td>
                                         </tr>
-                                        <tr ng-show="taskList.length === 0">
+                                        <tr ng-show="taskList.length === 0 && tasksLoading">
+                                            <td colspan="5" class="col-lg-12 loading-info">Loading...</td>
+                                        </tr>
+                                        <tr ng-show="taskList.length === 0 && !tasksLoading">
                                             <td colspan="5" class="col-lg-12 loading-info">No matching tasks</td>
                                         </tr>
                                     </tbody>
@@ -298,7 +304,10 @@
                                             <td class="col-lg-4 col-md-4 col-sm-3 col-xs-3">{{ result.msg }}</td>
                                             <td class="col-lg-1 col-md-1 col-sm-1 col-xs-1"><a ng-show="result.host_id" href="" ng-click="editHost(result.host_id)" aw-tool-tip="Edit host" data-placement="top"><i class="fa fa-pencil"></i></a></td>
                                         </tr>
-                                        <tr ng-show="results.length === 0">
+                                        <tr ng-show="results.length === 0 && hostResultsLoading">
+                                            <td colspan="5" class="col-lg-12 loading-info">Loading...</td>
+                                        </tr>
+                                        <tr ng-show="results.length === 0 && !hostResultsLoading">
                                             <td colspan="5" class="col-lg-12 loading-info">No matching hosts</td>
                                         </tr>
                                     </tbody>
@@ -375,7 +384,10 @@
                                                 <a href="" ng-click="hostEventsViewer(host.id, host.name, 'failed')" aw-tool-tip="Failed" data-placement="top" ng-hide="host.failed == 0"><span class="badge failed-hosts">{{ host.failed }}</span></a></td>
                                             <td class="col-lg-1 col-md-1 col-sm-1 col-xs-1"><a ng-show="host.id" href="" ng-click="editHost(host.id)" aw-tool-tip="Edit host" data-placement="top"><i class="fa fa-pencil"></i></a></td>
                                         </tr>
-                                        <tr ng-show="summaryList.length === 0">
+                                        <tr ng-show="summaryList.length === 0 && hostSummariesLoading">
+                                            <td colspan="5" class="col-lg-12 loading-info">Loading...</td>
+                                        </tr>
+                                        <tr ng-show="summaryList.length === 0 && !hostSummariesLoading">
                                             <td colspan="2" class="col-lg-12 loading-info">No matching hosts</td>
                                         </tr>
                                     </tbody>