From e6cf440511353653e9ed36cb118a38aefcb1b567 Mon Sep 17 00:00:00 2001 From: Chris Houseknecht Date: Fri, 20 Jun 2014 12:59:11 -0400 Subject: [PATCH] Job detail page refactor Fixed page filtering. Made tasks and plays selectable again. --- awx/ui/static/js/controllers/JobDetail.js | 9 +- awx/ui/static/js/helpers/JobDetail.js | 230 +++++++++------------- awx/ui/static/lib/ansible/filters.js | 12 +- awx/ui/static/partials/job_detail.html | 19 +- 4 files changed, 109 insertions(+), 161 deletions(-) diff --git a/awx/ui/static/js/controllers/JobDetail.js b/awx/ui/static/js/controllers/JobDetail.js index a981480d50..1d12160247 100644 --- a/awx/ui/static/js/controllers/JobDetail.js +++ b/awx/ui/static/js/controllers/JobDetail.js @@ -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 }); } diff --git a/awx/ui/static/js/helpers/JobDetail.js b/awx/ui/static/js/helpers/JobDetail.js index 30101f77f1..9954481e23 100644 --- a/awx/ui/static/js/helpers/JobDetail.js +++ b/awx/ui/static/js/helpers/JobDetail.js @@ -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); } }); diff --git a/awx/ui/static/lib/ansible/filters.js b/awx/ui/static/lib/ansible/filters.js index 0ddb47a41b..066ec54397 100644 --- a/awx/ui/static/lib/ansible/filters.js +++ b/awx/ui/static/lib/ansible/filters.js @@ -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; } diff --git a/awx/ui/static/partials/job_detail.html b/awx/ui/static/partials/job_detail.html index 40525d2e36..86d1442790 100644 --- a/awx/ui/static/partials/job_detail.html +++ b/awx/ui/static/partials/job_detail.html @@ -50,10 +50,8 @@
-
- -
-
+
No matching plays
@@ -84,9 +82,8 @@
-
-
+
No matching tasks
@@ -119,7 +116,7 @@
-
+
{{ result.name }} @@ -128,7 +125,7 @@ {{ result.msg }}
-
+
No matching hosts
@@ -191,7 +188,7 @@
-
+
{{ host.name }}
@@ -202,7 +199,7 @@ {{ host.failed }}
-
+
No matching hosts