Refactor and more linking

src/views/jobs/JobPipelineDisplay.jsx

@@ -1,6 +1,12 @@
 import React, { useContext } from "react";
 import { useNavigate } from "react-router-dom";
-import JobContext, { jobStatus } from "../../ctx/JobContext.jsx";
+import JobContext, { jobStatus } from "@qltr/jobs";
+import {
+  selectedPipelineBranches,
+  pipelineJobs,
+  findPipelineJobByTestName,
+  useJobIconState,
+} from "@qltr/util/JobTools";
 
 import Box from "@mui/material/Box";
 import AppBar from "@mui/material/AppBar";
@@ -44,20 +50,8 @@ function JobPipelineDisplay(props) {
     setAnchorEl(null);
   };
 
-  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 findJob = (testName) =>
-    pipelineJobs.find((j) => j.branchId === testName);
-
   const selectJob = (testName) => () => {
-    const job = findJob(testName);
+    const job = findPipelineJobByTestName(pipeline, jobState.jobs, testName);
     if (!job) return;
     navigate(`/qualiteer/jobs#${job.jobId}`);
   };
@@ -80,31 +74,16 @@ function JobPipelineDisplay(props) {
   };
 
   function pipelineActive() {
-    return pipelineJobs.find(
+    return pipelineJobs(pipeline, jobState.jobs).find(
       (j) => j.status === jobStatus.ACTIVE || j.status === jobStatus.PENDING
     );
   }
 
   function jobIcon(name) {
-    const job = findJob(name);
-    const status = job ? job.status : null;
     if (pipeline.isCanceled) return <DoNotDisturbIcon color="warning" />;
-    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" />;
-    }
+    const job = findPipelineJobByTestName(pipeline, jobState.jobs, name);
+    if (!job) return <ViewColumnIcon color="secondary" />;
+    return useJobIconState(job);
   }
 
   return (
@@ -133,7 +112,7 @@ function JobPipelineDisplay(props) {
         </Box>
       </AppBar>
       <Toolbar disableGutters />
-      {selectedBranches().map((track, i) => (
+      {selectedPipelineBranches(pipeline).map((track, i) => (
         <React.Fragment key={i}>
           <Typography variant="h6">{i + 1}</Typography>
           <Box>