Stable Modification Point

src/views/Alerting.jsx

@@ -1,5 +1,7 @@
 import { useState, useContext } from "react";
 import StoreContext from "../ctx/StoreContext.jsx";
+import SilencedBox from "./components/SilencedBox.jsx";
+import SilenceDialog from "./components/SilenceDialog.jsx";
 
 import SpeedDial from "@mui/material/SpeedDial";
 import SpeedDialAction from "@mui/material/SpeedDialAction";
@@ -13,36 +15,78 @@ import DialogContentText from "@mui/material/DialogContentText";
 import DialogTitle from "@mui/material/DialogTitle";
 
 export default function Alerting() {
-  const { state: store, updateStore } = useContext(StoreContext);
+  const {
+    state: store,
+    updateStore,
+    silenceRequest,
+  } = useContext(StoreContext);
 
-  const [alertDialogOpen, setAlertDialogOpen] = useState(false);
-  const quickAlertClick = () => setAlertDialogOpen(!alertDialogOpen);
+  const [silenceEntry, setSilenceEntry] = useState({
+    open: false,
+    deleteOpen: false,
+  });
 
-  function silenceAlert() {}
-  const handleClose = (confirmed) => () => {
-    quickAlertClick();
-    if (!confirmed) return;
-    silenceAlert();
+  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={alertDialogOpen}
-        onClose={handleClose()}
+        open={silenceEntry.deleteOpen}
+        onClose={handleDeleteClose()}
         sx={{ "& .MuiDialog-paper": { width: "80%", maxHeight: 435 } }}
         maxWidth="xs"
       >
-        <DialogTitle>Silence Alert</DialogTitle>
-        <DialogContent></DialogContent>
+        <DialogTitle>Resume Alerting</DialogTitle>
+        <DialogContent>Are you sure you want to resume alerting?</DialogContent>
         <DialogActions>
-          <Button onClick={handleClose()}>Cancel</Button>
-          <Button onClick={handleClose(true)} autoFocus>
-            Silence
+          <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 }}