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

Job detail page refactor

Browse Source 
Latest changes. Things are still broken thought. Task status not working correctly or at all, and hosts results are not showing up.
This commit is contained in:
Chris Houseknecht
2014-06-13 14:30:42 -04:00
parent 05e17e66fc
commit c297342ba0
3 changed files with 73 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -61,6 +61,7 @@ function JobDetailController ($scope, $compile, $routeParams, $log, ClearScope,
event_socket.on("job_events-" + job_id, function(data) {
if (api_complete && data.id > lastEventId) {
// api loading is complete, process incoming events
data.event = data.event_name;
DigestEvents({
scope: scope,
events: [ data ]
@@ -77,7 +78,7 @@ function JobDetailController ($scope, $compile, $routeParams, $log, ClearScope,
}
scope.removeAPIComplete = scope.$on('APIComplete', function() {
// process any events sitting in the queue
var events = [], url;
var events = [], url, hostId = 0, taskId = 0, playId = 0;
function notEmpty(x) {
return Object.keys(x).length > 0;
@@ -91,14 +92,15 @@ function JobDetailController ($scope, $compile, $routeParams, $log, ClearScope,
// Find the max event.id value in memory
if (notEmpty(scope.hostResults)) {
lastEventId = getMaxId(scope.hostResults);
hostId = getMaxId(scope.hostResults);
}
else if (notEmpty(scope.tasks)) {
lastEventId = getMaxId(scope.tasks);
taskId = getMaxId(scope.tasks);
}
else if (notEmpty(scope.plays)) {
lastEventId = getMaxId(scope.plays);
playId = getMaxId(scope.plays);
}
lastEventId = Math.max(hostId, taskId, playId);
// Only process queued events > the max event in memory
if (event_queue.length > 0) {
@@ -117,7 +119,7 @@ function JobDetailController ($scope, $compile, $routeParams, $log, ClearScope,
api_complete = true;
// Draw the graph
if (scope.job.status === 'successful' && scope.job.status === 'failed' && scope.job.status === 'error') {
if (scope.job.status === 'successful' || scope.job.status === 'failed' || scope.job.status === 'error') {
// The job has already completed. graph values found on playbook stats
url = scope.job.related.job_events + '?event=playbook_on_stats';
Rest.setUrl(url);
@@ -212,11 +214,12 @@ function JobDetailController ($scope, $compile, $routeParams, $log, ClearScope,
elapsed: elapsed,
playActiveClass: ''
};
scope.host_summary.total += data.total;
scope.host_summary.ok += data.ok;
scope.host_summary.changed += data.changed;
scope.host_summary.unreachable += data.unreachable;
scope.host_summary.failed += data.failed;
scope.host_summary.ok += data.ok_count;
scope.host_summary.changed += data.changed_count;
scope.host_summary.unreachable += (data.unreachable_count) ? data.unreachable_count : 0;
scope.host_summary.failed += data.failed_count;
scope.host_summary.total = scope.host_summary.ok + scope.host_summary.changed +
scope.host_summary.unreachable + scope.host_summary.failed;
});
scope.$emit('PlaysReady', events_url);
@@ -462,6 +465,10 @@ function JobDetailController ($scope, $compile, $routeParams, $log, ClearScope,
}
};
scope.objectIsEmpty = function(obj) {
return (Object.keys(obj).length > 0) ? false : true;
};
scope.HostDetailOnTotalScroll = _.debounce(function() {
// Called when user scrolls down (or forward in time). Using _.debounce
var url, mcs = arguments[0];

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

@@ -50,7 +50,6 @@ function(UpdatePlayStatus, UpdateHostStatus, AddHostResult, SelectPlay, SelectTa
events.forEach(function(event) {
var hostCount;
if (event.event === 'playbook_on_start') {
if (scope.job_status.status!== 'failed' && scope.job_status.status !== 'canceled' &&
scope.job_status.status !== 'error' && scope.job_status !== 'successful') {
@@ -125,6 +124,7 @@ function(UpdatePlayStatus, UpdateHostStatus, AddHostResult, SelectPlay, SelectTa
scope: scope,
play_id: event.parent
});
scope.tasks[event.id] = {
id: event.id,
name: event.task,
@@ -258,10 +258,7 @@ function(UpdatePlayStatus, UpdateHostStatus, AddHostResult, SelectPlay, SelectTa
var scope = params.scope,
taskIds;
taskIds = Object.keys(scope.tasks);
if (taskIds.length > 0) {
return scope.tasks[taskIds.length - 1].id;
}
return null;
return (taskIds.length > 0) ? taskIds[0] : null;
};
})
@@ -329,24 +326,27 @@ function(UpdatePlayStatus, UpdateHostStatus, AddHostResult, SelectPlay, SelectTa
status_text = params.status_text,
play = scope.plays[id];
if (failed) {
scope.plays[id].status = 'failed';
}
else if (play.status !== 'changed' && play.status !== 'failed') {
// once the status becomes 'changed' or 'failed' don't modify it
if (no_hosts) {
scope.plays[id].status = 'no-matching-hosts';
if (scope.plays[id]) {
if (failed) {
scope.plays[id].status = 'failed';
}
else {
scope.plays[id].status = (changed) ? 'changed' : (failed) ? 'failed' : 'successful';
else if (play.status !== 'changed' && play.status !== 'failed') {
// once the status becomes 'changed' or 'failed' don't modify it
if (no_hosts) {
scope.plays[id].status = 'no-matching-hosts';
}
else {
scope.plays[id].status = (changed) ? 'changed' : (failed) ? 'failed' : 'successful';
}
}
scope.plays[id].finished = modified;
scope.plays[id].elapsed = GetElapsed({
start: play.created,
end: modified
});
scope.plays[id].status_text = (status_text) ? status_text : scope.plays[id].status;
}
scope.plays[id].finished = modified;
scope.plays[id].elapsed = GetElapsed({
start: play.created,
end: modified
});
scope.plays[id].status_text = (status_text) ? status_text : scope.plays[id].status;
UpdateJobStatus({
scope: scope,
failed: null,
@@ -363,30 +363,34 @@ function(UpdatePlayStatus, UpdateHostStatus, AddHostResult, SelectPlay, SelectTa
id = params.task_id,
modified = params.modified,
no_hosts = params.no_hosts,
task = scope.tasks[scope.activePlay][id];
if (no_hosts){
task.status = 'no-matching-hosts';
task = scope.tasks[id];
if (scope.tasks[id]) {
if (no_hosts){
task.status = 'no-matching-hosts';
}
else if (failed) {
task.status = 'failed';
}
else if (task.status !== 'changed' && task.status !== 'failed') {
// once the status becomes 'changed' or 'failed' don't modify it
task.status = (failed) ? 'failed' : (changed) ? 'changed' : 'successful';
}
task.finished = params.modified;
task.elapsed = GetElapsed({
start: task.created,
end: modified
});
UpdatePlayStatus({
scope: scope,
failed: failed,
changed: changed,
play_id: task.play_id,
modified: modified,
no_hosts: no_hosts
});
}
else if (failed) {
task.status = 'failed';
}
else if (task.status !== 'changed' && task.status !== 'failed') {
// once the status becomes 'changed' or 'failed' don't modify it
task.status = (failed) ? 'failed' : (changed) ? 'changed' : 'successful';
}
task.finished = params.modified;
task.elapsed = GetElapsed({
start: task.created,
end: modified
});
UpdatePlayStatus({
scope: scope,
failed: failed,
changed: changed,
play_id: task.play_id,
modified: modified,
no_hosts: no_hosts
});
};
}])
@@ -419,6 +423,7 @@ function(UpdatePlayStatus, UpdateHostStatus, AddHostResult, SelectPlay, SelectTa
scope.host_summary.changed += (status === 'changed') ? 1 : 0;
scope.host_summary.unreachable += (status === 'unreachable') ? 1 : 0;
scope.host_summary.failed += (status === 'failed') ? 1 : 0;
scope.hosts.push({
id: host_id,
name: name,
@@ -446,10 +451,6 @@ function(UpdatePlayStatus, UpdateHostStatus, AddHostResult, SelectPlay, SelectTa
scope.hostsMap[host.id] = idx;
});
$('#tasks-table-detail').mCustomScrollbar("update");
/*setTimeout( function() {
scope.auto_scroll = true;
$('#hosts-summary-table').mCustomScrollbar("scrollTo", "bottom");
}, 700);*/
}
UpdateTaskStatus({
@@ -526,14 +527,14 @@ function(UpdatePlayStatus, UpdateHostStatus, AddHostResult, SelectPlay, SelectTa
scope: scope,
play_id: play_id
});
task.hostCount += 1;
task.reportedHosts++;
if (task.id === first) {
task.hostCount += 1;
}
task.reportedHosts += 1;
task.failedCount += (status === 'failed' || status === 'unreachable') ? 1 : 0;
task.changedCount += (status === 'changed') ? 1 : 0;
task.successfulCount += (status === 'successful') ? 1 : 0;
task.skippedCount += (status === 'skipped') ? 1 : 0;
SetTaskStyles({ task: task });
}
};
@@ -543,7 +544,6 @@ function(UpdatePlayStatus, UpdateHostStatus, AddHostResult, SelectPlay, SelectTa
return function(params) {
var task = params.task,
diff;
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.skippedPct = (task.hostCount > 0) ? Math.ceil((100 * (task.skippedCount / task.hostCount))) : 0;
@@ -637,7 +637,7 @@ function(UpdatePlayStatus, UpdateHostStatus, AddHostResult, SelectPlay, SelectTa
scope.tasks[event.id] = {
id: event.id,
play_id: event.id,
play_id: scope.activePlay,
name: event.name,
status: ( (event.failed) ? 'failed' : (event.changed) ? 'changed' : 'successful' ),
created: event.created,

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

@@ -100,7 +100,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>
</div>
<div class="row" ng-show="!tasks">
<div class="row" ng-show="objectIsEmpty(tasks)">
<div class="col-lg-12">
<div class="loading-info">No tasks matched</div>
</div>
@@ -120,7 +120,7 @@
<div id="hosts-table-detail" aw-custom-scroll data-on-total-scroll="HostDetailOnTotalScroll"
data-on-total-scroll-back="HostDetailOnTotalScrollBack" class="table-detail">
<div id="hosts-table-detail-inner">
<div class="row" ng-repeat="result in results = (hostResults | filter:{ status : searchAllStatus })">
<div class="row" ng-repeat="result in hostResults">
<!-- ng-repeat="result in results = (hostResults | filter:{ status : searchAllStatus} })" -->
<div class="col-lg-7 col-md-7 col-sm-7 col-xs-7 status-column">
<a href="" ng-click="viewEvent(result.id)" aw-tool-tip="Event Id: {{ result.id }} Status: {{ result.status }}. Click for details" data-placement="top"><i class="fa icon-job-{{ result.status }}"></i> {{ result.name }}</a>
@@ -129,7 +129,7 @@
{{ result.msg }}
</div>
</div>
<div class="row" ng-show="!results">
<div class="row" ng-show="hostResults.length == 0">
<div class="col-lg-12">
<div class="loading-info">No hosts matched</div>
</div>