Super Pipelines and display

src/views/jobs/JobPipelineDisplay.jsx

@@ -0,0 +1,63 @@
+import React, { useContext } from "react";
+import {useNavigate} from "react-router-dom";
+import JobContext from "../../ctx/JobContext.jsx";
+import Button from "@mui/material/Button";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+
+import Accordion from "@mui/material/Accordion";
+import AccordionSummary from "@mui/material/AccordionSummary";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import Stack from "@mui/material/Stack";
+
+function JobPipelineDisplay(props) {
+  const { back, pipeline } = props;
+  const {state: jobState} = useContext(JobContext);
+  const navigate = useNavigate();
+  const pipelineJobs = jobState.jobs.filter((j)=>j.isPipeline && j.pipelineId === pipeline.id);
+  
+  const selectJob = (testName) => () =>{
+    const job  = pipelineJobs.find((j)=>j.branchId === testName);   
+    if(!job) return;        navigate(`/qualiteer/jobs#${job.jobId}`);
+  }
+  
+  return (
+    <React.Fragment>
+        <h3>{}</h3>
+        {pipeline.branches.map((track, i) => (
+          <React.Fragment key={i}>
+            <Typography variant="h6">{i + 1}</Typography>
+            <Box>
+              {track.map((test, j) => (
+                <Accordion
+                  expanded={false}
+                  disableGutters={true}
+                  square
+                  key={j}
+                  onClick={selectJob(test)}
+                >
+                  <AccordionSummary
+                    style={{
+                      backgroundColor: "rgba(0, 0, 0, .03)",
+                      flexWrap: "wrap",
+                    }}
+                  >
+                    <Typography
+                      component={"span"}
+                      style={{ wordBreak: "break-word", margin: "auto 0" }}
+                    >
+                      {test}
+                    </Typography>
+                    <Stack sx={{ ml: "auto" }}>I</Stack>
+                  </AccordionSummary>
+                </Accordion>
+              ))}
+            </Box>
+          </React.Fragment>
+        ))}
+    </React.Fragment>
+  );
+}
+
+export default JobPipelineDisplay;