Add ansi parsing libs

awx/ui/client/features/_index.less

@@ -1,2 +1,3 @@
 @import 'credentials/_index';
+@import 'jobs/_index';
 @import 'users/tokens/_index';

awx/ui/client/features/jobs/_index.less

@@ -0,0 +1,12 @@
+.at-Stdout {
+    tr {
+        & > td:first-child {
+            padding-right: 5px;
+            border-right: 1px solid gray;
+        }
+
+        & > td:last-child {
+            padding-left: 5px;
+        }
+    }
+}

awx/ui/client/features/output/index.controller.js

@@ -1,5 +1,40 @@
-function JobsIndexController (resolved) {
-    console.log('test', resolved);
+import Ansi from 'ansi-to-html';
+import hasAnsi from 'has-ansi';
+
+function JobsIndexController (job, $sce) {
+    const vm = this || {};
+    const results = job.get('related.job_events.results');
+    const ansi = new Ansi({});
+
+    /*
+     *    const colors = [];
+     *
+     *    for (let i = 0; i < 255; i++) {
+     *        colors.push('#ababab');
+     *    }
+     *
+     */
+
+    let html = '';
+    results.forEach((line, i) => {
+        if (!line.stdout) {
+            return;
+        }
+
+        let output;
+
+        if (hasAnsi(line.stdout)) {
+            output = ansi.toHtml(line.stdout);
+        } else {
+            output = line.stdout; // .replace(/(\n|\r)/g, '');
+        }
+
+        html += `<tr><td>${i}</td><td>${output}</td></tr>`;
+    });
+
+    vm.html = $sce.trustAsHtml(html);
 }
 
+JobsIndexController.$inject = ['job', '$sce'];
+
 module.exports = JobsIndexController;

awx/ui/client/features/output/index.js

@@ -24,13 +24,9 @@ function JobsRun ($stateExtender, strings) {
             }
         },
         resolve: {
-            resolved: ['JobsModel', Jobs => {
-                const jobs = new Jobs();
-
-                return {
-                    models: { jobs }
-                };
-            }]
+            job: ['JobsModel', Jobs => new Jobs('get', 1002)
+                .then(job => job.extend('job_events'))
+            ]
         }
     });
 }

awx/ui/client/features/output/index.view.html

@@ -6,7 +6,12 @@
     </div>
     <div class="col-md-8">
         <at-panel>
-            <p>right</p>
+            <pre class="at-Stdout">
+                <table>
+                  <tbody ng-bind-html="vm.html">
+                  </tbody>
+                </table>
+            </pre>
         </at-panel>
     </div>
 </div>