Job navigation and PipelineTracks

src/Dashboard.jsx

@@ -8,13 +8,12 @@ import Views from "./views/Views.jsx";
 export default function Dashboard() {
   return (
     <div className="qualiteer">
-    
       <StoreProvider>
-      <JobProvider>
+        <JobProvider>
-        <BrowserRouter>
+          <BrowserRouter>
             <Views />
-        </BrowserRouter>
+          </BrowserRouter>
-      </JobProvider>
+        </JobProvider>
       </StoreProvider>
     </div>
   );

src/ctx/JobContext.jsx

@@ -69,6 +69,7 @@ export const JobProvider = ({ children }) => {
   function retryAll(failing) {
     // Query Full Locator
     console.log("Would retry all failing tests!");
+    return jobFactory({ testNames: ["single"] });
   }
 
   function jobBuilder(tests) {
@@ -77,9 +78,7 @@ export const JobProvider = ({ children }) => {
     return jobFactory({ testNames: ["single"] });
   }
 
-  function pipelineFactory(builderCache) {
+  function pipelineFactory(builderCache) {}
-   
-  }
 
   function jobFactory(builderCache) {
     // Find test
@@ -132,7 +131,6 @@ export const JobProvider = ({ children }) => {
   function retrySingle(test) {
     console.log("Would retry test", test);
     return jobFactory({ testNames: ["single"] });
-    
   }
 
   const context = {

src/ctx/StoreContext.jsx

@@ -6,10 +6,11 @@ const ACTIONS = {
   UPDATE: "u",
 };
 
-
+const pipelineMappingsMock = [
-const pipelineMappingsMock = [["primary", "secondary1","tertiary1"],
+  ["primary", "secondary1", "tertiary1"],
-                              ["primary", "secondary1", "tertiary2"], 
+  ["primary", "secondary1", "tertiary2"],
-                              ["primary", "secondary2", "tertiary3"]];
+  ["primary", "secondary2", "tertiary3"],
+];
 
 const silencedMock = new Array(10).fill(0).map((v, i) => ({
   name: `Test${i + 1}`,
@@ -60,12 +61,12 @@ const failingMock = new Array(12).fill(0).map((v, i) => ({
   })(),
 }));
 
-const localStorage = {setItem: ()=>{}, getItem: ()=>{}};
+const localStorage = { setItem: () => {}, getItem: () => {} };
 
 const localSettings = localStorage.getItem("settings");
 const defaultSettings = {
   focusJob: true,
-  simplifiedControls: true,
+  simplifiedControls: false,
   logAppDetails: true,
   defaultRegion: "us",
   defaultPage: "failing",

src/views/catalog/CatalogBox.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useContext } from "react";
-import {useNavigate} from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import StoreContext from "../../ctx/StoreContext.jsx";
 import JobContext from "../../ctx/JobContext.jsx";
 
@@ -39,7 +39,7 @@ export default function CatalogBox(props) {
     e.preventDefault();
     e.stopPropagation();
     const jobId = jobBuilder([catalogTest]);
-    if(store.focusJob) navigate(`/qualiteer/jobs#${jobId}`);
+    if (store.focusJob) navigate(`/qualiteer/jobs#${jobId}`);
   };
 
   function Actions() {

src/views/failing/Failing.jsx

@@ -1,4 +1,5 @@
 import { useState, useContext } from "react";
+import { useNavigate } from "react-router-dom";
 import StoreContext from "../../ctx/StoreContext.jsx";
 import JobContext from "../../ctx/JobContext.jsx";
 import SilenceDialog from "../alerting/SilenceDialog.jsx";
@@ -19,7 +20,7 @@ import ReplayIcon from "@mui/icons-material/Replay";
 
 export default function Failing() {
   const { state: jobState, retryAll } = useContext(JobContext);
-
+  const navigate = useNavigate();
   const {
     state: store,
     updateStore,
@@ -47,7 +48,10 @@ export default function Failing() {
   const handleClose = (confirmed) => () => {
     retryAllClick();
     if (!confirmed) return;
-    retryAll(store.failing);
+    const jobId = retryAll(store.failing);
+
+    if (!store.focusJob) return;
+    navigate(`/qualiteer/jobs#${jobId}`);
   };
 
   return (

src/views/failing/FailingBox.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useContext } from "react";
-import {useNavigate} from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import StoreContext from "../../ctx/StoreContext.jsx";
 import JobContext, { jobStatus } from "../../ctx/JobContext.jsx";
 
@@ -78,8 +78,8 @@ export default function FailingBox(props) {
 
   const retryTest = () => {
     const jobId = retrySingle(failingTest);
-    if(store.focusJob) navigate(`/qualiteer/jobs#${jobId}`);
+    if (store.focusJob) navigate(`/qualiteer/jobs#${jobId}`);
-                          }
+  };
 
   const jobOnClick = () => {
     switch (testJobStatus) {

src/views/jobs/builder/GroupConfirm.jsx

@@ -9,16 +9,16 @@ function GroupConfirm(props) {
   return (
     <React.Fragment>
       <DialogContent>
-      <h3>Confirm group?</h3>
+        <h3>Confirm group?</h3>
-      {JSON.stringify(cache)}
+        {JSON.stringify(cache)}
-    </DialogContent>
+      </DialogContent>
       <DialogActions>
-               <Button onClick={back}>Back</Button>
+        <Button onClick={back}>Back</Button>
-          <Button onClick={start} autoFocus>
+        <Button onClick={start} autoFocus>
-            Start
+          Start
-          </Button> 
+        </Button>
       </DialogActions>
-      </React.Fragment>
+    </React.Fragment>
   );
 }
 

src/views/jobs/builder/GroupSelector.jsx

@@ -14,16 +14,16 @@ function GroupSelector(props) {
   return (
     <React.Fragment>
       <DialogContent>
-      {JSON.stringify(cache)}
+        {JSON.stringify(cache)}
-      <button onClick={makeReq}>Clickme</button>
+        <button onClick={makeReq}>Clickme</button>
-    </DialogContent>
+      </DialogContent>
       <DialogActions>
-               <Button onClick={cancel}>Cancel</Button>
+        <Button onClick={cancel}>Cancel</Button>
-          <Button onClick={next} autoFocus>
+        <Button onClick={next} autoFocus>
-            Next
+          Next
-          </Button> 
+        </Button>
       </DialogActions>
-      </React.Fragment>
+    </React.Fragment>
   );
 }
 

src/views/jobs/builder/IndividualConfirm.jsx

@@ -10,15 +10,15 @@ function IndividualConfirm(props) {
     <React.Fragment>
       <DialogContent>
         <h3>Individual Confirm?</h3>
-      {JSON.stringify(cache)}
+        {JSON.stringify(cache)}
-    </DialogContent>
+      </DialogContent>
       <DialogActions>
-               <Button onClick={back}>Back</Button>
+        <Button onClick={back}>Back</Button>
-          <Button onClick={start} autoFocus>
+        <Button onClick={start} autoFocus>
-            Start
+          Start
-          </Button> 
+        </Button>
       </DialogActions>
-      </React.Fragment>
+    </React.Fragment>
   );
 }
 

src/views/jobs/builder/IndividualSelector.jsx

@@ -9,22 +9,21 @@ function IndividualSelector(props) {
     setCache({
       testNames: ["failing"],
     });
-    
   }
 
   return (
     <React.Fragment>
       <DialogContent>
-      {JSON.stringify(cache)}
+        {JSON.stringify(cache)}
-      <button onClick={makeReq}>Clickme</button>
+        <button onClick={makeReq}>Clickme</button>
-    </DialogContent>
+      </DialogContent>
       <DialogActions>
-               <Button onClick={cancel}>Cancel</Button>
+        <Button onClick={cancel}>Cancel</Button>
-          <Button onClick={next} autoFocus>
+        <Button onClick={next} autoFocus>
-            Next
+          Next
-          </Button> 
+        </Button>
       </DialogActions>
-      </React.Fragment>
+    </React.Fragment>
   );
 }
 

src/views/jobs/builder/JobBuilder.jsx

@@ -1,5 +1,5 @@
 import React, { useContext, useState, useEffect } from "react";
-import {useNavigate} from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import StoreContext from "../../../ctx/StoreContext.jsx";
 import JobContext from "../../../ctx/JobContext.jsx";
 
@@ -26,8 +26,6 @@ import PipelineSelector from "./PipelineSelector.jsx";
 import PipelineTrackSelector from "./PipelineTrackSelector.jsx";
 import PipelineConfirm from "./PipelineConfirm.jsx";
 
-
-
 export default function JobBuilder() {
   const navigate = useNavigate();
   const { state: store } = useContext(StoreContext);
@@ -44,10 +42,10 @@ export default function JobBuilder() {
   };
 
   const quickOpenClose = () => setQuickOpen(false);
-  const handleClickOpen = (page)=> () =>{     
+  const handleClickOpen = (page) => () => {
     setBuilderPage(page);
     setJobDialogOpen(true);
-   }
+  };
   const [builderPage, setBuilderPage] = useState();
   const [cache, setCache] = useState({});
 
@@ -55,8 +53,7 @@ export default function JobBuilder() {
     setJobDialogOpen(false);
     if (!confirmed) return;
     const jobId = jobFactory(cache);
-    if(store.focusJob)
+    if (store.focusJob) navigate(`/qualiteer/jobs#${jobId}`);
-    navigate(`/qualiteer/jobs#${jobId}`);
   };
 
   // Pull info from url if possible?
@@ -69,14 +66,62 @@ export default function JobBuilder() {
   const changePage = (page) => () => setBuilderPage(page);
 
   const pages = {
-    individualSelect:  <IndividualSelector cache={cache} setCache={setCache} cancel={handleClose()} next={changePage("individualConfirm")}/>,
+    individualSelect: (
-    individualConfirm: <IndividualConfirm cache={cache} setCache={setCache} back={changePage("individualSelect")} start={handleClose(true)}/>,
+      <IndividualSelector
-    groupSelect:  <GroupSelector cache={cache} setCache={setCache} cancel={handleClose()} next={changePage("groupConfirm")}/>,
+        cache={cache}
-    groupConfirm: <GroupConfirm cache={cache} setCache={setCache} back={changePage("groupSelect")} start={handleClose(true)}/>,
+        setCache={setCache}
-    pipelineSelect:  <PipelineSelector cache={cache} setCache={setCache} cancel={handleClose()} next={changePage("pipelineTrackSelect")}/>,
+        cancel={handleClose()}
-    pipelineTrackSelect: <PipelineTrackSelector cache={cache} setCache={setCache} back={changePage("pipelineSelect")} next={changePage("pipelineConfirm")}/>,
+        next={changePage("individualConfirm")}
-    pipelineConfirm:  <PipelineConfirm cache={cache} back={changePage("pipelineTrackSelect")} next={handleClose(true)}/>
+      />
-  }
+    ),
+    individualConfirm: (
+      <IndividualConfirm
+        cache={cache}
+        setCache={setCache}
+        back={changePage("individualSelect")}
+        start={handleClose(true)}
+      />
+    ),
+    groupSelect: (
+      <GroupSelector
+        cache={cache}
+        setCache={setCache}
+        cancel={handleClose()}
+        next={changePage("groupConfirm")}
+      />
+    ),
+    groupConfirm: (
+      <GroupConfirm
+        cache={cache}
+        setCache={setCache}
+        back={changePage("groupSelect")}
+        start={handleClose(true)}
+      />
+    ),
+    pipelineSelect: (
+      <PipelineSelector
+        cache={cache}
+        setCache={setCache}
+        cancel={handleClose()}
+        next={changePage("pipelineTrackSelect")}
+      />
+    ),
+    pipelineTrackSelect: (
+      <PipelineTrackSelector
+        cache={cache}
+        setCache={setCache}
+        back={changePage("pipelineSelect")}
+        next={changePage("pipelineConfirm")}
+      />
+    ),
+    pipelineConfirm: (
+      <PipelineConfirm
+        cache={cache}
+        back={changePage("pipelineTrackSelect")}
+        start={handleClose(true)}
+      />
+    ),
+  };
 
   return (
     <React.Fragment>

src/views/jobs/builder/PipelineConfirm.jsx

@@ -10,16 +10,15 @@ function PipelineConfirm(props) {
     <React.Fragment>
       <DialogContent>
         <h3>Pipeline Confirm</h3>
-      {JSON.stringify(cache)}
+        {JSON.stringify(cache)}
-        
+      </DialogContent>
-    </DialogContent>
       <DialogActions>
-               <Button onClick={back}>Back</Button>
+        <Button onClick={back}>Back</Button>
-          <Button onClick={start} autoFocus>
+        <Button onClick={start} autoFocus>
-            Start
+          Start
-          </Button> 
+        </Button>
       </DialogActions>
-      </React.Fragment>
+    </React.Fragment>
   );
 }
 

src/views/jobs/builder/PipelineSelector.jsx

@@ -1,4 +1,4 @@
-import React, {useContext} from "react";
+import React, { useContext } from "react";
 import StoreContext from "../../../ctx/StoreContext.jsx";
 
 import Button from "@mui/material/Button";
@@ -6,55 +6,60 @@ import DialogActions from "@mui/material/DialogActions";
 import DialogContent from "@mui/material/DialogContent";
 
 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 Stack from "@mui/material/Stack";
 
-function PipelineSelector(props){
+function PipelineSelector(props) {
-  const {cache, setCache, cancel, next} = props;
+  const { cache, setCache, cancel, next } = props;
-  const {state: store} = useContext(StoreContext);
+  const { state: store } = useContext(StoreContext);
   const { pipelineMappings } = store;
   const primaryMappings = {};
-  for(var pm of pipelineMappings){
+  for (var pm of pipelineMappings) {
-    if(!(pm[0] in primaryMappings)) primaryMappings[pm[0]] = [];
+    if (!(pm[0] in primaryMappings)) primaryMappings[pm[0]] = [];
     primaryMappings[pm[0]].push(pm);
   }
 
-  const selectPrimary = (primarySelectedMappings) => ()=>{
+  const selectPrimary = (primarySelectedMappings) => () => {
-    setCache({primarySelectedMappings});
+    setCache({ primarySelectedMappings });
   };
 
-  return( <React.Fragment>
+  return (
+    <React.Fragment>
       <DialogContent>
-    {Object.keys(primaryMappings).map((k, i)=>( <Accordion expanded={false} disableGutters={true} square key={i} onClick={selectPrimary(primaryMappings[k])}>
+        {Object.keys(primaryMappings).map((k, i) => (
-      <AccordionSummary
+          <Accordion
-        style={{
+            expanded={false}
-          backgroundColor: "rgba(0, 0, 0, .03)",
+            disableGutters={true}
-          flexWrap: "wrap",
+            square
-        }}
+            key={i}
-      >
+            onClick={selectPrimary(primaryMappings[k])}
-        <Typography
+          >
-          component={"span"}
+            <AccordionSummary
-          style={{ wordBreak: "break-word", margin: "auto 0" }}
+              style={{
-        >
+                backgroundColor: "rgba(0, 0, 0, .03)",
-          {k}
+                flexWrap: "wrap",
-        </Typography>
+              }}
-        <Stack sx={{ ml: "auto" }}>
+            >
-            {primaryMappings[k].length}
+              <Typography
-        </Stack>
+                component={"span"}
-      </AccordionSummary>
+                style={{ wordBreak: "break-word", margin: "auto 0" }}
-    </Accordion>))}
+              >
+                {k}
+              </Typography>
+              <Stack sx={{ ml: "auto" }}>{primaryMappings[k].length}</Stack>
+            </AccordionSummary>
+          </Accordion>
+        ))}
       </DialogContent>
       <DialogActions>
-               <Button onClick={cancel}>Cancel</Button>
+        <Button onClick={cancel}>Cancel</Button>
-          <Button onClick={next} autoFocus>
+        <Button onClick={next} autoFocus>
-            Next
+          Next
-          </Button> 
+        </Button>
       </DialogActions>
-      </React.Fragment>)
+    </React.Fragment>
-  
+  );
-  
 }
 export default PipelineSelector;
 
@@ -62,7 +67,7 @@ export default PipelineSelector;
     Server -> pipeMappings
     [["primary", "secondary1", "tertiary1"], ["primary", "secondary2", "tertiary3"]]
     */
-    /*
+/*
     const primaryMappings = pipeMappings.filter((m)=>m[0] === "primary"); // Select Page
 
   const displayTracks = [];
@@ -80,12 +85,12 @@ export default PipelineSelector;
     
     })
     */
-    /* Cache:
+/* Cache:
     {
     testTree: [["primary"],["secondary1", "secondary2"], ["tertiary1", "tertiary3"]]
     }
     */
-    /*
+/*
     tracks: [["primary", "secondary1", "tertiary1"], ["primary", "secondary2", "tertiary3"]]
     */
-    /**/
+/**/

src/views/jobs/builder/PipelineTrackSelector.jsx

@@ -3,22 +3,116 @@ 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 PipelineTrackSelector(props) {
   const { cache, setCache, back, next } = props;
 
+  const pipelineTracks = [];
+  for (var track of cache.primarySelectedMappings) {
+    for (var i in track) {
+      if (!pipelineTracks[i]) pipelineTracks[i] = [];
+      if (pipelineTracks[i].includes(track[i])) continue;
+      pipelineTracks[i].push(track[i]);
+    }
+  }
+
+  const addTrack = (test) => {
+    const pipelineMasterTrack = cache.pipelineMasterTrack ?? [];
+    for (var track of cache.primarySelectedMappings) {
+      const trackIndex = track.indexOf(test);
+      if (trackIndex === -1) continue;
+      const trackSlice = track.slice(0, trackIndex + 1);
+      trackSlice.forEach((t, i) => {
+        if (!pipelineMasterTrack[i]) pipelineMasterTrack[i] = [];
+        if (!pipelineMasterTrack[i].includes(t)) pipelineMasterTrack[i].push(t);
+      });
+      break;
+    }
+
+    console.log(pipelineMasterTrack);
+    setCache({ ...cache, pipelineMasterTrack });
+  };
+
+  const removeTrack = (test) => {
+    const pipelineMasterTrack = cache.pipelineMasterTrack ?? [];
+    const toRemove = [];
+    for (var mapping of cache.primarySelectedMappings) {
+      const testIndex = mapping.indexOf(test);
+      if (testIndex === -1) continue;
+      const removeSlice = mapping.slice(testIndex, mapping.length);
+      toRemove.push(...removeSlice);
+    }
+
+    for (var i in pipelineMasterTrack) {
+      pipelineMasterTrack[i] = pipelineMasterTrack[i].filter(
+        (t) => !toRemove.includes(t)
+      );
+    }
+    setCache({ ...cache, pipelineMasterTrack });
+  };
+
+  const selectTrack = (test) => () => {
+    const pipelineMasterTrack = cache.pipelineMasterTrack ?? [];
+    if (![].concat.apply([], pipelineMasterTrack).includes(test))
+      return addTrack(test);
+    removeTrack(test);
+  };
+
+  const getColor = (test) => {
+    return [].concat.apply([], cache.pipelineMasterTrack).includes(test)
+      ? "primary"
+      : null;
+  };
+
   return (
     <React.Fragment>
       <DialogContent>
         <h3>Select Track</h3>
-      {JSON.stringify(cache)}
+        {pipelineTracks.map((track, i) => (
-    </DialogContent>
+          <React.Fragment key={i}>
+            <Typography variant="h6">{i + 1}</Typography>
+            <Box>
+              {track.map((test, j) => (
+                <Accordion
+                  expanded={false}
+                  disableGutters={true}
+                  square
+                  key={j}
+                  onClick={selectTrack(test)}
+                >
+                  <AccordionSummary
+                    style={{
+                      backgroundColor: "rgba(0, 0, 0, .03)",
+                      flexWrap: "wrap",
+                    }}
+                  >
+                    <Typography
+                      component={"span"}
+                      style={{ wordBreak: "break-word", margin: "auto 0" }}
+                      color={getColor(test)}
+                    >
+                      {test}
+                    </Typography>
+                    <Stack sx={{ ml: "auto" }}>I</Stack>
+                  </AccordionSummary>
+                </Accordion>
+              ))}
+            </Box>
+          </React.Fragment>
+        ))}
+      </DialogContent>
       <DialogActions>
-               <Button onClick={back}>Back</Button>
+        <Button onClick={back}>Back</Button>
-          <Button onClick={next} autoFocus>
+        <Button onClick={next} autoFocus>
-            Next
+          Next
-          </Button> 
+        </Button>
       </DialogActions>
-      </React.Fragment>
+    </React.Fragment>
   );
 }