From fc3b9e2fb0b8ccf5685482a4554e49b711f92ace Mon Sep 17 00:00:00 2001
From: "James E. Blair" <jim@acmegating.com>
Date: Tue, 1 Oct 2024 16:44:57 -0700
Subject: [PATCH] Add "expand all" to the status pipeline overview page

This adds an "expand all" toggle to th overview page.  When enabled,
it will cause all the queue items in all the queues to be expanded and
to show  their jobs.

If both the pipeline toggle and this one are enabled, the result is
something like the old status page.

This is separate from the "show all jobs" toggle on the pipeline summary
page to allow users to have different preferences for each.

Change-Id: If60f32c28fba79abc6a9b5f6a76f6c5c6bb01ee1
---
 web/src/containers/status/PipelineSummary.jsx | 23 ++++++++++++------
 web/src/pages/PipelineOverview.jsx            | 24 +++++++++++++++++--
 2 files changed, 38 insertions(+), 9 deletions(-)

diff --git a/web/src/containers/status/PipelineSummary.jsx b/web/src/containers/status/PipelineSummary.jsx
index 27d352d001..3b6e2292d0 100644
--- a/web/src/containers/status/PipelineSummary.jsx
+++ b/web/src/containers/status/PipelineSummary.jsx
@@ -12,7 +12,7 @@
 // License for the specific language governing permissions and limitations
 // under the License.
 
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import PropTypes from 'prop-types'
 import { Link } from 'react-router-dom'
 
@@ -66,7 +66,7 @@ QueueItemSquare.propTypes = {
   item: PropTypes.object,
 }
 
-function QueueCard({ pipeline, queue, allQueuesExpanded }) {
+function QueueCard({ pipeline, queue, allQueuesExpanded, jobsExpanded }) {
   const [isQueueExpanded, setIsQueueExpanded] = useState(undefined)
   const [areAllQueuesExpanded, setAreAllQueuesExpanded] = useState(undefined)
 
@@ -113,7 +113,7 @@ function QueueCard({ pipeline, queue, allQueuesExpanded }) {
         </CardBody>
       }
       {isQueueExpanded ?
-        <ChangeQueue queue={queue} pipeline={pipeline} showTitle={false} />
+       <ChangeQueue queue={queue} pipeline={pipeline} showTitle={false} jobsExpanded={jobsExpanded} />
         : null
       }
     </Card>
@@ -124,9 +124,10 @@ QueueCard.propTypes = {
   pipeline: PropTypes.object,
   queue: PropTypes.object,
   allQueuesExpanded: PropTypes.bool,
+  jobsExpanded: PropTypes.bool,
 }
 
-function QueueSummary({ pipeline, showAllQueues, allQueuesExpanded }) {
+function QueueSummary({ pipeline, showAllQueues, allQueuesExpanded, jobsExpanded }) {
   let changeQueues = pipeline.change_queues
 
   if (!showAllQueues) {
@@ -143,6 +144,7 @@ function QueueSummary({ pipeline, showAllQueues, allQueuesExpanded }) {
             pipeline={pipeline}
             queue={queue}
             allQueuesExpanded={allQueuesExpanded}
+            jobsExpanded={jobsExpanded}
           />
         )
       } else {
@@ -152,7 +154,7 @@ function QueueSummary({ pipeline, showAllQueues, allQueuesExpanded }) {
         // where each change is enqueued in it's own queue by design.
         return (
           allQueuesExpanded ?
-            <ChangeQueue key={idx} queue={queue} pipeline={pipeline} showTitle={false} />
+            <ChangeQueue key={idx} queue={queue} pipeline={pipeline} showTitle={false} jobsExpanded={jobsExpanded} />
             :
             <Flex
               key={idx}
@@ -177,17 +179,22 @@ QueueSummary.propTypes = {
   pipeline: PropTypes.object,
   showAllQueues: PropTypes.bool,
   allQueuesExpanded: PropTypes.bool,
+  jobsExpanded: PropTypes.bool,
 }
 
-function PipelineSummary({ pipeline, tenant, showAllQueues, filters }) {
+function PipelineSummary({ pipeline, tenant, showAllQueues, areAllJobsExpanded, filters }) {
 
   const pipelineType = pipeline.manager || 'unknown'
   const itemCount = pipeline._count
-  const [areAllQueuesExpanded, setAreAllQueuesExpanded] = useState(undefined)
+  const [areAllQueuesExpanded, setAreAllQueuesExpanded] = useState(areAllJobsExpanded)
   const onQueueToggle = () => {
     setAreAllQueuesExpanded(!areAllQueuesExpanded)
   }
 
+  useEffect(() => {
+    setAreAllQueuesExpanded(areAllJobsExpanded)
+  }, [areAllJobsExpanded])
+
   return (
     <Card className="zuul-pipeline-summary zuul-compact-card">
       <CardTitle style={{ paddingBottom: '8px' }} >
@@ -228,6 +235,7 @@ function PipelineSummary({ pipeline, tenant, showAllQueues, filters }) {
           pipeline={pipeline}
           showAllQueues={showAllQueues}
           allQueuesExpanded={areAllQueuesExpanded}
+          jobsExpanded={areAllJobsExpanded}
         />
       </CardBody>
 
@@ -239,6 +247,7 @@ PipelineSummary.propTypes = {
   pipeline: PropTypes.object,
   tenant: PropTypes.object,
   showAllQueues: PropTypes.bool,
+  areAllJobsExpanded: PropTypes.bool,
   filters: PropTypes.object,
 }
 
diff --git a/web/src/pages/PipelineOverview.jsx b/web/src/pages/PipelineOverview.jsx
index 558d8c95ce..aa50cffbc8 100644
--- a/web/src/pages/PipelineOverview.jsx
+++ b/web/src/pages/PipelineOverview.jsx
@@ -118,7 +118,7 @@ TenantStats.propTypes = {
   reloadCallback: PropTypes.func.isRequired,
 }
 
-function PipelineGallery({ pipelines, tenant, showAllPipelines, isLoading, filters, onClearFilters }) {
+function PipelineGallery({ pipelines, tenant, showAllPipelines, expandAll, isLoading, filters, onClearFilters }) {
   // Filter out empty pipelines if necessary
   if (!showAllPipelines) {
     pipelines = pipelines.filter(ppl => ppl._count > 0)
@@ -134,7 +134,7 @@ function PipelineGallery({ pipelines, tenant, showAllPipelines, isLoading, filte
       >
         {pipelines.map(pipeline => (
           <GalleryItem key={pipeline.name}>
-            <PipelineSummary pipeline={pipeline} tenant={tenant} showAllQueues={showAllPipelines} filters={filters} />
+            <PipelineSummary pipeline={pipeline} tenant={tenant} showAllQueues={showAllPipelines} areAllJobsExpanded={expandAll} filters={filters} />
           </GalleryItem>
         ))}
       </Gallery>
@@ -156,6 +156,7 @@ PipelineGallery.propTypes = {
   pipelines: PropTypes.array,
   tenant: PropTypes.object,
   showAllPipelines: PropTypes.bool,
+  expandAll: PropTypes.bool,
   isLoading: PropTypes.bool,
   filters: PropTypes.object,
   onClearFilters: PropTypes.func,
@@ -166,6 +167,9 @@ function PipelineOverviewPage({
 }) {
   const [showAllPipelines, setShowAllPipelines] = useState(
     localStorage.getItem('zuul_show_all_pipelines') === 'true')
+  const [expandAll, setExpandAll] = useState(
+    localStorage.getItem('zuul_overview_expand_all') === 'true')
+
   const [isReloading, setIsReloading] = useState(false)
   const location = useLocation()
   const history = useHistory()
@@ -179,6 +183,11 @@ function PipelineOverviewPage({
     localStorage.setItem('zuul_show_all_pipelines', isChecked.toString())
   }
 
+  const onExpandAllToggle = (isChecked) => {
+    setExpandAll(isChecked)
+    localStorage.setItem('zuul_overview_expand_all', isChecked.toString())
+  }
+
   const onFilterChanged = (newFilters) => {
     handleFilterChange(newFilters, location, history)
     // show all pipelines when filtering, hide when not
@@ -255,6 +264,16 @@ function PipelineOverviewPage({
               <Tooltip content="Disabled when filtering">{allPipelinesSwitch}</Tooltip> :
               allPipelinesSwitch}
           </ToolbarItem>
+          <ToolbarItem>
+            <Switch
+              className="zuul-show-all-switch"
+              aria-label="Expand all"
+              label="Expand all"
+              isReversed
+              onChange={onExpandAllToggle}
+              isChecked={expandAll}
+            />
+          </ToolbarItem>
         </FilterToolbar>
       </PageSection>
       <PageSection variant={darkMode ? PageSectionVariants.dark : PageSectionVariants.light}>
@@ -262,6 +281,7 @@ function PipelineOverviewPage({
           pipelines={pipelines}
           tenant={tenant}
           showAllPipelines={showAllPipelines}
+          expandAll={expandAll}
           isLoading={isFetching}
           filters={filters}
           onClearFilters={onClearFilters}