159 lines
3.8 KiB
React
159 lines
3.8 KiB
React
import Stack from "@mui/material/Stack";
|
|
import Status from "./status.jsx";
|
|
import Skeleton from "./skeleton.jsx";
|
|
import Button from "@mui/material/Button";
|
|
import { Tooltip } from "@mui/material";
|
|
import Icon from "../Icon";
|
|
|
|
// Utils
|
|
import PropTypes from "prop-types";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { useTheme } from "@mui/material/styles";
|
|
import { usePauseMonitor } from "../../../Hooks/monitorHooks.js";
|
|
import { useSendTestEmail } from "../../../Hooks/useSendTestEmail.js";
|
|
import { useTranslation } from "react-i18next";
|
|
import { useTestAllNotifications } from "../../../Hooks/useNotifications.js";
|
|
/**
|
|
* MonitorDetailsControlHeader component displays the control header for monitor details.
|
|
* It includes status display, pause/resume button, and a configure button for admins.
|
|
*
|
|
* @component
|
|
* @param {Object} props - Component props
|
|
* @param {string} props.path - The base path for navigation
|
|
* @param {boolean} [props.isLoading=false] - Flag indicating if the data is loading
|
|
* @param {boolean} [props.isAdmin=false] - Flag indicating if the user is an admin
|
|
* @param {Object} props.monitor - The monitor object containing details
|
|
* @param {Function} props.triggerUpdate - Function to trigger an update
|
|
* @returns {JSX.Element} The rendered component
|
|
*/
|
|
const MonitorDetailsControlHeader = ({
|
|
path,
|
|
isLoading = false,
|
|
isAdmin = false,
|
|
monitor,
|
|
triggerUpdate,
|
|
}) => {
|
|
const navigate = useNavigate();
|
|
const theme = useTheme();
|
|
const { t } = useTranslation();
|
|
const [pauseMonitor, isPausing, error] = usePauseMonitor();
|
|
|
|
const isTestNotificationsDisabled = monitor?.notifications?.length === 0;
|
|
|
|
const tooltipTitle = isTestNotificationsDisabled ? t("testNotificationsDisabled") : "";
|
|
|
|
// const [isSending, emailError, sendTestEmail] = useSendTestEmail();
|
|
|
|
const [testAllNotifications, isSending, errorAllNotifications] =
|
|
useTestAllNotifications();
|
|
|
|
if (isLoading) {
|
|
return <Skeleton />;
|
|
}
|
|
|
|
return (
|
|
<Stack
|
|
direction="row"
|
|
justifyContent="space-between"
|
|
>
|
|
<Status monitor={monitor} />
|
|
|
|
<Stack
|
|
direction="row"
|
|
gap={theme.spacing(2)}
|
|
>
|
|
<Tooltip
|
|
key={monitor?.id}
|
|
placement="bottom"
|
|
title={tooltipTitle}
|
|
>
|
|
<span>
|
|
<Button
|
|
variant="contained"
|
|
color="secondary"
|
|
loading={isSending}
|
|
startIcon={
|
|
<Icon
|
|
name="Mail"
|
|
size={18}
|
|
/>
|
|
}
|
|
disabled={isTestNotificationsDisabled}
|
|
onClick={() => {
|
|
testAllNotifications({ monitorId: monitor?.id });
|
|
}}
|
|
sx={{
|
|
whiteSpace: "nowrap",
|
|
}}
|
|
>
|
|
{t("sendTestNotifications")}
|
|
</Button>
|
|
</span>
|
|
</Tooltip>
|
|
<Button
|
|
variant="contained"
|
|
color="secondary"
|
|
onClick={(e) => {
|
|
navigate(`/incidents/${monitor?.id}`);
|
|
}}
|
|
>
|
|
{t("menu.incidents")}
|
|
</Button>
|
|
{isAdmin && (
|
|
<Button
|
|
variant="contained"
|
|
color="secondary"
|
|
loading={isPausing}
|
|
startIcon={
|
|
monitor?.isActive ? (
|
|
<Icon
|
|
name="Pause"
|
|
size={18}
|
|
/>
|
|
) : (
|
|
<Icon
|
|
name="Play"
|
|
size={18}
|
|
/>
|
|
)
|
|
}
|
|
onClick={() => {
|
|
pauseMonitor({
|
|
monitorId: monitor?.id,
|
|
triggerUpdate,
|
|
});
|
|
}}
|
|
>
|
|
{monitor?.isActive ? "Pause" : "Resume"}
|
|
</Button>
|
|
)}
|
|
{isAdmin && (
|
|
<Button
|
|
variant="contained"
|
|
color="secondary"
|
|
startIcon={
|
|
<Icon
|
|
name="Settings"
|
|
size={18}
|
|
/>
|
|
}
|
|
onClick={() => navigate(`/${path}/configure/${monitor.id}`)}
|
|
>
|
|
Configure
|
|
</Button>
|
|
)}
|
|
</Stack>
|
|
</Stack>
|
|
);
|
|
};
|
|
|
|
MonitorDetailsControlHeader.propTypes = {
|
|
path: PropTypes.string,
|
|
isLoading: PropTypes.bool,
|
|
isAdmin: PropTypes.bool,
|
|
monitor: PropTypes.object,
|
|
triggerUpdate: PropTypes.func,
|
|
};
|
|
|
|
export default MonitorDetailsControlHeader;
|