Fused Frontend and Bakcend

src/views/jobs/JobPipelineDisplay.jsx

@@ -1,62 +1,114 @@
 import React, { useContext } from "react";
-import {useNavigate} from "react-router-dom";
+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 Box from "@mui/material/Box";
+import AppBar from "@mui/material/AppBar";
+import Toolbar from "@mui/material/Toolbar";
+import IconButton from "@mui/material/IconButton";
+import Typography from "@mui/material/Typography";
 
 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";
+import ArrowBackIcon from "@mui/icons-material/ArrowBack";
 
 function JobPipelineDisplay(props) {
   const { back, pipeline } = props;
-  const {state: jobState} = useContext(JobContext);
+  const {
+    state: jobState,
+    pipelineCancel,
+    pipelineDestroy,
+  } = 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}`);
+  const pipelineJobs = jobState.jobs.filter(
+    (j) => j.isPipeline && j.pipelineId === pipeline.id
+  );
+  const selectedBranches = () => {
+    return pipeline.branches.map((b) => {
+      return b.filter((t) => pipeline.selectedBranches.includes(t));
+    });
+  };
+
+  const selectJob = (testName) => () => {
+    const job = pipelineJobs.find((j) => j.branchId === testName);
+    if (!job) return;
+    navigate(`/qualiteer/jobs#${job.jobId}`);
+  };
+
+  function navigateToJobs() {
+    navigate(`/qualiteer/jobs`);
   }
-  
+
+  function cancelPipeline() {
+    pipelineCancel(pipeline.id);
+  }
+
+  function deletePipeline() {
+    pipelineDestroy(pipeline.id);
+  }
+
   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)}
+    <Box>
+      <AppBar
+        position="fixed"
+        sx={{
+          backgroundColor: "white",
+          boxShadow: "none",
+          color: "black",
+        }}
+      >
+        <Toolbar disableGutters />
+        <Box sx={{ flexGrow: 1, margin: "0 10px" }}>
+          <Toolbar disableGutters>
+            <IconButton onClick={navigateToJobs}>
+              <ArrowBackIcon />
+            </IconButton>
+            <Typography variant="h6" sx={{ ml: "auto", mr: "auto" }}>
+              {pipeline.id}
+            </Typography>
+            <IconButton onClick={cancelPipeline}>
+              <ArrowBackIcon />
+            </IconButton>
+            <IconButton onClick={deletePipeline}>
+              <ArrowBackIcon />
+            </IconButton>
+          </Toolbar>
+        </Box>
+      </AppBar>
+      <Toolbar disableGutters />
+      {selectedBranches().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",
+                  }}
                 >
-                  <AccordionSummary
-                    style={{
-                      backgroundColor: "rgba(0, 0, 0, .03)",
-                      flexWrap: "wrap",
-                    }}
+                  <Typography
+                    component={"span"}
+                    style={{ wordBreak: "break-word", margin: "auto 0" }}
                   >
-                    <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>
+                    {test}
+                  </Typography>
+                  <Stack sx={{ ml: "auto" }}>I</Stack>
+                </AccordionSummary>
+              </Accordion>
+            ))}
+          </Box>
+        </React.Fragment>
+      ))}
+    </Box>
   );
 }
 

src/views/jobs/JobView.jsx

@@ -72,10 +72,8 @@ export default function JobView(props) {
     cb();
   };
 
-  
-  
   function navigateToJobs() {
-    if(job.isPipeline) return navigate(`/qualiteer/jobs#p${job.pipelineId}`)
+    if (job.isPipeline) return navigate(`/qualiteer/jobs#p${job.pipelineId}`);
     navigate("/qualiteer/jobs");
   }
 

src/views/jobs/Jobs.jsx

@@ -18,11 +18,11 @@ export default function Jobs() {
   useEffect(() => {
     const jobName = location.hash.slice(1);
     const pipelineId = jobName.slice(1);
-    if(!jobName || !pipelineId) return;
-    const hasJob = jobState.pipelines.find((p)=>p.id ===pipelineId);
+    if (!jobName || !pipelineId) return;
+    const hasJob = jobState.pipelines.find((p) => p.id === pipelineId);
     const hasPipeline = jobState.jobs.find((job) => job.name === jobName);
-    if(hasPipeline || hasJob) return;
-    if(jobName || pipelineId) navigate("/qualiteer/jobs");
+    if (hasPipeline || hasJob) return;
+    if (jobName || pipelineId) navigate("/qualiteer/jobs");
   });
 
   return (
@@ -51,29 +51,46 @@ export default function Jobs() {
         </React.Fragment>
       ) : null}
       <JobBuilder />
-      {location.hash === "" &&(
-      <React.Fragment>
-        {jobState.jobs
-          .filter((j) => !j.isPipeline)
-          .map((v, i) => (
+      {location.hash === "" && (
+        <React.Fragment>
+          {jobState.jobs
+            .filter((j) => !j.isPipeline)
+            .map((v, i) => (
+              <a
+                key={i}
+                href={`/qualiteer/jobs#${v.name}`}
+                style={{ textDecoration: "none" }}
+              >
+                <JobBox job={v} />
+              </a>
+            ))}
+          {jobState.pipelines.map((p, i) => (
             <a
               key={i}
-              href={`/qualiteer/jobs#${v.name}`}
               style={{ textDecoration: "none" }}
+              href={`/qualiteer/jobs#p${p.id}`}
             >
-              <JobBox job={v} />
-            </a>))}
-        {jobState.pipelines.map((p,i)=><a key={i} style={{textDecoration: "none"}} href={`/qualiteer/jobs#p${p.id}`}>
-          <JobPipelineBox pipeline={p}/>
-        </a>)}
-      </React.Fragment>)
-      }
-      
-      { location.hash[1] === "p"? jobState.pipelines.find((p)=>p.id===location.hash.slice(2)) && (<JobPipelineDisplay pipeline={jobState.pipelines.find((p)=>p.id===location.hash.slice(2))}/>) :
-        jobState.jobs.find((job) => job.name === location.hash.slice(1)) && (<JobView
-          job={jobState.jobs.find((job) => job.name === location.hash.slice(1))}
-        />
+              <JobPipelineBox pipeline={p} />
+            </a>
+          ))}
+        </React.Fragment>
       )}
+
+      {location.hash[1] === "p"
+        ? jobState.pipelines.find((p) => p.id === location.hash.slice(2)) && (
+            <JobPipelineDisplay
+              pipeline={jobState.pipelines.find(
+                (p) => p.id === location.hash.slice(2)
+              )}
+            />
+          )
+        : jobState.jobs.find((job) => job.name === location.hash.slice(1)) && (
+            <JobView
+              job={jobState.jobs.find(
+                (job) => job.name === location.hash.slice(1)
+              )}
+            />
+          )}
     </div>
   );
 }

src/views/jobs/builder/PipelineTrackSelector.jsx

@@ -47,6 +47,7 @@ function PipelineTrackSelector(props) {
       ...cache,
       branches: asBranches(primaries),
       tree: asTree(cache.tracks),
+      selectedBranches: as1d(cache.tracks),
     });
     next();
   };