Jobs output expandable section

frontend/awx/views/jobs/JobOutput/JobEventEllipsis.tsx

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  border-radius: 1em;
+  background-color: white;
+  font-size: 0.6rem;
+  width: max-content;
+  padding: 0em 1em;
+  margin-left: auto;
+  margin-right: -0.3em;
+  color: black;
+`;
+
+export function JobEventEllipsis() {
+  return <Wrapper>...</Wrapper>;
+}

frontend/awx/views/jobs/JobOutput/JobOutputEvents.tsx

@@ -86,6 +86,29 @@ export function JobOutputEvents(props: IJobOutputEventsProps) {
       [uuid]: collapsed,
       [counter]: collapsed,
     }));
+    if (collapsed === false) {
+      setCollapsedAll(false);
+    }
+  };
+
+  const [collapsedAll, setCollapsedAll] = useState(false);
+  const toggleExpandCollapseAll = () => {
+    setCollapsedAll(!collapsedAll);
+
+    // find play and expand/collapse it
+    let found = false;
+    visibleItems.forEach((visibleItem) => {
+      if (typeof visibleItem === 'number' || found === true) {
+        return;
+      }
+
+      if (visibleItem.canCollapse && visibleItem.isHeaderLine) {
+        if (visibleItem.stdout.startsWith('PLAY')) {
+          found = true;
+          setCollapsed(visibleItem.playUuid, visibleItem.counter, !collapsedAll);
+        }
+      }
+    });
   };
 
   const nonCollapsedRows = useNonCollapsedRows(
@@ -135,10 +158,10 @@ export function JobOutputEvents(props: IJobOutputEventsProps) {
         onScrollLast={scrollToBottom}
         onScrollNext={scrollPageDown}
         onScrollPrevious={scrollPageUp}
-        toggleExpandCollapseAll={() => null}
+        toggleExpandCollapseAll={() => toggleExpandCollapseAll()}
         isFlatMode={isFlatMode}
         isTemplateJob={job.type === 'job'}
-        isAllCollapsed={false}
+        isAllCollapsed={collapsedAll}
       />
       <ScrollContainer ref={containerRef} tabIndex={0}>
         <pre>
@@ -159,6 +182,7 @@ export function JobOutputEvents(props: IJobOutputEventsProps) {
                   />
                 );
               }
+
               return (
                 <JobOutputRow
                   key={`${row.counter}-${row.eventLine}-${index}`}

frontend/awx/views/jobs/JobOutput/JobOutputRow.tsx

@@ -9,6 +9,7 @@ import { Ansi } from '../../../../common/Ansi';
 import { JobEvent } from '../../../interfaces/JobEvent';
 import './JobOutput.css';
 import { ICollapsed } from './JobOutputEvents';
+import { JobEventEllipsis } from './JobEventEllipsis';
 
 const LineNumberGutter = styled.div`
   position: sticky;
@@ -29,6 +30,7 @@ const ExpandButton = styled.button`
   background-color: unset;
   border: 0;
   line-height: 1;
+  align-self: start;
 `;
 const LineNumber = styled.div`
   flex: 1;
@@ -76,7 +78,11 @@ export function JobOutputRow(props: {
             />
           </ExpandButton>
         )}
-        <LineNumber>{row.line}</LineNumber>
+
+        <LineNumber>
+          {row.line}
+          {row.canCollapse && isCollapsed && <JobEventEllipsis />}
+        </LineNumber>
       </LineNumberGutter>
       <StdOutColumn>
         <Ansi input={row.stdout} />