From 5b6d8e5c98062a15e685fad22cc0d2c367e0206c Mon Sep 17 00:00:00 2001 From: Chris Houseknecht Date: Tue, 29 Jul 2014 16:40:05 -0400 Subject: [PATCH] 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 | 21 +++++++++++++++++++++ awx/ui/static/js/helpers/JobDetail.js | 19 +++++++++++++++++-- awx/ui/static/partials/job_detail.html | 20 ++++++++++++++++---- 3 files changed, 54 insertions(+), 6 deletions(-) diff --git a/awx/ui/static/js/controllers/JobDetail.js b/awx/ui/static/js/controllers/JobDetail.js index 8b1d233bee..26116c5da8 100644 --- a/awx/ui/static/js/controllers/JobDetail.js +++ b/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(); diff --git a/awx/ui/static/js/helpers/JobDetail.js b/awx/ui/static/js/helpers/JobDetail.js index 4607dcc81e..d60afc7347 100644 --- a/awx/ui/static/js/helpers/JobDetail.js +++ b/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 }); } diff --git a/awx/ui/static/partials/job_detail.html b/awx/ui/static/partials/job_detail.html index a951dd2ca8..f2ace757ea 100644 --- a/awx/ui/static/partials/job_detail.html +++ b/awx/ui/static/partials/job_detail.html @@ -178,7 +178,10 @@ {{ play.name }} - + + Loading... + + No matching plays @@ -239,7 +242,10 @@ {{ task.name }}
{{ task.successfulCount }}
{{ task.changedCount }}
{{ task.skippedCount }}
{{ task.failedCount }}
{{ task.unreachableCount }}
{{ task.missingCount }}
No matching hosts
- + + Loading... + + No matching tasks @@ -298,7 +304,10 @@ {{ result.msg }} - + + Loading... + + No matching hosts @@ -375,7 +384,10 @@ {{ host.failed }} - + + Loading... + + No matching hosts