Add scrollTo for top and bottom, add better expand/collapse

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

@@ -1,7 +1,7 @@
 .at-Stdout {
     font-family: monospace;
 
-    &-menu {
+    &-menuTop {
         color: @at-gray-dark-4x;
         border: 1px solid @at-gray-dark-2x;
         border-top-left-radius: 4px;
@@ -9,9 +9,18 @@
         border-bottom: none;
     }
 
+    &-menuBottom {
+        color: @at-gray-dark-4x;
+        border: 1px solid @at-gray-dark-2x;
+        border-bottom-left-radius: 4px;
+        border-bottom-right-radius: 4px;
+        border-top: none;
+    }
+
     &-menuIcon {
         font-size: 12px;
         padding: 10px;
+        cursor: pointer;
     }
 
     &-toggle {
@@ -51,7 +60,6 @@
         text-align: right;
         user-select: none;
         width: 11ch;
-        border-left: 1px dashed @at-gray-dark;
     }
 
     &-container {
@@ -61,8 +69,7 @@
         background-color: @at-gray-light-3x;
         padding: 0;
         margin: 0;
-        border-top-left-radius: 0;
+        border-radius: 0;
-        border-top-right-radius: 0;
 
         & > table {
             table-layout: fixed;

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

@@ -1,6 +1,7 @@
 import Ansi from 'ansi-to-html';
 import hasAnsi from 'has-ansi';
 
+let vm;
 let ansi;
 let $timeout;
 let $sce;
@@ -8,6 +9,7 @@ let $compile;
 let $scope;
 
 const record = {};
+const meta = {};
 
 const EVENT_START_TASK = 'playbook_on_task_start';
 const EVENT_START_PLAY = 'playbook_on_play_start';
@@ -31,11 +33,20 @@ function JobsIndexController (job, _$sce_, _$timeout_, _$scope_, _$compile_) {
     $scope = _$scope_;
     ansi = new Ansi();
 
-    const vm = this || {};
+    vm = this || {};
     const events = job.get('related.job_events.results');
     const html = $sce.trustAsHtml(parseEvents(events));
 
     vm.toggle = toggle;
+    vm.menu = {
+        expand: menuExpand,
+        scrollToBottom: menuScrollToBottom,
+        scrollToTop: menuScrollToTop
+    };
+
+    vm.state = {
+        expand: true
+    };
 
     $timeout(() => {
         const table = $('#result-table');
@@ -43,8 +54,23 @@ function JobsIndexController (job, _$sce_, _$timeout_, _$scope_, _$compile_) {
         table.html($sce.getTrustedHtml(html));
         $compile(table.contents())($scope);
     });
+}
 
-    console.log(record);
+function menuExpand () {
+    vm.state.expand = !vm.state.expand;
+    vm.toggle(meta.parent);
+}
+
+function menuScrollToBottom () {
+    const container = $('.at-Stdout-container')[0];
+
+    container.scrollTo(0, container.scrollHeight);
+}
+
+function menuScrollToTop () {
+    const container = $('.at-Stdout-container')[0];
+
+    container.scrollTo(0, 0);
 }
 
 function parseEvents (events) {
@@ -106,7 +132,7 @@ function createRecord (ln, lines, event) {
     };
 
     if (event.parent_uuid) {
-        info.childOf = event.parent_uuid;
+        info.parents = getParentEvents(event.parent_uuid);
     }
 
     if (info.isTruncated) {
@@ -115,6 +141,19 @@ function createRecord (ln, lines, event) {
 
     if (EVENT_GROUPS.includes(event.event)) {
         info.isParent = true;
+
+        if (event.event_level === 1) {
+            meta.parent = event.uuid;
+        }
+
+        if (event.parent_uuid) {
+            if (record[event.parent_uuid].children &&
+                !record[event.parent_uuid].children.includes(event.uuid)) {
+                record[event.parent_uuid].children.push(event.uuid);
+            } else {
+                record[event.parent_uuid].children = [event.uuid];
+            }
+        }
     }
 
     if (TIME_EVENTS.includes(event.event)) {
@@ -127,6 +166,20 @@ function createRecord (ln, lines, event) {
     return info;
 }
 
+function getParentEvents (uuid, list) {
+    list = list || [];
+
+    if (record[uuid]) {
+        list.push(uuid);
+    }
+
+    if (record[uuid].parents) {
+        list = list.concat(record[uuid].parents);
+    }
+
+    return list;
+}
+
 function createRow (current, ln, content) {
     let expand = '';
     let timestamp = '';
@@ -151,8 +204,8 @@ function createRow (current, ln, content) {
             timestamp = current.time;
         }
 
-        if (!classList) {
+        if (current.parents) {
-            classList += `child-of-${current.childOf}`;
+            classList = current.parents.reduce((list, uuid) => `${list} child-of-${uuid}`, '');
         }
     }
 
@@ -180,18 +233,23 @@ function getTime (created) {
 }
 
 function toggle (uuid) {
-    const i = $(`#${uuid} .at-Stdout-toggle > i`);
+    const lines = $(`.child-of-${uuid}`);
+    let icon = $(`#${uuid} .at-Stdout-toggle > i`);
 
-    if (i.hasClass('fa-chevron-down')) {
+    if (record[uuid].children) {
-        i.addClass('fa-chevron-right');
+        icon = icon.add($(`#${record[uuid].children.join(', #')}`).find('.at-Stdout-toggle > i'));
-        i.removeClass('fa-chevron-down');
+    }
 
-        $(`.child-of-${uuid}`).addClass('hidden');
+    if (icon.hasClass('fa-chevron-down')) {
+        icon.addClass('fa-chevron-right');
+        icon.removeClass('fa-chevron-down');
+
+        lines.addClass('hidden');
     } else {
-        i.addClass('fa-chevron-down');
+        icon.addClass('fa-chevron-down');
-        i.removeClass('fa-chevron-right');
+        icon.removeClass('fa-chevron-right');
 
-        $(`.child-of-${uuid}`).removeClass('hidden');
+        lines.removeClass('hidden');
     }
 }
 

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

@@ -6,13 +6,27 @@
     </div>
     <div class="col-md-8">
         <at-panel class="at-Stdout">
-            <div class="at-Stdout-menu">
+            <div class="at-Stdout-menuTop">
-                <div class="pull-left"><i class="at-Stdout-menuIcon fa fa-minus"></i></div>
+                <div class="pull-left" ng-click="vm.menu.expand()">
-                <div class="pull-right"><i class="at-Stdout-menuIcon fa fa-arrow-down"></i></div>
+                    <i class="at-Stdout-menuIcon fa"
+                       ng-class="{ 'fa-minus': vm.state.expand, 'fa-plus': !vm.state.expand }"></i>
+                </div>
+                <div class="pull-right" ng-click="vm.menu.scrollToBottom()">
+                    <i class="at-Stdout-menuIcon fa fa-arrow-down"></i>
+                </div>
+
                 <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 id="result-table"></tbody></table></pre>
+
+            <div class="at-Stdout-menuBottom">
+                <div class="pull-right" ng-click="vm.menu.scrollToTop()">
+                    <i class="at-Stdout-menuIcon fa fa-arrow-up"></i>
+                </div>
+
+                <div class="at-u-clear"></div>
+            </div>
         </at-panel>
     </div>
 </div>