working on stdout view line population

awx/ui/client/src/job-results/event-queue.service.js

@@ -73,9 +73,18 @@ export default ['jobResultsService', 'parseStdoutService', '$q', function(jobRes
             counter: event.counter,
             id: event.id,
             processed: false,
-            name: event.event_name
+            name: event.event_name,
+            changes: []
         };
 
+        // the interface for grabbing standard out is generalized and
+        // present across many types of events, so go ahead and check for
+        // updates to it
+        if (event.stdout) {
+            mungedEvent.stdout = parseStdoutService.parseStdout(event);
+            mungedEvent.changes.push('stdout');
+        }
+
         // for different types of events, you need different types of data
         if (event.event_name === 'playbook_on_start') {
             mungedEvent.count = {
@@ -86,20 +95,19 @@ export default ['jobResultsService', 'parseStdoutService', '$q', function(jobRes
                 changed: 0
             };
             mungedEvent.startTime = event.modified;
-            mungedEvent.changes = ['count', 'startTime'];
+            mungedEvent.changes.push('count');
+            mungedEvent.changes.push('startTime');
         } else if (event.event_name === 'playbook_on_play_start') {
             getPreviousCount(mungedEvent.counter, "play")
                 .then(count => {
                     mungedEvent.playCount = count + 1;
-                    mungedEvent.stdout = parseStdoutService.parseStdout(event);
+                    mungedEvent.changes.push('playCount');
-                    mungedEvent.changes = ['playCount', 'stdout'];
                 });
         } else if (event.event_name === 'playbook_on_task_start') {
             getPreviousCount(mungedEvent.counter, "task")
                 .then(count => {
                     mungedEvent.taskCount = count + 1;
-                    mungedEvent.stdout = parseStdoutService.parseStdout(event);
+                    mungedEvent.changes.push('taskCount');
-                    mungedEvent.changes = ['taskCount', 'stdout'];
                 });
         } else if (event.event_name === 'runner_on_ok' ||
             event.event_name === 'runner_on_async_ok') {
@@ -107,24 +115,21 @@ export default ['jobResultsService', 'parseStdoutService', '$q', function(jobRes
                     .then(count => {
                         mungedEvent.count = count;
                         mungedEvent.count.ok++;
-                        mungedEvent.stdout = parseStdoutService.parseStdout(event);
+                        mungedEvent.changes.push('count');
-                        mungedEvent.changes = ['count', 'stdout'];
                     });
         } else if (event.event_name === 'runner_on_skipped') {
             getPreviousCount(mungedEvent.counter)
                 .then(count => {
                     mungedEvent.count = count;
                     mungedEvent.count.skipped++;
-                    mungedEvent.stdout = parseStdoutService.parseStdout(event);
+                    mungedEvent.changes.push('count');
-                    mungedEvent.changes = ['count', 'stdout'];
                 });
         } else if (event.event_name === 'runner_on_unreachable') {
             getPreviousCount(mungedEvent.counter)
                 .then(count => {
                     mungedEvent.count = count;
                     mungedEvent.count.unreachable++;
-                    mungedEvent.stdout = parseStdoutService.parseStdout(event);
+                    mungedEvent.changes.push('count');
-                    mungedEvent.changes = ['count', 'stdout'];
                 });
         } else if (event.event_name === 'runner_on_error' ||
             event.event_name === 'runner_on_async_failed') {
@@ -132,18 +137,16 @@ export default ['jobResultsService', 'parseStdoutService', '$q', function(jobRes
                     .then(count => {
                         mungedEvent.count = count;
                         mungedEvent.count.failed++;
-                        mungedEvent.stdout = parseStdoutService.parseStdout(event);
+                        mungedEvent.changes.push('count');
-                        mungedEvent.changes = ['count', 'stdout'];
                     });
         } else if (event.event_name === 'playbook_on_stats') {
-            console.log(event.modified);
             // get the data for populating the host status bar
             mungedEvent.count = jobResultsService
                 .getCountsFromStatsEvent(event.event_data);
-            mungedEvent.stdout = parseStdoutService.parseStdout(event);
             mungedEvent.finishedTime = event.modified;
-            mungedEvent.changes = ['count', 'countFinished', 'finishedTime', 'stdout'];
+            mungedEvent.changes.push('count');
-        } else {
+            mungedEvent.changes.push('countFinished');
+            mungedEvent.changes.push('finishedTime');
         }
 
         mungedEventDefer.resolve(mungedEvent);

awx/ui/client/src/job-results/job-results-stdout/job-results-stdout.block.less

@@ -4,28 +4,45 @@
     height: 100%;
     margin-top: 15px;
     background-color: @default-no-items-bord;
+    border-radius: 5px;
+    margin-bottom: 10px;
 }
 
-.JobResultsStdOut-aLineOfStdOut{
+.JobResultsStdOut-aLineOfStdOut,
+.JobResultsStdOut-expandLine {
     display: flex;
 }
 
 .JobResultsStdOut-lineNumberColumn{
+    display: flex;
     background-color: @default-list-header-bg;
     text-align: right;
-    padding: 10px 10px 10px;
+    padding-right: 10px;
+    padding-top: 2px;
+    padding-bottom: 2px;
     color: @b7grey;
     width: 75px;
     white-space: pre-line;
 }
 
+.JobResultsStdOut-lineExpander {
+    text-align: left;
+    padding-left: 10px;
+    margin-right: auto;
+}
+
 .JobResultsStdOut-lineNumberColumn--first{
     text-align: left;
     padding: 0px;
+    padding-left: 11px;
+    padding-top: 10px;
+    white-space: normal;
 }
 
 .JobResultsStdOut-stdoutColumn{
-    padding: 10px 20px 10px 20px;
+    padding-left: 20px;
+    padding-top: 2px;
+    padding-bottom: 2px;
     color: @default-interface-txt;
     display: inline-block;
     white-space: pre-wrap;

awx/ui/client/src/job-results/job-results-stdout/job-results-stdout.partial.html

@@ -1,5 +1,5 @@
 <div class="JobResultsStdOut">
-    <div class="JobResultsStdOut-aLineOfStdOut">
+    <div class="JobResultsStdOut-expandLine">
         <div class="JobResultsStdOut-lineNumberColumn
             JobResultsStdOut-lineNumberColumn--first">
                 <i class="fa fa-plus"></i>
@@ -8,14 +8,4 @@
             JobResultsStdOut-stdoutColumn--first">
         </div>
     </div>
-    <div ng-repeat="line in stdoutArr">
-        <div class="JobResultsStdOut-aLineOfStdOut">
-            <div class="JobResultsStdOut-lineNumberColumn">
-                {{line.end_line}}
-            </div>
-            <div class="JobResultsStdOut-stdoutColumn" ng-bind-html="line.stdout">
-                <!-- {{line.stdout}} -->
-            </div>
-        </div>
-    </div>
 </div>

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

@@ -132,7 +132,7 @@ export default ['jobData', 'jobDataOptions', 'jobLabels', 'count', '$scope', 'Pa
                     }
 
                     if(change === 'stdout'){
-                        $scope.stdoutArr.push(mungedEvent.stdout);
+                        $(".JobResultsStdOut").append(mungedEvent.stdout);
                     }
                 });
             }

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

@@ -7,11 +7,12 @@
 export default [function(){
     var val = {
         prettify: function(line){
+
             // this function right now just removes the 'rn' strings
             // that i'm currently seeing on this branch on the beginning
             // and end of each event string. In the future it could be
             // used to add styling classes to the actual lines of stdout
-            line = line.replace(/rn/g, '\n');
+            // line = line.replace(/rn/g, '\n');
             line = line.replace(/u001b/g, '');
 
             // ok
@@ -23,20 +24,55 @@ export default [function(){
 
             line = line.replace(/\[0;32m=/g, '<span class="ansi32">');
             line = line.replace(/\[0;32m1/g, '<span class="ansi36">');
+            line = line.replace(/\[0;33m/g, '<span class="ansi33">');
+            line = line.replace(/\[0;36m/g, '<span class="ansi36">');
 
             //end span
             line = line.replace(/\[0m/g, '</span>');
             return line;
         },
+        getCollapseClasses: function(event) {
+            var string = "";
+            if (event.event_name === "playbook_on_play_start") {
+                return string;
+            } else if (event.event_name === "playbook_on_task_start") {
+                if (event.event_data.play_uuid) {
+                    string += " play_" + event.event_data.play_uuid;
+                }
+                return string;
+            } else {
+                if (event.event_data.play_uuid) {
+                    string += " play_" + event.event_data.play_uuid;
+                }
+                if (event.event_data.task_uuid) {
+                    string += " task_" + event.event_data.task_uuid;
+                }
+                return string;
+            }
+        },
+        getCollapseIcon: function(event, line) {
+            if ((event.event_name === "playbook_on_play_start" || event.event_name === "playbook_on_task_start") && line !== "") {
+                return `<span class="JobResultsStdOut-lineExpander"><i class="fa fa-caret-down"></i></span>`;
+            } else {
+                return `<span class="JobResultsStdOut-lineExpander"></span>`;
+            }
+        },
         parseStdout: function(event){
+            var stdoutStrings = _
+                .zip(_.range(event.start_line + 1,
+                    event.end_line + 1),
+                    event.stdout.split("\r\n").slice(0, -1))
+                .map(lineArr => {
+                    return `
+<div class="JobResultsStdOut-aLineOfStdOut${this.getCollapseClasses(event)}">
+    <div class="JobResultsStdOut-lineNumberColumn">${this.getCollapseIcon(event, lineArr[1])}${lineArr[0]}</div>
+    <div class="JobResultsStdOut-stdoutColumn">${this.prettify(lineArr[1])}</div>
+</div>`;
+                }).join("");
             // this object will be used by the ng-repeat in the
             // job-results-stdout.partial.html. probably need to add the
             // elapsed time in here too
-            return {
+            return stdoutStrings;
-                start_line: event.start_line,
-                end_line: event.end_line,
-                stdout: this.prettify(event.stdout)
-            };
         }
     };
     return val;