515 lines
13 KiB
React
515 lines
13 KiB
React
// Components
|
|
import { Box, Stack, Tooltip, Typography, Button, ButtonGroup } from "@mui/material";
|
|
import ConfigBox from "@/Components/v1/ConfigBox/index.jsx";
|
|
import Select from "@/Components/v1/Inputs/Select/index.jsx";
|
|
import TextInput from "@/Components/v1/Inputs/TextInput/index.jsx";
|
|
import Icon from "@/Components/v1/Icon";
|
|
import Breadcrumbs from "@/Components/v1/Breadcrumbs/index.jsx";
|
|
import PulseDot from "@/Components/v1/Animated/PulseDot.jsx";
|
|
import SkeletonLayout from "./skeleton.jsx";
|
|
import NotificationsConfig from "@/Components/v1/NotificationConfig/index.jsx";
|
|
import Dialog from "@/Components/v1/Dialog/index.jsx";
|
|
import { HttpAdornment } from "@/Components/v1/Inputs/TextInput/Adornments/index.jsx";
|
|
import Radio from "@/Components/v1/Inputs/Radio/index.jsx";
|
|
|
|
// Utils
|
|
import { useState, useEffect } from "react";
|
|
import { useSelector } from "react-redux";
|
|
import { monitorValidation } from "../../../Validation/validation.js";
|
|
import { parseDomainName } from "../../../Utils/monitorUtils.js";
|
|
import { useTranslation } from "react-i18next";
|
|
import { useGetNotificationsByTeamId } from "../../../Hooks/useNotifications.js";
|
|
import { useTheme } from "@emotion/react";
|
|
import { createToast } from "../../../Utils/toastUtils.jsx";
|
|
|
|
import { useParams } from "react-router";
|
|
import { useMonitorUtils } from "../../../Hooks/useMonitorUtils.js";
|
|
import {
|
|
useCreateMonitor,
|
|
useFetchMonitorById,
|
|
useDeleteMonitor,
|
|
useUpdateMonitor,
|
|
usePauseMonitor,
|
|
} from "../../../Hooks/monitorHooks.js";
|
|
|
|
const PageSpeedSetup = () => {
|
|
const { monitorId } = useParams();
|
|
const isCreate = typeof monitorId === "undefined";
|
|
const CRUMBS = [
|
|
{ name: "pagespeed", path: "/pagespeed" },
|
|
...(isCreate
|
|
? [{ name: "create", path: `/pagespeed/create` }]
|
|
: [
|
|
{ name: "details", path: `/pagespeed/${monitorId}` },
|
|
{ name: "configure", path: `/pagespeed/configure/${monitorId}` },
|
|
]),
|
|
];
|
|
|
|
// States
|
|
const [monitor, setMonitor] = useState(
|
|
isCreate
|
|
? {
|
|
url: "",
|
|
name: "",
|
|
type: "pagespeed",
|
|
notifications: [],
|
|
interval: 180000,
|
|
}
|
|
: {}
|
|
);
|
|
const [https, setHttps] = useState(true);
|
|
const [errors, setErrors] = useState({});
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
const [updateTrigger, setUpdateTrigger] = useState(false);
|
|
|
|
// Setup
|
|
const { t } = useTranslation();
|
|
const theme = useTheme();
|
|
// Constants
|
|
const MS_PER_MINUTE = 60000;
|
|
const FREQUENCIES = [
|
|
{ _id: 3, name: t("time.threeMinutes") },
|
|
{ _id: 5, name: t("time.fiveMinutes") },
|
|
{ _id: 10, name: t("time.tenMinutes") },
|
|
{ _id: 20, name: t("time.twentyMinutes") },
|
|
{ _id: 60, name: t("time.oneHour") },
|
|
{ _id: 1440, name: t("time.oneDay") },
|
|
{ _id: 10080, name: t("time.oneWeek") },
|
|
];
|
|
|
|
const { user } = useSelector((state) => state.auth);
|
|
const { statusColor, pagespeedStatusMsg, determineState } = useMonitorUtils();
|
|
const [notifications, notificationsAreLoading, notificationsError] =
|
|
useGetNotificationsByTeamId();
|
|
|
|
// Hooks for API actions
|
|
const [isLoading] = useFetchMonitorById({ monitorId, setMonitor, updateTrigger });
|
|
const [createMonitor, isCreating] = useCreateMonitor();
|
|
const [deleteMonitor, isDeleting] = useDeleteMonitor();
|
|
const [updateMonitor, isUpdating] = useUpdateMonitor();
|
|
const [pauseMonitor, isPausing] = usePauseMonitor();
|
|
|
|
// Handlers
|
|
const onSubmit = async (event) => {
|
|
event.preventDefault();
|
|
if (isCreate) {
|
|
let form = {
|
|
url: `http${https ? "s" : ""}://` + monitor.url,
|
|
name: monitor.name === "" ? monitor.url : monitor.name,
|
|
type: monitor.type,
|
|
interval: monitor.interval,
|
|
};
|
|
|
|
const { error } = monitorValidation.validate(form, { abortEarly: false });
|
|
if (error) {
|
|
const newErrors = {};
|
|
error.details.forEach((err) => {
|
|
newErrors[err.path[0]] = err.message;
|
|
});
|
|
setErrors(newErrors);
|
|
createToast({ body: t("checkFormError") });
|
|
return;
|
|
}
|
|
|
|
form = {
|
|
...form,
|
|
description: form.name,
|
|
notifications: monitor.notifications,
|
|
};
|
|
await createMonitor({ monitor: form, redirect: "/pagespeed" });
|
|
} else {
|
|
const monitorParams = {
|
|
url: monitor.url,
|
|
name: monitor.name === "" ? monitor.url : monitor.name,
|
|
type: monitor.type,
|
|
interval: monitor.interval,
|
|
};
|
|
const { error } = monitorValidation.validate(monitorParams, { abortEarly: false });
|
|
if (error) {
|
|
const newErrors = {};
|
|
error.details.forEach((err) => {
|
|
newErrors[err.path[0]] = err.message;
|
|
});
|
|
setErrors(newErrors);
|
|
createToast({ body: t("checkFormError") });
|
|
return;
|
|
}
|
|
await updateMonitor({ monitor, redirect: "/pagespeed" });
|
|
}
|
|
};
|
|
|
|
const handleChange = (event) => {
|
|
let { value, name } = event.target;
|
|
|
|
if (name === "interval") {
|
|
value = value * MS_PER_MINUTE;
|
|
}
|
|
|
|
setMonitor({
|
|
...monitor,
|
|
[name]: value,
|
|
});
|
|
|
|
const { error } = monitorValidation.validate(
|
|
{ [name]: value, type: monitor.type },
|
|
{ abortEarly: false }
|
|
);
|
|
setErrors((prev) => ({
|
|
...prev,
|
|
...(error ? { [name]: error.details[0].message } : { [name]: undefined }),
|
|
}));
|
|
};
|
|
|
|
const handleBlur = (event) => {
|
|
const { name, value } = event.target;
|
|
if (name === "url" && monitor.name === "") {
|
|
setMonitor((prev) => ({ ...prev, name: parseDomainName(value) }));
|
|
}
|
|
};
|
|
|
|
const triggerUpdate = () => {
|
|
setUpdateTrigger(!updateTrigger);
|
|
};
|
|
|
|
const handlePause = async () => {
|
|
await pauseMonitor({ monitorId, triggerUpdate });
|
|
};
|
|
|
|
const handleRemove = async (event) => {
|
|
event.preventDefault();
|
|
await deleteMonitor({ monitor: { id: monitorId }, redirect: "/pagespeed" });
|
|
};
|
|
|
|
const isBusy = isLoading || isCreating || isDeleting || isUpdating || isPausing;
|
|
|
|
if (Object.keys(monitor).length === 0) {
|
|
return <SkeletonLayout />;
|
|
}
|
|
|
|
return (
|
|
<Box
|
|
sx={{
|
|
"& h1": { color: theme.palette.primary.contrastText },
|
|
}}
|
|
>
|
|
<Breadcrumbs list={CRUMBS} />
|
|
<Stack
|
|
component="form"
|
|
onSubmit={onSubmit}
|
|
noValidate
|
|
spellCheck="false"
|
|
gap={theme.spacing(12)}
|
|
mt={theme.spacing(6)}
|
|
>
|
|
<Stack
|
|
direction="row"
|
|
gap={theme.spacing(2)}
|
|
>
|
|
<Box>
|
|
<Typography
|
|
component="h1"
|
|
variant="h1"
|
|
>
|
|
<Typography
|
|
component="span"
|
|
fontSize="inherit"
|
|
color={
|
|
!isCreate ? theme.palette.primary.contrastTextSecondary : undefined
|
|
}
|
|
>
|
|
{!isCreate ? monitor.name : t("createYour") + " "}
|
|
</Typography>
|
|
{isCreate ? (
|
|
<Typography
|
|
component="span"
|
|
fontSize="inherit"
|
|
fontWeight="inherit"
|
|
color={theme.palette.primary.contrastTextSecondary}
|
|
>
|
|
{t("pageSpeedMonitor")}
|
|
</Typography>
|
|
) : (
|
|
<></>
|
|
)}
|
|
</Typography>
|
|
{!isCreate && (
|
|
<Stack
|
|
direction="row"
|
|
alignItems="center"
|
|
height="fit-content"
|
|
gap={theme.spacing(2)}
|
|
>
|
|
<Tooltip
|
|
title={pagespeedStatusMsg[determineState(monitor)]}
|
|
disableInteractive
|
|
slotProps={{
|
|
popper: {
|
|
modifiers: [
|
|
{
|
|
name: "offset",
|
|
options: { offset: [0, -8] },
|
|
},
|
|
],
|
|
},
|
|
}}
|
|
>
|
|
<Box>
|
|
<PulseDot color={statusColor[determineState(monitor)]} />
|
|
</Box>
|
|
</Tooltip>
|
|
<Typography
|
|
component="h2"
|
|
variant="monitorUrl"
|
|
>
|
|
{monitor.url?.replace(/^https?:\/\//, "") || "..."}
|
|
</Typography>
|
|
<Typography
|
|
position="relative"
|
|
variant="body2"
|
|
ml={theme.spacing(6)}
|
|
mt={theme.spacing(1)}
|
|
sx={{
|
|
"&:before": {
|
|
position: "absolute",
|
|
content: `""`,
|
|
width: theme.spacing(2),
|
|
height: theme.spacing(2),
|
|
borderRadius: "50%",
|
|
backgroundColor: theme.palette.primary.contrastTextTertiary,
|
|
opacity: 0.8,
|
|
left: theme.spacing(-5),
|
|
top: "50%",
|
|
transform: "translateY(-50%)",
|
|
},
|
|
}}
|
|
>
|
|
{t("editing")}
|
|
</Typography>
|
|
</Stack>
|
|
)}
|
|
</Box>
|
|
{!isCreate && (
|
|
<Box
|
|
alignSelf="flex-end"
|
|
ml="auto"
|
|
>
|
|
<Button
|
|
onClick={handlePause}
|
|
loading={isBusy}
|
|
variant="contained"
|
|
color="secondary"
|
|
sx={{
|
|
pl: theme.spacing(4),
|
|
pr: theme.spacing(6),
|
|
"& svg": {
|
|
mr: theme.spacing(2),
|
|
"& path": {
|
|
stroke: theme.palette.primary.contrastTextTertiary,
|
|
strokeWidth: 0.1,
|
|
},
|
|
},
|
|
}}
|
|
>
|
|
{monitor?.isActive ? (
|
|
<>
|
|
<Icon
|
|
name="PauseCircle"
|
|
size={20}
|
|
/>
|
|
{t("pause")}
|
|
</>
|
|
) : (
|
|
<>
|
|
<Icon
|
|
name="PlayCircle"
|
|
size={20}
|
|
/>
|
|
{t("resume")}
|
|
</>
|
|
)}
|
|
</Button>
|
|
<Button
|
|
loading={isBusy}
|
|
variant="contained"
|
|
color="error"
|
|
onClick={() => setIsOpen(true)}
|
|
sx={{ ml: theme.spacing(6) }}
|
|
>
|
|
{t("remove")}
|
|
</Button>
|
|
</Box>
|
|
)}
|
|
</Stack>
|
|
<ConfigBox>
|
|
<Box>
|
|
<Typography
|
|
component="h2"
|
|
variant="h2"
|
|
>
|
|
{t("settingsGeneralSettings")}
|
|
</Typography>
|
|
<Typography component="p">
|
|
{t("pageSpeedConfigureSettingsDescription")}
|
|
</Typography>
|
|
</Box>
|
|
<Stack
|
|
gap={!isCreate ? theme.spacing(20) : theme.spacing(15)}
|
|
sx={{
|
|
".MuiInputBase-root:has(> .Mui-disabled)": {
|
|
backgroundColor: theme.palette.tertiary.main,
|
|
},
|
|
}}
|
|
>
|
|
<TextInput
|
|
type={"url"}
|
|
name="url"
|
|
id="monitor-url"
|
|
label={!isCreate ? t("url") : t("urlMonitor")}
|
|
startAdornment={isCreate ? <HttpAdornment https={https} /> : undefined}
|
|
placeholder="random.website.com"
|
|
value={monitor.url || ""}
|
|
onChange={handleChange}
|
|
onBlur={isCreate ? handleBlur : undefined}
|
|
error={!!errors["url"]}
|
|
helperText={errors["url"]}
|
|
disabled={!isCreate}
|
|
/>
|
|
<TextInput
|
|
type="text"
|
|
id="monitor-name"
|
|
name="name"
|
|
label={t("monitorDisplayName")}
|
|
isOptional={true}
|
|
placeholder="Google"
|
|
value={monitor.name || ""}
|
|
onChange={handleChange}
|
|
error={!!errors["name"]}
|
|
helperText={errors["name"]}
|
|
/>
|
|
</Stack>
|
|
</ConfigBox>
|
|
{isCreate && (
|
|
<ConfigBox>
|
|
<Box>
|
|
<Typography
|
|
component="h2"
|
|
variant="h2"
|
|
>
|
|
{t("distributedUptimeCreateChecks")}
|
|
</Typography>
|
|
<Typography component="p">
|
|
{t("distributedUptimeCreateChecksDescription")}
|
|
</Typography>
|
|
</Box>
|
|
<Stack gap={theme.spacing(12)}>
|
|
<Stack gap={theme.spacing(6)}>
|
|
<Radio
|
|
id="monitor-checks-http"
|
|
title="PageSpeed"
|
|
desc={t("pageSpeedLighthouseAPI")}
|
|
size="small"
|
|
value="http"
|
|
checked={monitor.type === "pagespeed"}
|
|
/>
|
|
<ButtonGroup sx={{ ml: "32px" }}>
|
|
<Button
|
|
variant="group"
|
|
filled={https.toString()}
|
|
onClick={() => setHttps(true)}
|
|
>
|
|
{t("https")}
|
|
</Button>
|
|
<Button
|
|
variant="group" // Why does this work?
|
|
filled={(!https).toString()} // There's nothing in the docs about this either
|
|
onClick={() => setHttps(false)}
|
|
>
|
|
{t("http")}
|
|
</Button>
|
|
</ButtonGroup>
|
|
</Stack>
|
|
{errors["type"] ? (
|
|
<Box>
|
|
<Typography
|
|
component="p"
|
|
color={theme.palette.error.contrastText}
|
|
>
|
|
{errors["type"]}
|
|
</Typography>
|
|
</Box>
|
|
) : (
|
|
""
|
|
)}
|
|
</Stack>
|
|
</ConfigBox>
|
|
)}
|
|
<ConfigBox>
|
|
<Box>
|
|
<Typography
|
|
component="h2"
|
|
variant="h2"
|
|
>
|
|
{t("notificationConfig.title")}
|
|
</Typography>
|
|
<Typography component="p">{t("notificationConfig.description")}</Typography>
|
|
</Box>
|
|
<NotificationsConfig
|
|
notifications={notifications}
|
|
setMonitor={setMonitor}
|
|
setNotifications={isCreate ? undefined : monitor.notifications}
|
|
/>
|
|
</ConfigBox>
|
|
<ConfigBox>
|
|
<Box>
|
|
<Typography
|
|
component="h2"
|
|
variant="h2"
|
|
>
|
|
{t("distributedUptimeCreateAdvancedSettings")}
|
|
</Typography>
|
|
</Box>
|
|
<Stack gap={theme.spacing(isCreate ? 12 : 20)}>
|
|
<Select
|
|
id="monitor-interval"
|
|
name="interval"
|
|
label={t("checkFrequency")}
|
|
value={monitor?.interval / MS_PER_MINUTE || 3}
|
|
onChange={handleChange}
|
|
items={FREQUENCIES}
|
|
/>
|
|
</Stack>
|
|
</ConfigBox>
|
|
<Stack
|
|
direction="row"
|
|
justifyContent="flex-end"
|
|
mt={isCreate ? undefined : "auto"}
|
|
>
|
|
<Button
|
|
type="submit"
|
|
variant="contained"
|
|
color="accent"
|
|
loading={isBusy}
|
|
disabled={!Object.values(errors).every((value) => value === undefined)}
|
|
sx={isCreate ? undefined : { px: theme.spacing(12) }}
|
|
>
|
|
{isCreate ? t("createMonitor") : t("settingsSave")}
|
|
</Button>
|
|
</Stack>
|
|
</Stack>
|
|
{!isCreate && (
|
|
<Dialog
|
|
open={isOpen}
|
|
theme={theme}
|
|
title={t("deleteDialogTitle")}
|
|
description={t("deleteDialogDescription")}
|
|
onCancel={() => setIsOpen(false)}
|
|
confirmationButtonLabel={t("delete")}
|
|
onConfirm={handleRemove}
|
|
/>
|
|
)}
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default PageSpeedSetup;
|