mirror of
https://github.com/ansible/awx.git
synced 2024-11-01 08:21:15 +03:00
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.
This commit is contained in:
Chris Houseknecht
parent
feb13b1f11
commit
5b6d8e5c98
@ -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();
|
||||
|
||||
@ -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 });
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user