Adjusting some colors and first pass at real stdout

by using an ng-repeat and stdoutArr

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

@@ -4,7 +4,7 @@
 * All Rights Reserved
 *************************************************/
 
-export default ['jobResultsService', '$q', function(jobResultsService, $q){
+export default ['jobResultsService', 'parseStdoutService', '$q', function(jobResultsService, parseStdoutService, $q){
     var val = {};
 
     // Get the count of the last event
@@ -91,13 +91,15 @@ export default ['jobResultsService', '$q', function(jobResultsService, $q){
             getPreviousCount(mungedEvent.counter, "play")
                 .then(count => {
                     mungedEvent.playCount = count + 1;
-                    mungedEvent.changes = ['playCount'];
+                    mungedEvent.stdout = parseStdoutService.parseStdout(event);
+                    mungedEvent.changes = ['playCount', 'stdout'];
                 });
         } else if (event.event_name === 'playbook_on_task_start') {
             getPreviousCount(mungedEvent.counter, "task")
                 .then(count => {
                     mungedEvent.taskCount = count + 1;
-                    mungedEvent.changes = ['taskCount'];
+                    mungedEvent.stdout = parseStdoutService.parseStdout(event);
+                    mungedEvent.changes = ['taskCount', 'stdout'];
                 });
         } else if (event.event_name === 'runner_on_ok' ||
             event.event_name === 'runner_on_async_ok') {
@@ -105,21 +107,24 @@ export default ['jobResultsService', '$q', function(jobResultsService, $q){
                     .then(count => {
                         mungedEvent.count = count;
                         mungedEvent.count.ok++;
-                        mungedEvent.changes = ['count'];
+                        mungedEvent.stdout = parseStdoutService.parseStdout(event);
+                        mungedEvent.changes = ['count', 'stdout'];
                     });
         } else if (event.event_name === 'runner_on_skipped') {
             getPreviousCount(mungedEvent.counter)
                 .then(count => {
                     mungedEvent.count = count;
                     mungedEvent.count.skipped++;
-                    mungedEvent.changes = ['count'];
+                    mungedEvent.stdout = parseStdoutService.parseStdout(event);
+                    mungedEvent.changes = ['count', 'stdout'];
                 });
         } else if (event.event_name === 'runner_on_unreachable') {
             getPreviousCount(mungedEvent.counter)
                 .then(count => {
                     mungedEvent.count = count;
                     mungedEvent.count.unreachable++;
-                    mungedEvent.changes = ['count'];
+                    mungedEvent.stdout = parseStdoutService.parseStdout(event);
+                    mungedEvent.changes = ['count', 'stdout'];
                 });
         } else if (event.event_name === 'runner_on_error' ||
             event.event_name === 'runner_on_async_failed') {
@@ -127,15 +132,17 @@ export default ['jobResultsService', '$q', function(jobResultsService, $q){
                     .then(count => {
                         mungedEvent.count = count;
                         mungedEvent.count.failed++;
-                        mungedEvent.changes = ['count'];
+                        mungedEvent.stdout = event.stdout;
+                        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 = event.stdout;
             mungedEvent.finishedTime = event.modified;
-            mungedEvent.changes = ['count', 'countFinished', 'finishedTime'];
+            mungedEvent.changes = ['count', 'countFinished', 'finishedTime', 'stdout'];
         } else {
         }
 

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

@@ -3,6 +3,7 @@
 .JobResultsStdOut{
     height: 100%;
     margin-top: 15px;
+    background-color: @default-no-items-bord;
 }
 
 .JobResultsStdOut-aLineOfStdOut{
@@ -10,16 +11,23 @@
 }
 
 .JobResultsStdOut-lineNumberColumn{
-    // flex: 1 0 auto;
+    background-color: @default-list-header-bg;
-    background-color: @d7grey;
     text-align: right;
-    padding-right: 10px;
+    padding: 10px 10px 10px;
-    color: @default-icon;
+    color: @b7grey;
-    width: 100px;
+    width: 75px;
+}
+
+.JobResultsStdOut-lineNumberColumn--first{
+    text-align: left;
+    padding: 0px;
 }
 
 .JobResultsStdOut-stdoutColumn{
-    background-color: @default-secondary-bg;
+    padding: 10px 20px 10px 20px;
-    // flex: 6 0 auto;
+    color: @default-interface-txt;
-
+}
+
+.JobResultsStdOut-stdoutColumn--first{
+    padding-top:0px;
 }

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

@@ -1,46 +1,21 @@
 <div class="JobResultsStdOut">
-
     <div class="JobResultsStdOut-aLineOfStdOut">
-        <div class="JobResultsStdOut-lineNumberColumn">
+        <div class="JobResultsStdOut-lineNumberColumn
-            1
+            JobResultsStdOut-lineNumberColumn--first">
+                <i class="fa fa-plus"></i>
         </div>
-        <div class="JobResultsStdOut-stdoutColumn">
+        <div class="JobResultsStdOut-stdoutColumn
-            Vault password:
+            JobResultsStdOut-stdoutColumn--first">
         </div>
     </div>
-
+    <div ng-repeat="line in stdoutArr">
-    <div class="JobResultsStdOut-aLineOfStdOut">
+        <div class="JobResultsStdOut-aLineOfStdOut">
-        <div class="JobResultsStdOut-lineNumberColumn">
+            <div class="JobResultsStdOut-lineNumberColumn">
-            2
+                {{line.end_line}}
-        </div>
+            </div>
-        <div class="JobResultsStdOut-stdoutColumn">
+            <div class="JobResultsStdOut-stdoutColumn">
-            PLAY [Create Tower Host] *******************************************************
+                {{line.stdout}}
+            </div>
         </div>
     </div>
-
-    <div class="JobResultsStdOut-aLineOfStdOut">
-        <div class="JobResultsStdOut-lineNumberColumn">
-            3
-        </div>
-        <div class="JobResultsStdOut-stdoutColumn">
-            TASK [create_ec2_instances : Launch Instance] **********************************
-            changed: [local]
-        </div>
-    </div>
-
-    <div class="JobResultsStdOut-aLineOfStdOut">
-        <div class="JobResultsStdOut-lineNumberColumn">
-            4
-        </div>
-        <div class="JobResultsStdOut-stdoutColumn">
-            TASK [create_ec2_instances : Instance Ids] *************************************
-            [DEPRECATION WARNING]: Using bare variables is deprecated. Update your
-            playbooks so that the environment value uses the full variable syntax
-            ('{{ec2.instances}}').
-            This feature will be removed in a future release.
-            Deprecation warnings can be disabled by setting deprecation_warnings=False in
-            ansible.cfg.
-        </div>
-    </div>
-
 </div>

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

@@ -79,6 +79,7 @@ export default ['jobData', 'jobDataOptions', 'jobLabels', 'count', '$scope', 'Pa
     $scope.count = count.val;
     $scope.hostCount = getTotalHostCount(count.val);
     $scope.countFinished = count.countFinished;
+    $scope.stdoutArr = [];
 
     // EVENT STUFF BELOW
 
@@ -129,6 +130,10 @@ export default ['jobData', 'jobDataOptions', 'jobLabels', 'count', '$scope', 'Pa
                         // any more.
                         $scope.countFinished = true;
                     }
+
+                    if(change === 'stdout'){
+                        $scope.stdoutArr.push(mungedEvent.stdout);
+                    }
                 });
             }
 

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

@@ -515,7 +515,6 @@
                 </div>
                 <host-status-bar></host-status-bar>
                 <job-results-standard-out></job-results-standard-out>
-                <!-- <standard-out-log stdout-endpoint="job.related.stdout"></standard-out-log> -->
             </div>
 
         </div>

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

@@ -51,8 +51,8 @@ export default {
             if (jobData.finished) {
                 // if the job is finished, grab the playbook_on_stats
                 // role to get the final count
-                Rest.setUrl(jobData.related.job_events +
+                Rest.setUrl(jobData.related.job_events);// +
-                    "?event=playbook_on_stats");
+                    // "?event=playbook_on_stats");
                 Rest.get()
                     .success(function(data) {
                         defer.resolve({

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

@@ -11,6 +11,7 @@ import route from './job-results.route.js';
 
 import jobResultsService from './job-results.service';
 import eventQueueService from './event-queue.service';
+import parseStdoutService from './parse-stdout.service';
 
 import durationFilter from './duration.filter';
 
@@ -21,4 +22,5 @@ export default
         }])
         .service('jobResultsService', jobResultsService)
         .service('eventQueue', eventQueueService)
+        .service('parseStdoutService', parseStdoutService)
         .filter('duration', durationFilter);

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

@@ -0,0 +1,28 @@
+/*************************************************
+* Copyright (c) 2016 Ansible, Inc.
+*
+* All Rights Reserved
+*************************************************/
+
+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
+            return line.replace(/rn/g, '');
+        },
+        parseStdout: function(event){
+            // 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 {
+                start_line: event.start_line,
+                end_line: event.end_line,
+                stdout: this.prettify(event.stdout)
+            };
+        }
+    };
+    return val;
+}];