host event/events UX work items, fix json results, remove host event standard out, resolves #1545, #2052, #2063, #2061

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

@@ -1,8 +1,5 @@
 <div class="HostEvent-details--left">
-    <div class="HostEvent-field">
+    <div class="HostEvent-title">EVENT</div>
-        <div class="HostEvent-title">EVENT</div>
-        <span class="HostEvent-field--content"></span>
-    </div>
     <div class="HostEvent-field">
         <span class="HostEvent-field--label">HOST</span>
         <span class="HostEvent-field--content">

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

@@ -12,24 +12,23 @@
 			</div>
 			<div class="HostEvent-nav">
 				<!-- view navigation buttons -->
-				<button ui-sref="jobDetail.host-event.details" type="button" class="btn btn-sm btn-default" >Details</button>
+				<button ui-sref="jobDetail.host-event.details" type="button" class="btn btn-sm btn-default" ng-class="{'HostEvent-tab--selected' : isActiveState('jobDetail.host-event.details')}">Details</button>
-				<button ui-sref="jobDetail.host-event.json" type="button" class="btn btn-sm btn-default ">JSON</button>
+				<button ui-sref="jobDetail.host-event.json" type="button" class="btn btn-sm btn-default " ng-class="{'HostEvent-tab--selected' : isActiveState('jobDetail.host-event.json')}">JSON</button>
-				<button ng-show="stdout" ui-sref="jobDetail.host-event.stdout" type="button" class="btn btn-sm btn-default ">Standard Out</button>
 
 			</div>
 			<div class="HostEvent-body">
 			<!-- views -->
-			<div ui-view></div>
+			<div class="HostEvent-view--container" ui-view></div>
 			</div>
 
 			<!-- controls -->
 			<div class="HostEvent-controls">
-				<button ng-show="showPrev()" ng-click="goPrev()"
+				<button ng-disabled="!showPrev()" ng-click="goPrev()"
-				class="btn btn-sm btn-default">Prev</button>
+				class="btn btn-sm btn-default">Prev Host</button>
-				<button ng-show="showNext()"ng-click="goNext()" class="btn btn-sm btn-default">Next</button>
+				<button ng-disabled="!showNext()"ng-click="goNext()" class="btn btn-sm btn-default">Next Host</button>
-				<button ui-sref="jobDetail" class="btn btn-sm btn-default" ng-show="true" >Close</button>
+				<button ui-sref="jobDetail" class="btn btn-sm btn-default HostEvent-close" ng-show="true" >Close</button>
 			</div>
 		</div>
 		</div>
 	</div>
-</div>
+</div>

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

@@ -1,2 +0,0 @@
-<textarea id="HostEvent-stdout" class="HostEvent-stdout">
-</textarea>

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

@@ -2,6 +2,35 @@
 @import "awx/ui/client/src/shared/branding/colors.default.less";
 @import "awx/ui/client/src/shared/layouts/one-plus-two.less";
 
+@media screen and (min-width: 768px){
+	.HostEvent .modal-dialog{
+		width: 700px;
+	}
+}
+.HostEvent-controls button.HostEvent-close{
+    color: #FFFFFF;
+    text-transform: uppercase;
+    padding-left: 15px;
+    padding-right: 15px;
+ 	background-color: @default-link;
+ 	&:hover{
+ 		background-color: @default-link-hov;
+ 	}
+}
+.HostEvent-body{
+	margin-bottom: 10px;
+}
+.HostEvent-tab--selected{
+    background-color: #D7D7D7 !important;
+    border-color: #D7D7D7 !important;
+}
+.HostEvent-view--container{
+	width: 100%;
+	display: flex;
+	flex-direction: row;
+	flex-wrap: nowrap;
+	justify-content: space-between;
+}
 .HostEvent .modal-footer{
 	border: 0;
 	margin-top: 0px;
@@ -30,7 +59,8 @@
 }
 .HostEvent-title{
  	color: @default-interface-txt;
- 	font-weight: 600;	
+ 	font-weight: 600;
+ 	margin-bottom: 8px;
 }
 .HostEvent .modal-body{
     max-height: 500px;
@@ -43,10 +73,11 @@
 }
 .HostEvent-field{
 	margin-bottom: 8px;
+	flex: 0 1 12em;
 }
 .HostEvent-field--label{
-	.OnePlusTwo-left--detailsLabel;
+	text-transform: uppercase;
-	width: 80px;
+	flex: 0 1 80px;
 	margin-right: 20px;
 	font-size: 12px;
 	word-wrap: break-word;
@@ -55,21 +86,20 @@
 	.OnePlusTwo-left--detailsRow;
 }
 .HostEvent-field--content{
-	.OnePlusTwo-left--detailsContent;
+	flex: 0 1 13em;
 }
 .HostEvent-details--left, .HostEvent-details--right{
-	vertical-align:top;
+	flex: 1 1 47%;
-	width:265px;
-	display: inline-block;
 }
 .HostEvent-details--left{
-	margin-right: 10px;
+	margin-right: 40px;
 }
 .HostEvent-details--right{
 	.HostEvent-field--label{
-		width: auto;
+		flex: 0 1 25em;
 	}
 	.HostEvent-field--content{
-		text-align: right;
+		flex: 0 1 15em;
+		align-self: flex-end;
 	}
-}
+}

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

@@ -17,16 +17,20 @@
             if (typeof value === 'object'){return false;}
             else {return true;}
         };
-        //var CodeMirror;
+        /* jshint ignore:start */
-        var codeMirror = function(el, json){
+        var initCodeMirror = function(el, json){
             var container = $(el)[0];
-            var editor = codeMirror.fromTextArea(container, {
+            var editor = CodeMirror.fromTextArea(container, {
                 lineNumbers: true,
                 mode: {name: "javascript", json: true}
-             });
+            });
             editor.setSize("100%", 300);
             editor.getDoc().setValue(JSON.stringify(json, null, 4));
         };
+        /* jshint ignore:end */
+        $scope.isActiveState = function(name){
+            return $state.current.name === name;
+        };
 
         $scope.getActiveHostIndex = function(){
             var result = $scope.hostResults.filter(function( obj ) {
@@ -61,19 +65,21 @@
                 $scope.hostResults = res.results;
             });
             $scope.json = JobDetailService.processJson($scope.event);
+            /* jshint ignore:start */
             if ($state.current.name === 'jobDetail.host-event.json'){
-                codeMirror('#HostEvent-json', $scope.json);
+                initCodeMirror('#HostEvent-json', $scope.json);
             }
             try {
                 $scope.stdout = JobDetailService
-                    .processJson($scope.event.event_data.res);
+                    .processJson($scope.event.event_data.res.stdout);
                 if ($state.current.name === 'jobDetail.host-event.stdout'){
-                codeMirror('#HostEvent-stdout', $scope.stdout);
+                initCodeMirror('#HostEvent-stdout', $scope.stdout);
                 }
             }
             catch(err){
-                $scope.sdout = null;
+                $scope.stdout = null;
             }
+            /* jshint ignore:end */
             $('#HostEvent').modal('show');
         };
         init();

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

@@ -11,6 +11,7 @@ var hostEventModal = {
  	url: '/task/:taskId/host-event/:eventId',
  	controller: 'HostEventController',
  	templateUrl: templateUrl('job-detail/host-event/host-event-modal'),
+ 	abtract: true,
  	resolve: {
         hostEvent: ['JobDetailService','$stateParams', function(JobDetailService, $stateParams) {
              return JobDetailService.getRelatedJobEvents($stateParams.id, {
@@ -32,7 +33,7 @@ var hostEventModal = {
  	name: 'jobDetail.host-event.details',
  	url: '/details',
  	controller: 'HostEventController',
- 	templateUrl: templateUrl('job-detail/host-event/host-event-details'),
+ 	templateUrl: templateUrl('job-detail/host-event/host-event-details')
  };
 
  var hostEventJson = {
@@ -42,11 +43,4 @@ var hostEventModal = {
  	templateUrl: templateUrl('job-detail/host-event/host-event-json')
  };
 
- var hostEventStdout = {
+ export {hostEventDetails, hostEventJson, hostEventModal};
- 	  	name: 'jobDetail.host-event.stdout',
- 	url: '/stdout',
- 	controller: 'HostEventController',
- 	templateUrl: templateUrl('job-detail/host-event/host-event-stdout')
- };
-
- export {hostEventDetails, hostEventJson, hostEventStdout, hostEventModal};

awx/ui/client/src/job-detail/host-event/main.js

@@ -5,7 +5,7 @@
  *************************************************/
 
  import {hostEventModal, hostEventDetails,
-  hostEventJson, hostEventStdout} from './host-event.route';
+  hostEventJson} from './host-event.route';
  import controller from './host-event.controller';
 
  export default
@@ -16,5 +16,4 @@
  			$stateExtender.addState(hostEventModal);
  			$stateExtender.addState(hostEventDetails);
  			$stateExtender.addState(hostEventJson);
- 			$stateExtender.addState(hostEventStdout);
+ 		}]);
- 		}]);

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

@@ -9,6 +9,17 @@
 	margin-top: 0px;
 	padding-top: 5px;
 }
+button.HostEvents-close{
+	width: 70px;
+    color: #FFFFFF;
+    text-transform: uppercase;
+    padding-left: 15px;
+    padding-right: 15px;
+ 	background-color: @default-link;
+ 	&:hover{
+ 		background-color: @default-link-hov;
+ 	}
+}
 .HostEvents-status--ok{
 	color: @green;
 }
@@ -28,9 +39,6 @@
 	max-width: 420px;
 	display: inline-block;
 }
-.HostEvents-close{
-	width: 70px;
-}
 .HostEvents-filter--form{
 	padding-top: 15px;
 	padding-bottom: 15px;

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

@@ -1,11 +1,11 @@
 <div id="HostEvents" class="HostEvents modal fade"	role="dialog">
-	<div class="modal-dialog modal-lg">	
+	<div class="modal-dialog modal-lg">
 		<div class="modal-content">
 			<div class="modal-body">
 				<div class="HostEvents-header">
 					<span class="HostEvents-title">HOST EVENTS | {{hostName}}</span>
 				<!-- Close -->
-					<button ui-sref="jobDetail" type="button" class="close">
+					<button ui-sref="jobDetail.host-summary" type="button" class="close">
 						<i class="fa fa fa-times-circle"></i>
 					</button>
 				</div>
@@ -54,9 +54,9 @@
 			<div class="modal-footer">
 				<!-- pagination -->
 				<!-- close -->
-				<button ui-sref="jobDetail" class="btn btn-default pull-right HostEvents-close">OK</button>
+				<button ui-sref="jobDetail.host-summary" class="btn btn-default pull-right HostEvents-close">OK</button>
 
 			</div>
 		</div>
 	</div>
-</div>
+</div>

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

@@ -8,7 +8,7 @@ import {templateUrl} from '../../shared/template-url/template-url.factory';
 
 export default {
     name: 'jobDetail.host-events',
-    url: '/host-events/:hostName?:filter',
+    url: '/host-events/{hostName:any}?:filter',
     controller: 'HostEventsController',
     params: {
         page_size: 10

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

@@ -9,20 +9,6 @@ import {templateUrl} from '../../shared/template-url/template-url.factory';
 export default {
     name: 'jobDetail.host-summary',
     url: '/event-summary',
-    /*
-    resolve: {
-        jobSocket: ['Socket', '$rootScope', function(Socket, $rootScope) {
-                var job_socket = Socket({
-                        scope: $rootScope,
-                        endpoint: "jobs"
-                });
-                if (!$rootScope.event_socket){
-                    job_socket.init();
-                }
-                return job_socket;
-        }]
-    },
-    */
     views:{
         'host-summary': {
             controller: 'HostSummaryController',

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

@@ -11,13 +11,13 @@
 */
 
 export default
-    [   '$location', '$rootScope', '$filter', '$scope', '$compile', '$stateParams', '$log', 'ClearScope',
+    [   '$location', '$rootScope', '$filter', '$scope', '$compile', '$state', '$stateParams', '$log', 'ClearScope',
         'GetBasePath', 'Wait', 'ProcessErrors', 'SelectPlay', 'SelectTask', 'GetElapsed', 'JobIsFinished',
         'SetTaskStyles', 'DigestEvent', 'UpdateDOM', 'DeleteJob', 'InitiatePlaybookRun', 'LoadPlays', 'LoadTasks',
         'ParseVariableString', 'GetChoices', 'fieldChoices', 'fieldLabels', 'EditSchedule',
         'ParseTypeChange', 'JobDetailService',
         function(
-            $location, $rootScope, $filter, $scope, $compile, $stateParams, $log, ClearScope,
+            $location, $rootScope, $filter, $scope, $compile, $state, $stateParams, $log, ClearScope,
             GetBasePath, Wait, ProcessErrors, SelectPlay, SelectTask, GetElapsed, JobIsFinished,
             SetTaskStyles, DigestEvent, UpdateDOM, DeleteJob, InitiatePlaybookRun, LoadPlays, LoadTasks,
             ParseVariableString, GetChoices, fieldChoices, fieldLabels, EditSchedule,
@@ -160,8 +160,14 @@ export default
             scope.processing = false;
             scope.lessStatus = false;
             scope.lessDetail = false;
-            scope.lessEvents = true;
+            // pops the event summary panel open if we're in the host summary child state
-
+            //scope.lessEvents = ($state.current.name === 'jobDetail.host-summary' || $state.current.name === 'jobDetail.host-events') ? false : true;
+            if ($state.current.name === 'jobDetail.host-summary' ){
+                scope.lessEvents = false;
+            }
+            else{
+                scope.lessEvents = true;
+            }
             scope.jobData = {};
             scope.jobData.hostSummaries = {};
 

awx/ui/client/src/job-detail/job-detail.service.js

@@ -41,8 +41,7 @@ export default
                 });
             }
             catch(err){result.event_data = undefined;}
-
+            return result === {} ? null : result;
-            return result;
         },
         // Return Ansible's passed-through response msg on a job_event
         processEventMsg: function(event){