External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-03-15 07:57:29 -02:30
Code Issues Packages Projects Releases Wiki Activity

Job detail page refactor

Browse Source 
Fixing issues related to API endpoint changes and need to paginate tasks and plays.
This commit is contained in:
Chris Houseknecht
2014-06-18 18:15:11 -04:00
committed by Luke Sneeringer
parent f975b7b6dd
commit 7755cc32e2
3 changed files with 100 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
awx/ui/static/js/controllers/JobDetail.js
View File

@@ -111,26 +111,10 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
// process any events sitting in the queue // process any events sitting in the queue
var url, hostId = 0, taskId = 0, playId = 0; var url, hostId = 0, taskId = 0, playId = 0;
function notEmpty(x) {
return Object.keys(x).length > 0;
}
function getMaxId(x) {
var keys = Object.keys(x);
keys.sort();
return keys[keys.length - 1];
}
// Find the max event.id value in memory // Find the max event.id value in memory
if (notEmpty(scope.hostResults)) { hostId = (scope.hostResults.length > 0) ? scope.hostResults[scope.hostResults.length - 1] : 0;
hostId = getMaxId(scope.hostResults); taskId = (scope.tasks.length > 0) ? scope.tasks[scope.tasks.length - 1] : 0;
} playId = (scope.plays.length > 0) ? scope.plays[scope.plays.length - 1] : 0;
else if (notEmpty(scope.tasks)) {
taskId = getMaxId(scope.tasks);
}
else if (notEmpty(scope.plays)) {
playId = getMaxId(scope.plays);
}
lastEventId = Math.max(hostId, taskId, playId); lastEventId = Math.max(hostId, taskId, playId);
api_complete = true; api_complete = true;
@@ -198,6 +182,10 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
} }
scope.removeRefreshJobDetails = scope.$on('LoadJobDetails', function(e, events_url) { scope.removeRefreshJobDetails = scope.$on('LoadJobDetails', function(e, events_url) {
// Call to load all the job bits including, plays, tasks, hosts results and host summary // Call to load all the job bits including, plays, tasks, hosts results and host summary
scope.plays = [];
scope.playsMap = {};
var url = scope.job.url + 'job_plays/?order_by=id'; var url = scope.job.url + 'job_plays/?order_by=id';
Rest.setUrl(url); Rest.setUrl(url);
Rest.get() Rest.get()
@@ -205,7 +193,7 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
data.forEach(function(event, idx) { data.forEach(function(event, idx) {
var status = (event.failed) ? 'failed' : (event.changed) ? 'changed' : 'successful', var status = (event.failed) ? 'failed' : (event.changed) ? 'changed' : 'successful',
start = event.started, start = event.started,
end, elapsed, play; end, elapsed;
if (idx < data.length - 1) { if (idx < data.length - 1) {
// end date = starting date of the next event // end date = starting date of the next event
@@ -224,25 +212,20 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
else { else {
elapsed = '00:00:00'; elapsed = '00:00:00';
} }
if (scope.playsMap[event.id]) {
play = scope.plays[scope.playsMapp[event.id]]; scope.plays.push({
play.finished = end; id: event.id,
play.elapsed = elapsed; name: event.play,
play.status = status; created: start,
play.playActiveClass = ''; finished: end,
} status: status,
else { elapsed: elapsed,
scope.plays.push({ playActiveClass: '',
id: event.id, hostCount: 0,
name: event.play, fistTask: null
created: start, });
finished: end, scope.playsMap[event.id] = scope.plays.length - 1;
status: status,
elapsed: elapsed,
playActiveClass: ''
});
scope.playsMap[event.id] = scope.plays.length - 1;
}
scope.host_summary.ok += (data.ok_count) ? data.ok_count : 0; scope.host_summary.ok += (data.ok_count) ? data.ok_count : 0;
scope.host_summary.changed += (data.changed_count) ? data.changed_count : 0; scope.host_summary.changed += (data.changed_count) ? data.changed_count : 0;
scope.host_summary.unreachable += (data.unreachable_count) ? data.unreachable_count : 0; scope.host_summary.unreachable += (data.unreachable_count) ? data.unreachable_count : 0;

143
awx/ui/static/js/helpers/JobDetail.js
View File

@@ -60,9 +60,9 @@ angular.module('JobDetailHelper', ['Utilities', 'RestServices'])
}; };
}]) }])
.factory('DigestEvent', ['$rootScope', '$log', 'UpdatePlayStatus', 'UpdateHostStatus', 'AddHostResult', 'SelectPlay', 'SelectTask', .factory('DigestEvent', ['$rootScope', '$log', 'UpdatePlayStatus', 'UpdateHostStatus', 'AddHostResult',
'GetElapsed', 'UpdateTaskStatus', 'DrawGraph', 'LoadHostSummary', 'JobIsFinished', 'AddNewTask', 'GetElapsed', 'UpdateTaskStatus', 'DrawGraph', 'LoadHostSummary', 'JobIsFinished', 'AddNewTask',
function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, SelectPlay, SelectTask, GetElapsed, function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, GetElapsed,
UpdateTaskStatus, DrawGraph, LoadHostSummary, JobIsFinished, AddNewTask) { UpdateTaskStatus, DrawGraph, LoadHostSummary, JobIsFinished, AddNewTask) {
return function(params) { return function(params) {
@@ -88,11 +88,17 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Se
fistTask: null fistTask: null
}); });
scope.playsMap[event.id] = scope.plays.length -1; scope.playsMap[event.id] = scope.plays.length -1;
if (scope.activePlay && scope.playsMap[scope.activePlay] !== undefined) {
scope.plays[scope.playsMap[scope.activePlay]].playActiveClass = '';
}
scope.activePlay = event.id;
scope.plays[scope.playsMap[event.id]].playActiveClass = 'active';
scope.tasks = []; scope.tasks = [];
scope.tasksMap = {}; scope.tasksMap = {};
scope.hostResults = []; scope.hostResults = [];
scope.hostResultsMap = {}; scope.hostResultsMap = {};
scope.activePlay = event.id; $('#hosts-table-detail').mCustomScrollbar("update");
$('#tasks-table-detail').mCustomScrollbar("update");
break; break;
case 'playbook_on_setup': case 'playbook_on_setup':
@@ -254,22 +260,33 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Se
changedStyle: { display: 'none' }, changedStyle: { display: 'none' },
skippedStyle: { display: 'none' } skippedStyle: { display: 'none' }
}); });
scope.tasksMap[event.id] = scope.tasks.length - 1;
if (scope.tasks.length > scope.tasksMaxRows) { if (scope.tasks.length > scope.tasksMaxRows) {
scope.tasks.shift(); scope.tasks.shift();
} }
if (!scope.plays[scope.playsMap[scope.activePlay]].firstTask) {
if (!scope.playsMap[scope.activePlay].firstTask) { scope.plays[scope.playsMap[scope.activePlay]].firstTask = event.id;
scope.playsMap[scope.activePlay].firstTask = event.id;
} }
if (scope.activeTask && scope.tasksMap[scope.activeTask] !== undefined) {
scope.tasks[scope.tasksMap[scope.activeTask]].taskActiveClass = '';
}
scope.activeTask = event.id;
scope.tasks[scope.tasksMap[event.id]].taskActiveClass = 'active';
scope.hostResults = []; scope.hostResults = [];
scope.hostResultsMap = {}; scope.hostResultsMap = {};
scope.activeTask = event.id;
// Not sure if this still works // Not sure if this still works
scope.hasRoles = (event.role) ? true : false; scope.hasRoles = (event.role) ? true : false;
$('#hosts-table-detail').mCustomScrollbar("update");
$('#tasks-table-detail').mCustomScrollbar("update");
setTimeout( function() {
scope.auto_scroll = true;
$('#tasks-table-detail').mCustomScrollbar("scrollTo", "bottom");
}, 1500);
// Record the first task id // Record the first task id
UpdatePlayStatus({ UpdatePlayStatus({
scope: scope, scope: scope,
@@ -414,7 +431,7 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Se
scope.host_summary.total = scope.host_summary.ok + scope.host_summary.changed + scope.host_summary.unreachable + scope.host_summary.total = scope.host_summary.ok + scope.host_summary.changed + scope.host_summary.unreachable +
scope.host_summary.failed; scope.host_summary.failed;
if (scope.hostsMap[host_id]) { if (scope.hostsMap[host_id] !== undefined) {
scope.hosts[scope.hostsMap[host_id]].ok += (status === 'successful') ? 1 : 0; scope.hosts[scope.hostsMap[host_id]].ok += (status === 'successful') ? 1 : 0;
scope.hosts[scope.hostsMap[host_id]].changed += (status === 'changed') ? 1 : 0; scope.hosts[scope.hostsMap[host_id]].changed += (status === 'changed') ? 1 : 0;
scope.hosts[scope.hostsMap[host_id]].unreachable += (status === 'unreachable') ? 1 : 0; scope.hosts[scope.hostsMap[host_id]].unreachable += (status === 'unreachable') ? 1 : 0;
@@ -479,7 +496,7 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Se
msg = params.message, msg = params.message,
task; task;
if (!scope.hostResultsMap[host_id] && scope.hostResults.length < scope.hostTableRows) { if (scope.hostResultsMap[host_id] === undefined && scope.hostResults.length < scope.hostTableRows) {
scope.hostResults.push({ scope.hostResults.push({
id: event_id, id: event_id,
status: status, status: status,
@@ -506,9 +523,9 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Se
} }
// update the task status bar // update the task status bar
if (scope.tasksMap[task_id]) { if (scope.tasksMap[task_id] !== undefined) {
task = scope.tasks[scope.tasksMap[task_id]]; task = scope.tasks[scope.tasksMap[task_id]];
if (task_id === scope.plays[scope.playsMap[scope.activePlays]].firstPlay) { if (task_id === scope.plays[scope.playsMap[scope.activePlay]].firstTask) {
scope.plays[scope.playsMap[scope.activePlay]].hostCount++; scope.plays[scope.playsMap[scope.activePlay]].hostCount++;
task.hostCount++; task.hostCount++;
} }
@@ -565,17 +582,16 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Se
var scope = params.scope, var scope = params.scope,
id = params.id, id = params.id,
callback = params.callback, callback = params.callback,
clear = false; clear = true;
// Determine if the tasks and hostResults arrays should be initialized // Determine if the tasks and hostResults arrays should be initialized
if (scope.search_all_hosts_name || scope.searchAllStatus === 'failed') { //if (scope.search_all_hosts_name || scope.searchAllStatus === 'failed') {
clear = true; // clear = true;
} //}
else { //else {
clear = (scope.activePlay === id) ? false : true; //are we moving to a new play? // clear = (scope.activePlay === id) ? false : true; //are we moving to a new play?
}
if (scope.playsMap[scope.activePlay]) { if (scope.activePlay && scope.playsMap[scope.activePlay] !== undefined) {
scope.plays[scope.playsMap[scope.activePlay]].playActiveClass = ''; scope.plays[scope.playsMap[scope.activePlay]].playActiveClass = '';
} }
if (id) { if (id) {
@@ -600,25 +616,27 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Se
return function(params) { return function(params) {
var scope = params.scope, var scope = params.scope,
callback = params.callback, callback = params.callback,
clear = params.clear,
url; url;
if (clear) { scope.tasks = [];
scope.tasks = []; scope.tasksMap = {};
scope.tasksMap = {};
}
if (scope.activePlay) { if (scope.activePlay) {
url = scope.job.url + 'job_tasks/?event_id=' + scope.activePlay; url = scope.job.url + 'job_tasks/?event_id=' + scope.activePlay;
url += (scope.search_all_tasks.length > 0) ? '&id__in=' + scope.search_all_tasks.join() : ''; url += (scope.search_all_tasks.length > 0) ? '&id__in=' + scope.search_all_tasks.join() : '';
url += (scope.searchAllStatus === 'failed') ? '&failed=true' : ''; url += (scope.searchAllStatus === 'failed') ? '&failed=true' : '';
url += '&page_size=' + scope.tasksMaxRows; url += '&page_size=' + scope.tasksMaxRows + '&order_by=id';
Rest.setUrl(url); Rest.setUrl(url);
Rest.get() Rest.get()
.success(function(data) { .success(function(data) {
data.results.forEach(function(event, idx) { data.results.forEach(function(event, idx) {
var end, elapsed, task; var end, elapsed;
if (!scope.plays[scope.playsMap[scope.activePlay]].firstTask) {
scope.plays[scope.playsMap[scope.activePlay]].firstTask = event.id;
scope.plays[scope.playsMap[scope.activePlay]].hostCount = (event.host_count) ? event.host_count : 0;
}
if (idx < data.length - 1) { if (idx < data.length - 1) {
// end date = starting date of the next event // end date = starting date of the next event
@@ -626,7 +644,7 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Se
} }
else { else {
// no next event (task), get the end time of the play // no next event (task), get the end time of the play
end = scope.plays[scope.activePlay].finished; end = scope.plays[scope.playsMap[scope.activePlay]].finished;
} }
if (end) { if (end) {
@@ -639,39 +657,24 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Se
elapsed = '00:00:00'; elapsed = '00:00:00';
} }
if (scope.tasksMap[event.id]) { scope.tasks.push({
task = scope.tasks[scope.tasksMap[event.id]]; id: event.id,
task.status = (event.failed) ? 'failed' : (event.changed) ? 'changed' : 'successful'; play_id: scope.activePlay,
task.finished = end; name: event.name,
task.elapsed = elapsed; status: ( (event.failed) ? 'failed' : (event.changed) ? 'changed' : 'successful' ),
task.hostCount = (event.host_count) ? event.host_count : 0; created: event.created,
task.reportedHosts = (event.reported_hosts) ? event.reported_hosts : 0; modified: event.modified,
task.successfulCount = (event.successful_count) ? event.successful_count : 0; finished: end,
task.failedCount = (event.failed_count) ? event.failed_count : 0; elapsed: elapsed,
task.changedCount = (event.changed_count) ? event.changed_count : 0; hostCount: (event.host_count) ? event.host_count : 0,
task.skippedCount = (event.skipped_count) ? event.skipped_count : 0; reportedHosts: (event.reported_hosts) ? event.reported_hosts : 0,
task.taskActiveClass = ''; successfulCount: (event.successful_count) ? event.successful_count : 0,
} failedCount: (event.failed_count) ? event.failed_count : 0,
else { changedCount: (event.changed_count) ? event.changed_count : 0,
scope.tasks.push({ skippedCount: (event.skipped_count) ? event.skipped_count : 0,
id: event.id, taskActiveClass: ''
play_id: scope.activePlay, });
name: event.name, scope.tasksMap[event.id] = scope.tasks.length - 1;
status: ( (event.failed) ? 'failed' : (event.changed) ? 'changed' : 'successful' ),
created: event.created,
modified: event.modified,
finished: end,
elapsed: elapsed,
hostCount: (event.host_count) ? event.host_count : 0,
reportedHosts: (event.reported_hosts) ? event.reported_hosts : 0,
successfulCount: (event.successful_count) ? event.successful_count : 0,
failedCount: (event.failed_count) ? event.failed_count : 0,
changedCount: (event.changed_count) ? event.changed_count : 0,
skippedCount: (event.skipped_count) ? event.skipped_count : 0,
taskActiveClass: ''
});
scope.tasksMap[event.id] = scope.tasks.length - 1;
}
SetTaskStyles({ SetTaskStyles({
scope: scope, scope: scope,
task_id: event.id task_id: event.id
@@ -708,16 +711,16 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Se
var scope = params.scope, var scope = params.scope,
id = params.id, id = params.id,
callback = params.callback, callback = params.callback,
clear=false; clear=true;
if (scope.search_all_hosts_name || scope.searchAllStatus === 'failed') { //if (scope.search_all_hosts_name || scope.searchAllStatus === 'failed') {
clear = true; // clear = true;
} //}
else { //else {
clear = (scope.activeTask === id) ? false : true; // clear = (scope.activeTask === id) ? false : true;
} //}
if (scope.activeTask && scope.tasksMap[scope.activeTask]) { if (scope.activeTask && scope.tasksMap[scope.activeTask] !== undefined) {
scope.tasks[scope.tasksMap[scope.activeTask]].taskActiveClass = ''; scope.tasks[scope.tasksMap[scope.activeTask]].taskActiveClass = '';
} }
if (id) { if (id) {
@@ -798,7 +801,7 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Se
.factory('SelectHost', [ function() { .factory('SelectHost', [ function() {
return function(params) { return function(params) {
var scope = params.scope; var scope = params.scope;
$('#tasks-table-detail').mCustomScrollbar("update"); $('#hosts-table-detail').mCustomScrollbar("update");
setTimeout( function() { setTimeout( function() {
scope.auto_scroll = true; scope.auto_scroll = true;
$('#hosts-table-detail').mCustomScrollbar("scrollTo", "bottom"); $('#hosts-table-detail').mCustomScrollbar("scrollTo", "bottom");

10
awx/ui/static/partials/job_detail.html
View File

@@ -52,10 +52,10 @@
</div> </div>
</div> </div>
<div id="plays-table-detail" aw-custom-scroll class="table-detail"> <div id="plays-table-detail" aw-custom-scroll class="table-detail">
<div class="row cursor-pointer" ng-repeat="(play_id, play) in playList = (plays | FilterById : search_all_plays | FilterByField: { status : searchAllStatus }) track by play_id" <div class="row cursor-pointer" ng-repeat="play in plays"
ng-class="play.playActiveClass" ng-click="selectPlay(play.id)"> ng-class="play.playActiveClass" ng-click="selectPlay(play.id)">
<!-- | FilterById : search_all_plays | filter:{ status : searchAllStatus} --> <!-- | FilterById : search_all_plays | filter:{ status : searchAllStatus} -->
<!-- ) in playList = (plays | FilterById : search_all_plays | FilterByField: { status : searchAllStatus }) track by play_id" -->
<div class="col-lg-1 col-md-1 col-sm-2 hidden-xs">{{ play.created | date: 'HH:mm:ss' }}</div> <div class="col-lg-1 col-md-1 col-sm-2 hidden-xs">{{ play.created | date: 'HH:mm:ss' }}</div>
<div class="col-lg-1 col-md-1 hidden-sm hidden-xs" aw-tool-tip="Completed at {{ play.finished | date:'HH:mm:ss' }}" <div class="col-lg-1 col-md-1 hidden-sm hidden-xs" aw-tool-tip="Completed at {{ play.finished | date:'HH:mm:ss' }}"
data-placement="top">{{ play.elapsed }} data-placement="top">{{ play.elapsed }}
@@ -65,7 +65,7 @@
<i class="fa icon-job-{{ play.status }}"></i> {{ play.name }}</span> <i class="fa icon-job-{{ play.status }}"></i> {{ play.name }}</span>
</div> </div>
</div> </div>
<div class="row" ng-show="objectIsEmpty(playList)"> <div class="row" ng-show="plays.length == 0">
<div class="col-lg-12"> <div class="col-lg-12">
<div class="loading-info">No matching plays</div> <div class="loading-info">No matching plays</div>
</div> </div>
@@ -86,7 +86,7 @@
<div id="tasks-table-detail" class="table-detail" aw-custom-scroll data-on-total-scroll="TasksOnTotalScroll" <div id="tasks-table-detail" class="table-detail" aw-custom-scroll data-on-total-scroll="TasksOnTotalScroll"
data-on-total-scroll-back="TasksOnTotalScrollBack"> data-on-total-scroll-back="TasksOnTotalScrollBack">
<div class="row cursor-pointer" <div class="row cursor-pointer"
ng-repeat="(task_id, task) in tasks track by task_id" ng-repeat="task in tasks"
ng-class="task.taskActiveClass" ng-click="selectTask(task.id)"> ng-class="task.taskActiveClass" ng-click="selectTask(task.id)">
<!-- = (tasks | FilterById : search_all_tasks | filter:{ status : searchAllStatus} | filter:{ play_id: activePlay }} --> <!-- = (tasks | FilterById : search_all_tasks | filter:{ status : searchAllStatus} | filter:{ play_id: activePlay }} -->
<div class="col-lg-1 col-md-1 col-sm-2 hidden-xs">{{ task.created | date: 'HH:mm:ss' }}</div> <div class="col-lg-1 col-md-1 col-sm-2 hidden-xs">{{ task.created | date: 'HH:mm:ss' }}</div>
@@ -101,7 +101,7 @@
<div class="status-bar"><div class="successful-hosts inner-bar" id="{{ task.id }}-{{ task.play_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 }}-{{ task.play_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 }}-{{ task.play_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 }}-{{ task.play_id }}-failed-bar" aw-tool-tip="Hosts Failed" data-placement="top" ng-style="task.failedStyle">{{ task.failedCount }}</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-m atching-hosts'">No matching hosts</div></div> <div class="status-bar"><div class="successful-hosts inner-bar" id="{{ task.id }}-{{ task.play_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 }}-{{ task.play_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 }}-{{ task.play_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 }}-{{ task.play_id }}-failed-bar" aw-tool-tip="Hosts Failed" data-placement="top" ng-style="task.failedStyle">{{ task.failedCount }}</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-m atching-hosts'">No matching hosts</div></div>
</div> </div>
</div> </div>
<div class="row" ng-show="objectIsEmpty(tasks)"> <div class="row" ng-show="tasks.length == 0">
<div class="col-lg-12"> <div class="col-lg-12">
<div class="loading-info">No matching tasks</div> <div class="loading-info">No matching tasks</div>
</div> </div>