Basic MultiJobs

.replit

@@ -1,3 +1,6 @@
+# The command that is executed when the run button is clicked.
+run = ["echo", "run"]
+
 entrypoint = "index.js"
 
 [nix]

Dockerfile

@@ -1,5 +1,5 @@
 FROM node:16
-WORKDIR /dunemask/net/cairo
+WORKDIR /dunemask/net/qualiteer
 # Copy dependencies 
 COPY package.json .
 COPY package-lock.json .
@@ -8,6 +8,7 @@ RUN npm i
 COPY public public
 COPY src src
 COPY lib lib
+COPY index.html .
 RUN npm run build:react
 # Copy bin over
 COPY bin bin

package.json

@@ -19,7 +19,7 @@
     "build:react": "vite build",
     "start": "node dist/app.js",
     "start:dev": "nodemon dist/app.js",
-    "start:dev:replit": "npm run start:dev & npm run start:react:replit",
+    "start:dev:replit": "npm run start:react:replit & (sleep 5 && npm run start:dev)",
     "start:react": "vite preview",
     "start:react:replit": "vite --host",
     "test": "node tests/index.js",

src/Dashboard.jsx

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

src/ctx/JobContext.jsx

@@ -1,4 +1,5 @@
 import React, { useReducer, createContext, useMemo } from "react";
+import Initiator from "../../lib/sockets/clients/Initiator.js";
 const JobContext = createContext();
 
 export const jobStatus = {
@@ -15,32 +16,20 @@ const ACTIONS = {
   UPDATE: "u",
   DELETE: "d",
 };
-/**/
-const jobMock = Object.values(jobStatus).map((v, i) => ({
-  name: `Job${i + 1}`,
-  test: `someTestName${i + 1}`,
-  status: v,
-  exitcode: 0,
-}));
+
+const url = "https://qualiteer.elijahparker3.repl.co/";
 
 const initialState = {
-  jobs: jobMock,
+  jobs: [],
+  pipelines: [],
 };
+
 /*
+pipelines: [{tracks:[
 {
- name: "Job1",
- test: "someTestName",
- status: JOB_STATUS.SUCCESS,
- exitcode: 0
-}
 
-OR
-{
-  compound: true,
-  name: "Compound Job",
-  pipeline: [{}]
 }
-
+]}]
 */
 
 const reducer = (state, action) => {
@@ -55,7 +44,7 @@ const reducer = (state, action) => {
 
     case ACTIONS.UPDATE:
       jobIndex = jobs.find((j) => j.id === (action.job.id ?? action.jobId));
-      jobs[jobIndex] = action.job;
+      jobs[jobIndex] = { ...jobs[jobIndex], ...action.job };
       return { ...state, jobs };
 
     case ACTIONS.DELETE:
@@ -82,31 +71,68 @@ export const JobProvider = ({ children }) => {
     console.log("Would retry all failing tests!");
   }
 
-  function activeJobStates() {
-    const jobs = { state };
-    console.log("Would return all active job states");
-  }
-
-  function mockRun() {
-    dispatch({
-      job: {
-        name: "Job1",
-        test: "someTestName",
-        log: [],
-        status: jobStatus.OK,
-        exitcode: 0,
-      },
-      action: ACTIONS.CREATE,
-    });
-  }
-
   function jobBuilder(tests) {
     if (!Array.isArray(tests)) throw Error("Error from within JobContext.jsx");
     console.log("Would run tests", tests);
+    return jobFactory({ testNames: ["single"] });
+  }
+
+  function pipelineFactory(builderCache) {
+   
+  }
+
+  function jobFactory(builderCache) {
+    // Find test
+    const i = new Initiator(url);
+    const jobId = `j${Date.now()}`;
+    const job = {
+      name: jobId,
+      status: jobStatus.PENDING,
+      jobId,
+      isPipeline: false,
+      builderCache,
+    };
+
+    const request = {
+      testName: builderCache.testNames[0],
+      image: "node",
+      type: "single",
+      name: jobId,
+    };
+
+    jobCreate(job);
+
+    const onLog = (d) => {
+      const job = state.jobs.find((j) => j.jobId === jobId);
+      job.log.push(d);
+      job.status = jobStatus.ACTIVE;
+      jobUpdate({ ...job }, jobId);
+    };
+
+    const onClose = (c) => {
+      const job = state.jobs.find((j) => j.jobId === jobId);
+      job.exitcode = c;
+      job.status = c === 0 ? jobStatus.OK : jobStatus.ERROR;
+      jobUpdate({ ...job }, jobId);
+    };
+
+    const started = i.newJob(request, onLog, onClose);
+    started.then(() => jobUpdate({ status: jobStatus.ACTIVE }, jobId));
+
+    /*const job = {
+      type: "compound",
+      testName: "primary",
+      pipelineTriggers: "secondary",
+      name: "testing",
+      image: "node",
+    };*/
+    return jobId;
   }
 
   function retrySingle(test) {
     console.log("Would retry test", test);
+    return jobFactory({ testNames: ["single"] });
+    
   }
 
   const context = {
@@ -118,7 +144,7 @@ export const JobProvider = ({ children }) => {
     retryAll,
     retrySingle,
     jobBuilder,
-    activeJobStates,
+    jobFactory,
   };
   const contextValue = useMemo(() => context, [state, dispatch]);
 

src/ctx/StoreContext.jsx

@@ -1,5 +1,4 @@
 import React, { useReducer, createContext, useMemo } from "react";
-import { jobStatus } from "./JobContext.jsx";
 
 const StoreContext = createContext();
 
@@ -7,6 +6,11 @@ const ACTIONS = {
   UPDATE: "u",
 };
 
+
+const pipelineMappingsMock = [["primary", "secondary1","tertiary1"],
+                              ["primary", "secondary1", "tertiary2"], 
+                              ["primary", "secondary2", "tertiary3"]];
+
 const silencedMock = new Array(10).fill(0).map((v, i) => ({
   name: `Test${i + 1}`,
   class: `SomeTestClass${i % 2 ? i - 1 : i / 2}`,
@@ -39,36 +43,58 @@ const failingMock = new Array(12).fill(0).map((v, i) => ({
   jobStatus: (() => {
     switch (i) {
       case 1:
-        return jobStatus.OK;
+        return "o";
       case 3:
-        return jobStatus.ERROR;
+        return "e";
       case 4:
-        return jobStatus.PENDING;
+        return "p";
       case 5:
-        return jobStatus.ACTIVE;
+        return "a";
       case 6:
-        return jobStatus.CANCELED;
+        return "c";
       case 8:
-        return jobStatus.QUEUED;
+        return "q";
       default:
         return null;
     }
   })(),
 }));
 
+const localStorage = {setItem: ()=>{}, getItem: ()=>{}};
+
+const localSettings = localStorage.getItem("settings");
+const defaultSettings = {
+  focusJob: true,
+  simplifiedControls: true,
+  logAppDetails: true,
+  defaultRegion: "us",
+  defaultPage: "failing",
+};
+
+const settings = localSettings ? JSON.parse(localSettings) : defaultSettings;
+const settingsKeys = Object.keys(defaultSettings);
+
 const initialState = {
   pages: ["failing", "alerting", "jobs", "catalog", "settings", "about"],
   intervals: [],
   catalog: catalogMock,
   failing: failingMock,
   silenced: silencedMock,
+  pipelineMappings: pipelineMappingsMock,
   regions: [],
   catalogSearch: "",
-  focusJob: false,
-  simplifiedControls: true,
-  logAppDetails: true,
-  defaultRegion: "us", // Local Store
-  defaultPage: "failing", // Local Store
+  ...settings,
+};
+
+const settingsUpdater = (oldState, storeUpdate) => {
+  const settingsToUpdate = {};
+  for (var k of settingsKeys) {
+    settingsToUpdate[k] = oldState[k];
+    if (storeUpdate[k] === undefined) continue;
+    settingsToUpdate[k] = storeUpdate[k];
+  }
+
+  localStorage.setItem("settings", JSON.stringify(settingsToUpdate));
 };
 
 const reducer = (state, action) => {
@@ -76,6 +102,7 @@ const reducer = (state, action) => {
   // Actions
   switch (action.type) {
     case ACTIONS.UPDATE:
+      settingsUpdater(state, store);
       return { ...state, ...store };
     default:
       return state;

src/views/Navbar.jsx

@@ -29,7 +29,6 @@ const drawerWidth = 250;
 export default function Navbar(props) {
   const { state: jobState } = useContext(JobContext);
   const { state: store } = useContext(StoreContext);
-  const { inModal } = props;
   const pages = store.pages;
   const icons = [
     <Badge badgeContent={store.failing.length} color="error">

src/views/Views.jsx

@@ -1,7 +1,8 @@
+import { useContext } from "react";
 import { Routes, Route, Navigate } from "react-router-dom";
 import Box from "@mui/material/Box";
 import Toolbar from "@mui/material/Toolbar";
-
+import StoreContext from "../ctx/StoreContext.jsx";
 // Import Navbar
 import Navbar from "./Navbar.jsx";
 // Import Pages
@@ -14,6 +15,7 @@ import About from "./about/About.jsx";
 import NotFound from "./NotFound.jsx";
 
 export default function Views() {
+  const { state: store } = useContext(StoreContext);
   return (
     <div className="view">
       <Navbar />
@@ -24,7 +26,9 @@ export default function Views() {
           <Route
             exact
             path="/qualiteer/"
-            element={<Navigate to="/qualiteer/failing" replace />}
+            element={
+              <Navigate to={`/qualiteer/${store.defaultPage}`} replace />
+            }
           />
           <Route
             exact

src/views/catalog/CatalogBox.jsx

@@ -1,4 +1,5 @@
 import React, { useState, useContext } from "react";
+import {useNavigate} from "react-router-dom";
 import StoreContext from "../../ctx/StoreContext.jsx";
 import JobContext from "../../ctx/JobContext.jsx";
 
@@ -15,7 +16,7 @@ import Stack from "@mui/material/Stack";
 
 export default function CatalogBox(props) {
   const { catalogTest } = props;
-
+  
   const {
     name: testName,
     class: testClass,
@@ -24,6 +25,8 @@ export default function CatalogBox(props) {
     type: testType,
   } = catalogTest;
 
+  const navigate = useNavigate();
+  
   const { state: store, updateStore } = useContext(StoreContext);
 
   const { state: jobState, jobBuilder } = useContext(JobContext);
@@ -35,7 +38,8 @@ export default function CatalogBox(props) {
   const runTest = (e) => {
     e.preventDefault();
     e.stopPropagation();
-    jobBuilder([catalogTest]);
+    const jobId = jobBuilder([catalogTest]);
+    if(store.focusJob) navigate(`/qualiteer/jobs#${jobId}`);
   };
 
   function Actions() {

src/views/failing/Failing.jsx

@@ -18,7 +18,7 @@ import DialogTitle from "@mui/material/DialogTitle";
 import ReplayIcon from "@mui/icons-material/Replay";
 
 export default function Failing() {
-  const { state: jobState, retryAll, activeJobStates } = useContext(JobContext);
+  const { state: jobState, retryAll } = useContext(JobContext);
 
   const {
     state: store,

src/views/failing/FailingBox.jsx

@@ -1,4 +1,5 @@
 import React, { useState, useContext } from "react";
+import {useNavigate} from "react-router-dom";
 import StoreContext from "../../ctx/StoreContext.jsx";
 import JobContext, { jobStatus } from "../../ctx/JobContext.jsx";
 
@@ -35,7 +36,6 @@ const stopPropagation = (e) => e.stopPropagation() && e.preventDefault();
 
 export default function FailingBox(props) {
   const { failingTest, silenceClick } = props;
-
   const {
     class: testClass,
     name: testName,
@@ -50,6 +50,8 @@ export default function FailingBox(props) {
     jobStatus: testJobStatus,
   } = failingTest;
 
+  const navigate = useNavigate();
+
   const { state: jobState, retrySingle } = useContext(JobContext);
 
   const { state: store, updateStore, removeFailure } = useContext(StoreContext);
@@ -74,7 +76,10 @@ export default function FailingBox(props) {
     return "error";
   }
 
-  const retryTest = () => retrySingle(failingTest);
+  const retryTest = () => { 
+    const jobId = retrySingle(failingTest);
+    if(store.focusJob) navigate(`/qualiteer/jobs#${jobId}`);
+                          }
 
   const jobOnClick = () => {
     switch (testJobStatus) {

src/views/jobs/JobLogView.jsx

@@ -1,5 +1,5 @@
-import { useContext, useState, useEffect } from "react";
-import JobContext from "../../ctx/JobContext.jsx";
+import React from "react";
+import { jobStatus } from "../../ctx/JobContext.jsx";
 
 import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
@@ -7,7 +7,7 @@ import Skeleton from "@mui/material/Skeleton";
 import Stack from "@mui/material/Stack";
 
 export default function JobLogView(props) {
-  const { log } = props;
+  const { log, status } = props;
 
   const LoadingDot = () => (
     <Skeleton
@@ -58,9 +58,22 @@ export default function JobLogView(props) {
         </Box>
       ))}
       <Stack direction="row" spacing={1} sx={{ mt: ".5rem", ml: "0.75rem" }}>
-        <LoadingDot />
-        <LoadingDot />
-        <LoadingDot />
+        {status === jobStatus.PENDING && (
+          <Typography
+            variant="body2"
+            component="div"
+            sx={{ display: "flex", overflowWrap: "anywhere" }}
+          >
+            Waiting for Executor...
+          </Typography>
+        )}
+        {(status === jobStatus.ACTIVE || status === jobStatus.PENDING) && (
+          <React.Fragment>
+            <LoadingDot />
+            <LoadingDot />
+            <LoadingDot />
+          </React.Fragment>
+        )}
       </Stack>
     </Box>
   );

src/views/jobs/JobView.jsx

@@ -1,34 +1,67 @@
 import React, { useContext, useState, useEffect } 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 Button from "@mui/material/Button";
+import IconButton from "@mui/material/IconButton";
 import Typography from "@mui/material/Typography";
+import Menu from "@mui/material/Menu";
+import MenuItem from "@mui/material/MenuItem";
 
 import JobLogView from "./JobLogView.jsx";
+import ListItemText from "@mui/material/ListItemText";
+import ListItemIcon from "@mui/material/ListItemIcon";
+import MoreVertIcon from "@mui/icons-material/MoreVert";
+import DownloadIcon from "@mui/icons-material/Download";
+import ReplayIcon from "@mui/icons-material/Replay";
+import ArrowBackIcon from "@mui/icons-material/ArrowBack";
 
 export default function JobView(props) {
   const navigate = useNavigate();
-  const { state: jobState } = useContext(JobContext);
-  const { job: initJob } = props;
-  const [job, setJob] = useState({ log: [initJob.name] });
+  const { job } = props;
+  const { jobFactory } = useContext(JobContext);
 
-  function retryJob() {}
+  const [anchorEl, setAnchorEl] = React.useState(null);
+  const open = Boolean(anchorEl);
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
 
-  function downloadLog() {}
+  function download(filename, text) {
+    var element = document.createElement("a");
+    element.setAttribute(
+      "href",
+      "data:text/plain;charset=utf-8," + encodeURIComponent(text)
+    );
+    element.setAttribute("download", filename);
+    element.style.display = "none";
+    document.body.appendChild(element);
+    element.click();
+    document.body.removeChild(element);
+  }
+
+  function retryJob() {
+    jobFactory(job.builderCache);
+  }
+
+  function downloadLog() {
+    if (job.status === jobStatus.PENDING) return;
+    download(`${job.jobId}.txt`, job.log.join("\n"));
+  }
+
+  const menuSelect = (cb) => () => {
+    handleClose();
+    cb();
+  };
 
   function navigateToJobs() {
     navigate("/qualiteer/jobs");
   }
 
-  function onLog(d) {
-    const j = { ...job };
-    j.log.push(d);
-    setJob(j);
-  }
-
   return (
     <Box>
       <AppBar
@@ -42,28 +75,34 @@ export default function JobView(props) {
         <Toolbar disableGutters />
         <Box sx={{ flexGrow: 1, margin: "0 10px" }}>
           <Toolbar disableGutters>
-            <Button onClick={navigateToJobs}>Back</Button>
+            <IconButton onClick={navigateToJobs}>
+              <ArrowBackIcon />
+            </IconButton>
             <Typography variant="h6" sx={{ ml: "auto", mr: "auto" }}>
-              {initJob.name}
+              {job.name}
             </Typography>
-            <Button onClick={downloadLog}>Log</Button>
-            <Button onClick={retryJob}>Retry</Button>
+            <IconButton onClick={handleClick}>
+              <MoreVertIcon />
+            </IconButton>
           </Toolbar>
         </Box>
       </AppBar>
       <Toolbar disableGutters />
-      <button
-        onClick={() => {
-          const itvrl = setInterval(() => {
-            onLog(Date.now());
-          }, 100);
-          setTimeout(() => clearInterval(itvrl), 5000);
-        }}
-      >
-        Hello{" "}
-      </button>
-
-      <JobLogView log={job.log} />
+      <JobLogView log={job.log} status={job.status} />
+      <Menu anchorEl={anchorEl} open={open} onClose={handleClose}>
+        <MenuItem onClick={menuSelect(retryJob)}>
+          <ListItemIcon>
+            <ReplayIcon fontSize="small" />
+          </ListItemIcon>
+          <ListItemText>Retry</ListItemText>
+        </MenuItem>
+        <MenuItem onClick={menuSelect(downloadLog)}>
+          <ListItemIcon>
+            <DownloadIcon fontSize="small" />
+          </ListItemIcon>
+          <ListItemText>Download Log</ListItemText>
+        </MenuItem>
+      </Menu>
     </Box>
   );
 }

src/views/jobs/Jobs.jsx

@@ -1,19 +1,21 @@
 import { useState, useContext, useEffect } from "react";
-import { useLocation } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 
 import JobContext from "../../ctx/JobContext.jsx";
 import JobBox from "./JobBox.jsx";
-import JobTestSelector from "./JobTestSelector.jsx";
 import JobView from "./JobView.jsx";
 import JobBuilder from "./builder/JobBuilder.jsx";
 
 export default function Jobs() {
-  const {
-    state: jobState,
-    dispatch: jobDispatch,
-    jobBuilder,
-  } = useContext(JobContext);
+  const { state: jobState } = useContext(JobContext);
   const location = useLocation();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const jobName = location.hash.slice(1);
+    if (!jobName || jobState.jobs.find((job) => job.name === jobName)) return;
+    navigate("/qualiteer/jobs");
+  });
 
   return (
     <div className="jobs">

src/views/jobs/builder/GroupConfirm.jsx

@@ -0,0 +1,25 @@
+import React from "react";
+import Button from "@mui/material/Button";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+
+function GroupConfirm(props) {
+  const { cache, setCache, back, start } = props;
+
+  return (
+    <React.Fragment>
+      <DialogContent>
+      <h3>Confirm group?</h3>
+      {JSON.stringify(cache)}
+    </DialogContent>
+      <DialogActions>
+               <Button onClick={back}>Back</Button>
+          <Button onClick={start} autoFocus>
+            Start
+          </Button> 
+      </DialogActions>
+      </React.Fragment>
+  );
+}
+
+export default GroupConfirm;

src/views/jobs/builder/GroupSelector.jsx

@@ -0,0 +1,30 @@
+import React from "react";
+import Button from "@mui/material/Button";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+
+function GroupSelector(props) {
+  const { cache, setCache, cancel, next } = props;
+  function makeReq() {
+    setCache({
+      testNames: ["single"],
+    });
+  }
+
+  return (
+    <React.Fragment>
+      <DialogContent>
+      {JSON.stringify(cache)}
+      <button onClick={makeReq}>Clickme</button>
+    </DialogContent>
+      <DialogActions>
+               <Button onClick={cancel}>Cancel</Button>
+          <Button onClick={next} autoFocus>
+            Next
+          </Button> 
+      </DialogActions>
+      </React.Fragment>
+  );
+}
+
+export default GroupSelector;

src/views/jobs/builder/IndividualConfirm.jsx

@@ -0,0 +1,25 @@
+import React from "react";
+import Button from "@mui/material/Button";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+
+function IndividualConfirm(props) {
+  const { cache, setCache, back, start } = props;
+
+  return (
+    <React.Fragment>
+      <DialogContent>
+        <h3>Individual Confirm?</h3>
+      {JSON.stringify(cache)}
+    </DialogContent>
+      <DialogActions>
+               <Button onClick={back}>Back</Button>
+          <Button onClick={start} autoFocus>
+            Start
+          </Button> 
+      </DialogActions>
+      </React.Fragment>
+  );
+}
+
+export default IndividualConfirm;

src/views/jobs/builder/IndividualSelector.jsx

@@ -0,0 +1,31 @@
+import React from "react";
+import Button from "@mui/material/Button";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+
+function IndividualSelector(props) {
+  const { cache, setCache, cancel, next } = props;
+  function makeReq() {
+    setCache({
+      testNames: ["failing"],
+    });
+    
+  }
+
+  return (
+    <React.Fragment>
+      <DialogContent>
+      {JSON.stringify(cache)}
+      <button onClick={makeReq}>Clickme</button>
+    </DialogContent>
+      <DialogActions>
+               <Button onClick={cancel}>Cancel</Button>
+          <Button onClick={next} autoFocus>
+            Next
+          </Button> 
+      </DialogActions>
+      </React.Fragment>
+  );
+}
+
+export default IndividualSelector;

src/views/jobs/builder/JobBuilder.jsx

@@ -1,11 +1,9 @@
 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 Button from "@mui/material/Button";
 import Dialog from "@mui/material/Dialog";
-import DialogActions from "@mui/material/DialogActions";
-import DialogContent from "@mui/material/DialogContent";
 import Toolbar from "@mui/material/Toolbar";
 import DialogTitle from "@mui/material/DialogTitle";
 
@@ -18,9 +16,22 @@ import PageviewIcon from "@mui/icons-material/Pageview";
 import ViewColumnIcon from "@mui/icons-material/ViewColumn";
 import ViewCarouselIcon from "@mui/icons-material/ViewCarousel";
 
-export default function JobBuilder(props) {
-  const { state: store, updateStore } = useContext(StoreContext);
+import IndividualSelector from "./IndividualSelector.jsx";
+import IndividualConfirm from "./IndividualConfirm.jsx";
 
+import GroupSelector from "./GroupSelector.jsx";
+import GroupConfirm from "./GroupConfirm.jsx";
+
+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);
+  const { jobFactory } = useContext(JobContext);
   const [quickOpen, setQuickOpen] = useState(false);
   const [jobDialogOpen, setJobDialogOpen] = useState(false);
 
@@ -28,39 +39,51 @@ export default function JobBuilder(props) {
     e.preventDefault();
     e.stopPropagation();
     if (!store.simplifiedControls) return setQuickOpen(!quickOpen);
+    setBuilderPage("individualSelect");
     setJobDialogOpen(true);
   };
 
   const quickOpenClose = () => setQuickOpen(false);
-  const handleClickOpen = () => setJobDialogOpen(true);
-
+  const handleClickOpen = (page)=> () =>{     
+    setBuilderPage(page);
+    setJobDialogOpen(true);
+   }
+  const [builderPage, setBuilderPage] = useState();
   const [cache, setCache] = useState({});
 
   const handleClose = (confirmed) => () => {
     setJobDialogOpen(false);
     if (!confirmed) return;
-    jobBuilder(cache);
+    const jobId = jobFactory(cache);
+    if(store.focusJob)
+    navigate(`/qualiteer/jobs#${jobId}`);
   };
 
   // Pull info from url if possible?
   const actions = [
-    { name: "Suite", icon: <ViewCarouselIcon /> },
-    { name: "Compound", icon: <ViewColumnIcon /> },
-    { name: "Manual", icon: <PageviewIcon /> },
+    { name: "Suite", icon: <ViewCarouselIcon />, page: "groupSelect" },
+    { name: "Compound", icon: <ViewColumnIcon />, page: "pipelineSelect" },
+    { name: "Manual", icon: <PageviewIcon />, page: "individualSelect" },
   ];
 
+  const changePage = (page) => () => setBuilderPage(page);
+
+  const pages = {
+    individualSelect:  <IndividualSelector cache={cache} setCache={setCache} cancel={handleClose()} next={changePage("individualConfirm")}/>,
+    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")} next={handleClose(true)}/>
+  }
+
   return (
     <React.Fragment>
       <Dialog open={jobDialogOpen} onClose={handleClose()} fullScreen>
         <Toolbar />
         <DialogTitle>New Job</DialogTitle>
-        <DialogContent></DialogContent>
-        <DialogActions>
-          <Button onClick={handleClose()}>Cancel</Button>
-          <Button onClick={handleClose(true)} autoFocus>
-            Start
-          </Button>
-        </DialogActions>
+        {pages[builderPage]}
       </Dialog>
 
       <ClickAwayListener onClickAway={quickOpenClose}>
@@ -76,7 +99,7 @@ export default function JobBuilder(props) {
               key={action.name}
               icon={action.icon}
               tooltipTitle={action.name}
-              onClick={handleClickOpen}
+              onClick={handleClickOpen(action.page)}
             />
           ))}
         </SpeedDial>

src/views/jobs/builder/PipelineConfirm.jsx

@@ -0,0 +1,26 @@
+import React from "react";
+import Button from "@mui/material/Button";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+
+function PipelineConfirm(props) {
+  const { cache, back, start } = props;
+
+  return (
+    <React.Fragment>
+      <DialogContent>
+        <h3>Pipeline Confirm</h3>
+      {JSON.stringify(cache)}
+        
+    </DialogContent>
+      <DialogActions>
+               <Button onClick={back}>Back</Button>
+          <Button onClick={start} autoFocus>
+            Start
+          </Button> 
+      </DialogActions>
+      </React.Fragment>
+  );
+}
+
+export default PipelineConfirm;

src/views/jobs/builder/PipelineSelector.jsx

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

src/views/jobs/builder/PipelineTrackSelector.jsx

@@ -0,0 +1,25 @@
+import React from "react";
+import Button from "@mui/material/Button";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+
+function PipelineTrackSelector(props) {
+  const { cache, setCache, back, next } = props;
+
+  return (
+    <React.Fragment>
+      <DialogContent>
+        <h3>Select Track</h3>
+      {JSON.stringify(cache)}
+    </DialogContent>
+      <DialogActions>
+               <Button onClick={back}>Back</Button>
+          <Button onClick={next} autoFocus>
+            Next
+          </Button> 
+      </DialogActions>
+      </React.Fragment>
+  );
+}
+
+export default PipelineTrackSelector;

src/views/settings/Settings.jsx

@@ -107,29 +107,17 @@ export default function Settings(props) {
 
         <ListItem button divider onClick={handleToggle("simplifiedControls")}>
           <ListItemText primary="Simplified Controls" />
-          <Switch
-            edge="end"
-            onChange={handleToggle("simplifiedControls")}
-            checked={store.simplifiedControls}
-          />
+          <Switch edge="end" checked={store.simplifiedControls} />
         </ListItem>
 
         <ListItem button divider onClick={handleToggle("focusJob")}>
           <ListItemText primary="Focus New Jobs" />
-          <Switch
-            edge="end"
-            onChange={handleToggle("focusJob")}
-            checked={store.focusJob}
-          />
+          <Switch edge="end" checked={store.focusJob} />
         </ListItem>
 
         <ListItem button divider onClick={handleToggle("logAppDetails")}>
           <ListItemText primary="Log App Details" />
-          <Switch
-            edge="end"
-            onChange={handleToggle("logAppDetails")}
-            checked={store.logAppDetails}
-          />
+          <Switch edge="end" checked={store.logAppDetails} />
         </ListItem>
 
         <MultiOptionDialog

tests/assets/suite/runner.js

@@ -54,5 +54,7 @@ setTimeout(() => {
   };
   axios.post(reportingUrl, { testResult }).catch((e) => {
     console.log(e.response.status);
+  }).then(()=>{
+    if(status.status === 1) process.exit(1);
   });
 }, endLiveCount * 1000);

vite.config.js

@@ -9,6 +9,13 @@ export default () => {
       hmr: {
         port: 443,
       },
+      proxy: {
+      '/api': 'http://localhost:52000',
+      '/socket.io': {
+        target: 'ws://localhost:52000',
+        ws: true
+      }
+    }
     },
     build: {
       outDir: "./build",