External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-05-18 06:47:41 -02:30
Code Issues Packages Projects Releases Wiki Activity

Job detail page refactor

Browse Source 
Wired filters up again. Fixed Host Summary section to refresh without first needed to be completely cleared.
This commit is contained in:
Chris Houseknecht
2014-06-16 14:31:35 -04:00
parent 9c11145914
commit 1c57d7f949
5 changed files with 131 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
awx/ui/static/js/app.js
View File

@@ -432,10 +432,6 @@ angular.module('Tower', [
HideStream(); HideStream();
} }
if ($rootScope.myInterval) {
window.clearInterval($rootScope.myInterval);
}
// On each navigation request, check that the user is logged in // On each navigation request, check that the user is logged in
if (!/^\/(login|logout)/.test($location.path())) { if (!/^\/(login|logout)/.test($location.path())) {
// capture most recent URL, excluding login/logout // capture most recent URL, excluding login/logout

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

@@ -652,7 +652,7 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
*/ */
scope.searchAllByHost = function() { scope.searchAllByHost = function() {
var nxtPlay; var keys, nxtPlay;
if (scope.search_all_hosts_name) { if (scope.search_all_hosts_name) {
FilterAllByHostName({ FilterAllByHostName({
scope: scope, scope: scope,
@@ -664,15 +664,17 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
scope.search_all_tasks = []; scope.search_all_tasks = [];
scope.search_all_plays = []; scope.search_all_plays = [];
scope.searchAllHostsEnabled = true; scope.searchAllHostsEnabled = true;
nxtPlay = scope.plays[scope.plays.length - 1].id; keys = Object.keys(scope.plays);
nxtPlay = (keys.length > 0) ? keys[keys.length - 1] : null;
SelectPlay({ SelectPlay({
scope: scope, scope: scope,
id: nxtPlay id: nxtPlay
}); });
ReloadHostSummaryList({
scope: scope
});
} }
ReloadHostSummaryList({
scope: scope
});
}; };
scope.allHostNameKeyPress = function(e) { scope.allHostNameKeyPress = function(e) {

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

@@ -605,8 +605,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; clear = false;
clear = (scope.activePlay === id) ? false : true; //are we moving to a new play?
// Determine if the tasks and hostResults arrays should be initialized
if (scope.search_all_hosts_name || scope.searchAllStatus === 'failed') {
clear = true;
}
else {
clear = (scope.activePlay === id) ? false : true; //are we moving to a new play?
}
if (scope.plays[scope.activePlay]) { if (scope.plays[scope.activePlay]) {
scope.plays[scope.activePlay].playActiveClass = ''; scope.plays[scope.activePlay].playActiveClass = '';
} }
@@ -615,11 +623,16 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Se
} }
scope.activePlay = id; scope.activePlay = id;
LoadTasks({ setTimeout(function() {
scope: scope, scope.$apply(function() {
callback: callback, LoadTasks({
clear: clear scope: scope,
callback: callback,
clear: clear
});
});
}); });
}; };
}]) }])
@@ -630,6 +643,10 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Se
clear = params.clear, clear = params.clear,
url, tIds, lastId; url, tIds, lastId;
if (clear) {
scope.tasks = {};
}
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;
// job_tasks seems to ignore all query predicates other than event_id // job_tasks seems to ignore all query predicates other than event_id
@@ -641,13 +658,10 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Se
Rest.setUrl(url); Rest.setUrl(url);
Rest.get() Rest.get()
.success(function(data) { .success(function(data) {
if (clear) {
scope.tasks = {};
}
data.forEach(function(event, idx) { data.forEach(function(event, idx) {
var end, elapsed; var end, elapsed;
if ((!scope.searchAllStatus) || (scope.searchAllStatus === 'failed' && event.failed) && if ((!scope.searchAllStatus) || (scope.searchAllStatus === 'failed' && event.failed) &&
((scope.search_all_tasks.length === 0) || (scope.searchAllTasks.indexOf(event.id)))) { ((!scope.search_all_hosts_name) || (scope.search_all_hosts_name && scope.search_all_tasks.indexOf(event.id)))) {
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
@@ -709,11 +723,15 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Se
} }
else { else {
// set the active task // set the active task
tIds = Object.keys(scope.tasks); //tIds = Object.keys(scope.tasks);
lastId = (tIds.length > 0) ? tIds[tIds.length - 1] : null; //lastId = (tIds.length > 0) ? tIds[tIds.length - 1] : null;
//console.log('selecting task: ' + lastId);
//console.log('tasks: ');
//console.log(scope.tasks);
scope.tasks = {};
SelectTask({ SelectTask({
scope: scope, scope: scope,
id: lastId, id: null,
callback: callback callback: callback
}); });
} }
@@ -726,8 +744,14 @@ 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; clear=false;
clear = (scope.activeTask === id) ? false : true;
if (scope.search_all_hosts_name || scope.searchAllStatus === 'failed') {
clear = true;
}
else {
clear = (scope.activeTask === id) ? false : true;
}
if (scope.activeTask && scope.tasks[scope.activeTask]) { if (scope.activeTask && scope.tasks[scope.activeTask]) {
scope.tasks[scope.activeTask].taskActiveClass = ''; scope.tasks[scope.activeTask].taskActiveClass = '';
@@ -760,10 +784,12 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Se
callback = params.callback, callback = params.callback,
clear = params.clear, clear = params.clear,
url; url;
if (clear) { if (clear) {
scope.hostResults = []; scope.hostResults = [];
scope.hostResultsMap = {}; scope.hostResultsMap = {};
} }
if (scope.activeTask) { if (scope.activeTask) {
// If we have a selected task, then get the list of hosts // If we have a selected task, then get the list of hosts
url = scope.job.related.job_events + '?parent=' + scope.activeTask + '&'; url = scope.job.related.job_events + '?parent=' + scope.activeTask + '&';
@@ -796,6 +822,8 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Se
}); });
} }
else { else {
scope.hostResults = [];
scope.hostResultsMap = {};
if (callback) { if (callback) {
scope.$emit(callback); scope.$emit(callback);
} }
@@ -821,25 +849,39 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Se
var scope = params.scope, var scope = params.scope,
callback = params.callback, callback = params.callback,
url; url;
scope.hosts = [];
scope.hostsMap = {};
url = scope.job.related.job_host_summaries + '?'; url = scope.job.related.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 += 'page_size=' + scope.hostSummaryTableRows + '&order_by=host__name'; 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 = {};
}
Rest.setUrl(url); Rest.setUrl(url);
Rest.get() Rest.get()
.success(function(data) { .success(function(data) {
data.results.forEach(function(event) { data.results.forEach(function(event) {
scope.hosts.push({ if (scope.hostsMap[event.host]) {
id: event.host, scope.hosts[scope.hostsMap[event.host]].ok = event.ok;
name: event.summary_fields.host.name, scope.hosts[scope.hostsMap[event.host]].changed = event.changed;
ok: event.ok, scope.hosts[scope.hostsMap[event.host]].dark = event.dark;
changed: event.changed, scope.hosts[scope.hostsMap[event.host]].failures = event.failures;
unreachable: event.dark, }
failed: event.failures else {
}); scope.hosts.push({
scope.hostsMap[event.id] = scope.hosts.length - 1; 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;
}
}); });
$('#hosts-summary-table').mCustomScrollbar("update"); $('#hosts-summary-table').mCustomScrollbar("update");
if (callback) { if (callback) {
@@ -957,33 +999,40 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Se
scope.removeAllTasksReady(); scope.removeAllTasksReady();
} }
scope.removeAllTasksReady = scope.$on('AllTasksReady', function() { scope.removeAllTasksReady = scope.$on('AllTasksReady', function() {
url = scope.job.related.job_events + '?id__in=' + scope.search_all_tasks.join(); if (scope.search_all_tasks.length > 0) {
Rest.setUrl(url); url = scope.job.related.job_events + '?id__in=' + scope.search_all_tasks.join();
Rest.get() Rest.setUrl(url);
.success(function(data) { Rest.get()
if (data.count > 0) { .success(function(data) {
data.results.forEach(function(row) { if (data.count > 0) {
if (row.parent) { data.results.forEach(function(row) {
scope.search_all_plays.push(row.parent); if (row.parent) {
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];
}
else {
newActivePlay = null;
} }
});
if (scope.search_all_plays.length > 0) {
scope.search_all_plays.sort();
newActivePlay = scope.search_all_plays[scope.search_all_plays.length - 1];
} }
else { else {
newActivePlay = null; scope.search_all_plays.push(0);
} }
} scope.$emit('AllPlaysReady');
else { })
scope.search_all_plays.push(0); .error(function(data, status) {
} ProcessErrors(scope, data, status, null, { hdr: 'Error!',
scope.$emit('AllPlaysReady'); msg: 'Call to ' + url + '. GET returned: ' + status });
}) });
.error(function(data, status) { }
ProcessErrors(scope, data, status, null, { hdr: 'Error!', else {
msg: 'Call to ' + url + '. GET returned: ' + status }); newActivePlay = null;
}); scope.search_all_plays.push(0);
scope.$emit('AllPlaysReady');
}
}); });
Rest.setUrl(url); Rest.setUrl(url);
@@ -999,9 +1048,6 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Se
scope.search_all_tasks.sort(); scope.search_all_tasks.sort();
} }
} }
else {
scope.search_all_tasks.push(0);
}
scope.$emit('AllTasksReady'); scope.$emit('AllTasksReady');
}) })
.error(function(data, status) { .error(function(data, status) {

22
awx/ui/static/lib/ansible/filters.js
View File

@@ -43,4 +43,26 @@ angular.module('AWFilters', [])
} }
return input; return input;
}; };
}])
.filter('FilterByField', [ function() {
return function(input, list) {
var fld, key, search = {}, results = {};
for (fld in list) {
if (list[fld]) {
search[fld] = list[fld];
}
}
if (Object.keys(search).length > 0) {
for (fld in search) {
for (key in input) {
if (input[key][fld] === search[fld]) {
results[key] = input[key];
}
}
}
return results;
}
return input;
};
}]); }]);

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

@@ -52,7 +52,7 @@
</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 | filter:{ status : searchAllStatus }) track by play_id" <div class="row cursor-pointer" ng-repeat="(play_id, play) in playList = (plays | FilterById : search_all_plays | FilterByField: { status : searchAllStatus }) track by play_id"
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} -->
@@ -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="!playList"> <div class="row" ng-show="objectIsEmpty(playList)">
<div class="col-lg-12"> <div class="col-lg-12">
<div class="loading-info">No plays matched</div> <div class="loading-info">No plays matched</div>
</div> </div>
@@ -160,8 +160,8 @@
<input type="text" class="input-sm form-control" id="search_all_hosts_name" ng-model="search_all_hosts_name" <input type="text" class="input-sm form-control" id="search_all_hosts_name" ng-model="search_all_hosts_name"
placeholder="Host Name" ng-disabled="searchAllDisabled" ng-keypress="allHostNameKeyPress($event)" /> placeholder="Host Name" ng-disabled="searchAllDisabled" ng-keypress="allHostNameKeyPress($event)" />
<div id="search-all-input-icons"> <div id="search-all-input-icons">
<a class="search-icon" ng-show="searchAllHostsEnabled" ng-click="searchAllHosts()"><i class="fa fa-search"></i></a> <a class="search-icon" ng-show="searchAllHostsEnabled" ng-click="searchAllByHost()"><i class="fa fa-search"></i></a>
<a class="search-icon" ng-show="!searchAllHostsEnabled" ng-click="search_all_hosts_name=''; searchAllHosts()"><i class="fa fa-times"></i></a> <a class="search-icon" ng-show="!searchAllHostsEnabled" ng-click="search_all_hosts_name=''; searchAllByHost()"><i class="fa fa-times"></i></a>
</div> </div>
</div> </div>
</div> </div>