Job detail page refactor

Fixed page filtering. Made tasks and plays selectable again.
This commit is contained in:
Chris Houseknecht 2014-06-20 12:59:11 -04:00
parent 91eff95842
commit e6cf440511
4 changed files with 109 additions and 161 deletions

View File

@ -216,7 +216,7 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
.success(function(data) {
if (data.results.length > 0) {
lastEventId = data.results[data.results.length - 1].id;
scope.activeTask = data.results[data.results.length - 1].id;
scope.activeTask = data.results[0].id;
}
data.results.forEach(function(event, idx) {
var end, elapsed;
@ -304,7 +304,7 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
.success( function(data) {
if (data.results.length > 0) {
lastEventId = data.results[data.results.length - 1].id;
scope.activePlay = data.results[data.results.length - 1].id;
scope.activePlay = data.results[0].id;
}
data.results.forEach(function(event, idx) {
var status, start, end, elapsed;
@ -971,7 +971,6 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
};
scope.searchAllByHost = function() {
var keys, nxtPlay;
if (scope.search_all_hosts_name) {
FilterAllByHostName({
scope: scope,
@ -983,11 +982,9 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
scope.search_all_tasks = [];
scope.search_all_plays = [];
scope.searchAllHostsEnabled = true;
keys = Object.keys(scope.plays);
nxtPlay = (keys.length > 0) ? keys[keys.length - 1] : null;
SelectPlay({
scope: scope,
id: nxtPlay
id: (scope.plays.length > 0) ? scope.plays[0].id : null
});
}

View File

@ -458,10 +458,10 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Ge
if (scope.jobData.plays[scope.activePlay].tasks[task_id] !== undefined) {
task = scope.jobData.plays[scope.activePlay].tasks[task_id];
if (task_id === scope.jobData.plays[scope.activePlay].firstTask) {
scope.jobData.plays[scope.activePlay].hostCount++;
task.hostCount++;
}
//if (task_id === scope.jobData.plays[scope.activePlay].firstTask) {
// scope.jobData.plays[scope.activePlay].hostCount++;
// task.hostCount++;
//}
task.reportedHosts += 1;
task.failedCount += (status === 'failed' || status === 'unreachable') ? 1 : 0;
@ -525,20 +525,22 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Ge
clear = (scope.activePlay === id) ? false : true; //are we moving to a new play?
}
if (scope.activePlay && scope.playsMap[scope.activePlay] !== undefined) {
scope.plays[scope.playsMap[scope.activePlay]].playActiveClass = '';
}
if (id) {
scope.plays[scope.playsMap[id]].playActiveClass = 'active';
}
scope.activePlay = id;
scope.plays.forEach(function(play, idx) {
if (play.id === scope.activePlay) {
scope.plays[idx].playActiveClass = 'active';
}
else {
scope.plays[idx].playActiveClass = '';
}
});
setTimeout(function() {
scope.$apply(function() {
LoadTasks({
scope: scope,
callback: callback,
clear: clear
clear: true
});
});
});
@ -568,12 +570,12 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Ge
Rest.get()
.success(function(data) {
data.results.forEach(function(event, idx) {
var task, end, elapsed;
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 (!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) {
// end date = starting date of the next event
@ -581,7 +583,13 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Ge
}
else {
// no next event (task), get the end time of the play
end = scope.plays[scope.playsMap[scope.activePlay]].finished;
scope.plays.every(function(play) {
if (play.id === scope.activePlay) {
end = play.finished;
return false;
}
return true;
});
}
if (end) {
@ -594,64 +602,37 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Ge
elapsed = '00:00:00';
}
if (scope.tasksMap[event.id] !== undefined) {
task = scope.tasks[scope.tasksMap[event.id]];
task.status = ( (event.failed) ? 'failed' : (event.changed) ? 'changed' : 'successful' );
task.modified = event.modified;
task.finished = end;
task.elapsed = elapsed;
task.hostCount = (event.host_count) ? event.host_count : 0;
task.reportedHosts = (event.reported_hosts) ? event.reported_hosts : 0;
task.successfulCount = (event.successful_count) ? event.successful_count : 0;
task.failedCount = (event.failed_count) ? event.failed_count : 0;
task.changedCount = (event.changed_count) ? event.changed_count : 0;
task.skippedCount = (event.skipped_count) ? event.skipped_count : 0;
task.taskActiveClass = '';
}
else {
scope.tasks.push({
id: event.id,
play_id: scope.activePlay,
name: event.name,
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;
if (scope.tasks.length > scope.tasksMaxRows) {
scope.tasks.shift();
}
}
SetTaskStyles({
scope: scope,
task_id: event.id
scope.tasks.push({
id: event.id,
play_id: scope.activePlay,
name: event.name,
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: ''
});
});
//rebuild the index;
scope.tasksMap = {};
scope.tasks.forEach(function(task, idx) {
scope.tasksMap[task.id] = idx;
SetTaskStyles({
task: scope.tasks[scope.tasks.length - 1]
});
});
// set the active task
SelectTask({
scope: scope,
id: (scope.tasks.length > 0) ? scope.tasks[scope.tasks.length - 1].id : null,
id: (scope.tasks.length > 0) ? scope.tasks[0].id : null,
callback: callback
});
scope.$emit('FixTasksScroll');
$('#tasks-table-detail').mCustomScrollbar("update");
})
.error(function(data) {
ProcessErrors(scope, data, status, null, { hdr: 'Error!',
@ -659,8 +640,6 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Ge
});
}
else {
scope.tasks = [];
scope.tasksMap = {};
$('#tasks-table-detail').mCustomScrollbar("update");
SelectTask({
scope: scope,
@ -686,18 +665,20 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Ge
clear = (scope.activeTask === id) ? false : true;
}
if (scope.activeTask && scope.tasksMap[scope.activeTask] !== undefined) {
scope.tasks[scope.tasksMap[scope.activeTask]].taskActiveClass = '';
}
if (id) {
scope.tasks[scope.tasksMap[id]].taskActiveClass = 'active';
}
scope.activeTask = id;
scope.tasks.forEach(function(task, idx) {
if (task.id === scope.activeTask) {
scope.tasks[idx].taskActiveClass = 'active';
}
else {
scope.tasks[idx].taskActiveClass = '';
}
});
LoadHosts({
scope: scope,
callback: callback,
clear: clear
clear: true
});
};
}])
@ -725,39 +706,20 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Ge
Rest.get()
.success(function(data) {
data.results.forEach(function(event) {
var result;
if (scope.hostResultsMap[event.id] !== undefined) {
result = scope.hostResults[scope.hostResultsMap[event.id]];
result.status = ( (event.failed) ? 'failed' : (event.changed) ? 'changed' : 'successful' );
result.created = event.created;
result.msg = (event.event_data && event.event_data.res) ? event.event_data.res.msg : '';
}
else {
scope.hostResults.push({
id: event.id,
status: ( (event.failed) ? 'failed' : (event.changed) ? 'changed' : 'successful' ),
host_id: event.host,
task_id: event.parent,
name: event.event_data.host,
created: event.created,
msg: ( (event.event_data && event.event_data.res) ? event.event_data.res.msg : '' )
});
if (scope.hostResults.length > scope.hostTableRows) {
scope.hostResults.shift();
}
}
scope.hostResults.push({
id: event.id,
status: ( (event.failed) ? 'failed' : (event.changed) ? 'changed' : 'successful' ),
host_id: event.host,
task_id: event.parent,
name: event.event_data.host,
created: event.created,
msg: ( (event.event_data && event.event_data.res) ? event.event_data.res.msg : '' )
});
});
// Rebuild the index
scope.hostResultsMap = {};
scope.hostResults.forEach(function(result, idx) {
scope.hostResultsMap[result.id] = idx;
});
if (callback) {
scope.$emit(callback);
}
scope.$emit('FixHostResultsScroll');
$('#hosts-table-detail').mCustomScrollbar("update");
})
.error(function(data, status) {
ProcessErrors(scope, data, status, null, { hdr: 'Error!',
@ -765,8 +727,6 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Ge
});
}
else {
scope.hostResults = [];
scope.hostResultsMap = {};
if (callback) {
scope.$emit(callback);
}
@ -787,33 +747,21 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Ge
url += (scope.searchAllStatus === 'failed') ? 'failed=true&' : '';
url += 'page_size=' + scope.hostSummaryTableRows + '&order_by=host__name';
if (scope.search_all_hosts_name || scope.searchAllStatus === 'failed') {
// User initiated a search
scope.hosts = [];
scope.hostsMap = {};
}
scope.hosts = [];
scope.hostsMap = {};
Rest.setUrl(url);
Rest.get()
.success(function(data) {
data.results.forEach(function(event) {
if (scope.hostsMap[event.host]) {
scope.hosts[scope.hostsMap[event.host]].ok = event.ok;
scope.hosts[scope.hostsMap[event.host]].changed = event.changed;
scope.hosts[scope.hostsMap[event.host]].dark = event.dark;
scope.hosts[scope.hostsMap[event.host]].failures = event.failures;
}
else {
scope.hosts.push({
id: event.host,
name: event.summary_fields.host.name,
ok: event.ok,
changed: event.changed,
unreachable: event.dark,
failed: event.failures
});
scope.hostsMap[event.host] = scope.hosts.length - 1;
}
scope.hosts.push({
id: event.host,
name: event.summary_fields.host.name,
ok: event.ok,
changed: event.changed,
unreachable: event.dark,
failed: event.failures
});
});
$('#hosts-summary-table').mCustomScrollbar("update");
if (callback) {
@ -932,8 +880,9 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Ge
}
scope.plays = result;
scope.$emit('FixPlaysScroll');
if (scope.liveEventProcessing) {
scope.$emit('FixPlaysScroll');
}
};
}])
@ -960,7 +909,9 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Ge
}
scope.tasks = result;
scope.$emit('FixTasksScroll');
if (scope.liveEventProcessing) {
scope.$emit('FixTasksScroll');
}
};
}])
@ -991,7 +942,9 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Ge
}
}
scope.hostResults = result;
scope.$emit('FixHostResultsScroll');
if (scope.liveEventProcessing) {
scope.$emit('FixHostResultsScroll');
}
};
}])
@ -1022,7 +975,9 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Ge
}
}
scope.hosts = result;
scope.$emit('FixHostResultsScroll');
if (scope.liveEventProcessing) {
scope.$emit('FixHostSummariesScroll');
}
};
}])
@ -1066,7 +1021,7 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Ge
}, 500);
}
else {
scope.tasks = {};
scope.tasks = [];
scope.hostResults = [];
}
});
@ -1082,21 +1037,18 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Ge
.success(function(data) {
if (data.count > 0) {
data.results.forEach(function(row) {
if (row.parent) {
if (row.parent && scope.search_all_plays.indexOf(row.parent) < 0) {
scope.search_all_plays.push(row.parent);
}
});
if (scope.search_all_plays.length > 0) {
scope.search_all_plays.sort();
newActivePlay = scope.search_all_plays[scope.search_all_plays.length - 1];
newActivePlay = scope.search_all_plays[0];
}
else {
newActivePlay = null;
}
}
else {
scope.search_all_plays.push(0);
}
scope.$emit('AllPlaysReady');
})
.error(function(data, status) {
@ -1116,7 +1068,7 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Ge
.success(function(data) {
if (data.count > 0) {
data.results.forEach(function(row) {
if (row.parent) {
if (scope.search_all_tasks.indexOf(row.parent) < 0) {
scope.search_all_tasks.push(row.parent);
}
});

View File

@ -32,12 +32,14 @@ angular.module('AWFilters', [])
//
.filter('FilterById', [ function() {
return function(input, list) {
var results = {};
var results = [];
if (input && list.length > 0) {
list.forEach(function(row) {
if (input[row]) {
results[row] = input[row];
}
list.forEach(function(itm) {
input.forEach(function(row) {
if (row.id === itm) {
results.push(row);
}
});
});
return results;
}

View File

@ -50,10 +50,8 @@
</div>
</div>
<div id="plays-table-detail" aw-custom-scroll class="table-detail">
<div class="row cursor-pointer" ng-repeat="play in plays"
<div class="row cursor-pointer" ng-repeat="play in playList = (plays | FilterById : search_all_plays | filter:{ status : searchAllStatus }) track by $index"
ng-class="play.playActiveClass" ng-click="selectPlay(play.id)">
<!-- | 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 hidden-sm hidden-xs" aw-tool-tip="Completed at {{ play.finished | date:'HH:mm:ss' }}"
data-placement="top">{{ play.elapsed }}
@ -63,7 +61,7 @@
<i class="fa icon-job-{{ play.status }}"></i> {{ play.name }}</span>
</div>
</div>
<div class="row" ng-show="plays.length == 0">
<div class="row" ng-show="playList.length == 0">
<div class="col-lg-12">
<div class="loading-info">No matching plays</div>
</div>
@ -84,9 +82,8 @@
<div id="tasks-table-detail" class="table-detail" aw-custom-scroll data-on-total-scroll="TasksOnTotalScroll"
data-on-total-scroll-back="TasksOnTotalScrollBack">
<div class="row cursor-pointer"
ng-repeat="task in tasks"
ng-repeat="task in taskList = (tasks | FilterById : search_all_tasks | filter: { status : searchAllStatus }) track by $index"
ng-class="task.taskActiveClass" ng-click="selectTask(task.id)">
<!-- = (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 hidden-sm hidden-xs" aw-tool-tip="Completed at {{ task.finished | date:'HH:mm:ss' }}"
data-placement="top">{{ task.elapsed }}
@ -99,7 +96,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.length == 0">
<div class="row" ng-show="taskList.length == 0">
<div class="col-lg-12">
<div class="loading-info">No matching tasks</div>
</div>
@ -119,7 +116,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 hostResults">
<div class="row" ng-repeat="result in results = (hostResults | filter:{ status : searchAllStatus}) track by $index">
<!-- 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>
@ -128,7 +125,7 @@
{{ result.msg }}
</div>
</div>
<div class="row" ng-show="hostResults.length == 0">
<div class="row" ng-show="results.length == 0">
<div class="col-lg-12">
<div class="loading-info">No matching hosts</div>
</div>
@ -191,7 +188,7 @@
</div>
<div id="hosts-summary-table" class="table-detail" aw-custom-scroll data-on-total-scroll="HostSummaryOnTotalScroll"
data-on-total-scroll-back="HostSummaryOnTotalScrollBack">
<div class="row" ng-repeat="host in hosts" id="{{ host.id }}">
<div class="row" ng-repeat="host in summaryList = (hosts | filter:{ status : searchAllStatus}) track by $index" id="{{ host.id }}">
<div class="name col-lg-6 col-md-6 col-sm-6 col-xs-6"><a href="/#/home/hosts/?id={{ host.id }}"
aw-tool-tip="Click to edit host" data-placement="top">{{ host.name }}</a>
</div>
@ -202,7 +199,7 @@
<a href="" aw-tool-tip="Failed" data-placement="top" ng-hide="host.failed == 0"><span class="badge failed-hosts">{{ host.failed }}</span></a>
</div>
</div>
<div class="row" ng-show="hosts.length === 0">
<div class="row" ng-show="summaryList.length === 0">
<div class="col-lg-12">
<div class="loading-info">No matching hosts</div>
</div>