Add dynamic angular interaction after HTML insertion

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

@@ -20,6 +20,7 @@
         font-size: 12px;
 
         padding: 0 20px 0 10px;
+        user-select: none;
     }
 
     &-line {
@@ -30,30 +31,24 @@
 
         padding-right: 5px;
         border-right: 1px solid @at-gray-dark;
+        user-select: none;
     }
 
     &-event {
-        padding-left: 2ch;
-        width: 83ch;
+        padding: 0 10px;
     }
 
     &-time {
-        padding-left: 20px;
+        padding-right: 2ch;
         font-size: 12px;
         text-align: right;
+        user-select: none;
+        width: 11ch;
+        border-left: 1px dashed @at-gray-dark;
     }
 
     &-container {
-        & > table {
-            table-layout: fixed;
-
-            td {
-                vertical-align: top;
-                word-wrap: break-word;
-                white-space: pre-wrap;
-            }
-        }
-
+        max-height: 80vh;
         font-size: 14px;
         border: 1px solid @at-gray-dark-2x;
         background-color: @at-gray-light-3x;
@@ -61,5 +56,19 @@
         margin: 0;
         border-top-left-radius: 0;
         border-top-right-radius: 0;
+
+        & > table {
+            table-layout: fixed;
+
+            tr:hover > td {
+                background: white;
+            }
+
+            td {
+                vertical-align: top;
+                word-wrap: break-word;
+                white-space: pre-wrap;
+            }
+        }
     }
 }

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

@@ -2,6 +2,10 @@ import Ansi from 'ansi-to-html';
 import hasAnsi from 'has-ansi';
 
 let ansi;
+let $timeout;
+let $sce;
+let $compile;
+let $scope;
 
 const EVENT_START_TASK = 'playbook_on_task_start';
 const EVENT_START_PLAY = 'playbook_on_play_start';
@@ -18,22 +22,30 @@ const TIME_EVENTS = [
     EVENT_STATS_PLAY
 ];
 
-function JobsIndexController (job, $sce) {
+function JobsIndexController (job, _$sce_, _$timeout_, _$scope_, _$compile_) {
+    ansi = new Ansi();
+    $timeout = _$timeout_;
+    $sce = _$sce_;
+    $compile = _$compile_;
+    $scope = _$scope_;
+
     const vm = this || {};
     const events = job.get('related.job_events.results');
+    const html = $sce.trustAsHtml(parseEvents(events));
 
-    ansi = new Ansi();
-
-    const html = parseEvents(events);
-
-    vm.html = $sce.trustAsHtml(html);
     vm.toggle = toggle;
+
+    $timeout(() => {
+        const table = $('#result-table');
+
+        table.html($sce.getTrustedHtml(html));
+        $compile(table.contents())($scope);
+    });
 }
 
 function parseEvents (events) {
     events.sort(orderByLineNumber);
 
-    console.log(events);
     return events.reduce((html, event) => `${html}${parseLine(event)}`, '');
 }
 
@@ -90,12 +102,12 @@ function createRow (ln, content, time, group) {
 
     let expand = '';
     if (group.parent) {
-        expand = '<i class="fa fa-chevron-down" ng-click="vm.toggle(group.level)"></i>';
+        expand = '<i class="fa fa-chevron-down can-toggle"></i>';
     }
 
     return `
         <tr class="${group.classList}">
-            <td class="at-Stdout-toggle">${expand}</td>
+            <td class="at-Stdout-toggle" ng-click="vm.toggle(${group.id})">${expand}</td>
             <td class="at-Stdout-line">${ln}</td>
             <td class="at-Stdout-event">${content}</td>
             <td class="at-Stdout-time">${time}</td>
@@ -108,6 +120,7 @@ function getGroup (event, i) {
     if (EVENT_GROUPS.includes(event.event) && i === 1) {
         group.parent = true;
         group.classList = `parent parent-${event.event_level}`;
+        group.id = i;
     } else {
         group.classList = '';
     }
@@ -130,17 +143,7 @@ function getTime (event, i) {
 function toggle (id) {
     console.log(id);
 }
-/*
- *
- *function getTruncatedEvent () {
- *
- *}
- *
- *function addDynamic (start) {
- *    document.getElementsByClassName('parent')
- *}
- *
- */
-JobsIndexController.$inject = ['job', '$sce'];
+
+JobsIndexController.$inject = ['job', '$sce', '$timeout', '$scope', '$compile'];
 
 module.exports = JobsIndexController;

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

@@ -30,7 +30,7 @@ function JobsRun ($stateExtender, strings) {
                 return new Jobs('get', id)
                     .then(job => job.extend('job_events', {
                         params: {
-                            page_size: 200,
+                            page_size: 10000,
                             order_by: 'start_line'
                         }
                     }));

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

@@ -12,23 +12,7 @@
                 <div class="at-u-clear"></div>
             </div>
 
-            <pre class="at-Stdout-container"><table>
-                <thead>
-                    <tr>
-                        <th class="at-Stdout-toggle">&nbsp;</th>
-                        <th class="at-Stdout-line"></th>
-                        <th class="at-Stdout-event"></th>
-                    </tr>
-                </thead>
-                <tbody ng-bind-html="vm.html"></tbody>
-                <tfoot>
-                    <tr>
-                        <td class="at-Stdout-toggle">&nbsp;</td>
-                        <td class="at-Stdout-line"></td>
-                        <td class="at-Stdout-event"></td>
-                        <td class="at-Stdout-backToTop"><i class="fa fa-caret-up"></i> <span>Back to Top</span></td>
-                    </tr>
-                </tfoot></table></pre>
+            <pre class="at-Stdout-container"><table><thead><tr><th class="at-Stdout-toggle">&nbsp;</th><th class="at-Stdout-line"></th><th class="at-Stdout-event"></th></tr></thead><tbody id="result-table"></tbody></table></pre>
         </at-panel>
     </div>
 </div>