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

refactor Event Summary view to resolve #1245

Browse Source
This commit is contained in:
Leigh Johnson
2016-04-08 13:19:02 -04:00
parent ae83934145
commit 2a5a97fc35
9 changed files with 227 additions and 443 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
awx/ui/client/legacy-styles/job-details.less
View File

@@ -503,7 +503,7 @@
} }
#graph-section svg{ #graph-section svg{
margin-top: 15px; margin: 0 auto;
} }
path.slice{ path.slice{

211
awx/ui/client/src/helpers/JobDetail.js
View File

@@ -40,9 +40,9 @@ export default
angular.module('JobDetailHelper', ['Utilities', 'RestServices', 'ModalDialog']) angular.module('JobDetailHelper', ['Utilities', 'RestServices', 'ModalDialog'])
.factory('DigestEvent', ['$rootScope', '$log', 'UpdatePlayStatus', 'UpdateHostStatus', 'AddHostResult', .factory('DigestEvent', ['$rootScope', '$log', 'UpdatePlayStatus', 'UpdateHostStatus', 'AddHostResult',
'GetElapsed', 'UpdateTaskStatus', 'DrawGraph', 'LoadHostSummary', 'JobIsFinished', 'AddNewTask', 'AddNewPlay', 'GetElapsed', 'UpdateTaskStatus', 'JobIsFinished', 'AddNewTask', 'AddNewPlay',
function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, GetElapsed, function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, GetElapsed,
UpdateTaskStatus, DrawGraph, LoadHostSummary, JobIsFinished, AddNewTask, AddNewPlay) { UpdateTaskStatus, JobIsFinished, AddNewTask, AddNewPlay) {
return function(params) { return function(params) {
var scope = params.scope, var scope = params.scope,
@@ -185,7 +185,7 @@ export default
}; };
}]) }])
.factory('GetElapsed', [ function() { .factory('GetElapsed', ['moment', function(moment) {
return function(params) { return function(params) {
var start = params.start, var start = params.start,
end = params.end, end = params.end,
@@ -299,7 +299,7 @@ export default
}; };
}]) }])
.factory('AddNewTask', ['DrawGraph', 'UpdatePlayStatus', 'SetActivePlay', 'SetActiveTask', function(DrawGraph, UpdatePlayStatus, SetActivePlay, SetActiveTask) { .factory('AddNewTask', ['UpdatePlayStatus', 'SetActivePlay', 'SetActiveTask', function(UpdatePlayStatus, SetActivePlay, SetActiveTask) {
return function(params) { return function(params) {
var scope = params.scope, var scope = params.scope,
event = params.event, event = params.event,
@@ -351,7 +351,7 @@ export default
}; };
}]) }])
.factory('UpdateJobStatus', ['GetElapsed', 'Empty', 'JobIsFinished', function(GetElapsed, Empty, JobIsFinished) { .factory('UpdateJobStatus', ['moment', 'GetElapsed', 'Empty', 'JobIsFinished', function(moment, GetElapsed, Empty, JobIsFinished) {
return function(params) { return function(params) {
var scope = params.scope, var scope = params.scope,
failed = params.failed, failed = params.failed,
@@ -363,15 +363,15 @@ export default
scope.job_status.status = 'failed'; scope.job_status.status = 'failed';
} }
if (JobIsFinished(scope) && !Empty(modified)) { if (JobIsFinished(scope) && !Empty(modified)) {
scope.job_status.finished = modified; scope.job_status.finished = moment(modified).format('l');
} }
if (!Empty(started) && Empty(scope.job_status.started)) { if (!Empty(started) && Empty(scope.job_status.started)) {
scope.job_status.started = started; scope.job_status.started = moment(started).format('l');
} }
if (!Empty(scope.job_status.finished) && !Empty(scope.job_status.started)) { if (!Empty(scope.job_status.finished) && !Empty(scope.job_status.started)) {
scope.job_status.elapsed = GetElapsed({ scope.job_status.elapsed = GetElapsed({
start: scope.job_status.started, start: started,
end: scope.job_status.finished end: finished
}); });
} }
}; };
@@ -959,127 +959,39 @@ export default
}; };
}]) }])
// Refresh the list of hosts in the hosts summary section
.factory('ReloadHostSummaryList', ['Rest', 'ProcessErrors', function(Rest, ProcessErrors) {
return function(params) {
var scope = params.scope,
callback = params.callback,
url;
url = scope.job.related.job_host_summaries + '?';
url += (scope.search_host_summary_name) ? 'host_name__icontains=' + scope.search_host_summary_name + '&': '';
url += (scope.search_host_summary_status === 'failed') ? 'failed=true&' : '';
url += '&page_size=' + scope.hostSummariesMaxRows + '&order=host_name';
scope.hosts = [];
scope.hostSummariesLoading = true;
Rest.setUrl(url);
Rest.get()
.success(function(data) {
scope.next_host_summaries = data.next;
scope.hosts = [];
data.results.forEach(function(event) {
var name;
if (event.host_name) {
name = event.host_name;
}
else {
name = "<deleted host>";
}
scope.hosts.push({
id: name,
name: event.host_name,
ok: event.ok,
changed: event.changed,
unreachable: event.dark,
failed: event.failures,
status: (event.failed) ? 'failed' : 'successful'
});
});
scope.hostSummariesLoading = false;
if (callback) {
scope.$emit(callback);
}
})
.error(function(data, status) {
ProcessErrors(scope, data, status, null, { hdr: 'Error!',
msg: 'Call to ' + url + '. GET returned: ' + status });
});
};
}])
.factory('LoadHostSummary', [ function() {
return function(params) {
var scope = params.scope,
data = params.data,
host;
scope.host_summary.ok = 0;
for (host in data.ok) {
if (!data.changed[host] && !data.dark[host] && !data.failures[host]) {
scope.host_summary.ok += 1;
}
}
scope.host_summary.changed = 0;
for (host in data.changed) {
if (!data.dark[host] && !data.failures[host]) {
scope.host_summary.changed += 1;
}
}
scope.host_summary.unreachable = 0;
for (host in data.dark) {
scope.host_summary.unreachable += 1;
}
scope.host_summary.failed = 0;
for (host in data.failures) {
scope.host_summary.failed += 1;
}
scope.host_summary.total = scope.host_summary.ok + scope.host_summary.changed +
scope.host_summary.unreachable + scope.host_summary.failed;
};
}])
.factory('DrawGraph', ['DonutChart', function(DonutChart) { .factory('DrawGraph', ['DonutChart', function(DonutChart) {
return function(params) { return function(params) {
var scope = params.scope, var count = params.count,
graph_data = []; graph_data = [];
// Ready the data // Ready the data
if (scope.host_summary.ok) { if (count.ok.length > 0) {
graph_data.push({ graph_data.push({
label: 'OK', label: 'OK',
value: scope.host_summary.ok, value: count.ok.length,
color: '#60D66F' color: '#60D66F'
}); });
} }
if (scope.host_summary.changed) { if (count.changed.length > 0) {
graph_data.push({ graph_data.push({
label: 'CHANGED', label: 'CHANGED',
value: scope.host_summary.changed, value: count.changed.length,
color: '#FF9900' color: '#FF9900'
}); });
} }
if (scope.host_summary.unreachable) { if (count.unreachable.length > 0) {
graph_data.push({ graph_data.push({
label: 'UNREACHABLE', label: 'UNREACHABLE',
value: scope.host_summary.unreachable, value: count.unreachable.length,
color: '#FF0000' color: '#FF0000'
}); });
} }
if (scope.host_summary.failed) { if (count.failed.length > 0) {
graph_data.push({ graph_data.push({
label: 'FAILED', label: 'FAILED',
value: scope.host_summary.failed, value: count.failed.length,
color: '#ff5850' color: '#ff5850'
}); });
} }
scope.graph_data = graph_data;
var total_count = 0, gd_obj;
for (gd_obj in graph_data) {
total_count += graph_data[gd_obj].value;
}
scope.total_count_for_graph = total_count;
DonutChart({ DonutChart({
data: graph_data data: graph_data
}); });
@@ -1121,44 +1033,42 @@ export default
"font-family": 'Open Sans', "font-family": 'Open Sans',
"font-style": "normal", "font-style": "normal",
"font-weight":400, "font-weight":400,
"src": "url(/static/assets/OpenSans-Regular.ttf)" "src": "url(/static/assets/OpenSans-Regular.ttf)",
"width": 500,
"height": 300,
}); });
d3.select(element.find(".nv-label text")[0]) d3.select(element.find(".nv-label text")[0])
.attr("class", "DashboardGraphs-hostStatusLabel--successful") .attr("class", "HostSummary-graph--successful")
.style({ .style({
"font-family": 'Open Sans', "font-family": 'Open Sans',
"text-anchor": "start",
"font-size": "16px", "font-size": "16px",
"text-transform" : "uppercase", "text-transform" : "uppercase",
"fill" : colors[0], "fill" : colors[0],
"src": "url(/static/assets/OpenSans-Regular.ttf)" "src": "url(/static/assets/OpenSans-Regular.ttf)"
}); });
d3.select(element.find(".nv-label text")[1]) d3.select(element.find(".nv-label text")[1])
.attr("class", "DashboardGraphs-hostStatusLabel--failed") .attr("class", "HostSummary-graph--changed")
.style({ .style({
"font-family": 'Open Sans', "font-family": 'Open Sans',
"text-anchor" : "end !imporant",
"font-size": "16px", "font-size": "16px",
"text-transform" : "uppercase", "text-transform" : "uppercase",
"fill" : colors[1], "fill" : colors[1],
"src": "url(/static/assets/OpenSans-Regular.ttf)" "src": "url(/static/assets/OpenSans-Regular.ttf)"
}); });
d3.select(element.find(".nv-label text")[2]) d3.select(element.find(".nv-label text")[2])
.attr("class", "DashboardGraphs-hostStatusLabel--successful") .attr("class", "HostSummary-graph--failed")
.style({ .style({
"font-family": 'Open Sans', "font-family": 'Open Sans',
"text-anchor" : "end !imporant",
"font-size": "16px", "font-size": "16px",
"text-transform" : "uppercase", "text-transform" : "uppercase",
"fill" : colors[2], "fill" : colors[2],
"src": "url(/static/assets/OpenSans-Regular.ttf)" "src": "url(/static/assets/OpenSans-Regular.ttf)"
}); });
d3.select(element.find(".nv-label text")[3]) d3.select(element.find(".nv-label text")[3])
.attr("class", "DashboardGraphs-hostStatusLabel--failed") .attr("class", "HostSummary-graph--unreachable")
.style({ .style({
"font-family": 'Open Sans', "font-family": 'Open Sans',
"text-anchor" : "end !imporant",
"font-size": "16px", "font-size": "16px",
"text-transform" : "uppercase", "text-transform" : "uppercase",
"fill" : colors[3], "fill" : colors[3],
@@ -1399,68 +1309,8 @@ export default
}; };
}]) }])
.factory('DrawHostSummaries', [ function() { .factory('UpdateDOM', ['DrawPlays', 'DrawTasks', 'DrawHostResults',
return function(params) { function(DrawPlays, DrawTasks, DrawHostResults) {
var scope = params.scope,
result = [],
filteredListA = [],
filteredListB = [],
idx = 0,
hostSummaries,
key,
keys = Object.keys(scope.jobData.hostSummaries);
if (keys.length > 0) {
hostSummaries = JSON.parse(JSON.stringify(scope.jobData.hostSummaries));
if (scope.search_host_summary_name) {
for (key in hostSummaries) {
if (hostSummaries[key].name.indexOf(scope.search_host_summary_name) > 0) {
filteredListA[key] = hostSummaries[key];
}
}
}
else {
filteredListA = hostSummaries;
}
if (scope.search_host_summary_status === 'failed') {
for (key in filteredListA) {
if (filteredListA[key].status === 'failed' || filteredListA[key].status === 'unreachable') {
filteredListB[key] = filteredListA[key];
}
}
}
else {
filteredListB = filteredListA;
}
keys = Object.keys(filteredListB);
keys.sort(function(a,b) {
if (filteredListB[a].name > filteredListB[b].name) {
return 1;
}
if (filteredListB[a].name < filteredListB[b].name) {
return -1;
}
// a must be equal to b
return 0;
});
while (idx < keys.length && result.length < scope.hostSummariesMaxRows) {
result.push(filteredListB[keys[idx]]);
idx++;
}
}
setTimeout( function() {
scope.$apply( function() {
scope.hosts = result;
});
});
};
}])
.factory('UpdateDOM', ['DrawPlays', 'DrawTasks', 'DrawHostResults', 'DrawHostSummaries', 'DrawGraph',
function(DrawPlays, DrawTasks, DrawHostResults, DrawHostSummaries, DrawGraph) {
return function(params) { return function(params) {
var scope = params.scope; var scope = params.scope;
if (!scope.pauseLiveEvents) { if (!scope.pauseLiveEvents) {
@@ -1469,17 +1319,10 @@ export default
DrawHostResults({ scope: scope }); DrawHostResults({ scope: scope });
} }
DrawHostSummaries({ scope: scope });
setTimeout(function() { setTimeout(function() {
scope.playsLoading = false; scope.playsLoading = false;
scope.tasksLoading = false; scope.tasksLoading = false;
scope.hostResultsLoading = false; scope.hostResultsLoading = false;
scope.LoadHostSummaries = false;
},100); },100);
if (scope.host_summary.total > 0) {
DrawGraph({ scope: scope, resize: true });
}
}; };
}]); }]);

6
awx/ui/client/src/helpers/JobSubmission.js
View File

@@ -752,9 +752,9 @@ function($compile, Rest, GetBasePath, TextareaResize,CreateDialog, GenerateForm,
* *
*/ */
// Submit request to run a playbook // Submit request to run a playbook
.factory('PlaybookRun', ['$location','$stateParams', 'LaunchJob', 'PromptForPasswords', 'Rest', 'GetBasePath', 'Alert', 'ProcessErrors', 'Wait', 'Empty', .factory('PlaybookRun', ['$location', '$state', '$stateParams', 'LaunchJob', 'PromptForPasswords', 'Rest', 'GetBasePath', 'Alert', 'ProcessErrors', 'Wait', 'Empty',
'PromptForCredential', 'PromptForVars', 'PromptForSurvey' , 'CreateLaunchDialog', 'PromptForCredential', 'PromptForVars', 'PromptForSurvey' , 'CreateLaunchDialog',
function ($location, $stateParams, LaunchJob, PromptForPasswords, Rest, GetBasePath, Alert, ProcessErrors, Wait, Empty, function ($location, $state, $stateParams, LaunchJob, PromptForPasswords, Rest, GetBasePath, Alert, ProcessErrors, Wait, Empty,
PromptForCredential, PromptForVars, PromptForSurvey, CreateLaunchDialog) { PromptForCredential, PromptForVars, PromptForSurvey, CreateLaunchDialog) {
return function (params) { return function (params) {
var //parent_scope = params.scope, var //parent_scope = params.scope,
@@ -803,8 +803,8 @@ function($compile, Rest, GetBasePath, TextareaResize,CreateDialog, GenerateForm,
var job = data.job || data.system_job; var job = data.job || data.system_job;
if((scope.portalMode===false || scope.$parent.portalMode===false ) && Empty(data.system_job) || if((scope.portalMode===false || scope.$parent.portalMode===false ) && Empty(data.system_job) ||
(base === 'home')){ (base === 'home')){
$location.path('/jobs/' + job);
// use $state.go with reload: true option to re-instantiate sockets in // use $state.go with reload: true option to re-instantiate sockets in
$state.go('jobDetail', {id: job}, {reload: true})
} }
}); });

0
awx/ui/client/src/job-detail/host-summary/host-summary-factory.js
View File

10
awx/ui/client/src/job-detail/host-summary/host-summary.block.less Normal file
View File

@@ -0,0 +1,10 @@
.HostSummary-graph--successful{
text-anchor: start !important;
}
.HostSummary-graph--failed{
text-anchor: end !important;
}
.HostSummary-graph--changed{
text-anchor: end !important;
}
.HostSUmmary-graph--unreachable{}

147
awx/ui/client/src/job-detail/host-summary/host-summary.controller.js
View File

@@ -5,49 +5,114 @@
*************************************************/ *************************************************/
export default export default
['$scope', '$rootScope', '$stateParams', 'JobDetailService', 'jobSocket', function($scope, $rootScope, $stateParams, JobDetailService, jobSocket){ ['$scope', '$rootScope', '$stateParams', 'Wait', 'JobDetailService', 'jobSocket', 'DrawGraph', function($scope, $rootScope, $stateParams, Wait, JobDetailService, jobSocket, DrawGraph){
// the job_events socket should be substituted for a job_host_summary socket post 3.0
var page_size = 200; var page_size = 200;
var socketListener = function(){
console.log(jobSocket)
jobSocket.on('summary_complete', function(data) {
JobDetailService.getJob($stateParams.id).success(function(res){
console.log('job at summary_complete.', res)
});
});
jobSocket.on('status_changed', function(data) {
JobDetailService.getJob($stateParams.id).success(function(res){
console.log('job at data.stats.', data.status, res)
});
JobDetailService.getJobHostSummaries($stateParams.id, {}).success(function(res){
console.log('jobhostSummaries at summary_complete.', data.status, res)
});
});
}
$scope.loading = $scope.hosts.length > 0 ? false : true;
$scope.done = true;
$scope.events = [];
$scope.$watchCollection('events', function(c){
var filtered = $scope.events.filter(function(event){
return ((event.failed || event.changed ||
'runner_on_ok' || 'runner_on_async_ok' ||
'runner_on_unreachable' || 'runner_on_skipped')
&& event.host_name != '');
});
var grouped = _.groupBy(filtered, 'host_name');
//$scope.hosts =
});
$scope.loading = $scope.hosts.length > 0 ? false : true;
$scope.filter = 'all';
$scope.search = null;
$scope.search = function(host_name){}; var buildTooltips = function(hosts){
$scope.filter = function(filter){}; var count = {
ok : _.filter(hosts, function(o){
var init = function(){ return o.changed === 0 && o.ok > 0;
socketListener(); }),
JobDetailService.getJobHostSummaries($stateParams.id, {}).success(function(res){ skipped : _.filter(hosts, function(o){
console.log('jobhostSummaries at init.', res) return o.skipped > 0;
}); }),
unreachable : _.filter(hosts, function(o){
return o.dark > 0;
}),
failed : _.filter(hosts, function(o){
return o.failed === true;
}),
changed : _.filter(hosts, function(o){
return o.changed > 0;
})
};
var tooltips = {
0: 'No host events were ',
1: ' host event was ',
2: ' host events were '
};
return {count, tooltips}
}; };
init(); var socketListener = function(){
}]; // emitted by the API in the same function used to persist host summary data
// JobEvent.update_host_summary_from_stats() from /awx/main.models.jobs.py
jobSocket.on('summary_complete', function(data) {
// discard socket msgs we don't care about in this context
if ($stateParams.id === data['unified_job_id']){
JobDetailService.getJobHostSummaries($stateParams.id, {page_size: page_size})
.success(function(res){
init()
});
}
});
// UnifiedJob.def socketio_emit_status() from /awx/main.models.unified_jobs.py
jobSocket.on('status_changed', function(data) {
if ($stateParams.id === data['unified_job_id']){
$scope.status = data['status'];
}
});
};
$scope.search = function(){
Wait('start')
JobDetailService.getJobHostSummaries($stateParams.id, {
page_size: page_size,
host_name__icontains: $scope.searchTerm,
}).success(function(res){
$scope.hosts = res.results;
$scope.next = res.next;
Wait('stop')
})
};
$scope.setFilter = function(filter){
$scope.filter = filter;
var getAll = function(){
Wait('start');
JobDetailService.getJobHostSummaries($stateParams.id, {
page_size: page_size
}).success(function(res){
Wait('stop')
$scope.hosts = res.results;
$scope.next = res.next;
});
};
var getFailed = function(){
Wait('start');
JobDetailService.getJobHostSummaries($stateParams.id, {
page_size: page_size,
failed: true
}).success(function(res){
Wait('stop')
$scope.hosts = res.results;
$scope.next = res.next;
});
}
var get = filter == 'all' ? getAll() : getFailed()
};
$scope.$watchCollection('hosts', function(curr, prev){
$scope.tooltips = buildTooltips(curr);
DrawGraph({count: $scope.tooltips.count, resize:true});
});
var init = function(){
Wait('start');
JobDetailService.getJobHostSummaries($stateParams.id, {page_size: page_size})
.success(function(res){
$scope.hosts = res.results;
$scope.next = res.next;
Wait('stop');
});
JobDetailService.getJob($stateParams.id)
.success(function(res){
$scope.status = status;
});
};
socketListener();
init();
}];

123
awx/ui/client/src/job-detail/host-summary/host-summary.partial.html
View File

@@ -1,66 +1,71 @@
<div id="hosts-summary-section" class="section"> <div id="hosts-summary-section" class="section">
<div class="JobDetail-searchHeaderRow">
<div class="JobDetail-searchContainer form-group">
<div class="search-name">
<form ng-submit="search()">
<input type="text" class="JobDetail-searchInput form-control List-searchInput" id="search_host_summary_name" ng-model="searchTerm" placeholder="Host Name" />
<a class="List-searchInputIcon search-icon" ng-click="search()"><i class="fa fa-search"></i></a>
<div class="JobDetail-searchHeaderRow"> </form>
<div class="JobDetail-searchContainer form-group"> </div>
<div class="search-name"> </div>
<input type="text" class="JobDetail-searchInput form-control List-searchInput" id="search_host_summary_name" ng-model="search_host_summary_name" placeholder="Host Name" ng-keypress="searchHostSummaryKeyPress($event)" > <div class="JobDetail-tableToggleContainer form-group">
<a class="List-searchInputIcon search-icon" ng-show="searchHostSummaryEnabled" ng-click="searchHostSummary()"><i class="fa fa-search"></i></a> <div class="btn-group" >
<a class="List-searchInputIcon search-icon" ng-show="!searchHostSummaryEnabled" ng-click="search_host_summary_name=''; searchHostSummary()"><i class="fa fa-times"></i></a> <button
</div> ng-click="setFilter('all')"
</div> class="JobDetail-tableToggle btn btn-xs" ng-class="{'btn-default': filter == 'failed', 'btn-primary': filter == 'all'}">All</button>
<div class="JobDetail-tableToggleContainer form-group"> <button ng-click="setFilter('failed')"
<div class="btn-group" aw-toggle-button data-after-toggle="filterHostSummaryStatus"> ng-class="{'btn-default': filter == 'all', 'btn-primary': filter == 'failed'}" class="JobDetail-tableToggle btn btn-xs">Failed</button>
<button class="JobDetail-tableToggle btn btn-xs btn-primary active">All</button> </div>
<button class="JobDetail-tableToggle btn btn-xs btn-default">Failed</button> </div>
</div> </div>
</div>
</div>
<div class="table-header"> <div class="table-header">
<table class="table table-condensed"> <table class="table table-condensed">
<thead> <thead>
<tr> <tr>
<th class="List-tableHeader col-lg-6 col-md-6 col-sm-6 col-xs-6">Hosts</th> <th class="List-tableHeader col-lg-6 col-md-6 col-sm-6 col-xs-6">Hosts</th>
<th class="List-tableHeader JobDetail-tableHeader col-lg-6 col-md-5 col-sm-5 col-xs-5">Completed Tasks</th> <th class="List-tableHeader JobDetail-tableHeader col-lg-6 col-md-5 col-sm-5 col-xs-5">Completed Tasks</th>
</tr> </tr>
</thead> </thead>
</table> </table>
</div> </div>
<div id="hosts-summary-table" class="table-detail" lr-infinite-scroll="hostSummariesScrollDown" scroll-threshold="10" time-threshold="500"> <div id="hosts-summary-table" class="table-detail" lr-infinite-scroll="hostSummariesScrollDown" scroll-threshold="10" time-threshold="500">
<table class="table"> <table class="table">
<tbody> <tbody>
<tr class="List-tableRow" ng-repeat="host in summaryList = (hosts) track by $index" id="{{ host.id }}" ng-class-even="'List-tableRow--evenRow'" ng-class-odd="'List-tableRow--oddRow'"> <tr class="List-tableRow" ng-repeat="host in hosts track by $index" id="{{ host.id }}" ng-class-even="'List-tableRow--evenRow'" ng-class-odd="'List-tableRow--oddRow'">
<td class="List-tableCell name col-lg-6 col-md-6 col-sm-6 col-xs-6"> <td class="List-tableCell name col-lg-6 col-md-6 col-sm-6 col-xs-6">
<a ui-sref="jobDetail.host-events({hostName: host.name})" aw-tool-tip="View events" data-placement="top">{{ host.name }}</a> <a ui-sref="jobDetail.host-events({hostName: host.host_name})" aw-tool-tip="View events" data-placement="top">{{ host.host_name }}</a>
</td> </td>
<td class="List-tableCell col-lg-6 col-md-5 col-sm-5 col-xs-5 badge-column"> <td class="List-tableCell col-lg-6 col-md-5 col-sm-5 col-xs-5 badge-column">
<a ui-sref="jobDetail.host-events({hostName: host.name, filter: 'ok'})" aw-tool-tip="{{ host.okTip }}" data-tip-watch="host.okTip" data-placement="top" ng-hide="host.ok == 0"><span class="badge successful-hosts">{{ host.ok }}</span></a> <a ui-sref="jobDetail.host-events({hostName: host.host_name, filter: 'ok'})" aw-tool-tip="{{ host.okTip }}" data-tip-watch="host.okTip" data-placement="top" ng-hide="host.ok == 0"><span class="badge successful-hosts">{{ host.ok }}</span></a>
<a ui-sref="jobDetail.host-events({hostName: host.name, filter: 'changed'})" aw-tool-tip="{{ host.changedTip }}" data-tip-watch="host.changedTip" data-placement="top" ng-hide="host.changed == 0"><span class="badge changed-hosts">{{ host.changed }}</span></a> <a ui-sref="jobDetail.host-events({hostName: host.host_name, filter: 'changed'})" aw-tool-tip="{{ host.changedTip }}" data-tip-watch="host.changedTip" data-placement="top" ng-hide="host.changed == 0"><span class="badge changed-hosts">{{ host.changed }}</span></a>
<a ui-sref="jobDetail.host-events({hostName: host.name, filter: 'unreachable'})" aw-tool-tip="{{ host.unreachableTip }}" data-tip-watch="host.unreachableTip" data-placement="top" ng-hide="host.unreachable == 0"><span class="badge unreachable-hosts">{{ host.unreachable }}</span></a> <a ui-sref="jobDetail.host-events({hostName: host.host_name, filter: 'skipped'})" aw-tool-tip="{{ host.skippedTip }}" data-tip-watch="host.failedTip" data-placement="top" ng-hide="host.skipped == 0"><span class="badge skipped-hosts">{{ host.skipped }}</span></a>
<a ui-sref="jobDetail.host-events({hostName: host.name, filter: 'failed'})" aw-tool-tip="{{ host.failedTip }}" data-tip-watch="host.failedTip" data-placement="top" ng-hide="host.failed == 0"><span class="badge failed-hosts">{{ host.failed }}</span></a> <a ui-sref="jobDetail.host-events({hostName: host.host_name, filter: 'unreachable'})" aw-tool-tip="{{ host.unreachableTip }}" data-tip-watch="host.unreachableTip" data-placement="top" ng-hide="host.dark == 0"><span class="badge unreachable-hosts">{{ host.dark }}</span></a>
</td> <a ui-sref="jobDetail.host-events({hostName: host.name, filter: 'failed'})" aw-tool-tip="{{ host.failedTip }}" data-tip-watch="host.failedTip" data-placement="top" ng-hide="host.failed == 0"><span class="badge failed-hosts">{{ host.failures }}</span></a>
</tr> </td>
<tr ng-show="summaryList.length === 0 && waiting"> </tr>
<td colspan="5" class="col-lg-12 loading-info">Waiting...</td> <tr ng-show="hosts.length === 0 && status === 'pending'">
</tr> <td colspan="5" class="col-lg-12 loading-info">Waiting...</td>
<tr ng-show="summaryList.length === 0 && hostSummariesLoading && !waiting"> </tr>
<td colspan="5" class="col-lg-12 loading-info">Loading...</td> <tr ng-show="hosts.length === 0 && status === 'running' ">
</tr> <td colspan="5" class="col-lg-12 loading-info">Loading...</td>
<tr ng-show="summaryList.length === 0 && !hostSummariesLoading && !waiting"> </tr>
<td colspan="2" class="col-lg-12 loading-info">No matching hosts</td> <tr ng-show="status === 'failed' || status === 'successful' && hosts.length === 0 ">
</tr> <td colspan="2" class="col-lg-12 loading-info">No matching hosts</td>
</tbody> </tr>
</table> </tbody>
</div> </table>
</div>
<div class="scroll-spinner" id="hostSummariesMoreRows"> <div class="scroll-spinner" id="hostSummariesMoreRows">
<i class="fa fa-cog fa-spin"></i> <i class="fa fa-cog fa-spin"></i>
</div> </div>
</div><!-- section --> </div><!-- section -->
<div id="graph-section" class="JobDetail-graphSection"> <div id="graph-section" class="JobDetail-graphSection">
<svg width="100%" height="100%"></svg> <svg></svg>
</div> </div>

165
awx/ui/client/src/job-detail/job-detail.controller.js
View File

@@ -14,7 +14,6 @@ export default
[ '$location', '$rootScope', '$filter', '$scope', '$compile', [ '$location', '$rootScope', '$filter', '$scope', '$compile',
'$stateParams', '$log', 'ClearScope', 'GetBasePath', 'Wait', '$stateParams', '$log', 'ClearScope', 'GetBasePath', 'Wait',
'ProcessErrors', 'SelectPlay', 'SelectTask', 'Socket', 'GetElapsed', 'ProcessErrors', 'SelectPlay', 'SelectTask', 'Socket', 'GetElapsed',
'DrawGraph', 'LoadHostSummary', 'ReloadHostSummaryList',
'JobIsFinished', 'SetTaskStyles', 'DigestEvent', 'UpdateDOM', 'DeleteJob', 'PlaybookRun', 'JobIsFinished', 'SetTaskStyles', 'DigestEvent', 'UpdateDOM', 'DeleteJob', 'PlaybookRun',
'LoadPlays', 'LoadTasks', 'HostsEdit', 'LoadPlays', 'LoadTasks', 'HostsEdit',
'ParseVariableString', 'GetChoices', 'fieldChoices', 'fieldLabels', 'ParseVariableString', 'GetChoices', 'fieldChoices', 'fieldLabels',
@@ -22,8 +21,8 @@ export default
function( function(
$location, $rootScope, $filter, $scope, $compile, $stateParams, $location, $rootScope, $filter, $scope, $compile, $stateParams,
$log, ClearScope, GetBasePath, Wait, ProcessErrors, $log, ClearScope, GetBasePath, Wait, ProcessErrors,
SelectPlay, SelectTask, Socket, GetElapsed, DrawGraph, SelectPlay, SelectTask, Socket, GetElapsed,
LoadHostSummary, ReloadHostSummaryList, JobIsFinished, JobIsFinished,
SetTaskStyles, DigestEvent, UpdateDOM, DeleteJob, SetTaskStyles, DigestEvent, UpdateDOM, DeleteJob,
PlaybookRun, LoadPlays, LoadTasks, PlaybookRun, LoadPlays, LoadTasks,
HostsEdit, ParseVariableString, GetChoices, fieldChoices, HostsEdit, ParseVariableString, GetChoices, fieldChoices,
@@ -192,7 +191,6 @@ export default
scope.searchPlaysEnabled = true; scope.searchPlaysEnabled = true;
scope.searchTasksEnabled = true; scope.searchTasksEnabled = true;
scope.searchHostsEnabled = true; scope.searchHostsEnabled = true;
scope.searchHostSummaryEnabled = true;
scope.search_play_status = 'all'; scope.search_play_status = 'all';
scope.search_task_status = 'all'; scope.search_task_status = 'all';
scope.search_host_status = 'all'; scope.search_host_status = 'all';
@@ -291,10 +289,6 @@ export default
}; };
JobDetailService.getRelatedJobEvents(scope.job.id, params) JobDetailService.getRelatedJobEvents(scope.job.id, params)
.success(function(data) { .success(function(data) {
LoadHostSummary({
scope: scope,
data: data.results[0].event_data
});
UpdateDOM({ scope: scope }); UpdateDOM({ scope: scope });
}) })
.error(function(data, status) { .error(function(data, status) {
@@ -623,7 +617,6 @@ export default
scope.playsLoading = true; scope.playsLoading = true;
scope.tasksLoading = true; scope.tasksLoading = true;
scope.hostResultsLoading = true; scope.hostResultsLoading = true;
scope.LoadHostSummaries = true;
// Load the job record // Load the job record
JobDetailService.getJob(job_id) JobDetailService.getJob(job_id)
@@ -749,10 +742,6 @@ export default
// First time. User just loaded page. // First time. User just loaded page.
scope.$emit('LoadJob'); scope.$emit('LoadJob');
} }
else {
// Check if the graph needs to redraw
setTimeout(function() { DrawGraph({ scope: scope, resize: true }); }, 500);
}
}); });
scope.adjustSize = function() { scope.adjustSize = function() {
@@ -800,7 +789,6 @@ export default
// Summary table height adjusting. // Summary table height adjusting.
height = ($('#job-detail-container').height() / 2) - $('#hosts-summary-section .JobDetail-searchHeaderRow').outerHeight() - height = ($('#job-detail-container').height() / 2) - $('#hosts-summary-section .JobDetail-searchHeaderRow').outerHeight() -
$('#hosts-summary-section .table-header').outerHeight() - 20; $('#hosts-summary-section .table-header').outerHeight() - 20;
// $('#hosts-summary-table').height(height);
//$('#hosts-summary-table').mCustomScrollbar("update"); //$('#hosts-summary-table').mCustomScrollbar("update");
scope.$emit('RefreshCompleted'); scope.$emit('RefreshCompleted');
}; };
@@ -850,52 +838,6 @@ export default
} }
}; };
scope.toggleSummary = function(hide) {
var docw, doch, height = $('#job-detail-container').height(), slide_width;
if (!hide) {
docw = $(window).width();
doch = $(window).height();
slide_width = (docw < 840) ? '100%' : '80%';
$('#summary-button').hide();
$('.overlay').css({
width: $(document).width(),
height: $(document).height()
}).show();
// Adjust the summary table height
$('#job-summary-container .job_well').height(height - 18).css({
'box-shadow': '-3px 3px 5px 0 #ccc'
});
height = Math.floor($('#job-detail-container').height() * 0.5) -
$('#hosts-summary-section .header').outerHeight() -
$('#hosts-summary-section .table-header').outerHeight() -
$('#hide-summary-button').outerHeight() -
$('#summary-search-section').outerHeight() -
$('#hosts-summary-section .header').outerHeight() -
$('#hosts-summary-section .legend').outerHeight();
$('#hosts-summary-table').height(height - 50);
//$('#hosts-summary-table').mCustomScrollbar("update");
$('#hide-summary-button').show();
$('#job-summary-container').css({
top: 0,
right: 0,
width: slide_width,
'z-index': 1090,
'padding-right': '15px',
'padding-left': '15px'
}).show('slide', {'direction': 'right'});
setTimeout(function() { DrawGraph({ scope: scope, resize: true }); }, 500);
}
else {
$('.overlay').hide();
$('#summary-button').show();
$('#job-summary-container').hide('slide', {'direction': 'right'});
}
};
scope.objectIsEmpty = function(obj) { scope.objectIsEmpty = function(obj) {
if (angular.isObject(obj)) { if (angular.isObject(obj)) {
return (Object.keys(obj).length > 0) ? false : true; return (Object.keys(obj).length > 0) ? false : true;
@@ -903,6 +845,17 @@ export default
return true; return true;
}; };
scope.toggleLessEvents = function() {
if (!scope.lessEvents) {
$('#events-summary').slideUp(200);
scope.lessEvents = true;
}
else {
$('#events-summary').slideDown(200);
scope.lessEvents = false;
}
};
scope.toggleLessStatus = function() { scope.toggleLessStatus = function() {
if (!scope.lessStatus) { if (!scope.lessStatus) {
$('#job-status-form').slideUp(200); $('#job-status-form').slideUp(200);
@@ -925,18 +878,6 @@ export default
} }
}; };
scope.toggleLessEvents = function() {
if (!scope.lessEvents) {
$('#events-summary').slideUp(200);
scope.lessEvents = true;
}
else {
$('#events-summary').slideDown(200);
scope.lessEvents = false;
DrawGraph({scope:scope});
}
};
scope.filterPlayStatus = function() { scope.filterPlayStatus = function() {
scope.search_play_status = (scope.search_play_status === 'all') ? 'failed' : 'all'; scope.search_play_status = (scope.search_play_status === 'all') ? 'failed' : 'all';
if (!scope.liveEventProcessing || scope.pauseLiveEvents) { if (!scope.liveEventProcessing || scope.pauseLiveEvents) {
@@ -1017,86 +958,6 @@ export default
} }
}; };
scope.searchHostsKeyPress = function(e) {
if (e.keyCode === 13) {
scope.searchHosts();
e.stopPropagation();
}
};
scope.searchHostSummary = function() {
if (scope.search_host_summary_name) {
scope.searchHostSummaryEnabled = false;
}
else {
scope.searchHostSummaryEnabled = true;
}
if (!scope.liveEventProcessing || scope.pauseLiveEvents) {
ReloadHostSummaryList({
scope: scope
});
}
};
scope.searchHostSummaryKeyPress = function(e) {
if (e.keyCode === 13) {
scope.searchHostSummary();
e.stopPropagation();
}
};
scope.filterTaskStatus = function() {
scope.search_task_status = (scope.search_task_status === 'all') ? 'failed' : 'all';
if (!scope.liveEventProcessing || scope.pauseLiveEvents) {
LoadTasks({
scope: scope
});
}
};
scope.filterHostStatus = function() {
scope.search_host_status = (scope.search_host_status === 'all') ? 'failed' : 'all';
if (!scope.liveEventProcessing || scope.pauseLiveEvents) {
var params = {
parent: scope.selectedTask,
event__startswith: 'runner',
page_size: scope.hostResultsMaxRows,
order: 'host_name,counter'
}
if (scope.search_host_status === 'failed'){
params.failed = true;
}
scope.hostResultsLoading = true;
JobDetailService.getRelatedJobEvents(scope.job.id, params).success(function(res){
scope.hostResults = JobDetailService.processHostEvents(res.results)
scope.hostResultsLoading = false;
});
}
};
scope.filterHostSummaryStatus = function() {
scope.search_host_summary_status = (scope.search_host_summary_status === 'all') ? 'failed' : 'all';
if (!scope.liveEventProcessing || scope.pauseLiveEvents) {
// /api/v1/jobs/11/job_host_summaries/?failed=true&&page_size=200&order=host_name
var params = {
page_size: scope.hostSummariesMaxRows,
order: 'host_name'
}
if (scope.search_host_summary_status === 'failed'){
params.failed = true;
}
/*
JobDetailService.getJobHostSummaries(scope.job.id, params).success(function(res){
scope.next_host_summaries = res.next;
scope.hosts = res.results;
console.log(res.results)
});
*/
ReloadHostSummaryList({
scope: scope
});
}
};
if (scope.removeDeleteFinished) { if (scope.removeDeleteFinished) {
scope.removeDeleteFinished(); scope.removeDeleteFinished();

2
awx/ui/client/src/job-detail/job-detail.partial.html
View File

@@ -389,7 +389,7 @@
</div> </div>
<!-- Host Summary view --> <!-- Host Summary view -->
<div id="events-summary" style="display:none"> <div id="events-summary" ng-hide="lessEvents">
<div ui-view="host-summary@jobDetail"></div> <div ui-view="host-summary@jobDetail"></div>
</div> </div>
</div> </div>