Refactor and more linking

src/views/jobs/JobBox.jsx

@@ -1,21 +1,12 @@
-import React, { useState, useContext } from "react";
-import StoreContext from "../../ctx/StoreContext.jsx";
-import JobContext, { jobStatus } from "../../ctx/JobContext.jsx";
+import React from "react";
 
+import { useJobIconState } from "@qltr/util/JobTools";
 import Accordion from "@mui/material/Accordion";
-import AccordionDetails from "@mui/material/AccordionDetails";
 import AccordionSummary from "@mui/material/AccordionSummary";
 import Typography from "@mui/material/Typography";
 
 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 Box from "@mui/material/Box";
 import Stack from "@mui/material/Stack";
 
 export default function JobBox(props) {
@@ -23,25 +14,6 @@ export default function JobBox(props) {
 
   const { name, status } = job;
 
-  function jobIcon() {
-    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 <ReplayIcon />;
-    }
-  }
-
   return (
     <Accordion expanded={false} disableGutters={true} square>
       <AccordionSummary
@@ -58,7 +30,7 @@ export default function JobBox(props) {
         </Typography>
         <Stack sx={{ ml: "auto" }}>
           <IconButton aria-label="retry" component="span">
-            {jobIcon()}
+            {useJobIconState(job)}
           </IconButton>
         </Stack>
       </AccordionSummary>

src/views/jobs/JobLogView.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { jobStatus } from "../../ctx/JobContext.jsx";
+import { jobStatus } from "@qltr/jobs";
 
 import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";

src/views/jobs/JobPipelineBox.jsx

@@ -1,6 +1,7 @@
 import React, { useState, useContext } from "react";
-import StoreContext from "../../ctx/StoreContext.jsx";
-import JobContext, { jobStatus } from "../../ctx/JobContext.jsx";
+import StoreContext from "@qltr/store";
+import JobContext, { jobStatus } from "@qltr/jobs";
+import { usePipelineIconState } from "@qltr/util/JobTools";
 
 import Accordion from "@mui/material/Accordion";
 import AccordionDetails from "@mui/material/AccordionDetails";
@@ -20,10 +21,7 @@ import Stack from "@mui/material/Stack";
 
 export default function JobPipelineBox(props) {
   const { pipeline } = props;
-
-  function jobIcon() {
-    return <ViewColumnIcon />;
-  }
+  const pipelineIcon = usePipelineIconState(pipeline);
 
   return (
     <Accordion expanded={false} disableGutters={true} square>
@@ -41,7 +39,7 @@ export default function JobPipelineBox(props) {
         </Typography>
         <Stack sx={{ ml: "auto" }}>
           <IconButton aria-label="" component="span">
-            {jobIcon()}
+            {pipelineIcon}
           </IconButton>
         </Stack>
       </AccordionSummary>

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>

src/views/jobs/JobView.jsx

@@ -1,7 +1,7 @@
 import React, { useContext, useState, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
-import JobContext, { jobStatus } from "../../ctx/JobContext.jsx";
-import StoreContext from "../../ctx/StoreContext.jsx";
+import JobContext, { jobStatus } from "@qltr/jobs";
+import StoreContext from "@qltr/store";
 import Box from "@mui/material/Box";
 import AppBar from "@mui/material/AppBar";
 import Toolbar from "@mui/material/Toolbar";

src/views/jobs/Jobs.jsx

@@ -1,7 +1,7 @@
 import React, { useState, useContext, useEffect } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 
-import JobContext from "../../ctx/JobContext.jsx";
+import JobContext from "@qltr/jobs";
 import JobBox from "./JobBox.jsx";
 import JobPipelineBox from "./JobPipelineBox.jsx";
 import JobView from "./JobView.jsx";

src/views/jobs/builder/JobBuilder.jsx

@@ -1,7 +1,7 @@
 import React, { useContext, useState, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
-import StoreContext from "../../../ctx/StoreContext.jsx";
-import JobContext from "../../../ctx/JobContext.jsx";
+import StoreContext from "@qltr/store";
+import JobContext from "@qltr/jobs";
 
 import Dialog from "@mui/material/Dialog";
 import Toolbar from "@mui/material/Toolbar";

src/views/jobs/builder/PipelineSelector.jsx

@@ -1,5 +1,5 @@
-import React, { useContext } from "react";
-import { usePipelineMappings } from "../../../Queries.jsx";
+import React from "react";
+import { usePipelineMappings } from "@qltr/queries";
 import Button from "@mui/material/Button";
 import DialogActions from "@mui/material/DialogActions";
 import DialogContent from "@mui/material/DialogContent";

src/views/jobs/builder/PipelineTrackSelector.jsx

@@ -13,7 +13,7 @@ import {
   asTree,
   asBranches,
   as1d,
-} from "../../../../lib/jobs/pipelines.js";
+} from "@qltr/util/pipelines.js";
 
 function PipelineTrackSelector(props) {
   const { cache, setCache, back, next } = props;