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

@@ -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,
 }
 

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}