mirror of
https://github.com/ansible/awx.git
synced 2024-11-02 01:21:21 +03:00
Wired up status filter. Redraw graph with resize option on playbook_on_stat event. Removed counts from tooltips, eliminating over watch issue.
This commit is contained in:
chouseknecht
parent
4e1b9760c9
commit
e7d58de007
@ -403,7 +403,8 @@ function JobDetailController ($scope, $compile, $routeParams, ClearScope, Breadc
|
||||
if (!scope.auto_scroll && scope.activeTask && scope.hostResults.length) {
|
||||
scope.auto_scroll = true;
|
||||
url = GetBasePath('jobs') + job_id + '/job_events/?parent=' + scope.activeTask + '&';
|
||||
url += (scope.task_host_name) ? 'host__name__icontains=' + scope.task_host_name + '&' : '';
|
||||
url += (scope.search_all_hosts_name) ? 'host__name__icontains=' + scope.search_all_hosts_name + '&' : '';
|
||||
url += (scope.searchAllStatus === 'failed') ? 'failed=true&' : '';
|
||||
url += 'host__name__gt=' + scope.hostResults[scope.hostResults.length - 1].name + '&host__isnull=false&page_size=' + (scope.hostTableRows / 3) + '&order_by=host__name';
|
||||
Wait('start');
|
||||
Rest.setUrl(url);
|
||||
@ -448,7 +449,8 @@ function JobDetailController ($scope, $compile, $routeParams, ClearScope, Breadc
|
||||
if (!scope.auto_scroll && scope.activeTask && scope.hostResults.length) {
|
||||
scope.auto_scroll = true;
|
||||
url = GetBasePath('jobs') + job_id + '/job_events/?parent=' + scope.activeTask + '&';
|
||||
url += (scope.task_host_name) ? 'host__name__icontains=' + scope.task_host_name + '&' : '';
|
||||
url += (scope.search_all_hosts_name) ? 'host__name__icontains=' + scope.search_all_hosts_name + '&' : '';
|
||||
url += (scope.searchAllStatus === 'failed') ? 'failed=true&' : '';
|
||||
url += 'host__name__lt=' + scope.hostResults[0].name + '&host__isnull=false&page_size=' + (scope.hostTableRows / 3) + '&order_by=-host__name';
|
||||
Wait('start');
|
||||
Rest.setUrl(url);
|
||||
@ -490,7 +492,8 @@ function JobDetailController ($scope, $compile, $routeParams, ClearScope, Breadc
|
||||
var url;
|
||||
if (!scope.auto_scroll && scope.hosts) {
|
||||
url = GetBasePath('jobs') + job_id + '/job_host_summaries/?';
|
||||
url += (scope.summary_host_name) ? 'host__name__icontains=' + scope.summary_host_name + '&': '';
|
||||
url += (scope.search_all_hosts_name) ? 'host__name__icontains=' + scope.search_all_hosts_name + '&' : '';
|
||||
url += (scope.searchAllStatus === 'failed') ? 'failed=true&' : '';
|
||||
url += 'host__name__gt=' + scope.hosts[scope.hosts.length - 1].name + '&page_size=' + (scope.hostSummaryTableRows / 3) + '&order_by=host__name';
|
||||
Wait('start');
|
||||
Rest.setUrl(url);
|
||||
@ -533,7 +536,8 @@ function JobDetailController ($scope, $compile, $routeParams, ClearScope, Breadc
|
||||
var url;
|
||||
if (!scope.auto_scroll && scope.hosts) {
|
||||
url = GetBasePath('jobs') + job_id + '/job_host_summaries/?';
|
||||
url += (scope.summary_host_name) ? 'host__name__icontains=' + scope.summary_host_name + '&': '';
|
||||
url += (scope.search_all_hosts_name) ? 'host__name__icontains=' + scope.search_all_hosts_name + '&' : '';
|
||||
url += (scope.searchAllStatus === 'failed') ? 'failed=true&' : '';
|
||||
url += 'host__name__lt=' + scope.hosts[0].name + '&page_size=' + (scope.hostSummaryTableRows / 3) + '&order_by=-host__name';
|
||||
Wait('start');
|
||||
Rest.setUrl(url);
|
||||
@ -578,6 +582,7 @@ function JobDetailController ($scope, $compile, $routeParams, ClearScope, Breadc
|
||||
scope.hosts = [];
|
||||
url = GetBasePath('jobs') + $routeParams.id + '/job_host_summaries/?';
|
||||
url += (scope.search_all_hosts_name) ? 'host__name__icontains=' + scope.search_all_hosts_name + '&': '';
|
||||
url += (scope.searchAllStatus === 'failed') ? 'failed=true&' : '';
|
||||
url += 'page_size=' + scope.hostSummaryTableRows + '&order_by=host__name';
|
||||
Rest.setUrl(url);
|
||||
Rest.get()
|
||||
@ -626,6 +631,28 @@ function JobDetailController ($scope, $compile, $routeParams, ClearScope, Breadc
|
||||
scope.searchAllByHost();
|
||||
}
|
||||
};
|
||||
|
||||
scope.filterByStatus = function(choice) {
|
||||
var tmp = [];
|
||||
if (choice === 'Failed') {
|
||||
scope.searchAllStatus = 'failed';
|
||||
scope.plays.forEach(function(row) {
|
||||
if (row.status === 'failed') {
|
||||
tmp.push(row.id);
|
||||
}
|
||||
});
|
||||
tmp.sort();
|
||||
scope.activePlay = tmp[tmp.length - 1];
|
||||
}
|
||||
else {
|
||||
scope.searchAllStatus = '';
|
||||
scope.activePlay = scope.plays[scope.plays.length - 1].id;
|
||||
}
|
||||
scope.searchSummaryHosts();
|
||||
setTimeout(function() {
|
||||
SelectPlay({ scope: scope, id: scope.activePlay });
|
||||
}, 500);
|
||||
};
|
||||
}
|
||||
|
||||
JobDetailController.$inject = [ '$scope', '$compile', '$routeParams', 'ClearScope', 'Breadcrumbs', 'LoadBreadCrumbs', 'GetBasePath', 'Wait',
|
||||
|
||||
@ -232,7 +232,7 @@ function(UpdatePlayStatus, UpdateHostStatus, UpdatePlayChild, AddHostResult, Sel
|
||||
scope.job_status.status_class = "";
|
||||
scope.host_summary = {};
|
||||
LoadHostSummary({ scope: scope, data: event.event_data });
|
||||
DrawGraph({ scope: scope });
|
||||
DrawGraph({ scope: scope, resize: true });
|
||||
}
|
||||
});
|
||||
};
|
||||
@ -735,32 +735,34 @@ function(UpdatePlayStatus, UpdateHostStatus, UpdatePlayChild, AddHostResult, Sel
|
||||
|
||||
// is the job done? if so, only select hosts for the last task?
|
||||
|
||||
//Wait('start');
|
||||
scope.hostResults = [];
|
||||
url = GetBasePath('jobs') + $routeParams.id + '/job_events/?parent=' + id + '&';
|
||||
url += (scope.search_all_hosts_name) ? 'host__name__icontains=' + scope.search_all_hosts_name + '&' : '';
|
||||
url += 'host__isnull=false&page_size=' + scope.hostTableRows + '&order_by=host__name';
|
||||
Rest.setUrl(url);
|
||||
Rest.get()
|
||||
.success(function(data) {
|
||||
data.results.forEach(function(row) {
|
||||
scope.hostResults.push({
|
||||
id: row.id,
|
||||
status: ( (row.failed) ? 'failed' : (row.changed) ? 'changed' : 'successful' ),
|
||||
host_id: row.host,
|
||||
task_id: row.parent,
|
||||
name: row.event_data.host,
|
||||
created: row.created,
|
||||
msg: ( (row.event_data && row.event_data.res) ? row.event_data.res.msg : '' )
|
||||
if (id > 0) {
|
||||
// If we have a selected task, then get the list of hosts
|
||||
url = GetBasePath('jobs') + $routeParams.id + '/job_events/?parent=' + id + '&';
|
||||
url += (scope.search_all_hosts_name) ? 'host__name__icontains=' + scope.search_all_hosts_name + '&' : '';
|
||||
url += (scope.searchAllStatus === 'failed') ? 'failed=true&' : '';
|
||||
url += 'host__isnull=false&page_size=' + scope.hostTableRows + '&order_by=host__name';
|
||||
Rest.setUrl(url);
|
||||
Rest.get()
|
||||
.success(function(data) {
|
||||
data.results.forEach(function(row) {
|
||||
scope.hostResults.push({
|
||||
id: row.id,
|
||||
status: ( (row.failed) ? 'failed' : (row.changed) ? 'changed' : 'successful' ),
|
||||
host_id: row.host,
|
||||
task_id: row.parent,
|
||||
name: row.event_data.host,
|
||||
created: row.created,
|
||||
msg: ( (row.event_data && row.event_data.res) ? row.event_data.res.msg : '' )
|
||||
});
|
||||
});
|
||||
SelectHost({ scope: scope });
|
||||
})
|
||||
.error(function(data, status) {
|
||||
ProcessErrors(scope, data, status, null, { hdr: 'Error!',
|
||||
msg: 'Call to ' + url + '. GET returned: ' + status });
|
||||
});
|
||||
//Wait('stop');
|
||||
SelectHost({ scope: scope });
|
||||
})
|
||||
.error(function(data, status) {
|
||||
ProcessErrors(scope, data, status, null, { hdr: 'Error!',
|
||||
msg: 'Call to ' + url + '. GET returned: ' + status });
|
||||
});
|
||||
}
|
||||
};
|
||||
}])
|
||||
|
||||
|
||||
@ -439,9 +439,7 @@ function($location, Wait, GetBasePath, LookUpInit, JobTemplateForm, CredentialLi
|
||||
}
|
||||
scope.removePlaybookLaunchFinished = scope.$on('PlaybookLaunchFinished', function() {
|
||||
var base = $location.path().replace(/^\//, '').split('/')[0];
|
||||
if (base === 'jobs') {
|
||||
scope.refreshJobs();
|
||||
} else {
|
||||
if (base !== 'jobs') {
|
||||
$location.path('/jobs');
|
||||
}
|
||||
});
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
@failed-hosts-color: #DA4D49;
|
||||
@successful-hosts-color: #5bb75b;
|
||||
@changed-hosts-color: #FF9900;
|
||||
@skipped-hosts-color: #00BFFF;
|
||||
@skipped-hosts-color: #01BCC5;
|
||||
@unreachable-hosts-color: #A9A9A9;
|
||||
|
||||
|
||||
@ -303,13 +303,12 @@ label.small-label {
|
||||
.badge-column a {
|
||||
width: 20%;
|
||||
}
|
||||
.legend {
|
||||
margin: 8px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.legend {
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
i {
|
||||
font-size: 10px;
|
||||
margin-left: 5px;
|
||||
@ -329,8 +328,6 @@ label.small-label {
|
||||
.header {
|
||||
margin-top: 20px;
|
||||
.legend {
|
||||
text-align: center;
|
||||
margin: 15px 0 0 0;
|
||||
i {
|
||||
margin-left: 10px
|
||||
}
|
||||
@ -353,7 +350,8 @@ polyline{
|
||||
}
|
||||
|
||||
svg text.percent{
|
||||
fill:white;
|
||||
fill:@black;
|
||||
text-anchor:middle;
|
||||
font-size:12px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@ -746,6 +746,7 @@ angular.module('AWDirectives', ['RestServices', 'Utilities', 'AuthService', 'Job
|
||||
.directive('awToggleButton', [ function() {
|
||||
return function(scope, element) {
|
||||
$(element).click(function() {
|
||||
var next, choice;
|
||||
$(this).find('.btn').toggleClass('active');
|
||||
if ($(this).find('.btn-primary').size()>0) {
|
||||
$(this).find('.btn').toggleClass('btn-primary');
|
||||
@ -760,6 +761,19 @@ angular.module('AWDirectives', ['RestServices', 'Utilities', 'AuthService', 'Job
|
||||
$(this).find('.btn').toggleClass('btn-info');
|
||||
}
|
||||
$(this).find('.btn').toggleClass('btn-default');
|
||||
|
||||
// Add data-after-toggle="functionName" to the btn-group, and we'll
|
||||
// execute here. The newly active choice is passed as a parameter.
|
||||
if ($(this).attr('data-after-toggle')) {
|
||||
next = $(this).attr('data-after-toggle');
|
||||
choice = $(this).find('.active').text();
|
||||
setTimeout(function() {
|
||||
scope.$apply(function() {
|
||||
scope[next](choice);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
};
|
||||
}]);
|
||||
|
||||
@ -52,7 +52,9 @@
|
||||
</div>
|
||||
</div>
|
||||
<div id="plays-table-detail" aw-custom-scroll class="table-detail">
|
||||
<div class="row cursor-pointer" ng-repeat="play in plays | FilterById : search_all_plays " ng-class="play.playActiveClass" ng-click="selectPlay(play.id)">
|
||||
<div class="row cursor-pointer"
|
||||
ng-repeat="play in plays | FilterById : search_all_plays | filter:{ status : searchAllStatus}"
|
||||
ng-class="play.playActiveClass" ng-click="selectPlay(play.id)">
|
||||
<div class="col-lg-1 col-md-1 col-sm-2 hidden-xs">{{ play.created | date: 'HH:mm:ss' }}</div>
|
||||
<div class="col-lg-1 col-md-1 hidden-sm hidden-xs" aw-tool-tip="Completed at {{ play.finished | date:'HH:mm:ss' }}"
|
||||
data-placement="top">{{ play.elapsed }}
|
||||
@ -76,7 +78,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div id="tasks-table-detail" aw-custom-scroll class="table-detail">
|
||||
<div class="row cursor-pointer" ng-repeat="task in taskList = (tasks | FilterById : search_all_tasks | filter:{ play_id: activePlay })" ng-class="task.taskActiveClass"
|
||||
<div class="row cursor-pointer" ng-repeat="task in taskList = (tasks | FilterById : search_all_tasks | filter:{ status : searchAllStatus} | filter:{ play_id: activePlay })" ng-class="task.taskActiveClass"
|
||||
ng-click="selectTask(task.id)">
|
||||
<div class="col-lg-1 col-md-1 col-sm-2 hidden-xs">{{ task.created | date: 'HH:mm:ss' }}</div>
|
||||
<div class="col-lg-1 col-md-1 hidden-sm hidden-xs" aw-tool-tip="Completed at {{ task.finished | date:'HH:mm:ss' }}"
|
||||
@ -87,7 +89,7 @@
|
||||
<i class="fa icon-job-{{ task.status }}"></i><span ng-show="hasRoles"> {{ task.role }} </span> {{ task.name }}
|
||||
</div>
|
||||
<div class="col-lg-5 col-md-5 hidden-sm hidden-xs">
|
||||
<div class="status-bar"><div class="successful-hosts inner-bar" id="{{ task.id }}-{{ task.play_id }}-successful-bar" aw-tool-tip="{{ task.successfulCount}} hosts OK" aw-tip-watch="task.successfulCount" data-placement="top" ng-style="task.successfulStyle">{{ task.successfulCount }}</div><div class="changed-hosts inner-bar" id="{{ task.id }}-{{ task.play_id }}-changed-bar" aw-tool-tip="{{ task.changedCount}} hosts changed" aw-tip-watch="task.changedCount" data-placement="top" ng-style="task.changedStyle">{{ task.changedCount }}</div><div class="skipped-hosts inner-bar" id="{{ task.id }}-{{ task.play_id }}-skipped-bar" aw-tool-tip="{{ task.skippedCount}} hosts skipped" aw-tip-watch="task.skippedCount" data-placement="top" ng-style="task.skippedStyle">{{ task.skippedCount }}</div><div class="failed-hosts inner-bar" id="{{ task.id }}-{{ task.play_id }}-failed-bar" aw-tool-tip="{{ task.failedCount}} hosts failed" aw-tip-watch="task.failedCount" data-placement="top" ng-style="task.failedStyle">{{ task.failedCount }}</div><div class="no-matching-hosts inner-bar" id="{{ task.id }}-{{ task.play_id }}-no-matching-hosts-bar" aw-tool-tip="No matching hosts were found" data-placement="top" style="width: 100%;" ng-show="task.status === 'no-m atching-hosts'">No matching hosts</div></div>
|
||||
<div class="status-bar"><div class="successful-hosts inner-bar" id="{{ task.id }}-{{ task.play_id }}-successful-bar" aw-tool-tip="Hosts OK" data-placement="top" ng-style="task.successfulStyle">{{ task.successfulCount }}</div><div class="changed-hosts inner-bar" id="{{ task.id }}-{{ task.play_id }}-changed-bar" aw-tool-tip="Hosts Changed" data-placement="top" ng-style="task.changedStyle">{{ task.changedCount }}</div><div class="skipped-hosts inner-bar" id="{{ task.id }}-{{ task.play_id }}-skipped-bar" aw-tool-tip="Hosts Skipped" data-placement="top" ng-style="task.skippedStyle">{{ task.skippedCount }}</div><div class="failed-hosts inner-bar" id="{{ task.id }}-{{ task.play_id }}-failed-bar" aw-tool-tip="Hosts Failed" data-placement="top" ng-style="task.failedStyle">{{ task.failedCount }}</div><div class="no-matching-hosts inner-bar" id="{{ task.id }}-{{ task.play_id }}-no-matching-hosts-bar" aw-tool-tip="No matching hosts were found" data-placement="top" style="width: 100%;" ng-show="task.status === 'no-m atching-hosts'">No matching hosts</div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" ng-show="taskList.length === 0">
|
||||
@ -110,7 +112,7 @@
|
||||
<div id="hosts-table-detail" aw-custom-scroll data-on-total-scroll="HostDetailOnTotalScroll"
|
||||
data-on-total-scroll-back="HostDetailOnTotalScrollBack" class="table-detail">
|
||||
<div id="hosts-table-detail-inner">
|
||||
<div class="row" ng-repeat="result in results = (hostResults | filter:{ task_id: activeTask })">
|
||||
<div class="row" ng-repeat="result in results = (hostResults | filter:{ status : searchAllStatus} | filter:{ task_id: activeTask })">
|
||||
<div class="col-lg-7 col-md-7 col-sm-7 col-xs-7 status-column">
|
||||
<a href="" ng-click="doSomething()" aw-tool-tip="Event Id: {{ result.id }} Status: {{ result.status }}. Click for details" data-placement="top"><i class="fa icon-job-{{ result.status }}"></i> {{ result.name }}</a>
|
||||
</div>
|
||||
@ -157,9 +159,9 @@
|
||||
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
|
||||
<div style="padding-top: 5px;">
|
||||
<label class="small-label">Show</label>
|
||||
<div class="btn-group" aw-toggle-button>
|
||||
<button class="btn btn-xs btn-default">All</button>
|
||||
<button class="btn btn-xs btn-primary active">Failures</button>
|
||||
<div class="btn-group" aw-toggle-button data-after-toggle="filterByStatus">
|
||||
<button class="btn btn-xs btn-primary active">All</button>
|
||||
<button class="btn btn-xs btn-default">Failed</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -169,14 +171,9 @@
|
||||
<div id="hosts-summary-section" class="section job_summary">
|
||||
<div class="header">
|
||||
<div class="title">Host Summary</div>
|
||||
<div class="search-field">
|
||||
<!-- <input type="text" ng-model="summary_host_name" placeholder="Host Name" ng-keypress="summaryHostNameKeyPress($event)" />
|
||||
<a class="search-icon" ng-show="searchSummaryHostsEnabled" ng-click="searchSummaryHosts()"><i class="fa fa-search"></i></a>
|
||||
<a class="search-icon" ng-show="!searchSummaryHostsEnabled" ng-click="summary_host_name=''; searchSummaryHosts()"><i class="fa fa-times"></i></a> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="legend"><i class="fa fa-circle successful-hosts-color"></i> Successful <i class="fa fa-circle changed-hosts-color"></i> Changed
|
||||
<div class="legend pull-right"><i class="fa fa-circle successful-hosts-color"></i> Successful <i class="fa fa-circle changed-hosts-color"></i> Changed
|
||||
<i class="fa fa-circle unreachable-hosts-color"></i> Unreachable <i class="fa fa-circle failed-hosts-color"></i> Failed</div>
|
||||
</div>
|
||||
<div class="table-header">
|
||||
<div class="row">
|
||||
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">Host</div>
|
||||
@ -209,7 +206,7 @@
|
||||
<div id="graph-section" class="section">
|
||||
<div class="header">
|
||||
<div class="title">Host Status Summary</div>
|
||||
<div class="legend" style="display: none;"><i class="fa fa-circle successful-hosts-color"></i> Successful <i class="fa fa-circle changed-hosts-color"></i> Changed
|
||||
<div class="legend pull-right" style="display: none;"><i class="fa fa-circle successful-hosts-color"></i> Successful <i class="fa fa-circle changed-hosts-color"></i> Changed
|
||||
<i class="fa fa-circle unreachable-hosts-color"></i> Unreachable <i class="fa fa-circle failed-hosts-color"></i> Failed</div>
|
||||
</div>
|
||||
</div><!-- graph section -->
|
||||
|
||||
Loading…
Reference in New Issue
Block a user