Host Events - support no results found, better searching, style tweaks, #1132 #1284

This commit is contained in:
Leigh Johnson 2016-03-22 10:57:48 -04:00
parent 3ada60d7d4
commit 3889e32fd9
5 changed files with 47 additions and 46 deletions

View File

@ -58,8 +58,8 @@
font-size: 14px;
font-weight: normal;
text-transform: uppercase;
color: #848992;
background-color: #EBEBEB;
color: @default-interface-txt;
background-color: @default-list-header-bg;
padding-left: 15px;
padding-right: 15px;
border-bottom-width: 0px;

View File

@ -6,42 +6,33 @@
export default
['$stateParams', '$scope', '$rootScope', '$state', 'Wait',
'JobDetailService', 'CreateSelect2', 'PaginateInit',
'JobDetailService', 'CreateSelect2',
function($stateParams, $scope, $rootScope, $state, Wait,
JobDetailService, CreateSelect2, PaginateInit){
JobDetailService, CreateSelect2){
// pagination not implemented yet, but it'll depend on this
$scope.page_size = $stateParams.page_size;
$scope.activeFilter = $stateParams.filter || null;
$scope.search = function(){
Wait('start');
if ($scope.searchStr == undefined){
return
}
// The API treats params as AND query
// We should discuss the possibility of an OR array
// search play description
/*
JobDetailService.getRelatedJobEvents($stateParams.id, {
play: $scope.searchStr})
.success(function(res){
results.push(res.results);
});
*/
// search host name
//http://docs.ansible.com/ansible-tower/latest/html/towerapi/intro.html#filtering
// SELECT WHERE host_name LIKE str OR WHERE play LIKE str OR WHERE task LIKE str AND host_name NOT ""
// selecting non-empty host_name fields prevents us from displaying non-runner events, like playbook_on_task_start
JobDetailService.getRelatedJobEvents($stateParams.id, {
host_name: $scope.searchStr})
or__host_name__icontains: $scope.searchStr,
or__play__icontains: $scope.searchStr,
or__task__icontains: $scope.searchStr,
not__host_name: "" ,
page_size: $scope.pageSize})
.success(function(res){
$scope.results = res.results;
Wait('Stop')
Wait('stop')
});
// search task
/*
JobDetailService.getRelatedJobEvents($stateParams.id, {
task: $scope.searchStr})
.success(function(res){
results.push(res.results);
});
*/
};
$scope.filters = ['all', 'changed', 'failed', 'ok', 'unreachable', 'skipped'];
@ -49,7 +40,9 @@
var filter = function(filter){
Wait('start');
if (filter == 'all'){
return JobDetailService.getRelatedJobEvents($stateParams.id, {host_name: $stateParams.hostName})
return JobDetailService.getRelatedJobEvents($stateParams.id, {
host_name: $stateParams.hostName,
page_size: $scope.pageSize})
.success(function(res){
$scope.results = res.results;
Wait('stop');
@ -154,17 +147,17 @@
if ($stateParams.filter){
filter($stateParams.filter).success(function(res){
$scope.results = res.results;
PaginateInit({ scope: $scope, list: defaultUrl });
Wait('stop');
$('#HostEvents').modal('show');
});;
}
else{
Wait('start');
JobDetailService.getRelatedJobEvents($stateParams.id, {host_name: $stateParams.hostName})
JobDetailService.getRelatedJobEvents($stateParams.id, {
host_name: $stateParams.hostName,
page_size: $stateParams.page_size})
.success(function(res){
$scope.pagination = res;
$scope.results = res.results;
Wait('stop');
$('#HostEvents').modal('show');

View File

@ -6,7 +6,7 @@
<span class="HostEvents-title">HOST EVENTS</span>
<!-- Close -->
<button ng-click="goBack()" type="button" class="close">
<i class="fa fa-times"></i>
<i class="fa fa fa-times-circle"></i>
</button>
</div>
<div class="HostEvents-form--container">
@ -21,19 +21,19 @@
</form>
<select class="HostEvents-select">
<option class="HostEvents-select--option" value="{{filter}}" ng-repeat="filter in filters">{{filter}}</option>
<option ng-selected="filter == activeFilter" class="HostEvents-select--option" value="{{filter}}" ng-repeat="filter in filters">{{filter}}</option>
</select>
</div>
<!-- event results table -->
<div class="table-responsive">
<table class="table">
<!-- column labels -->
<th class="HostEvents-table--header">STATUS</th>
<th class="HostEvents-table--header">HOST</th>
<th class="HostEvents-table--header">PLAY</th>
<th class="HostEvents-table--header">TASK</th>
<th ng-hide="results.length == 0" class="HostEvents-table--header">STATUS</th>
<th ng-hide="results.length == 0" class="HostEvents-table--header">HOST</th>
<th ng-hide="results.length == 0" class="HostEvents-table--header">PLAY</th>
<th ng-hide="results.length == 0" class="HostEvents-table--header">TASK</th>
<!-- result rows -->
<tr class="HostEvents-table--row" ng-repeat="event in results track by $index">
<tr class="HostEvents-table--row" ng-repeat="event in results track by $index" modal-paginate="event in results | page_size: page_size">
<td class=HostEvents-table--cell>
<!-- status circles -->
<a class="HostEvents-status">
@ -45,12 +45,17 @@
<td class=HostEvents-table--cell>{{event.play}}</td>
<td class=HostEvents-table--cell>{{event.task}}</td>
</tr>
<tr ng-show="results.length == 0" class="HostEvents-table--row">
<td class=HostEvents-table--cell>
No results were found.
</td>
</tr>
</table>
</div>
</div>
<div class="modal-footer">
<!-- pagination -->
<!-- close -->
<button ng-click="goBack()" class="btn btn-default pull-right HostEvents-close">OK</button>
</div>

View File

@ -7,9 +7,12 @@
import {templateUrl} from '../../shared/template-url/template-url.factory';
export default {
name: 'jobDetail.hostEvents',
name: 'jobDetail.host-events',
url: '/host-events/:hostName?:filter',
controller: 'HostEventsController',
params: {
page_size: 10
},
templateUrl: templateUrl('job-detail/host-events/host-events'),
onExit: function(){
// close the modal

View File

@ -422,13 +422,13 @@
<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.hostEvents({hostName: host.name, hostId: host.id})" aw-tool-tip="View events" data-placement="top">{{ host.name }}</a>
<a ui-sref="jobDetail.host-events({hostName: host.name, hostId: host.id})" 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.hostEvents({hostName: host.name, hostId: host.id, 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.hostEvents({hostName: host.name, hostId: host.id, 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.hostEvents({hostName: host.name, hostId: host.id, 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.hostEvents({hostName: host.name, hostId: host.id, 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.name, hostId: host.id, 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, hostId: host.id, 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, hostId: host.id, 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, hostId: host.id, 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">