Fixed display and failing pipeline

src/ctx/JobContext.jsx

@@ -114,6 +114,7 @@ export const JobProvider = ({ children }) => {
         const jobReq = {
           ...request,
           pipeline: {
+            ...p,
             triggers: triggers[t],
             __test: t,
           },
@@ -229,7 +230,6 @@ export const JobProvider = ({ children }) => {
       type: "single",
       name: jobId,
     };
-    console.log(request);
 
     jobCreate(job);
 

src/views/Navbar.jsx

@@ -42,7 +42,13 @@ export default function Navbar(props) {
       )}
     </Badge>,
     <NotificationsIcon />,
-    <Badge badgeContent={jobState.jobs.length} color="primary">
+    <Badge
+      badgeContent={
+        jobState.jobs.filter((j) => !j.isPipeline).length +
+        jobState.pipelines.length
+      }
+      color="primary"
+    >
       <WorkIcon />
     </Badge>,
     <FormatListBulletedIcon />,

src/views/jobs/JobPipelineDisplay.jsx

@@ -1,26 +1,49 @@
 import React, { useContext } from "react";
 import { useNavigate } from "react-router-dom";
-import JobContext from "../../ctx/JobContext.jsx";
+import JobContext, { jobStatus } from "../../ctx/JobContext.jsx";
 
 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 Stack from "@mui/material/Stack";
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
+import IconButton from "@mui/material/IconButton";
+import CheckIcon from "@mui/icons-material/Check";
+import ClearIcon from "@mui/icons-material/Clear";
+import ViewColumnIcon from "@mui/icons-material/ViewColumn";
+import PendingIcon from "@mui/icons-material/Pending";
+import VisibilityIcon from "@mui/icons-material/Visibility";
+import DoNotDisturbIcon from "@mui/icons-material/DoNotDisturb";
+
+import Menu from "@mui/material/Menu";
+import MenuItem from "@mui/material/MenuItem";
+import ListItemText from "@mui/material/ListItemText";
+import ListItemIcon from "@mui/material/ListItemIcon";
+import MoreVertIcon from "@mui/icons-material/MoreVert";
+import DeleteIcon from "@mui/icons-material/Delete";
 
 function JobPipelineDisplay(props) {
-  const { back, pipeline } = props;
+  const { pipeline } = props;
   const {
     state: jobState,
     pipelineCancel,
     pipelineDestroy,
   } = useContext(JobContext);
   const navigate = useNavigate();
+
+  const [anchorEl, setAnchorEl] = React.useState(null);
+  const open = Boolean(anchorEl);
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
   const pipelineJobs = jobState.jobs.filter(
     (j) => j.isPipeline && j.pipelineId === pipeline.id
   );
@@ -30,8 +53,11 @@ function JobPipelineDisplay(props) {
     });
   };
 
+  const findJob = (testName) =>
+    pipelineJobs.find((j) => j.branchId === testName);
+
   const selectJob = (testName) => () => {
-    const job = pipelineJobs.find((j) => j.branchId === testName);
+    const job = findJob(testName);
     if (!job) return;
     navigate(`/qualiteer/jobs#${job.jobId}`);
   };
@@ -48,6 +74,38 @@ function JobPipelineDisplay(props) {
     pipelineDestroy(pipeline.id);
   }
 
+  const menuSelect = (cb) => () => {
+    handleClose();
+    cb();
+  };
+
+  function pipelineActive() {
+    return pipelineJobs.find(
+      (j) => j.status === jobStatus.ACTIVE || j.status === jobStatus.PENDING
+    );
+  }
+
+  function jobIcon(name) {
+    const job = findJob(name);
+    const status = job ? job.status : null;
+    switch (status) {
+      case jobStatus.OK:
+        return <CheckIcon color="success" />;
+      case jobStatus.ERROR:
+        return <ClearIcon color="error" />;
+      case jobStatus.PENDING:
+        return <PendingIcon color="info" />;
+      case jobStatus.ACTIVE:
+        return <VisibilityIcon color="primary" />;
+      case jobStatus.CANCELED:
+        return <DoNotDisturbIcon color="warning" />;
+      case jobStatus.QUEUED:
+        return <ViewColumnIcon color="secondary" />;
+      default:
+        return <ViewColumnIcon color="secondary" />;
+    }
+  }
+
   return (
     <Box>
       <AppBar
@@ -67,11 +125,8 @@ function JobPipelineDisplay(props) {
             <Typography variant="h6" sx={{ ml: "auto", mr: "auto" }}>
               {pipeline.id}
             </Typography>
-            <IconButton onClick={cancelPipeline}>
-              <ArrowBackIcon />
-            </IconButton>
-            <IconButton onClick={deletePipeline}>
-              <ArrowBackIcon />
+            <IconButton onClick={handleClick}>
+              <MoreVertIcon />
             </IconButton>
           </Toolbar>
         </Box>
@@ -101,13 +156,34 @@ function JobPipelineDisplay(props) {
                   >
                     {test}
                   </Typography>
-                  <Stack sx={{ ml: "auto" }}>I</Stack>
+                  <Stack sx={{ ml: "auto" }}>
+                    <IconButton aria-label="retry" component="span">
+                      {jobIcon(test)}
+                    </IconButton>
+                  </Stack>
                 </AccordionSummary>
               </Accordion>
             ))}
           </Box>
         </React.Fragment>
       ))}
+
+      <Menu anchorEl={anchorEl} open={open} onClose={handleClose}>
+        {pipelineActive() ? (
+          <MenuItem onClick={menuSelect(cancelPipeline)}>
+            <ListItemIcon>
+              <DoNotDisturbIcon fontSize="small" />
+            </ListItemIcon>
+            <ListItemText>Cancel</ListItemText>
+          </MenuItem>
+        ) : null}
+        <MenuItem onClick={menuSelect(deletePipeline)}>
+          <ListItemIcon>
+            <DeleteIcon fontSize="small" />
+          </ListItemIcon>
+          <ListItemText>Delete</ListItemText>
+        </MenuItem>
+      </Menu>
     </Box>
   );
 }

src/views/jobs/JobView.jsx

@@ -111,6 +111,7 @@ export default function JobView(props) {
           </ListItemIcon>
           <ListItemText>Download Log</ListItemText>
         </MenuItem>
+        {!job.isPipeline && (
           <MenuItem onClick={menuSelect(retryJob)}>
             <ListItemIcon>
               {job.status === jobStatus.OK || job.status === jobStatus.ERROR ? (
@@ -120,10 +121,10 @@ export default function JobView(props) {
               )}
             </ListItemIcon>
             <ListItemText>
-            {" "}
               {job.status === jobStatus.ERROR ? "Retry" : "Duplicate"}
             </ListItemText>
           </MenuItem>
+        )}
         {job.status === jobStatus.OK ||
         job.status === jobStatus.ERROR ||
         job.status === jobStatus.CANCELED ? null : (
@@ -134,12 +135,14 @@ export default function JobView(props) {
             <ListItemText>Cancel</ListItemText>
           </MenuItem>
         )}
+        {!job.isPipeline && (
           <MenuItem onClick={menuSelect(deleteJob)}>
             <ListItemIcon>
               <DeleteIcon fontSize="small" />
             </ListItemIcon>
             <ListItemText>Delete</ListItemText>
           </MenuItem>
+        )}
       </Menu>
     </Box>
   );

src/views/jobs/Jobs.jsx

@@ -43,7 +43,6 @@ export default function Jobs() {
             justifyContent="center"
             sx={{ flexFlow: "wrap" }}
           >
-            {" "}
             <Typography variant="h5">
               Click the '+' to start a new one!
             </Typography>

tests/assets/suite/runner.js

@@ -31,6 +31,7 @@ const liveIndicator = () => {
 };
 
 const runTests = () => {
+  console.log(pipeline);
   switch (test) {
     case "primary":
       return primary();

tests/assets/suite/secondary2.js

@@ -1,5 +1,6 @@
 export default function secondaryTest(pipelineData) {
   console.log("This came from a secondary2 test!");
+  console.log(pipelineData, "SomeData");
   return {
     status: +(pipelineData !== "SomeData"),
     pipelineData: "SomeOtherOtherData",

tests/assets/suite/tertiary3.js

@@ -1,4 +1,4 @@
 export default function secondaryTest(pipelineData) {
   console.log("This came from a tertiary3!");
-  return { status: +(pipelineData !== "SomeOtherData") };
+  return { status: +(pipelineData !== "SomeOtherOtherData") };
 }