Job detail page refactor

Changed 'successful' to 'OK' throughout the page. Also fixed status tool tip text on unreachable hosts to be 'Unreachable' rather than 'failed'. Fixed tool tips on Plays and Tasks so that they updated in sync with status changes.
This commit is contained in:
Chris Houseknecht 2014-06-30 13:13:45 -04:00
parent e627ee0711
commit 64bfd6ce26
4 changed files with 213 additions and 39 deletions

View File

@ -174,15 +174,42 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
Rest.setUrl(url);
Rest.get()
.success(function(data) {
var idx, event;
var idx, event, status, status_text;
if (data.results.length > 0) {
lastEventId = data.results[0].id;
}
for (idx=data.results.length - 1; idx >= 0; idx--) {
event = data.results[idx];
if (event.event === "runner_on_skipped") {
status = 'skipped';
}
else if (event.event === "runner_on_unreachable") {
status = 'unreachable';
}
else {
status = (event.failed) ? 'failed' : (event.changed) ? 'changed' : 'successful';
}
switch(status) {
case "successful":
status_text = 'OK';
break;
case "changed":
status_text = "Changed";
break;
case "failed":
status_text = "Failed";
break;
case "unreachable":
status = "failed";
status_text = "Unreachable";
break;
case "skipped":
status_text = "Skipped";
}
task.hostResults[event.id] = {
id: event.id,
status: (event.event === "runner_on_skipped") ? 'skipped' : (event.failed) ? 'failed' : (event.changed) ? 'changed' : 'successful',
status: status,
status_text: status_text,
host_id: event.host,
task_id: event.parent,
name: event.event_data.host,
@ -221,7 +248,7 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
scope.activeTask = data.results[0].id;
}
data.results.forEach(function(event, idx) {
var end, elapsed;
var end, elapsed, status, status_text;
if (play.firstTask === undefined || play.firstTask === null) {
play.firstTask = event.id;
@ -247,11 +274,16 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
elapsed = '00:00:00';
}
status = (event.failed) ? 'failed' : (event.changed) ? 'changed' : 'successful';
status_text = (event.failed) ? 'Failed' : (event.changed) ? 'Changed' : 'OK';
play.tasks[event.id] = {
id: event.id,
play_id: scope.activePlay,
name: event.name,
status: ( (event.failed) ? 'failed' : (event.changed) ? 'changed' : 'successful' ),
status: status,
status_text: status_text,
status_tip: "Event ID: " + event.id + "<br />Status: " + status_text,
created: event.created,
modified: event.modified,
finished: end,
@ -309,9 +341,10 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
scope.activePlay = data.results[0].id;
}
data.results.forEach(function(event, idx) {
var status, start, end, elapsed, ok, changed, failed, skipped;
var status, status_text, start, end, elapsed, ok, changed, failed, skipped;
status = (event.failed) ? 'failed' : (event.changed) ? 'changed' : 'successful';
status_text = (event.failed) ? 'Failed' : (event.changed) ? 'Changed' : 'OK';
start = event.started;
if (idx < data.length - 1) {
@ -338,12 +371,13 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
created: start,
finished: end,
status: status,
status_text: status_text,
status_tip: "Event ID: " + event.id + "<br />Status: " + status_text,
elapsed: elapsed,
hostCount: 0,
fistTask: null,
playActiveClass: '',
unreachableCount: (event.unreachable_count) ? event.unreachable_count : 0,
status_text: status,
tasks: {}
};
@ -438,7 +472,7 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
scope.job_status.status = (data.status === 'waiting' || data.status === 'new') ? 'pending' : data.status;
scope.job_status.started = data.started;
scope.job_status.status_class = ((data.status === 'error' || data.status === 'failed') && data.job_explanation) ? "alert alert-danger" : "";
scope.job_status.finished = data.finished;
scope.job_status.finished = (data.status === 'successful' || data.status === 'failed' || data.status === 'error') ? data.finished : null;
scope.job_status.explanation = data.job_explanation;
if (data.started && data.finished) {
@ -672,9 +706,37 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
Rest.get()
.success(function(data) {
data.results.forEach(function(row) {
var status, status_text;
if (row.event === "runner_on_skipped") {
status = 'skipped';
}
else if (row.event === "runner_on_unreachable") {
status = 'unreachable';
}
else {
status = (row.failed) ? 'failed' : (row.changed) ? 'changed' : 'successful';
}
switch(status) {
case "successful":
status_text = 'OK';
break;
case "changed":
status_text = "Changed";
break;
case "failed":
status_text = "Failed";
break;
case "unreachable":
status = "failed";
status_text = "Unreachable";
break;
case "skipped":
status_text = "Skipped";
}
scope.hostResults.push({
id: row.id,
status: ( (row.failed) ? 'failed': (row.changed) ? 'changed' : 'successful' ),
status: status,
status_text: status_text,
host_id: row.host,
task_id: row.parent,
name: row.event_data.host,
@ -716,9 +778,37 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
Rest.get()
.success(function(data) {
data.results.forEach(function(row) {
var status, status_text;
if (row.event === "runner_on_skipped") {
status = 'skipped';
}
else if (row.event === "runner_on_unreachable") {
status = 'unreachable';
}
else {
status = (row.failed) ? 'failed' : (row.changed) ? 'changed' : 'successful';
}
switch(status) {
case "successful":
status_text = 'OK';
break;
case "changed":
status_text = "Changed";
break;
case "failed":
status_text = "Failed";
break;
case "unreachable":
status = "failed";
status_text = "Unreachable";
break;
case "skipped":
status_text = "Skipped";
}
scope.hostResults.unshift({
id: row.id,
status: ( (row.failed) ? 'failed': (row.changed) ? 'changed' : 'successful' ),
status: status,
status_text: status_text,
host_id: row.host,
task_id: row.parent,
name: row.event_data.host,
@ -761,7 +851,8 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
Rest.get()
.success(function(data) {
data.results.forEach(function(event, idx) {
var end, elapsed;
var end, elapsed, status, status_text;
if (idx < data.length - 1) {
// end date = starting date of the next event
end = data[idx + 1].created;
@ -785,11 +876,17 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
else {
elapsed = '00:00:00';
}
status = (event.failed) ? 'failed' : (event.changed) ? 'changed' : 'successful';
status_text = (event.failed) ? 'Failed' : (event.changed) ? 'Changed' : 'OK';
scope.tasks.push({
id: event.id,
play_id: scope.activePlay,
name: event.name,
status: ( (event.failed) ? 'failed' : (event.changed) ? 'changed' : 'successful' ),
status: status,
status_text: status_text,
status_tip: "Event ID: " + event.id + "<br />Status: " + status_text,
created: event.created,
modified: event.modified,
finished: end,
@ -843,7 +940,8 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
Rest.get()
.success(function(data) {
data.results.forEach(function(event, idx) {
var end, elapsed;
var end, elapsed, status, status_text;
if (idx < data.length - 1) {
// end date = starting date of the next event
end = data[idx + 1].created;
@ -867,16 +965,22 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
else {
elapsed = '00:00:00';
}
status = (event.failed) ? 'failed' : (event.changed) ? 'changed' : 'successful';
status_text = (event.failed) ? 'Failed' : (event.changed) ? 'Changed' : 'OK';
scope.tasks.unshift({
id: event.id,
play_id: scope.activePlay,
name: event.name,
status: ( (event.failed) ? 'failed' : (event.changed) ? 'changed' : 'successful' ),
status_text: ( (event.failed) ? 'Failed' : (event.changed) ? 'Changed' : 'OK' ),
status_tip: "Event ID: " + event.id + "<br />Status: " + status_text,
created: event.created,
modified: event.modified,
finished: end,
elapsed: elapsed,
hostCount: event.host_count, // hostCount,
hostCount: event.host_count,
reportedHosts: event.reported_hosts,
successfulCount: event.successful_count,
failedCount: event.failed_count,

View File

@ -46,7 +46,8 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Ge
return function(params) {
var scope = params.scope,
event = params.event;
event = params.event,
status, status_text;
$log.debug('processing event: ' + event.id);
@ -59,16 +60,19 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Ge
break;
case 'playbook_on_play_start':
status = (event.failed) ? 'failed' : (event.changed) ? 'changed' : 'successful';
status_text = (event.failed) ? 'Failed' : (event.changed) ? 'Changed' : 'OK';
scope.jobData.plays[event.id] = {
id: event.id,
name: event.play,
created: event.created,
status: (event.failed) ? 'failed' : (event.changed) ? 'changed' : 'successful',
status: status,
status_text: status_text,
elapsed: '00:00:00',
hostCount: 0,
fistTask: null,
unreachableCount: 0,
status_text: (event.failed) ? 'failed' : (event.changed) ? 'changed' : 'successful',
status_tip: "Event ID: " + event.id + "<br />Status: " + status_text,
tasks: {}
};
if (scope.activePlay) {
@ -109,7 +113,7 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Ge
failed: true,
changed: false,
modified: event.modified,
status_text: 'failed- no hosts matched'
no_hosts: true
});
break;
@ -219,13 +223,19 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Ge
.factory('AddNewTask', ['DrawGraph', 'UpdatePlayStatus', function(DrawGraph, UpdatePlayStatus) {
return function(params) {
var scope = params.scope,
event = params.event;
event = params.event,
status, status_text;
status = (event.failed) ? 'failed' : (event.changed) ? 'changed' : 'successful';
status_text = (event.failed) ? 'Failed' : (event.changed) ? 'Changed' : 'OK';
scope.jobData.plays[scope.activePlay].tasks[event.id] = {
id: event.id,
play_id: event.parent,
name: event.event_display,
status: ( (event.failed) ? 'failed' : (event.changed) ? 'changed' : 'successful' ),
status: status,
status_text: status_text,
status_tip: "Event ID: " + event.id + "<br />Status: " + status_text,
created: event.created,
modified: event.modified,
hostCount: scope.jobData.plays[scope.activePlay].hostCount,
@ -266,7 +276,7 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Ge
};
}])
.factory('UpdateJobStatus', ['GetElapsed', 'Empty', function(GetElapsed, Empty) {
.factory('UpdateJobStatus', ['GetElapsed', 'Empty', 'JobIsFinished', function(GetElapsed, Empty, JobIsFinished) {
return function(params) {
var scope = params.scope,
failed = params.failed,
@ -277,7 +287,7 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Ge
scope.job_status.status !== 'canceled') {
scope.job_status.status = 'failed';
}
if (!Empty(modified)) {
if (JobIsFinished(scope) && !Empty(modified)) {
scope.job_status.finished = modified;
}
if (!Empty(started) && Empty(scope.job_status.started)) {
@ -301,29 +311,32 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Ge
id = params.play_id,
modified = params.modified,
no_hosts = params.no_hosts,
status_text = params.status_text,
play;
if (scope.jobData.plays[id] !== undefined) {
play = scope.jobData.plays[scope.activePlay];
if (failed) {
play.status = 'failed';
play.status_text = 'Failed';
}
else if (play.status !== 'changed' && play.status !== 'failed') {
// once the status becomes 'changed' or 'failed' don't modify it
if (no_hosts) {
play.status = 'no-matching-hosts';
play.status_text = 'No matching hosts';
}
else {
play.status = (changed) ? 'changed' : (failed) ? 'failed' : 'successful';
play.status_text = (changed) ? 'Changed' : (failed) ? 'Failed' : 'OK';
}
}
play.status_tip = "Event ID: " + play.id + "<br />Status: " + play.status_text;
play.finished = modified;
play.elapsed = GetElapsed({
start: play.created,
end: modified
});
play.status_text = (status_text) ? status_text : play.status;
//play.status_text = (status_text) ? status_text : play.status;
}
UpdateJobStatus({
@ -348,14 +361,18 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Ge
task = scope.jobData.plays[scope.activePlay].tasks[scope.activeTask];
if (no_hosts){
task.status = 'no-matching-hosts';
task.status_text = 'No matching hosts';
}
else if (failed) {
task.status = 'failed';
task.status_text = '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.status_text = (failed) ? 'Failed' : (changed) ? 'Changed' : 'OK';
}
task.status_tip = "Event ID: " + task.id + "<br />Status: " + task.status_text;
task.finished = params.modified;
task.elapsed = GetElapsed({
start: task.created,
@ -445,11 +462,31 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Ge
created = params.created,
name = params.name,
msg = params.message,
status_text = '',
task;
switch(status) {
case "successful":
status_text = 'OK';
break;
case "changed":
status_text = "Changed";
break;
case "failed":
status_text = "Failed";
break;
case "unreachable":
status_text = "Unreachable";
status = "failed";
break;
case "skipped":
status_text = "Skipped";
}
scope.jobData.plays[scope.activePlay].tasks[scope.activeTask].hostResults[event_id] = {
id: event_id,
status: status,
status_text: status_text,
host_id: host_id,
task_id: task_id,
name: name,
@ -578,7 +615,7 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Ge
Rest.get()
.success(function(data) {
data.results.forEach(function(event, idx) {
var end, elapsed;
var end, elapsed, status, status_text;
//if (!scope.plays[scope.playsMap[scope.activePlay]].firstTask) {
// scope.plays[scope.playsMap[scope.activePlay]].firstTask = event.id;
@ -610,11 +647,16 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Ge
elapsed = '00:00:00';
}
status = (event.failed) ? 'failed' : (event.changed) ? 'changed' : 'successful';
status_text = (event.failed) ? 'Failed' : (event.changed) ? 'Changed' : 'OK';
scope.tasks.push({
id: event.id,
play_id: scope.activePlay,
name: event.name,
status: ( (event.failed) ? 'failed' : (event.changed) ? 'changed' : 'successful' ),
status: status,
status_text: status_text,
status_tip: "Event ID: " + event.id + "<br />Status: " + status_text,
created: event.created,
modified: event.modified,
finished: end,
@ -714,9 +756,37 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Ge
Rest.get()
.success(function(data) {
data.results.forEach(function(event) {
var status, status_text;
if (event.event === "runner_on_skipped") {
status = 'skipped';
}
else if (event.event === "runner_on_unreachable") {
status = 'unreachable';
}
else {
status = (event.failed) ? 'failed' : (event.changed) ? 'changed' : 'successful';
}
switch(status) {
case "successful":
status_text = 'OK';
break;
case "changed":
status_text = "Changed";
break;
case "failed":
status_text = "Failed";
break;
case "unreachable":
status = "failed";
status_text = "Unreachable";
break;
case "skipped":
status_text = "Skipped";
}
scope.hostResults.push({
id: event.id,
status: (event.event === "runner_on_skipped") ? 'skipped' : (event.failed) ? 'failed' : (event.changed) ? 'changed' : 'successful',
status: status,
status_text: status_text,
host_id: event.host,
task_id: event.parent,
name: event.event_data.host,

View File

@ -264,7 +264,7 @@ angular.module('AWDirectives', ['RestServices', 'Utilities', 'AuthService', 'Job
// Add dataTipWatch: 'variable_name'
scope.$watch(attrs.tipWatch, function(newVal, oldVal) {
if (newVal !== oldVal) {
// Where did fixTitle come frome?:
// Where did fixTitle come from?:
// http://stackoverflow.com/questions/9501921/change-twitter-bootstrap-tooltip-content-on-click
$(element).tooltip('hide').attr('data-original-title', newVal).tooltip('fixTitle');
}

View File

@ -77,9 +77,9 @@
<div class="row">
<div class="col-lg-1 col-md-1 col-sm-2 hidden-xs">Started</div>
<div class="col-lg-1 col-md-1 hidden-sm hidden-xs">Elapsed</div>
<div class="col-lg-6 col-md-6 col-sm-10 col-xs-12">Name</div>
<div class="col-lg-2 col-md-2 hidden-sm hidden-xs text-right">Reporting Hosts</div>
<div class="col-lg-2 col-md-2 hidden-sm hidden-xs text-right">Unreachable Hosts</div>
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">Name</div>
<!-- <div class="col-lg-2 col-md-2 hidden-sm hidden-xs text-right">Reporting Hosts</div>
<div class="col-lg-2 col-md-2 hidden-sm hidden-xs text-right">Unreachable Hosts</div> -->
</div>
</div>
<div id="plays-table-detail" aw-custom-scroll class="table-detail">
@ -89,12 +89,12 @@
<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 }}
</div>
<div class="col-lg-6 col-md-6 col-sm-10 col-xs-12 status-column"
aw-tool-tip="Event Id: {{ play.id }}<br />Status: {{ play.status_text }}" data-placement="top">
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-12 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> {{ play.name }}</span>
</div>
<div class="col-lg-2 col-md-2 hidden-sm hidden-xs text-right">{{ play.hostCount }}</div>
<div class="col-lg-2 col-md-2 hidden-sm hidden-xs text-right">{{ play.unreachableCount }}</div>
<!--<div class="col-lg-2 col-md-2 hidden-sm hidden-xs text-right">{{ play.hostCount }}</div>
<div class="col-lg-2 col-md-2 hidden-sm hidden-xs text-right">{{ play.unreachableCount }}</div>-->
</div>
<div class="row" ng-show="playList.length == 0">
<div class="col-lg-12">
@ -123,8 +123,8 @@
<div class="col-lg-1 col-md-1 hidden-sm hidden-xs" aw-tool-tip="Completed at {{ task.finished | date:'HH:mm:ss' }}"
data-placement="top">{{ task.elapsed }}
</div>
<div class="col-lg-5 col-md-5 col-sm-10 col-xs-12 status-column" aw-tool-tip="Event Id: {{ task.id }} Status: {{ task.status }}"
data-placement="top">
<div class="col-lg-5 col-md-5 col-sm-10 col-xs-12 status-column" aw-tool-tip="{{ task.status_tip }}"
data-tip-watch="task.status_tip" data-placement="top">
<i class="fa icon-job-{{ task.status }}"></i><span ng-show="hasRoles"> {{ task.role }} </span> {{ task.name }}
</div>
<div class="col-lg-5 col-md-5 hidden-sm hidden-xs">
@ -153,7 +153,7 @@
<div id="hosts-table-detail-inner">
<div class="row cursor-pointer" ng-repeat="result in results = (hostResults | filter:{ status : searchAllStatus}) track by $index" ng-click="viewHostResults(result.id)">
<div class="col-lg-7 col-md-7 col-sm-7 col-xs-7 status-column">
<a href="" 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>
<a href="" aw-tool-tip="Event ID: {{ result.id }}<br \>Status: {{ result.status_text }}. Click for details" data-placement="top"><i class="fa icon-job-{{ result.status }}"></i> {{ result.name }}</a>
</div>
<div class="col-lg-5 col-md-5 col-sm-5 col-xs-5">
{{ result.msg }}
@ -213,7 +213,7 @@
<div id="hosts-summary-section" class="section job_summary">
<div class="header">
<div class="title">Host Summary</div>
<div class="legend pull-right"><i class="fa fa-circle successful-hosts-color"></i> Successful <i class="fa fa-circle changed-hosts-color"></i> Changed
<div class="legend pull-right"><i class="fa fa-circle successful-hosts-color"></i> OK <i class="fa fa-circle changed-hosts-color"></i> Changed
<i class="fa fa-circle unreachable-hosts-color"></i> Unreachable <i class="fa fa-circle failed-hosts-color"></i> Failed</div>
</div>
<div class="table-header">
@ -247,7 +247,7 @@
<div id="graph-section" class="section">
<div class="header">
<div class="title">Host Status Summary</div>
<div class="legend pull-right" style="display: none;"><i class="fa fa-circle successful-hosts-color"></i> Successful <i class="fa fa-circle changed-hosts-color"></i> Changed
<div class="legend pull-right" style="display: none;"><i class="fa fa-circle successful-hosts-color"></i> OK <i class="fa fa-circle changed-hosts-color"></i> Changed
<i class="fa fa-circle unreachable-hosts-color"></i> Unreachable <i class="fa fa-circle failed-hosts-color"></i> Failed</div>
</div>
</div><!-- graph section -->