mirror of
https://github.com/ansible/awx.git
synced 2026-01-13 11:00:03 -03:30
refactor Event Summary view to resolve #1245
This commit is contained in:
Leigh Johnson
parent
ae83934145
commit
2a5a97fc35
@ -503,7 +503,7 @@
|
||||
}
|
||||
|
||||
#graph-section svg{
|
||||
margin-top: 15px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
path.slice{
|
||||
|
||||
@ -40,9 +40,9 @@ export default
|
||||
angular.module('JobDetailHelper', ['Utilities', 'RestServices', 'ModalDialog'])
|
||||
|
||||
.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,
|
||||
UpdateTaskStatus, DrawGraph, LoadHostSummary, JobIsFinished, AddNewTask, AddNewPlay) {
|
||||
UpdateTaskStatus, JobIsFinished, AddNewTask, AddNewPlay) {
|
||||
return function(params) {
|
||||
|
||||
var scope = params.scope,
|
||||
@ -185,7 +185,7 @@ export default
|
||||
};
|
||||
}])
|
||||
|
||||
.factory('GetElapsed', [ function() {
|
||||
.factory('GetElapsed', ['moment', function(moment) {
|
||||
return function(params) {
|
||||
var start = params.start,
|
||||
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) {
|
||||
var scope = params.scope,
|
||||
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) {
|
||||
var scope = params.scope,
|
||||
failed = params.failed,
|
||||
@ -363,17 +363,17 @@ export default
|
||||
scope.job_status.status = 'failed';
|
||||
}
|
||||
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)) {
|
||||
scope.job_status.started = started;
|
||||
scope.job_status.started = moment(started).format('l');
|
||||
}
|
||||
if (!Empty(scope.job_status.finished) && !Empty(scope.job_status.started)) {
|
||||
scope.job_status.elapsed = GetElapsed({
|
||||
start: scope.job_status.started,
|
||||
end: scope.job_status.finished
|
||||
start: started,
|
||||
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) {
|
||||
return function(params) {
|
||||
var scope = params.scope,
|
||||
var count = params.count,
|
||||
graph_data = [];
|
||||
|
||||
// Ready the data
|
||||
if (scope.host_summary.ok) {
|
||||
if (count.ok.length > 0) {
|
||||
graph_data.push({
|
||||
label: 'OK',
|
||||
value: scope.host_summary.ok,
|
||||
value: count.ok.length,
|
||||
color: '#60D66F'
|
||||
});
|
||||
}
|
||||
if (scope.host_summary.changed) {
|
||||
if (count.changed.length > 0) {
|
||||
graph_data.push({
|
||||
label: 'CHANGED',
|
||||
value: scope.host_summary.changed,
|
||||
value: count.changed.length,
|
||||
color: '#FF9900'
|
||||
});
|
||||
}
|
||||
if (scope.host_summary.unreachable) {
|
||||
if (count.unreachable.length > 0) {
|
||||
graph_data.push({
|
||||
label: 'UNREACHABLE',
|
||||
value: scope.host_summary.unreachable,
|
||||
value: count.unreachable.length,
|
||||
color: '#FF0000'
|
||||
});
|
||||
}
|
||||
if (scope.host_summary.failed) {
|
||||
if (count.failed.length > 0) {
|
||||
graph_data.push({
|
||||
label: 'FAILED',
|
||||
value: scope.host_summary.failed,
|
||||
value: count.failed.length,
|
||||
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({
|
||||
data: graph_data
|
||||
});
|
||||
@ -1121,44 +1033,42 @@ export default
|
||||
"font-family": 'Open Sans',
|
||||
"font-style": "normal",
|
||||
"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])
|
||||
.attr("class", "DashboardGraphs-hostStatusLabel--successful")
|
||||
.attr("class", "HostSummary-graph--successful")
|
||||
.style({
|
||||
"font-family": 'Open Sans',
|
||||
"text-anchor": "start",
|
||||
"font-size": "16px",
|
||||
"text-transform" : "uppercase",
|
||||
"fill" : colors[0],
|
||||
"src": "url(/static/assets/OpenSans-Regular.ttf)"
|
||||
});
|
||||
d3.select(element.find(".nv-label text")[1])
|
||||
.attr("class", "DashboardGraphs-hostStatusLabel--failed")
|
||||
.attr("class", "HostSummary-graph--changed")
|
||||
.style({
|
||||
"font-family": 'Open Sans',
|
||||
"text-anchor" : "end !imporant",
|
||||
"font-size": "16px",
|
||||
"text-transform" : "uppercase",
|
||||
"fill" : colors[1],
|
||||
"src": "url(/static/assets/OpenSans-Regular.ttf)"
|
||||
});
|
||||
d3.select(element.find(".nv-label text")[2])
|
||||
.attr("class", "DashboardGraphs-hostStatusLabel--successful")
|
||||
.attr("class", "HostSummary-graph--failed")
|
||||
.style({
|
||||
"font-family": 'Open Sans',
|
||||
"text-anchor" : "end !imporant",
|
||||
"font-size": "16px",
|
||||
"text-transform" : "uppercase",
|
||||
"fill" : colors[2],
|
||||
"src": "url(/static/assets/OpenSans-Regular.ttf)"
|
||||
});
|
||||
d3.select(element.find(".nv-label text")[3])
|
||||
.attr("class", "DashboardGraphs-hostStatusLabel--failed")
|
||||
.attr("class", "HostSummary-graph--unreachable")
|
||||
.style({
|
||||
"font-family": 'Open Sans',
|
||||
"text-anchor" : "end !imporant",
|
||||
"font-size": "16px",
|
||||
"text-transform" : "uppercase",
|
||||
"fill" : colors[3],
|
||||
@ -1399,68 +1309,8 @@ export default
|
||||
};
|
||||
}])
|
||||
|
||||
.factory('DrawHostSummaries', [ function() {
|
||||
return function(params) {
|
||||
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) {
|
||||
.factory('UpdateDOM', ['DrawPlays', 'DrawTasks', 'DrawHostResults',
|
||||
function(DrawPlays, DrawTasks, DrawHostResults) {
|
||||
return function(params) {
|
||||
var scope = params.scope;
|
||||
if (!scope.pauseLiveEvents) {
|
||||
@ -1469,17 +1319,10 @@ export default
|
||||
DrawHostResults({ scope: scope });
|
||||
}
|
||||
|
||||
DrawHostSummaries({ scope: scope });
|
||||
|
||||
setTimeout(function() {
|
||||
scope.playsLoading = false;
|
||||
scope.tasksLoading = false;
|
||||
scope.hostResultsLoading = false;
|
||||
scope.LoadHostSummaries = false;
|
||||
},100);
|
||||
|
||||
if (scope.host_summary.total > 0) {
|
||||
DrawGraph({ scope: scope, resize: true });
|
||||
}
|
||||
};
|
||||
}]);
|
||||
|
||||
@ -752,9 +752,9 @@ function($compile, Rest, GetBasePath, TextareaResize,CreateDialog, GenerateForm,
|
||||
*
|
||||
*/
|
||||
// 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',
|
||||
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) {
|
||||
return function (params) {
|
||||
var //parent_scope = params.scope,
|
||||
@ -803,8 +803,8 @@ function($compile, Rest, GetBasePath, TextareaResize,CreateDialog, GenerateForm,
|
||||
var job = data.job || data.system_job;
|
||||
if((scope.portalMode===false || scope.$parent.portalMode===false ) && Empty(data.system_job) ||
|
||||
(base === 'home')){
|
||||
$location.path('/jobs/' + job);
|
||||
// use $state.go with reload: true option to re-instantiate sockets in
|
||||
$state.go('jobDetail', {id: job}, {reload: true})
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
@ -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{}
|
||||
@ -5,49 +5,114 @@
|
||||
*************************************************/
|
||||
|
||||
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 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){};
|
||||
$scope.filter = function(filter){};
|
||||
|
||||
var init = function(){
|
||||
socketListener();
|
||||
JobDetailService.getJobHostSummaries($stateParams.id, {}).success(function(res){
|
||||
console.log('jobhostSummaries at init.', res)
|
||||
});
|
||||
var buildTooltips = function(hosts){
|
||||
var count = {
|
||||
ok : _.filter(hosts, function(o){
|
||||
return o.changed === 0 && o.ok > 0;
|
||||
}),
|
||||
skipped : _.filter(hosts, function(o){
|
||||
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();
|
||||
}];
|
||||
@ -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">
|
||||
<div class="JobDetail-searchContainer form-group">
|
||||
<div class="search-name">
|
||||
<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)" >
|
||||
<a class="List-searchInputIcon search-icon" ng-show="searchHostSummaryEnabled" ng-click="searchHostSummary()"><i class="fa fa-search"></i></a>
|
||||
<a class="List-searchInputIcon search-icon" ng-show="!searchHostSummaryEnabled" ng-click="search_host_summary_name=''; searchHostSummary()"><i class="fa fa-times"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="JobDetail-tableToggleContainer form-group">
|
||||
<div class="btn-group" aw-toggle-button data-after-toggle="filterHostSummaryStatus">
|
||||
<button class="JobDetail-tableToggle btn btn-xs btn-primary active">All</button>
|
||||
<button class="JobDetail-tableToggle btn btn-xs btn-default">Failed</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="JobDetail-tableToggleContainer form-group">
|
||||
<div class="btn-group" >
|
||||
<button
|
||||
ng-click="setFilter('all')"
|
||||
class="JobDetail-tableToggle btn btn-xs" ng-class="{'btn-default': filter == 'failed', 'btn-primary': filter == 'all'}">All</button>
|
||||
<button ng-click="setFilter('failed')"
|
||||
ng-class="{'btn-default': filter == 'all', 'btn-primary': filter == 'failed'}" class="JobDetail-tableToggle btn btn-xs">Failed</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table-header">
|
||||
<table class="table table-condensed">
|
||||
<thead>
|
||||
<tr>
|
||||
<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>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
</div>
|
||||
<div class="table-header">
|
||||
<table class="table table-condensed">
|
||||
<thead>
|
||||
<tr>
|
||||
<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>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div id="hosts-summary-table" class="table-detail" lr-infinite-scroll="hostSummariesScrollDown" scroll-threshold="10" time-threshold="500">
|
||||
<table class="table">
|
||||
<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'">
|
||||
<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>
|
||||
</td>
|
||||
<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.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.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>
|
||||
</td>
|
||||
</tr>
|
||||
<tr ng-show="summaryList.length === 0 && waiting">
|
||||
<td colspan="5" class="col-lg-12 loading-info">Waiting...</td>
|
||||
</tr>
|
||||
<tr ng-show="summaryList.length === 0 && hostSummariesLoading && !waiting">
|
||||
<td colspan="5" class="col-lg-12 loading-info">Loading...</td>
|
||||
</tr>
|
||||
<tr ng-show="summaryList.length === 0 && !hostSummariesLoading && !waiting">
|
||||
<td colspan="2" class="col-lg-12 loading-info">No matching hosts</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div id="hosts-summary-table" class="table-detail" lr-infinite-scroll="hostSummariesScrollDown" scroll-threshold="10" time-threshold="500">
|
||||
<table class="table">
|
||||
<tbody>
|
||||
<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">
|
||||
<a ui-sref="jobDetail.host-events({hostName: host.host_name})" aw-tool-tip="View events" data-placement="top">{{ host.host_name }}</a>
|
||||
</td>
|
||||
<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.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: '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: '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.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>
|
||||
<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>
|
||||
</td>
|
||||
</tr>
|
||||
<tr ng-show="hosts.length === 0 && status === 'pending'">
|
||||
<td colspan="5" class="col-lg-12 loading-info">Waiting...</td>
|
||||
</tr>
|
||||
<tr ng-show="hosts.length === 0 && status === 'running' ">
|
||||
<td colspan="5" class="col-lg-12 loading-info">Loading...</td>
|
||||
</tr>
|
||||
<tr ng-show="status === 'failed' || status === 'successful' && hosts.length === 0 ">
|
||||
<td colspan="2" class="col-lg-12 loading-info">No matching hosts</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="scroll-spinner" id="hostSummariesMoreRows">
|
||||
<i class="fa fa-cog fa-spin"></i>
|
||||
</div>
|
||||
<div class="scroll-spinner" id="hostSummariesMoreRows">
|
||||
<i class="fa fa-cog fa-spin"></i>
|
||||
</div>
|
||||
|
||||
</div><!-- section -->
|
||||
</div><!-- section -->
|
||||
|
||||
<div id="graph-section" class="JobDetail-graphSection">
|
||||
<svg width="100%" height="100%"></svg>
|
||||
</div>
|
||||
<div id="graph-section" class="JobDetail-graphSection">
|
||||
<svg></svg>
|
||||
</div>
|
||||
|
||||
@ -13,8 +13,7 @@
|
||||
export default
|
||||
[ '$location', '$rootScope', '$filter', '$scope', '$compile',
|
||||
'$stateParams', '$log', 'ClearScope', 'GetBasePath', 'Wait',
|
||||
'ProcessErrors', 'SelectPlay', 'SelectTask', 'Socket', 'GetElapsed',
|
||||
'DrawGraph', 'LoadHostSummary', 'ReloadHostSummaryList',
|
||||
'ProcessErrors', 'SelectPlay', 'SelectTask', 'Socket', 'GetElapsed',
|
||||
'JobIsFinished', 'SetTaskStyles', 'DigestEvent', 'UpdateDOM', 'DeleteJob', 'PlaybookRun',
|
||||
'LoadPlays', 'LoadTasks', 'HostsEdit',
|
||||
'ParseVariableString', 'GetChoices', 'fieldChoices', 'fieldLabels',
|
||||
@ -22,8 +21,8 @@ export default
|
||||
function(
|
||||
$location, $rootScope, $filter, $scope, $compile, $stateParams,
|
||||
$log, ClearScope, GetBasePath, Wait, ProcessErrors,
|
||||
SelectPlay, SelectTask, Socket, GetElapsed, DrawGraph,
|
||||
LoadHostSummary, ReloadHostSummaryList, JobIsFinished,
|
||||
SelectPlay, SelectTask, Socket, GetElapsed,
|
||||
JobIsFinished,
|
||||
SetTaskStyles, DigestEvent, UpdateDOM, DeleteJob,
|
||||
PlaybookRun, LoadPlays, LoadTasks,
|
||||
HostsEdit, ParseVariableString, GetChoices, fieldChoices,
|
||||
@ -192,7 +191,6 @@ export default
|
||||
scope.searchPlaysEnabled = true;
|
||||
scope.searchTasksEnabled = true;
|
||||
scope.searchHostsEnabled = true;
|
||||
scope.searchHostSummaryEnabled = true;
|
||||
scope.search_play_status = 'all';
|
||||
scope.search_task_status = 'all';
|
||||
scope.search_host_status = 'all';
|
||||
@ -291,10 +289,6 @@ export default
|
||||
};
|
||||
JobDetailService.getRelatedJobEvents(scope.job.id, params)
|
||||
.success(function(data) {
|
||||
LoadHostSummary({
|
||||
scope: scope,
|
||||
data: data.results[0].event_data
|
||||
});
|
||||
UpdateDOM({ scope: scope });
|
||||
})
|
||||
.error(function(data, status) {
|
||||
@ -623,7 +617,6 @@ export default
|
||||
scope.playsLoading = true;
|
||||
scope.tasksLoading = true;
|
||||
scope.hostResultsLoading = true;
|
||||
scope.LoadHostSummaries = true;
|
||||
|
||||
// Load the job record
|
||||
JobDetailService.getJob(job_id)
|
||||
@ -749,10 +742,6 @@ export default
|
||||
// First time. User just loaded page.
|
||||
scope.$emit('LoadJob');
|
||||
}
|
||||
else {
|
||||
// Check if the graph needs to redraw
|
||||
setTimeout(function() { DrawGraph({ scope: scope, resize: true }); }, 500);
|
||||
}
|
||||
});
|
||||
|
||||
scope.adjustSize = function() {
|
||||
@ -800,7 +789,6 @@ export default
|
||||
// Summary table height adjusting.
|
||||
height = ($('#job-detail-container').height() / 2) - $('#hosts-summary-section .JobDetail-searchHeaderRow').outerHeight() -
|
||||
$('#hosts-summary-section .table-header').outerHeight() - 20;
|
||||
// $('#hosts-summary-table').height(height);
|
||||
//$('#hosts-summary-table').mCustomScrollbar("update");
|
||||
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) {
|
||||
if (angular.isObject(obj)) {
|
||||
return (Object.keys(obj).length > 0) ? false : true;
|
||||
@ -903,6 +845,17 @@ export default
|
||||
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() {
|
||||
if (!scope.lessStatus) {
|
||||
$('#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.search_play_status = (scope.search_play_status === 'all') ? 'failed' : 'all';
|
||||
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) {
|
||||
scope.removeDeleteFinished();
|
||||
|
||||
@ -389,7 +389,7 @@
|
||||
</div>
|
||||
|
||||
<!-- 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>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user