Basic MultiJobs

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