Fixing up host event modal

Moving the details up from a nav pane and into the main body of hte modal.

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

@@ -101,11 +101,11 @@
  	font-weight: 600;
  	margin-bottom: 8px;
 }
-.HostEvent .modal-body{
+// .HostEvent .modal-body{
-    max-height: 500px;
+//     max-height: 500px;
-    overflow-y: auto;
+//     overflow-y: auto;
-	padding: 20px;
+// 	padding: 20px;
-}
+// }
 .HostEvent-nav{
 	padding-top: 12px;
 	padding-bottom: 12px;

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

@@ -1,46 +0,0 @@
-<div class="HostEvent-details--left">
-    <div class="HostEvent-title">EVENT</div>
-    <div class="HostEvent-field">
-        <span class="HostEvent-field--label">HOST</span>
-        <span class="HostEvent-field--content">
-        <a ui-sref="jobDetail.host-events({hostName: event.host_name})">{{event.host_name || "No result found"}}</a></span>
-    </div>
-    <div class="HostEvent-field">
-        <span class="HostEvent-field--label">STATUS</span>
-        <span class="HostEvent-field--content">
-            <a class="HostEvents-status">
-                <i class="fa fa-circle"  ng-class="processEventStatus(event).class"></i>
-            </a>
-            {{processEventStatus(event).status || "No result found"}}
-        </span>
-    </div>
-    <div class="HostEvent-field">
-        <span class="HostEvent-field--label">ID</span>
-        <span class="HostEvent-field--content">{{event.id || "No result found"}}</span>
-    </div>
-    <div class="HostEvent-field">
-        <span class="HostEvent-field--label">CREATED</span>
-        <span class="HostEvent-field--content">{{event.created || "No result found"}}</span>
-    </div>
-    <div class="HostEvent-field">
-        <span class="HostEvent-field--label">PLAY</span>
-        <span class="HostEvent-field--content">{{event.play || "No result found"}}</span>
-    </div>
-    <div class="HostEvent-field">
-        <span class="HostEvent-field--label">TASK</span>
-        <span class="HostEvent-field--content">{{event.task || "No result found"}}</span>
-    </div>
-    <div class="HostEvent-field">
-        <span class="HostEvent-field--label">MODULE</span>
-        <span class="HostEvent-field--content">{{event.event_data.res.invocation.module_name || "No result found"}}</span>
-    </div>
-</div>
-<div class="HostEvent-details--right" ng-show="event.event_data.res">
-    <div class="HostEvent-title">RESULTS</div>
-    <!-- discard any objects in the ansible response until we decide to flatten them -->
-    <div class="HostEvent-field" ng-repeat="(key, value) in results = event.event_data.res track by $index" ng-if="processResults(value)">
-        <span class="HostEvent-field--label">{{key}}</span>
-        <span class="HostEvent-field--content">{{value}}</span>
-    </div>
-</div>
-

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

@@ -4,15 +4,39 @@
 		<!-- modal body -->
 		<div class="modal-body">
 			<div class="HostEvent-header">
-				<span class="HostEvent-title">HOST EVENT</span>
+				<a class="HostEvents-status">
+					<i class="fa fa-circle"  ng-class="processEventStatus(event).class"></i>
+				</a>
+				<span class="HostEvent-title">{{event.host_name}}</span>
 				<!-- close -->
 				<button ui-sref="jobDetail" type="button" class="close">
 					<i class="fa fa-times-circle"></i>
 				</button>
 			</div>
+
+			<div class="HostEvent-details--left">
+			    <div class="HostEvent-field">
+			        <span class="HostEvent-field--label">CREATED</span>
+			        <span class="HostEvent-field--content">{{event.created || "No result found"}}</span>
+			    </div>
+			    <div class="HostEvent-field">
+			        <span class="HostEvent-field--label">PLAY</span>
+			        <span class="HostEvent-field--content">{{event.play || "No result found"}}</span>
+			    </div>
+			    <div class="HostEvent-field">
+			        <span class="HostEvent-field--label">TASK</span>
+			        <span class="HostEvent-field--content">{{event.task || "No result found"}}</span>
+			    </div>
+			    <div class="HostEvent-field">
+			        <span class="HostEvent-field--label">MODULE</span>
+			        <span class="HostEvent-field--content">{{event.event_data.res.invocation.module_name || "No result found"}}</span>
+			    </div>
+			</div>
+
+
+<!-- end of details-->
 			<div class="HostEvent-nav">
 				<!-- view navigation buttons -->
-				<button ui-sref="jobDetail.host-event.details" type="button" class="btn btn-sm btn-default HostEvent-tab" 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 HostEvent-tab" ng-class="{'HostEvent-tab--selected' : isActiveState('jobDetail.host-event.json')}">JSON</button>
 				<button ng-if="stdout" ui-sref="jobDetail.host-event.stdout" type="button" class="btn btn-sm btn-default HostEvent-tab" ng-class="{'HostEvent-tab--selected' : isActiveState('jobDetail.host-event.stdout')}">Standard Out</button>
 				<button ng-if="stderr" ui-sref="jobDetail.host-event.stderr" type="button" class="btn btn-sm btn-default HostEvent-tab" ng-class="{'HostEvent-tab--selected' : isActiveState('jobDetail.host-event.stderr')}">Standard Error</button>
@@ -25,9 +49,6 @@
 
 			<!-- controls -->
 			<div class="HostEvent-controls">
-				<button ng-disabled="!showPrev()" ng-click="goPrev()"
-				class="btn btn-sm btn-default HostEvent-button">Prev Host</button>
-				<button ng-disabled="!showNext()"ng-click="goNext()" class="btn btn-sm btn-default HostEvent-button">Next Host</button>
 				<button ui-sref="jobDetail" class="btn btn-sm btn-default HostEvent-close HostEvent-button" ng-show="true" >Close</button>
 			</div>
 		</div>

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

@@ -96,14 +96,16 @@
 .HostEvent-status--skipped{
 	color: @skipped;
 }
+.HostEvent-header{
+    padding-bottom: 15px;
+}
 .HostEvent-title{
  	color: @default-interface-txt;
  	font-weight: 600;
  	margin-bottom: 8px;
 }
 .HostEvent .modal-body{
-    max-height: 500px;
+    height: 480px;
-    overflow-y: auto;
 	padding: 20px;
 }
 .HostEvent-nav{

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

@@ -6,8 +6,8 @@
 
 
  export default
-    ['$stateParams', '$scope', '$state', 'Wait', 'JobDetailService', 'hostEvent', 'hostResults',
+    ['$stateParams', '$scope', '$state', 'Wait', 'JobDetailService', 'hostEvent', 'hostResults', 'parseStdoutService',
-    function($stateParams, $scope, $state, Wait, JobDetailService, hostEvent, hostResults){
+    function($stateParams, $scope, $state, Wait, JobDetailService, hostEvent, hostResults, parseStdoutService){
 
         $scope.processEventStatus = JobDetailService.processEventStatus;
         $scope.hostResults = [];
@@ -29,7 +29,7 @@
                 lineNumbers: true,
                 mode: mode
             });
-            editor.setSize("100%", 300);
+            editor.setSize("100%", 200);
             editor.getDoc().setValue(data);
         };
         /*ignore jslint end*/
@@ -44,26 +44,6 @@
             return $scope.hostResults.indexOf(result[0]);
         };
 
-        $scope.showPrev = function(){
-            return $scope.getActiveHostIndex() !== 0;
-        };
-
-        $scope.showNext = function(){
-            return $scope.getActiveHostIndex() < $scope.hostResults.indexOf($scope.hostResults[$scope.hostResults.length - 1]);
-        };
-
-        $scope.goNext = function(){
-            var index = $scope.getActiveHostIndex() + 1;
-            var id = $scope.hostResults[index].id;
-            $state.go('jobDetail.host-event.details', {eventId: id});
-        };
-
-        $scope.goPrev = function(){
-            var index = $scope.getActiveHostIndex() - 1;
-            var id = $scope.hostResults[index].id;
-            $state.go('jobDetail.host-event.details', {eventId: id});
-        };
-
         var init = function(){
             $scope.event = _.cloneDeep(hostEvent);
             $scope.hostResults = hostResults;
@@ -71,7 +51,7 @@
 
             // grab standard out & standard error if present, and remove from the results displayed in the details panel
             if (hostEvent.stdout){
-                $scope.stdout = hostEvent.stdout;
+                $scope.stdout = parseStdoutService.prettifyLite(hostEvent.stdout);
                 delete $scope.event.stdout;
             }
             if (hostEvent.stderr){

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

@@ -11,7 +11,7 @@ var hostEventModal = {
     url: '/task/:taskId/host-event/:eventId',
     controller: 'HostEventController',
     templateUrl: templateUrl('job-results/host-event/host-event-modal'),
-    'abstract': true,
+    'abstract': false,
     resolve: {
         hostEvent: ['JobDetailService', '$stateParams', function(JobDetailService, $stateParams) {
             return JobDetailService.getRelatedJobEvents($stateParams.id, {
@@ -33,13 +33,6 @@ var hostEventModal = {
     }
 };
 
-var hostEventDetails = {
-    name: 'jobDetail.host-event.details',
-    url: '/details',
-    controller: 'HostEventController',
-    templateUrl: templateUrl('job-results/host-event/host-event-details'),
-};
-
 var hostEventJson = {
     name: 'jobDetail.host-event.json',
     url: '/json',
@@ -62,4 +55,4 @@ var hostEventStderr = {
 };
 
 
-export { hostEventDetails, hostEventJson, hostEventModal, hostEventStdout, hostEventStderr };
+export { hostEventJson, hostEventModal, hostEventStdout, hostEventStderr };

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

@@ -4,7 +4,7 @@
  * All Rights Reserved
  *************************************************/
 
- import {hostEventModal, hostEventDetails,
+ import {hostEventModal,
   hostEventJson, hostEventStdout, hostEventStderr} from './host-event.route';
  import controller from './host-event.controller';
 
@@ -14,7 +14,6 @@
 
  		.run(['$stateExtender', function($stateExtender){
  			$stateExtender.addState(hostEventModal);
- 			$stateExtender.addState(hostEventDetails);
  			$stateExtender.addState(hostEventJson);
  			$stateExtender.addState(hostEventStdout);
  			$stateExtender.addState(hostEventStderr);

awx/ui/client/src/job-results/parse-stdout.service.js

@@ -33,13 +33,44 @@ export default ['$log', function($log){
             line = line.replace(/\[0m/g, '</span>');
             return line;
         },
+        prettifyLite: function(line){
+            // this function will return a line of stdout without the <span>
+            // tags styling the output. This isn't needed in the case
+            // of the host event modal where stdout is displayed in a CodeMirror
+
+
+            // TODO: remove once Chris's fixes to the [K lines comes in
+            if (line.indexOf("[K") > -1) {
+                $log.error(line);
+            }
+
+            line = line.replace(/u001b/g, '');
+
+            // ansi classes
+            line = line.replace(/\[1;31m/g, '');
+            line = line.replace(/\[0;31m/g, '');
+            line = line.replace(/\[0;32m/g, '');
+            line = line.replace(/\[0;32m=/g, '');
+            line = line.replace(/\[0;32m1/g, '');
+            line = line.replace(/\[0;33m/g, '');
+            line = line.replace(/\[0;34m/g, '');
+            line = line.replace(/\[0;35m/g, '');
+            line = line.replace(/\[0;36m/g, '');
+            line = line.replace(/(<host.*?>)\s/g, '$1');
+
+            //end span
+            line = line.replace(/\[0m/g, '');
+            //TODO: figure out how to get rid of the hidden characters that
+            // show up in the codmirror as red dots
+            return line;
+        },
         // adds anchor tags and tooltips to host status lines
         getAnchorTags: function(event, line){
             if(event.event.indexOf("runner_") === -1){
                 return line;
             }
             else{
-                return `<a ui-sref="jobDetail.host-event.details({eventId: ${event.parent}, taskId: ${event.id} })" aw-tool-tip="Event ID: ${event.id} <br>Status: ${event.event_display}. <br>Click for details" data-tip-watch="result.tip" data-placement="top">${line}</a>`;
+                return `<a ui-sref="jobDetail.host-event.json({eventId: ${event.id}, taskId: ${event.parent} })" aw-tool-tip="Event ID: ${event.id} <br>Status: ${event.event_display} <br>Click for details" data-placement="top">${line}</a>`;
             }
 
         },
@@ -126,7 +157,7 @@ export default ['$log', function($log){
         data-uuid="${clickClass}">
     </i>
 </span>`;
-                console.log(expandDom);
+                // console.log(expandDom);
                 return expandDom;
             } else {
                 // non-header lines don't get an expander