diff --git a/frontend/awx/views/jobs/JobOutput/JobEventEllipsis.tsx b/frontend/awx/views/jobs/JobOutput/JobEventEllipsis.tsx new file mode 100644 index 0000000000..8e088be55e --- /dev/null +++ b/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 ...; +} diff --git a/frontend/awx/views/jobs/JobOutput/JobOutputEvents.tsx b/frontend/awx/views/jobs/JobOutput/JobOutputEvents.tsx index b3c82c9c7e..b67b7a6d12 100644 --- a/frontend/awx/views/jobs/JobOutput/JobOutputEvents.tsx +++ b/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} />
@@ -159,6 +182,7 @@ export function JobOutputEvents(props: IJobOutputEventsProps) {
                   />
                 );
               }
+
               return (
                 
           
         )}
-        {row.line}
+
+        
+          {row.line}
+          {row.canCollapse && isCollapsed && }
+