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

awx/ui/client/src/job-detail/host-events/host-events.block.less

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

awx/ui/client/src/job-detail/host-events/host-events.controller.js

@@ -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
+ 		//http://docs.ansible.com/ansible-tower/latest/html/towerapi/intro.html#filtering
- 		// We should discuss the possibility of an OR array
+ 		// 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
- 		// search play description
-	 	/*
-	 		JobDetailService.getRelatedJobEvents($stateParams.id, {
-	 		play: $scope.searchStr})
-	 			.success(function(res){
-	 				results.push(res.results);
-	 		});
-	 	*/
- 		// search host name
 	 	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');

awx/ui/client/src/job-detail/host-events/host-events.partial.html

@@ -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 ng-hide="results.length == 0" class="HostEvents-table--header">STATUS</th>
-					<th class="HostEvents-table--header">HOST</th>
+					<th ng-hide="results.length == 0" class="HostEvents-table--header">HOST</th>
-					<th class="HostEvents-table--header">PLAY</th>
+					<th ng-hide="results.length == 0" class="HostEvents-table--header">PLAY</th>
-					<th class="HostEvents-table--header">TASK</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>

awx/ui/client/src/job-detail/host-events/host-events.route.js

@@ -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

awx/ui/client/src/job-detail/job-detail.partial.html

@@ -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.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.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.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.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.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.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: '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">