Add basic event output in sandbox

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

@@ -1,12 +1,18 @@
 .at-Stdout {
-    tr {
+    &-expand {
-        & > td:first-child {
+        padding-right: 10px;
-            padding-right: 5px;
+    }
-            border-right: 1px solid gray;
-        }
 
-        & > td:last-child {
+    &-lineNumber {
-            padding-left: 5px;
+        padding-right: 5px;
-        }
+        border-right: 1px solid gray;
+    }
+
+    &-content {
+        padding-left: 5px;
+    }
+
+    &-timestamp {
+        padding-left: 20px;
     }
 }

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

@@ -1,40 +1,102 @@
 import Ansi from 'ansi-to-html';
 import hasAnsi from 'has-ansi';
 
+let ansi;
+
+const EVENT_START_TASK = 'playbook_on_task_start';
+const EVENT_START_PLAY = 'playbook_on_play_start';
+const EVENT_STATS_PLAY = 'playbook_on_stats';
+
+const EVENT_GROUPS = [
+    EVENT_START_TASK,
+    EVENT_START_PLAY
+];
+
+const TIME_EVENTS = [
+    EVENT_START_TASK,
+    EVENT_START_PLAY,
+    EVENT_STATS_PLAY
+];
+
 function JobsIndexController (job, $sce) {
     const vm = this || {};
-    const results = job.get('related.job_events.results');
+    const events = job.get('related.job_events.results');
-    const ansi = new Ansi({});
 
-    /*
+    ansi = new Ansi();
-     *    const colors = [];
-     *
-     *    for (let i = 0; i < 255; i++) {
-     *        colors.push('#ababab');
-     *    }
-     *
-     */
 
-    let html = '';
+    const html = parseEvents(events);
-    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);
 }
 
+function parseEvents (events) {
+    events.sort((a, b) => a.start_line > b.start_line);
+
+    return events.reduce((html, event) => `${html}${parseLine(event)}`, '');
+}
+
+function parseLine (event) {
+    if (!event || !event.stdout) {
+        return '';
+    }
+
+    const { stdout } = event;
+    const lines = stdout.split('\r\n');
+
+    let ln = event.start_line;
+
+    return lines.reduce((html, line, i) => {
+        ln++;
+
+        const time = getTime(event, i);
+        const group = getGroup(event, i);
+
+        return `${html}${createRow(ln, line, time, group)}`;
+    }, '');
+}
+
+function createRow (ln, content, time, group) {
+    content = hasAnsi(content) ? ansi.toHtml(content) : content;
+
+    let expand = '';
+    if (group.parent) {
+        expand = '<i class="fa fa-caret-down"></i>';
+    }
+
+    return `
+        <tr class="${group.classList}">
+            <td class="at-Stdout-expand">${expand}</td>
+            <td class="at-Stdout-lineNumber">${ln}</td>
+            <td class="at-Stdout-content">${content}</td>
+            <td class="at-Stdout-timestamp">${time}</td>
+        </tr>`;
+}
+
+function getGroup (event, i) {
+    const group = {};
+
+    if (EVENT_GROUPS.includes(event.event) && i === 1) {
+        group.parent = true;
+        group.classList = `parent parent-${event.event_level}`;
+    } else {
+        group.classList = '';
+    }
+
+    group.level = event.event_level;
+
+    return group;
+}
+
+function getTime (event, i) {
+    if (!TIME_EVENTS.includes(event.event) || i !== 1) {
+        return '';
+    }
+
+    const date = new Date(event.created);
+
+    return `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
+}
+
 JobsIndexController.$inject = ['job', '$sce'];
 
 module.exports = JobsIndexController;

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

@@ -8,7 +8,7 @@ const MODULE_NAME = 'at.features.output';
 function JobsRun ($stateExtender, strings) {
     $stateExtender.addState({
         name: 'jobz',
-        route: '/jobz',
+        route: '/jobz/:id',
         ncyBreadcrumb: {
             label: strings.get('state.TITLE')
         },
@@ -24,9 +24,12 @@ function JobsRun ($stateExtender, strings) {
             }
         },
         resolve: {
-            job: ['JobsModel', Jobs => new Jobs('get', 1002)
+            job: ['JobsModel', '$stateParams', (Jobs, $stateParams) => {
-                .then(job => job.extend('job_events'))
+                const { id } = $stateParams;
-            ]
+
+                return new Jobs('get', id)
+                    .then(job => job.extend('job_events'));
+            }]
         }
     });
 }

awx/ui/package.json

@@ -107,12 +107,14 @@
     "angular-sanitize": "~1.6.6",
     "angular-scheduler": "git+https://git@github.com/ansible/angular-scheduler#v0.3.2",
     "angular-tz-extensions": "git+https://git@github.com/ansible/angular-tz-extensions#v0.5.2",
+    "ansi-to-html": "^0.6.3",
     "babel-polyfill": "^6.26.0",
     "bootstrap": "^3.3.7",
     "bootstrap-datepicker": "^1.7.1",
     "codemirror": "^5.17.0",
     "components-font-awesome": "^4.6.1",
     "d3": "~3.3.13",
+    "has-ansi": "^3.0.0",
     "javascript-detect-element-resize": "^0.5.3",
     "jquery": "~2.2.4",
     "jquery-ui": "^1.12.1",