External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-02-28 08:18:43 -03:30
Code Issues Packages Projects Releases Wiki Activity

Job detail page refactor

Browse Source 
Reconnected scroll bar bits mostly.
This commit is contained in:
Chris Houseknecht
2014-06-20 02:00:15 -04:00
parent ff1cce8509
commit a024de5702
2 changed files with 71 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -25,10 +25,10 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
scope.tasks = []; scope.tasks = [];
scope.hostResults = []; scope.hostResults = [];
scope.hostResultsMaxRows = 25; scope.hostResultsMaxRows = 15;
scope.hostSummariesMaxRows = 25; scope.hostSummariesMaxRows = 15;
scope.tasksMaxRows = 25; scope.tasksMaxRows = 15;
scope.playsMaxRows = 25; scope.playsMaxRows = 15;
scope.search_all_tasks = []; scope.search_all_tasks = [];
scope.search_all_plays = []; scope.search_all_plays = [];
@@ -107,6 +107,7 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
}); });
} }
UpdateDOM({ scope: scope }); UpdateDOM({ scope: scope });
DrawGraph({ scope: scope, resize: false });
}) })
.error(function(data, status) { .error(function(data, status) {
ProcessErrors(scope, data, status, null, { hdr: 'Error!', ProcessErrors(scope, data, status, null, { hdr: 'Error!',
@@ -261,11 +262,12 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
hostResults: {} hostResults: {}
}; };
SetTaskStyles({ SetTaskStyles({
scope: scope, task: play.tasks[event.id]
task_id: event.id
}); });
}); });
scope.jobData.plays[scope.activePlay].tasks[scope.activeTask].taskActiveClass = 'active'; if (scope.activeTask) {
scope.jobData.plays[scope.activePlay].tasks[scope.activeTask].taskActiveClass = 'active';
}
scope.$emit('LoadHosts'); scope.$emit('LoadHosts');
}) })
.error(function(data) { .error(function(data) {
@@ -640,21 +642,6 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
return true; return true;
}; };
function rebuildHostResultsMap() {
scope.hostResultsMap = {};
scope.hostResults.forEach(function(result, idx) {
scope.hostResultsMap[result.id] = idx;
});
}
function rebuildTasksMap() {
scope.tasksMap = {};
scope.tasks.forEach(function(task, idx) {
scope.tasksMap[task.id] = idx;
});
}
scope.HostDetailOnTotalScroll = _.debounce(function() { scope.HostDetailOnTotalScroll = _.debounce(function() {
// Called when user scrolls down (or forward in time) // Called when user scrolls down (or forward in time)
var url, mcs = arguments[0]; var url, mcs = arguments[0];
@@ -664,7 +651,7 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
url = GetBasePath('jobs') + job_id + '/job_events/?parent=' + scope.activeTask + '&'; url = GetBasePath('jobs') + job_id + '/job_events/?parent=' + scope.activeTask + '&';
url += (scope.search_all_hosts_name) ? 'host__name__icontains=' + scope.search_all_hosts_name + '&' : ''; url += (scope.search_all_hosts_name) ? 'host__name__icontains=' + scope.search_all_hosts_name + '&' : '';
url += (scope.searchAllStatus === 'failed') ? 'failed=true&' : ''; url += (scope.searchAllStatus === 'failed') ? 'failed=true&' : '';
url += 'host__name__gt=' + scope.hostResults[scope.hostResults.length - 1].name + '&host__isnull=false&page_size=' + scope.hostTableRows + '&order_by=host__name'; url += 'host__name__gt=' + scope.hostResults[scope.hostResults.length - 1].name + '&host__isnull=false&page_size=' + scope.hostResultsMaxRows + '&order_by=host__name';
Wait('start'); Wait('start');
Rest.setUrl(url); Rest.setUrl(url);
Rest.get() Rest.get()
@@ -679,7 +666,7 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
created: row.created, created: row.created,
msg: ( (row.event_data && row.event_data.res) ? row.event_data.res.msg : '' ) msg: ( (row.event_data && row.event_data.res) ? row.event_data.res.msg : '' )
}); });
if (scope.hostResults.length > scope.hostTableRows) { if (scope.hostResults.length > scope.hostResultsMaxRows) {
scope.hostResults.shift(); scope.hostResults.shift();
} }
}); });
@@ -688,7 +675,7 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
setTimeout(function() { $('#hosts-table-detail .mCSB_dragger').css({ top: (mcs.draggerTop - 15) + 'px'}); }, 700); setTimeout(function() { $('#hosts-table-detail .mCSB_dragger').css({ top: (mcs.draggerTop - 15) + 'px'}); }, 700);
} }
scope.auto_scroll = false; scope.auto_scroll = false;
rebuildHostResultsMap(); //rebuildHostResultsMap();
Wait('stop'); Wait('stop');
}) })
.error(function(data, status) { .error(function(data, status) {
@@ -711,7 +698,7 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
url = GetBasePath('jobs') + job_id + '/job_events/?parent=' + scope.activeTask + '&'; url = GetBasePath('jobs') + job_id + '/job_events/?parent=' + scope.activeTask + '&';
url += (scope.search_all_hosts_name) ? 'host__name__icontains=' + scope.search_all_hosts_name + '&' : ''; url += (scope.search_all_hosts_name) ? 'host__name__icontains=' + scope.search_all_hosts_name + '&' : '';
url += (scope.searchAllStatus === 'failed') ? 'failed=true&' : ''; url += (scope.searchAllStatus === 'failed') ? 'failed=true&' : '';
url += 'host__name__lt=' + scope.hostResults[0].name + '&host__isnull=false&page_size=' + scope.hostTableRows + '&order_by=-host__name'; url += 'host__name__lt=' + scope.hostResults[0].name + '&host__isnull=false&page_size=' + scope.hostResultsMaxRows + '&order_by=-host__name';
Wait('start'); Wait('start');
Rest.setUrl(url); Rest.setUrl(url);
Rest.get() Rest.get()
@@ -726,7 +713,7 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
created: row.created, created: row.created,
msg: ( (row.event_data && row.event_data.res) ? row.event_data.res.msg : '' ) msg: ( (row.event_data && row.event_data.res) ? row.event_data.res.msg : '' )
}); });
if (scope.hostResults.length > scope.hostTableRows) { if (scope.hostResults.length > scope.hostResultsMaxRows) {
scope.hostResults.pop(); scope.hostResults.pop();
} }
}); });
@@ -734,7 +721,7 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
// there are more rows. move dragger down, letting user know. // there are more rows. move dragger down, letting user know.
setTimeout(function() { $('#hosts-table-detail .mCSB_dragger').css({ top: (mcs.draggerTop + 15) + 'px' }); }, 700); setTimeout(function() { $('#hosts-table-detail .mCSB_dragger').css({ top: (mcs.draggerTop + 15) + 'px' }); }, 700);
} }
rebuildHostResultsMap(); //rebuildHostResultsMap();
Wait('stop'); Wait('stop');
scope.auto_scroll = false; scope.auto_scroll = false;
}) })
@@ -749,6 +736,7 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
}); });
}, 300); }, 300);
scope.TasksOnTotalScroll = _.debounce(function() { scope.TasksOnTotalScroll = _.debounce(function() {
// Called when user scrolls down (or forward in time) // Called when user scrolls down (or forward in time)
var url, mcs = arguments[0]; var url, mcs = arguments[0];
@@ -771,7 +759,13 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
} }
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.playsMap[scope.activePlay]].finished; scope.plays.every(function(p, j) {
if (p.id === scope.activePlay) {
end = scope.plays[j].finished;
return false;
}
return true;
});
} }
if (end) { if (end) {
elapsed = GetElapsed({ elapsed = GetElapsed({
@@ -799,10 +793,8 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
skippedCount: event.skipped_count, skippedCount: event.skipped_count,
taskActiveClass: '' taskActiveClass: ''
}); });
scope.tasksMap[event.id] = scope.tasks.length - 1;
SetTaskStyles({ SetTaskStyles({
scope: scope, task: scope.tasks[scope.tasks.length - 1]
task_id: event.id
}); });
if (scope.tasks.length > scope.tasksMaxRows) { if (scope.tasks.length > scope.tasksMaxRows) {
scope.tasks.shift(); scope.tasks.shift();
@@ -813,7 +805,7 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
setTimeout(function() { $('#tasks-table-detail .mCSB_dragger').css({ top: (mcs.draggerTop - 15) + 'px'}); }, 700); setTimeout(function() { $('#tasks-table-detail .mCSB_dragger').css({ top: (mcs.draggerTop - 15) + 'px'}); }, 700);
} }
scope.auto_scroll = false; scope.auto_scroll = false;
rebuildTasksMap(); //rebuildTasksMap();
Wait('stop'); Wait('stop');
}) })
.error(function(data, status) { .error(function(data, status) {
@@ -849,7 +841,13 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
} }
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.playsMap[scope.activePlay]].finished; scope.plays.every(function(p, j) {
if (p.id === scope.activePlay) {
end = scope.plays[j].finished;
return false;
}
return true;
});
} }
if (end) { if (end) {
elapsed = GetElapsed({ elapsed = GetElapsed({
@@ -877,10 +875,8 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
skippedCount: event.skipped_count, skippedCount: event.skipped_count,
taskActiveClass: '' taskActiveClass: ''
}); });
scope.tasksMap[event.id] = scope.tasks.length - 1;
SetTaskStyles({ SetTaskStyles({
scope: scope, task: scope.tasks[0]
task_id: event.id
}); });
if (scope.tasks.length > scope.tasksMaxRows) { if (scope.tasks.length > scope.tasksMaxRows) {
scope.tasks.pop(); scope.tasks.pop();
@@ -891,7 +887,7 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
setTimeout(function() { $('#tasks-table-detail .mCSB_dragger').css({ top: (mcs.draggerTop + 15) + 'px'}); }, 700); setTimeout(function() { $('#tasks-table-detail .mCSB_dragger').css({ top: (mcs.draggerTop + 15) + 'px'}); }, 700);
} }
scope.auto_scroll = false; scope.auto_scroll = false;
rebuildTasksMap(); //rebuildTasksMap();
Wait('stop'); Wait('stop');
}) })
.error(function(data, status) { .error(function(data, status) {
@@ -911,7 +907,7 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
url = GetBasePath('jobs') + job_id + '/job_host_summaries/?'; url = GetBasePath('jobs') + job_id + '/job_host_summaries/?';
url += (scope.search_all_hosts_name) ? 'host__name__icontains=' + scope.search_all_hosts_name + '&' : ''; url += (scope.search_all_hosts_name) ? 'host__name__icontains=' + scope.search_all_hosts_name + '&' : '';
url += (scope.searchAllStatus === 'failed') ? 'failed=true&' : ''; url += (scope.searchAllStatus === 'failed') ? 'failed=true&' : '';
url += 'host__name__gt=' + scope.hosts[scope.hosts.length - 1].name + '&page_size=' + scope.hostSummaryTableRows + '&order_by=host__name'; url += 'host__name__gt=' + scope.hosts[scope.hosts.length - 1].name + '&page_size=' + scope.hostSummariesMaxRows + '&order_by=host__name';
Wait('start'); Wait('start');
Rest.setUrl(url); Rest.setUrl(url);
Rest.get() Rest.get()
@@ -927,7 +923,7 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
unreachable: row.dark, unreachable: row.dark,
failed: row.failures failed: row.failures
}); });
if (scope.hosts.length > scope.hostSummaryTableRows) { if (scope.hosts.length > scope.hostSummariesMaxRows) {
scope.hosts.shift(); scope.hosts.shift();
} }
}); });
@@ -955,7 +951,7 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
url = GetBasePath('jobs') + job_id + '/job_host_summaries/?'; url = GetBasePath('jobs') + job_id + '/job_host_summaries/?';
url += (scope.search_all_hosts_name) ? 'host__name__icontains=' + scope.search_all_hosts_name + '&' : ''; url += (scope.search_all_hosts_name) ? 'host__name__icontains=' + scope.search_all_hosts_name + '&' : '';
url += (scope.searchAllStatus === 'failed') ? 'failed=true&' : ''; url += (scope.searchAllStatus === 'failed') ? 'failed=true&' : '';
url += 'host__name__lt=' + scope.hosts[0].name + '&page_size=' + scope.hostSummaryTableRows + '&order_by=-host__name'; url += 'host__name__lt=' + scope.hosts[0].name + '&page_size=' + scope.hostSummariesMaxRows + '&order_by=-host__name';
Wait('start'); Wait('start');
Rest.setUrl(url); Rest.setUrl(url);
Rest.get() Rest.get()
@@ -971,7 +967,7 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
unreachable: row.dark, unreachable: row.dark,
failed: row.failures failed: row.failures
}); });
if (scope.hosts.length > scope.hostSummaryTableRows) { if (scope.hosts.length > scope.hostSummariesMaxRows) {
scope.hosts.pop(); scope.hosts.pop();
} }
}); });

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

@@ -493,8 +493,7 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Ge
task.successfulCount += (status === 'successful') ? 1 : 0; task.successfulCount += (status === 'successful') ? 1 : 0;
task.skippedCount += (status === 'skipped') ? 1 : 0; task.skippedCount += (status === 'skipped') ? 1 : 0;
SetTaskStyles({ SetTaskStyles({
scope: scope, task: task
task_id: task_id
}); });
} }
}; };
@@ -502,11 +501,11 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Ge
.factory('SetTaskStyles', [ function() { .factory('SetTaskStyles', [ function() {
return function(params) { return function(params) {
var task_id = params.task_id, var task = params.task,
scope = params.scope, diff;
diff, task;
task = scope.jobData.plays[scope.activePlay].tasks[task_id]; //task = scope.jobData.plays[scope.activePlay].tasks[task_id];
task.hostCount = task.failedCount + task.changedCount + task.skippedCount + task.successfulCount;
task.failedPct = (task.hostCount > 0) ? Math.ceil((100 * (task.failedCount / task.hostCount))) : 0; task.failedPct = (task.hostCount > 0) ? Math.ceil((100 * (task.failedCount / task.hostCount))) : 0;
task.changedPct = (task.hostCount > 0) ? Math.ceil((100 * (task.changedCount / task.hostCount))) : 0; task.changedPct = (task.hostCount > 0) ? Math.ceil((100 * (task.changedCount / task.hostCount))) : 0;
task.skippedPct = (task.hostCount > 0) ? Math.ceil((100 * (task.skippedCount / task.hostCount))) : 0; task.skippedPct = (task.hostCount > 0) ? Math.ceil((100 * (task.skippedCount / task.hostCount))) : 0;
@@ -942,15 +941,22 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Ge
var scope = params.scope, var scope = params.scope,
idx = 0, idx = 0,
result = [], result = [],
newKeys = [],
keys = Object.keys(scope.jobData.plays); keys = Object.keys(scope.jobData.plays);
keys.sort(); keys.reverse();
while (idx < keys.length && idx < scope.playsMaxRows) { for (idx=0; idx < scope.playsMaxRows && idx < keys.length; idx++) {
result.push(scope.jobData.plays[keys[idx]]); newKeys.push(keys[idx]);
}
newKeys.sort();
idx = 0;
while (idx < newKeys.length) {
result.push(scope.jobData.plays[newKeys[idx]]);
idx++; idx++;
} }
setTimeout(function() {
scope.$apply(function() { scope.plays = result; }); scope.plays = result;
}); scope.$emit('FixPlaysScroll');
}; };
}]) }])
@@ -958,23 +964,25 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Ge
return function(params) { return function(params) {
var scope = params.scope, var scope = params.scope,
result = [], result = [],
idx = 0, idx, keys, newKeys;
keys;
if (scope.activePlay) { if (scope.activePlay) {
keys = Object.keys(scope.jobData.plays[scope.activePlay].tasks); keys = Object.keys(scope.jobData.plays[scope.activePlay].tasks);
keys.reverse(); keys.reverse();
if (keys.length > scope.tasksMaxRows + 1) { newKeys = [];
keys.splice(0, keys.length - (scope.taskMaxRows + 1)); for (idx=0; idx < scope.tasksMaxRows && idx < keys.length; idx++) {
newKeys.push(keys[idx]);
} }
keys.sort(); newKeys.sort();
while (idx < keys.length && idx < scope.tasksMaxRows) { idx = 0;
result.push(scope.jobData.plays[scope.activePlay].tasks[keys[idx]]); while (idx < newKeys.length) {
result.push(scope.jobData.plays[scope.activePlay].tasks[newKeys[idx]]);
idx++; idx++;
} }
} }
setTimeout(function() {
scope.$apply(function() { scope.tasks = result; }); scope.tasks = result;
}); scope.$emit('FixTasksScroll');
}; };
}]) }])
@@ -1005,16 +1013,17 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Ge
} }
} }
scope.hostResults = result; scope.hostResults = result;
scope.$emit('FixHostResultsScroll');
}; };
}]) }])
.factory('UpdateDOM', ['DrawPlays', 'DrawTasks', 'DrawHostResults', 'DrawGraph', function(DrawPlays, DrawTasks, DrawHostResults, DrawGraph) { .factory('UpdateDOM', ['DrawPlays', 'DrawTasks', 'DrawHostResults', function(DrawPlays, DrawTasks, DrawHostResults) {
return function(params) { return function(params) {
var scope = params.scope; var scope = params.scope;
DrawPlays({ scope: scope }); DrawPlays({ scope: scope });
DrawTasks({ scope: scope }); DrawTasks({ scope: scope });
// DrawHostResults({ scope: scope }); DrawHostResults({ scope: scope });
//if (scope.host_summary.total > 0) { //if (scope.host_summary.total > 0) {
// DrawGraph({ scope: scope, resize: true }); // DrawGraph({ scope: scope, resize: true });