127 lines
3.7 KiB
JavaScript
127 lines
3.7 KiB
JavaScript
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>
|
|
);
|
|
}
|