qualiteer/src/views/alerting/Alerting.jsx

import React, { useState, useContext } from "react";
import { useSilencedAlerts } from "@qltr/queries";
import StoreContext from "@qltr/store";
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";
import Typography from "@mui/material/Typography";
import Box from "@mui/material/Box";

export default function Alerting() {
  const { updateStore, silenceRequest } = useContext(StoreContext);

  const { isLoading, data: silenced } = useSilencedAlerts();

  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">
      {isLoading
        ? null
        : silenced.map((v, i) => (
            <SilencedBox
              key={i}
              silenceEntry={v}
              editSilence={editSilence(v)}
              removeSilence={removeSilence(v)}
            />
          ))}

      {(silenced ?? []).length === 0 ? (
        <React.Fragment>
          <Box
            display="flex"
            alignItems="center"
            justifyContent="center"
            sx={{ flexFlow: "wrap" }}
          >
            <Typography variant="h4">No alerts silenced! </Typography>{" "}
          </Box>
          <Box
            display="flex"
            alignItems="center"
            justifyContent="center"
            sx={{ flexFlow: "wrap" }}
          >
            {" "}
            <Typography variant="h5">
              Click the '+' to create a new one!
            </Typography>
          </Box>
        </React.Fragment>
      ) : null}

      <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>
  );
}