Prepared for Vite Migration

2022-07-06 20:20:27 +00:00 · 2022-07-06 20:20:27 +00:00 · d46be86f68
commit d46be86f68
parent 468437b5d0
14 changed files with 392 additions and 236 deletions
--- a/src/views/Failing.jsx
+++ b/src/views/Failing.jsx
@ -42,13 +42,6 @@ export default function Failing() {
    setSilenceEntry({ ...silence, open: true });
  };

-  /* TODO
-for(var j of activeJobStates()){
-const failingTest = failing.find((f)=>f.name===j.testName);
-  if(!failingTest) continue;
-  failingTest.jobStatus= j.status;  
-  }*/
-
  const [retryAllOpen, setRetryAllOpen] = useState(false);
  const retryAllClick = () => setRetryAllOpen(!retryAllOpen);

--- a/src/views/Jobs.jsx
+++ b/src/views/Jobs.jsx
@ -8,7 +8,7 @@ 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";

 import ClickAwayListener from "@mui/material/ClickAwayListener";
@ -24,8 +24,7 @@ export default function Jobs() {
  const {
    state: jobState,
    dispatch: jobDispatch,
-    jobUpdate,
-    jobCreate,
+    jobBuilder,
  } = useContext(JobContext);

  const { state: store, updateStore } = useContext(StoreContext);
@ -37,21 +36,25 @@ export default function Jobs() {
    { name: "Compound", icon: <ViewColumnIcon /> },
    { name: "Manual", icon: <PageviewIcon /> },
  ];
-  
+
  const quickOpenClick = (e) => {
    e.preventDefault();
    e.stopPropagation();
-    if(!store.simplifiedControls) return setQuickOpen(!quickOpen);
+    if (!store.simplifiedControls) return setQuickOpen(!quickOpen);
    setJobDialogOpen(true);
-  }
+  };
  const quickOpenClose = () => setQuickOpen(false);

-
  const handleClickOpen = () => setJobDialogOpen(true);
-  const handleClose = () => setJobDialogOpen(false);
+
  const [queued, setQueued] = useState([]);
-  useEffect(() => {
-  }, [jobState.jobs]);
+  useEffect(() => {}, [jobState.jobs]);
+
+  const handleClose = (confirmed) => () => {
+    setJobDialogOpen(false);
+    if (!confirmed) return;
+    jobBuilder(queued);
+  };

  return (
    <div className="jobs">
@ -59,15 +62,20 @@ export default function Jobs() {
        <JobBox key={i} job={v} />
      ))}

-      <Dialog open={jobDialogOpen} onClose={handleClose} maxWidth="xs">
+      <Dialog open={jobDialogOpen} onClose={handleClose()} fullScreen>
+        <Toolbar />
        <DialogTitle>New Job</DialogTitle>
        <DialogContent>
          <span>Some Selectors</span>
-          <JobTestSelector queued={queued} availableTests={store.catalog} setQueued={setQueued} />
+          <JobTestSelector
+            queued={queued}
+            availableTests={store.catalog}
+            setQueued={setQueued}
+          />
        </DialogContent>
        <DialogActions>
-          <Button onClick={handleClose}>Cancel</Button>
-          <Button onClick={handleClose} autoFocus>
+          <Button onClick={handleClose()}>Cancel</Button>
+          <Button onClick={handleClose(true)} autoFocus>
            Start
          </Button>
        </DialogActions>
--- a/src/views/Settings.jsx
+++ b/src/views/Settings.jsx
@ -15,7 +15,6 @@ import Typography from "@mui/material/Typography";
 export default function Settings(props) {
  const { state: store, updateStore } = useContext(StoreContext);
  const { regions } = store;
-  const { pages } = props;

  const defaultDialog = {
    title: "",
@ -35,7 +34,7 @@ export default function Settings(props) {
    },
    defaultPage: {
      title: "Default Page",
-      options: pages,
+      options: store.pages,
      current: store.defaultPage,
      onSelect: (p) => updateStore({ defaultPage: p }),
    },
@ -133,8 +132,6 @@ export default function Settings(props) {
          />
        </ListItem>

-        
-
        <MultiOptionDialog
          id="multi-options-menu"
          keepMounted
--- a/src/views/alt-comps/JobManualSelector.jsx
+++ b/src/views/alt-comps/JobManualSelector.jsx
@ -7,43 +7,44 @@ import ListItemText from "@mui/material/ListItemText";
 import ListItemAvatar from "@mui/material/ListItemAvatar";
 import Checkbox from "@mui/material/Checkbox";

-export default function JobManualSelector(props){
-  const {availableTests} = props;
+export default function JobManualSelector(props) {
+  const { availableTests } = props;
  const [queued, setQueued] = useState([]);
-  useEffect(()=>{
-  },[availableTests]);
+  useEffect(() => {}, [availableTests]);

  const queueTest = (test) => () => {
    const q = [...queued];
    const testIndex = q.indexOf(test);
-    if(testIndex === -1) q.push(test);
+    if (testIndex === -1) q.push(test);
    else q.splice(testIndex, 1);
    setQueued(q);
  };
-  
-   return (
-      <Box style={{ overflow: "auto",  maxHeight: 250 }}>
-        <List>
-          {availableTests.map((v, i) => (
-            <ListItem
-              key={i}
-              secondaryAction={<Checkbox edge="end" checked={queued.includes(v)} />}
-              disablePadding
-              onClick={queueTest(v)}
-            >
-              <ListItemButton key={i}>
-                <ListItemText
-                  primary={
-                    <span>
-                      {v.class}#<strong>{v.name}</strong>
-                    </span>
-                  }
-                  style={{ wordBreak: "break-word" }}
-                />
-              </ListItemButton>
-            </ListItem>
-          ))}
-        </List>
-      </Box>
-    );
-}
+
+  return (
+    <Box style={{ overflow: "auto", maxHeight: 250 }}>
+      <List>
+        {availableTests.map((v, i) => (
+          <ListItem
+            key={i}
+            secondaryAction={
+              <Checkbox edge="end" checked={queued.includes(v)} />
+            }
+            disablePadding
+            onClick={queueTest(v)}
+          >
+            <ListItemButton key={i}>
+              <ListItemText
+                primary={
+                  <span>
+                    {v.class}#<strong>{v.name}</strong>
+                  </span>
+                }
+                style={{ wordBreak: "break-word" }}
+              />
+            </ListItemButton>
+          </ListItem>
+        ))}
+      </List>
+    </Box>
+  );
+}
--- a/src/views/alt-comps/JobTestSelector.jsx
+++ b/src/views/alt-comps/JobTestSelector.jsx
@ -6,20 +6,18 @@ import DialogActions from "@mui/material/DialogActions";
 import DialogContent from "@mui/material/DialogContent";
 import DialogTitle from "@mui/material/DialogTitle";

-export default function JobTestSelector(props){
-   const {jobDialogOpen, handleClose, dialogTitle, testSelector} = props;
-   return (
-      <Dialog open={jobDialogOpen} onClose={handleClose} maxWidth="xs">
-        <DialogTitle>{dialogTitle}</DialogTitle>
-        <DialogContent>
-          {testSelector}
-        </DialogContent>
-        <DialogActions>
-          <Button onClick={handleClose}>Cancel</Button>
-          <Button onClick={handleClose} autoFocus>
-            Start
-          </Button>
-        </DialogActions>
-      </Dialog>
-    );
-}
+export default function JobTestSelector(props) {
+  const { jobDialogOpen, handleClose, dialogTitle, testSelector } = props;
+  return (
+    <Dialog open={jobDialogOpen} onClose={handleClose} maxWidth="xs">
+      <DialogTitle>{dialogTitle}</DialogTitle>
+      <DialogContent>{testSelector}</DialogContent>
+      <DialogActions>
+        <Button onClick={handleClose}>Cancel</Button>
+        <Button onClick={handleClose} autoFocus>
+          Start
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}
--- a/src/views/components/CatalogBox.jsx
+++ b/src/views/components/CatalogBox.jsx
@ -8,7 +8,6 @@ import AccordionSummary from "@mui/material/AccordionSummary";
 import Typography from "@mui/material/Typography";

 import IconButton from "@mui/material/IconButton";
-import DeleteIcon from "@mui/icons-material/Delete";
 import PlayArrowIcon from "@mui/icons-material/PlayArrow";

 import Box from "@mui/material/Box";
@ -33,10 +32,21 @@ export default function CatalogBox(props) {

  const toggleOpen = () => setOpen(!open);

+  const runTest = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    jobBuilder([catalogTest]);
+  };
+
  function Actions() {
    return (
      <React.Fragment>
-        <IconButton color="success" aria-label="play" component="span">
+        <IconButton
+          color="success"
+          aria-label="play"
+          component="span"
+          onClick={runTest}
+        >
          <PlayArrowIcon />
        </IconButton>
      </React.Fragment>
--- a/src/views/components/FailingBox.jsx
+++ b/src/views/components/FailingBox.jsx
@ -7,6 +7,13 @@ import AccordionDetails from "@mui/material/AccordionDetails";
 import AccordionSummary from "@mui/material/AccordionSummary";
 import Typography from "@mui/material/Typography";

+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 DialogContentText from "@mui/material/DialogContentText";
+import DialogTitle from "@mui/material/DialogTitle";
+
 import IconButton from "@mui/material/IconButton";
 import DeleteIcon from "@mui/icons-material/Delete";
 import NotificationsIcon from "@mui/icons-material/Notifications";
@ -43,14 +50,23 @@ export default function FailingBox(props) {
    jobStatus: testJobStatus,
  } = failingTest;

-  const { state: jobState, retryTest, retryJobStatus } = useContext(JobContext);
+  const { state: jobState, retrySingle } = useContext(JobContext);

-  const { state: store, updateStore } = useContext(StoreContext);
+  const { state: store, updateStore, removeFailure } = useContext(StoreContext);

  const [open, setOpen] = useState(false);
-
  const toggleOpen = () => setOpen(!open);

+  const [removeOpen, setRemoveOpen] = useState(false);
+  const removeClick = () => setRemoveOpen(!removeOpen);
+
+  const handleRemoveClose = (confirmed) => (e) => {
+    stopPropagation(e);
+    setRemoveOpen(false);
+    if (!confirmed) return;
+    removeFailure(failingTest);
+  };
+
  function badgeColor() {
    if (dailyFails === 1) return "primary";
    else if (dailyFails === 2) return "secondary";
@ -80,9 +96,11 @@ export default function FailingBox(props) {
  function Actions() {
    return (
      <React.Fragment>
-        <IconButton aria-label="photo" component="span">
-          <PhotoCameraIcon />
-        </IconButton>
+        <a href={screenshotUrl}>
+          <IconButton aria-label="photo" component="span">
+            <PhotoCameraIcon />
+          </IconButton>
+        </a>

        <IconButton aria-label="retry" component="span">
          {jobIcon()}
@ -96,7 +114,12 @@ export default function FailingBox(props) {
        >
          <NotificationsIcon />
        </IconButton>
-        <IconButton color="error" aria-label="delete" component="span">
+        <IconButton
+          color="error"
+          aria-label="delete"
+          component="span"
+          onClick={removeClick}
+        >
          <DeleteIcon />
        </IconButton>
      </React.Fragment>
@ -125,21 +148,52 @@ export default function FailingBox(props) {
            horizontal: "left",
          }}
        ></Badge>
+        <Badge
+          sx={{ mr: 2 }}
+          style={{ whiteSpace: "nowrap", left: "3.125rem" }}
+          badgeContent={new Date(timestamp).toLocaleTimeString("en-US")}
+          anchorOrigin={{
+            vertical: "bottom",
+            horizontal: "left",
+          }}
+        ></Badge>
+        <Dialog
+          open={removeOpen}
+          onClose={handleRemoveClose()}
+          sx={{ "& .MuiDialog-paper": { width: "80%", maxHeight: 435 } }}
+          maxWidth="xs"
+        >
+          <DialogTitle>Remove failure?</DialogTitle>
+          <DialogContent>
+            <DialogContentText>
+              This will remove 1 test from the database
+            </DialogContentText>
+          </DialogContent>
+          <DialogActions>
+            <Button onClick={handleRemoveClose()}>Cancel</Button>
+            <Button onClick={handleRemoveClose(true)} autoFocus>
+              Yes
+            </Button>
+          </DialogActions>
+        </Dialog>
+
        <Typography component={"span"} style={{ wordBreak: "break-word" }}>
          {`${testClass}#`}
          <Box fontWeight="bold" display="inline">
            {testName}{" "}
          </Box>
          <br />
-          <span className="recent-results">
-            {recentResults.map(
-              (v, i) =>
-                (v && <CheckIcon key={i} color="success" />) || (
-                  <ClearIcon key={i} color="error" />
-                )
-            )}
-          </span>
-          {isCompound && <ViewColumnIcon />}
+          <div>
+            <span className="recent-results">
+              {recentResults.map(
+                (v, i) =>
+                  (v && <CheckIcon key={i} color="success" />) || (
+                    <ClearIcon key={i} color="error" />
+                  )
+              )}
+            </span>
+            {isCompound && <ViewColumnIcon />}
+          </div>
        </Typography>

        <Stack
@ -153,8 +207,9 @@ export default function FailingBox(props) {
          direction="row"
          sx={{
            ml: "auto",
-                        mb: "auto",
+            mb: "auto",
            mt: "auto",
+            whiteSpace: "nowrap",
            display: { xs: "none", sm: "none", md: "block", lg: "block" },
          }}
        >
--- a/src/views/components/JobTestSelector.jsx
+++ b/src/views/components/JobTestSelector.jsx
@ -6,42 +6,44 @@ import ListItemButton from "@mui/material/ListItemButton";
 import ListItemText from "@mui/material/ListItemText";
 import Checkbox from "@mui/material/Checkbox";

-export default function JobTestSelector(props){
-  const {availableTests, queued, setQueued} = props;
-  
-  useEffect(()=>{},[availableTests]);
+export default function JobTestSelector(props) {
+  const { availableTests, queued, setQueued } = props;
+
+  useEffect(() => {}, [availableTests]);

  const queueTest = (test) => () => {
    const q = [...queued];
    const testIndex = q.indexOf(test);
-    if(testIndex === -1) q.push(test);
+    if (testIndex === -1) q.push(test);
    else q.splice(testIndex, 1);
    setQueued(q);
  };
-  
-   return (
-      <Box style={{ overflow: "auto",  maxHeight: 250 }}>
-        <List>
-          {availableTests.map((v, i) => (
-            <ListItem
-              key={i}
-              secondaryAction={<Checkbox edge="end" checked={queued.includes(v)} />}
-              disablePadding
-              onClick={queueTest(v)}
-            >
-              <ListItemButton key={i}>
-                <ListItemText
-                  primary={
-                    <span>
-                      {v.class}#<strong>{v.name}</strong>
-                    </span>
-                  }
-                  style={{ wordBreak: "break-word" }}
-                />
-              </ListItemButton>
-            </ListItem>
-          ))}
-        </List>
-      </Box>
-    );
-}
+
+  return (
+    <Box style={{ overflow: "auto", maxHeight: 250 }}>
+      <List>
+        {availableTests.map((v, i) => (
+          <ListItem
+            key={i}
+            secondaryAction={
+              <Checkbox edge="end" checked={queued.includes(v)} />
+            }
+            disablePadding
+            onClick={queueTest(v)}
+          >
+            <ListItemButton key={i}>
+              <ListItemText
+                primary={
+                  <span>
+                    {v.class}#<strong>{v.name}</strong>
+                  </span>
+                }
+                style={{ wordBreak: "break-word" }}
+              />
+            </ListItemButton>
+          </ListItem>
+        ))}
+      </List>
+    </Box>
+  );
+}
--- a/src/views/components/MultiOptionDialog.jsx
+++ b/src/views/components/MultiOptionDialog.jsx
@ -1,5 +1,7 @@
 import { useState, useRef, useEffect } from "react";

+import useMediaQuery from "@mui/material/useMediaQuery";
+import { useTheme } from "@mui/material/styles";
 import Button from "@mui/material/Button";
 import DialogTitle from "@mui/material/DialogTitle";
 import DialogContent from "@mui/material/DialogContent";
@ -8,12 +10,14 @@ import Dialog from "@mui/material/Dialog";
 import RadioGroup from "@mui/material/RadioGroup";
 import Radio from "@mui/material/Radio";
 import FormControlLabel from "@mui/material/FormControlLabel";
+import Toolbar from "@mui/material/Toolbar";

 export default function MultiOptionDialog(props) {
  const { dialog: dialogProp, onClose, open, ...other } = props;
  const [value, setValue] = useState(dialogProp.current);
  const [dialog, setDialog] = useState(dialogProp);
-
+  const theme = useTheme();
+  const fullScreen = useMediaQuery(theme.breakpoints.down("sm"));
  const radioGroupRef = useRef(null);

  useEffect(() => {
@ -35,12 +39,17 @@ export default function MultiOptionDialog(props) {

  return (
    <Dialog
-      sx={{ "& .MuiDialog-paper": { width: "80%", maxHeight: 435 } }}
-      maxWidth="xs"
      TransitionProps={{ onEntering: handleEntering }}
      open={open}
      {...other}
+      sx={
+        fullScreen
+          ? {}
+          : { "& .MuiDialog-paper": { width: "80%", maxHeight: 435 } }
+      }
+      fullScreen={fullScreen}
    >
+      <Toolbar sx={{ display: { sm: "none" } }} />
      <DialogTitle>{dialog.title}</DialogTitle>
      <DialogContent dividers>
        <RadioGroup
--- a/src/views/components/SilenceDialog.jsx
+++ b/src/views/components/SilenceDialog.jsx
@ -1,16 +1,20 @@
 import { useState, useContext, useEffect } from "react";
 import StoreContext from "../../ctx/StoreContext.jsx";

+import useMediaQuery from "@mui/material/useMediaQuery";
+import { useTheme } from "@mui/material/styles";
 import Button from "@mui/material/Button";
 import DialogTitle from "@mui/material/DialogTitle";
 import DialogContent from "@mui/material/DialogContent";
 import DialogActions from "@mui/material/DialogActions";
 import Dialog from "@mui/material/Dialog";
 import TextField from "@mui/material/TextField";
+import Toolbar from "@mui/material/Toolbar";

 export default function SilenceDialog(props) {
  const { silence, open, onClose } = props;
-
+  const theme = useTheme();
+  const fullScreen = useMediaQuery(theme.breakpoints.down("sm"));
  const [silenceEntry, setSilenceEntry] = useState(silence);

  useEffect(() => {
@ -30,10 +34,16 @@ export default function SilenceDialog(props) {

  return (
    <Dialog
-      sx={{ "& .MuiDialog-paper": { width: "80%", maxHeight: 435 } }}
+      sx={
+        fullScreen
+          ? {}
+          : { "& .MuiDialog-paper": { width: "80%", maxHeight: 435 } }
+      }
      maxWidth="xs"
      open={open}
+      fullScreen={fullScreen}
    >
+      <Toolbar sx={{ display: { sm: "none" } }} />
      <DialogTitle>Silence Alert</DialogTitle>
      <DialogContent>
        <TextField