make line expand / collapse work for paginated scrollup

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

@@ -273,64 +273,121 @@ function togglePanelExpand () {
     vm.isPanelExpanded = !vm.isPanelExpanded;
 }
 
-function toggleMenuExpand () {
+const iconCollapsed = 'fa-angle-right';
+const iconExpanded = 'fa-angle-down';
+const iconSelector = '.at-Stdout-toggle > i';
+const lineCollapsed = 'hidden';
+
+function toggleCollapseAll () {
     if (scroll.isPaused()) return;
 
-    const recordList = Object.keys(render.record).map(key => render.record[key]);
+    const records = Object.keys(render.record).map(key => render.record[key]);
-    const playRecords = recordList.filter(({ name }) => name === EVENT_START_PLAY);
+    const plays = records.filter(({ name }) => name === EVENT_START_PLAY);
-    const playIds = playRecords.map(({ uuid }) => uuid);
+    const tasks = records.filter(({ name }) => name === EVENT_START_TASK);
 
-    // get any task record that does not have a parent play record
+    const orphanLines = records
-    const orphanTaskRecords = recordList
+        .filter(({ level }) => level === 3)
-        .filter(({ name }) => name === EVENT_START_TASK)
+        .filter(({ parents }) => !records[parents[0]]);
-        .filter(({ parents }) => !parents.some(uuid => playIds.indexOf(uuid) >= 0));
 
-    const toggled = playRecords.concat(orphanTaskRecords)
+    const orphanLineParents = orphanLines
-        .map(({ uuid }) => getToggleElements(uuid))
+        .map(({ parents }) => ({ uuid: parents[0] }));
-        .filter(({ icon }) => icon.length > 0)
-        .map(({ icon, lines }) => setExpanded(icon, lines, !vm.isMenuExpanded));
 
-    if (toggled.length > 0) {
+    plays.concat(tasks).forEach(({ uuid }) => {
-        vm.isMenuExpanded = !vm.isMenuExpanded;
+        const icon = $(`#${uuid} ${iconSelector}`);
+
+        if (vm.isMenuCollapsed) {
+            icon.removeClass(iconCollapsed);
+            icon.addClass(iconExpanded);
+        } else {
+            icon.removeClass(iconExpanded);
+            icon.addClass(iconCollapsed);
+        }
+    });
+
+    tasks.concat(orphanLineParents).forEach(({ uuid }) => {
+        const lines = $(`.child-of-${uuid}`);
+
+        if (vm.isMenuCollapsed) {
+            lines.removeClass(lineCollapsed);
+        } else {
+            lines.addClass(lineCollapsed);
+        }
+    });
+
+    vm.isMenuCollapsed = !vm.isMenuCollapsed;
+    render.setCollapseAll(vm.isMenuCollapsed);
+}
+
+function toggleCollapse (uuid) {
+    if (scroll.isPaused()) return;
+
+    const record = render.record[uuid];
+
+    if (record.name === EVENT_START_PLAY) {
+        togglePlayCollapse(uuid);
+    }
+
+    if (record.name === EVENT_START_TASK) {
+        toggleTaskCollapse(uuid);
     }
 }
 
-function toggleLineExpand (uuid) {
+function togglePlayCollapse (uuid) {
-    if (scroll.isPaused()) return;
+    const record = render.record[uuid];
+    const descendants = record.children || [];
 
-    const { icon, lines } = getToggleElements(uuid);
+    const icon = $(`#${uuid} ${iconSelector}`);
-    const isExpanded = icon.hasClass('fa-angle-down');
+    const lines = $(`.child-of-${uuid}`);
+    const taskIcons = $(`#${descendants.join(', #')}`).find(iconSelector);
 
-    setExpanded(icon, lines, !isExpanded);
+    const isCollapsed = icon.hasClass(iconCollapsed);
 
-    vm.isMenuExpanded = !isExpanded;
+    if (isCollapsed) {
+        icon.removeClass(iconCollapsed);
+        icon.addClass(iconExpanded);
+
+        taskIcons.removeClass(iconExpanded);
+        taskIcons.addClass(iconCollapsed);
+        lines.removeClass(lineCollapsed);
+
+        descendants
+            .map(item => $(`.child-of-${item}`))
+            .forEach(line => line.addClass(lineCollapsed));
+    } else {
+        icon.removeClass(iconExpanded);
+        icon.addClass(iconCollapsed);
+
+        taskIcons.removeClass(iconExpanded);
+        taskIcons.addClass(iconCollapsed);
+
+        lines.addClass(lineCollapsed);
+    }
+
+    descendants
+        .map(item => render.record[item])
+        .filter(({ name }) => name === EVENT_START_TASK)
+        .forEach(rec => { render.record[rec.uuid].isCollapsed = true; });
+
+    render.record[uuid].isCollapsed = !isCollapsed;
 }
 
-function getToggleElements (uuid) {
+function toggleTaskCollapse (uuid) {
-    const record = render.record[uuid];
+    const icon = $(`#${uuid} ${iconSelector}`);
     const lines = $(`.child-of-${uuid}`);
 
-    const iconSelector = '.at-Stdout-toggle > i';
+    const isCollapsed = icon.hasClass(iconCollapsed);
-    const additionalSelector = `#${(record.children || []).join(', #')}`;
 
-    let icon = $(`#${uuid} ${iconSelector}`);
+    if (isCollapsed) {
-    if (additionalSelector) {
+        icon.removeClass(iconCollapsed);
-        icon = icon.add($(additionalSelector).find(iconSelector));
+        icon.addClass(iconExpanded);
-    }
+        lines.removeClass(lineCollapsed);
-
-    return { icon, lines };
-}
-
-function setExpanded (icon, lines, expanded) {
-    if (expanded) {
-        icon.removeClass('fa-angle-right');
-        icon.addClass('fa-angle-down');
-        lines.removeClass('hidden');
     } else {
-        icon.removeClass('fa-angle-down');
+        icon.removeClass(iconExpanded);
-        icon.addClass('fa-angle-right');
+        icon.addClass(iconCollapsed);
-        lines.addClass('hidden');
+        lines.addClass(lineCollapsed);
     }
+
+    render.record[uuid].isCollapsed = !isCollapsed;
 }
 
 function compile (html) {
@@ -476,10 +533,10 @@ function OutputIndexController (
 
     // Stdout Navigation
     vm.menu = { last: menuLast, first, down, up, clear };
-    vm.isMenuExpanded = true;
+    vm.isMenuCollapsed = false;
     vm.isFollowing = false;
-    vm.toggleMenuExpand = toggleMenuExpand;
+    vm.toggleCollapseAll = toggleCollapseAll;
-    vm.toggleLineExpand = toggleLineExpand;
+    vm.toggleCollapse = toggleCollapse;
     vm.showHostDetails = showHostDetails;
     vm.toggleLineEnabled = resource.model.get('type') === 'job';
     vm.followTooltip = vm.strings.get('tooltips.MENU_LAST');

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

@@ -21,9 +21,9 @@
                 reload="vm.reloadState">
             </at-job-search>
             <div class="at-Stdout-menuTop">
-                <div class="pull-left" ng-click="vm.toggleMenuExpand()">
+                <div class="pull-left" ng-click="vm.toggleCollapseAll()">
                     <i class="at-Stdout-menuIcon fa" ng-if="vm.toggleLineEnabled"
-                        ng-class="{ 'fa-minus': vm.isMenuExpanded, 'fa-plus': !vm.isMenuExpanded }"></i>
+                        ng-class="{ 'fa-minus': !vm.isMenuCollapsed, 'fa-plus': vm.isMenuCollapsed }"></i>
                 </div>
                 <div class="pull-right" ng-click="vm.menu.last()">
                     <i class="at-Stdout-menuIcon--lg fa fa-angle-double-down"

awx/ui/client/features/output/render.service.js

@@ -39,6 +39,13 @@ function JobRenderService ($q, $sce, $window) {
         this.hooks = { compile };
 
         this.createToggles = toggles;
+        this.state = {
+            collapseAll: false
+        };
+    };
+
+    this.setCollapseAll = value => {
+        this.state.collapseAll = value;
     };
 
     this.sortByLineNumber = (a, b) => {
@@ -133,10 +140,14 @@ function JobRenderService ($q, $sce, $window) {
             isTruncated: (event.end_line - event.start_line) > lines.length,
             lineCount: lines.length,
             isHost: this.isHostEvent(event),
+            isCollapsed: this.state.collapseAll,
         };
 
         if (event.parent_uuid) {
             info.parents = this.getParentEvents(event.parent_uuid);
+            if (this.record[event.parent_uuid]) {
+                info.isCollapsed = this.record[event.parent_uuid].isCollapsed;
+            }
         }
 
         if (info.isTruncated) {
@@ -192,6 +203,7 @@ function JobRenderService ($q, $sce, $window) {
 
     this.createRow = (current, ln, content) => {
         let id = '';
+        let icon = '';
         let timestamp = '';
         let tdToggle = '';
         let tdEvent = '';
@@ -206,7 +218,14 @@ function JobRenderService ($q, $sce, $window) {
         if (current) {
             if (this.createToggles && current.isParent && current.line === ln) {
                 id = current.uuid;
-                tdToggle = `<div class="at-Stdout-toggle" ng-click="vm.toggleLineExpand('${id}')"><i class="fa fa-angle-down can-toggle"></i></div>`;
+
+                if (current.isCollapsed) {
+                    icon = 'fa-angle-right';
+                } else {
+                    icon = 'fa-angle-down';
+                }
+
+                tdToggle = `<div class="at-Stdout-toggle" ng-click="vm.toggleCollapse('${id}')"><i class="fa ${icon} can-toggle"></i></div>`;
             }
 
             if (current.isHost) {
@@ -234,6 +253,12 @@ function JobRenderService ($q, $sce, $window) {
             ln = '...';
         }
 
+        if (current && current.isCollapsed) {
+            if (current.level === 3 || current.level === 0) {
+                classList += ' hidden';
+            }
+        }
+
         return `
             <div id="${id}" class="at-Stdout-row ${classList}">
                 ${tdToggle}