Refactored frontend

src/views/alerting/Alerting.jsx

@@ -0,0 +1,99 @@
+import { useState, useContext } from "react";
+import StoreContext from "../../ctx/StoreContext.jsx";
+import SilencedBox from "./SilencedBox.jsx";
+import SilenceDialog from "./SilenceDialog.jsx";
+
+import SpeedDial from "@mui/material/SpeedDial";
+import SpeedDialAction from "@mui/material/SpeedDialAction";
+import SpeedDialIcon from "@mui/material/SpeedDialIcon";
+
+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";
+
+export default function Alerting() {
+  const {
+    state: store,
+    updateStore,
+    silenceRequest,
+  } = useContext(StoreContext);
+
+  const [silenceEntry, setSilenceEntry] = useState({
+    open: false,
+    deleteOpen: false,
+  });
+
+  const closeSilence = () =>
+    setSilenceEntry({ ...silenceEntry, open: false, deleteOpen: false });
+
+  const handleDeleteClose = (makeRequest) => () => {
+    const silenceReq = { ...silenceEntry };
+    closeSilence();
+    if (!makeRequest) return;
+    silenceRequest({ ...silenceReq, silencedUntil: null });
+  };
+
+  const handleClose = (silenceReq) => {
+    closeSilence();
+    if (!silenceReq) return;
+    silenceRequest(silenceReq);
+  };
+
+  const quickAlertClick = () => {
+    setSilenceEntry({ open: true, deleteOpen: false });
+  };
+
+  const editSilence = (silence) => () => {
+    setSilenceEntry({ ...silence, open: true, deleteOpen: false });
+  };
+
+  const removeSilence = (silence) => () => {
+    setSilenceEntry({ ...silence, deleteOpen: true, open: false });
+  };
+
+  return (
+    <div className="alerting">
+      {store.silenced.map((v, i) => (
+        <SilencedBox
+          key={i}
+          silenceEntry={v}
+          editSilence={editSilence(v)}
+          removeSilence={removeSilence(v)}
+        />
+      ))}
+      <Dialog
+        open={silenceEntry.deleteOpen}
+        onClose={handleDeleteClose()}
+        sx={{ "& .MuiDialog-paper": { width: "80%", maxHeight: 435 } }}
+        maxWidth="xs"
+      >
+        <DialogTitle>Resume Alerting</DialogTitle>
+        <DialogContent>Are you sure you want to resume alerting?</DialogContent>
+        <DialogActions>
+          <Button onClick={handleDeleteClose()}>Cancel</Button>
+          <Button onClick={handleDeleteClose(true)} autoFocus>
+            Remove
+          </Button>
+        </DialogActions>
+      </Dialog>
+
+      <SilenceDialog
+        keepMounted
+        open={silenceEntry.open}
+        onClose={handleClose}
+        silence={silenceEntry}
+      />
+
+      <SpeedDial
+        ariaLabel="Silence Alert"
+        sx={{ position: "fixed", bottom: 16, right: 16 }}
+        icon={<SpeedDialIcon />}
+        onClick={quickAlertClick}
+        open={false}
+      />
+    </div>
+  );
+}

src/views/alerting/SilenceDialog.jsx

@@ -0,0 +1,82 @@
+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(() => {
+    setSilenceEntry(silence);
+  }, [silence, open]);
+
+  const { state: store, updateStore } = useContext(StoreContext);
+
+  const handleCancel = () => onClose();
+
+  const handleOk = () => onClose(silenceEntry);
+
+  const updateSilence = (silenceType) => (e) => {
+    silenceEntry[silenceType] = e.target.value;
+    setSilenceEntry({ ...silenceEntry });
+  };
+
+  return (
+    <Dialog
+      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
+          fullWidth
+          label="Test Name"
+          variant="standard"
+          defaultValue={silence.name ?? ""}
+          onChange={updateSilence("name")}
+          margin="normal"
+        />
+        <TextField
+          fullWidth
+          label="Test Method"
+          variant="standard"
+          defaultValue={silence.method ?? ""}
+          onChange={updateSilence("method")}
+          margin="normal"
+        />
+        <TextField
+          fullWidth
+          label="Test Class"
+          variant="standard"
+          defaultValue={silence.class ?? ""}
+          onChange={updateSilence("class")}
+          margin="normal"
+        />
+      </DialogContent>
+      <DialogActions>
+        <Button autoFocus onClick={handleCancel}>
+          Cancel
+        </Button>
+        <Button onClick={handleOk}>Ok</Button>
+      </DialogActions>
+    </Dialog>
+  );
+}

src/views/alerting/SilencedBox.jsx

@@ -0,0 +1,87 @@
+import React, { useState, useContext } from "react";
+import StoreContext from "../../ctx/StoreContext.jsx";
+
+import Accordion from "@mui/material/Accordion";
+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 EditIcon from "@mui/icons-material/Edit";
+
+import Stack from "@mui/material/Stack";
+
+export default function SilencingBox(props) {
+  const { silenceEntry, editSilence, removeSilence } = props;
+
+  const {
+    name: testName,
+    method: testMethod,
+    class: testClass,
+    id: silenceId,
+    silencedUntil,
+  } = silenceEntry;
+
+  const { state: store, updateStore } = useContext(StoreContext);
+
+  function Actions() {
+    return (
+      <React.Fragment>
+        <IconButton
+          aria-label="modify"
+          component="span"
+          color="primary"
+          onClick={editSilence}
+        >
+          <EditIcon />
+        </IconButton>
+        <IconButton
+          color="error"
+          aria-label="delete"
+          component="span"
+          onClick={removeSilence}
+        >
+          <DeleteIcon />
+        </IconButton>
+      </React.Fragment>
+    );
+  }
+
+  return (
+    <Accordion expanded={false} disableGutters={true} square>
+      <AccordionSummary
+        style={{
+          backgroundColor: "rgba(0, 0, 0, .03)",
+          flexWrap: "wrap",
+        }}
+      >
+        <Typography component={"span"} style={{ wordBreak: "break-word" }}>
+          {`Test Name: ${testName}`}
+          <br />
+          {`Method: ${testMethod}`}
+          <br />
+          {`Test Class: ${testClass}`}
+          <br />
+          {`Silenced Until: ${silencedUntil} Remaining Time: 2:50`}
+        </Typography>
+
+        <Stack
+          sx={{ ml: "auto", display: { md: "none", lg: "none", xl: "none" } }}
+        >
+          <Actions />
+        </Stack>
+        <Stack
+          direction="row"
+          sx={{
+            ml: "auto",
+            mb: "auto",
+            mt: "auto",
+            display: { xs: "none", sm: "none", md: "block", lg: "block" },
+          }}
+        >
+          <Actions />
+        </Stack>
+      </AccordionSummary>
+    </Accordion>
+  );
+}