mirror/Checkmate
1
0
Fork 0
mirror of https://github.com/bluewave-labs/Checkmate.git synced 2026-01-09 11:19:59 -06:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2414 from bluewave-labs/feat/fe/uptime-notification-channels

Browse Source 
feat: fe/uptime notification channels, resolves #2344
This commit is contained in:
Alexander Holliday
2025-06-10 09:24:56 +08:00
committed by GitHub
parent 59955cd29a 1b40aa0ded
commit f41709bd12
25 changed files with 1509 additions and 1018 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
client/src/Components/Common/AppBar.jsx
View File

@@ -47,9 +47,6 @@ const AppAppBar = () => {
const location = useLocation();
const navigate = useNavigate();
// Debugging: Log the current theme mode
console.log("Current theme mode:", mode);
const logoSrc =
mode === "light" ? "/images/prism-black.png" : "/images/prism-white.png";

4
client/src/Components/MonitorStatusHeader/ConfigButton/index.jsx
View File

@@ -34,8 +34,8 @@ const ConfigButton = ({ shouldRender = true, monitorId, path }) => {
ConfigButton.propTypes = {
shouldRender: PropTypes.bool,
monitorId: PropTypes.string.isRequired,
path: PropTypes.string.isRequired,
monitorId: PropTypes.string,
path: PropTypes.string,
};
export default ConfigButton;

106
client/src/Components/NotificationConfig/index.jsx Normal file
View File

@@ -0,0 +1,106 @@
// Components
import Stack from "@mui/material/Stack";
import Typography from "@mui/material/Typography";
import Divider from "@mui/material/Divider";
import DeleteOutlineRoundedIcon from "@mui/icons-material/DeleteOutlineRounded";
import Search from "../Inputs/Search";
// Utils
import { useState, useEffect } from "react";
import { useTheme } from "@mui/material/styles";
import PropTypes from "prop-types";
const NotificationConfig = ({ notifications, setMonitor, setNotifications }) => {
// Local state
const [notificationsSearch, setNotificationsSearch] = useState("");
const [selectedNotifications, setSelectedNotifications] = useState([]);
const handleSearch = (value) => {
setSelectedNotifications(value);
setMonitor((prev) => {
return {
...prev,
notifications: value.map((notification) => notification._id),
};
});
};
// Handlers
const handleDelete = (id) => {
const updatedNotifications = selectedNotifications.filter(
(notification) => notification._id !== id
);
setSelectedNotifications(updatedNotifications);
setMonitor((prev) => {
return {
...prev,
notifications: updatedNotifications.map((notification) => notification._id),
};
});
};
// Setup
const theme = useTheme();
useEffect(() => {
if (setNotifications) {
const toSet = setNotifications.map((notification) => {
return notifications.find((n) => n._id === notification);
});
setSelectedNotifications(toSet);
}
}, [setNotifications, notifications]);
return (
<Stack gap={theme.spacing(6)}>
<Search
type="notifications"
label="Notifications"
options={notifications}
filteredBy="notificationName"
multiple={true}
value={selectedNotifications}
inputValue={notificationsSearch}
handleInputChange={setNotificationsSearch}
handleChange={(value) => {
handleSearch(value);
}}
/>
<Stack
flex={1}
width="100%"
>
{selectedNotifications.map((notification, index) => (
<Stack
direction="row"
alignItems="center"
key={notification._id}
width="100%"
>
<Typography
flexGrow={1} // <-- This will take up all available horizontal space
>
{notification.notificationName}
</Typography>
<DeleteOutlineRoundedIcon
onClick={() => {
handleDelete(notification._id);
}}
sx={{ cursor: "pointer" }}
/>
{index < selectedNotifications.length - 1 && <Divider />}
</Stack>
))}
</Stack>
</Stack>
);
};
NotificationConfig.propTypes = {
notifications: PropTypes.array,
setMonitor: PropTypes.func,
setNotifications: PropTypes.array,
};
export default NotificationConfig;

11
client/src/Components/Sidebar/index.jsx
View File

@@ -38,6 +38,8 @@ import ChangeLog from "../../assets/icons/changeLog.svg?react";
import Docs from "../../assets/icons/docs.svg?react";
import StatusPages from "../../assets/icons/status-pages.svg?react";
import Discussions from "../../assets/icons/discussions.svg?react";
import NotificationAddOutlinedIcon from "@mui/icons-material/NotificationAddOutlined";
import "./index.css";
// Utils
@@ -52,13 +54,18 @@ import { clearUptimeMonitorState } from "../../Features/UptimeMonitors/uptimeMon
const getMenu = (t) => [
{ name: t("menu.uptime"), path: "uptime", icon: <Monitors /> },
{ name: t("menu.pagespeed"), path: "pagespeed", icon: <PageSpeed /> },
{ name: t("menu.infrastructure"), path: "infrastructure", icon: <Integrations /> },
{ name: t("menu.infrastructure"), path: "infrastructure", icon: <Integrations /> },
{
name: t("menu.notifications"),
path: "notifications",
icon: <NotificationAddOutlinedIcon />,
},
{ name: t("menu.incidents"), path: "incidents", icon: <Incidents /> },
{ name: t("menu.statusPages"), path: "status", icon: <StatusPages /> },
{ name: t("menu.maintenance"), path: "maintenance", icon: <Maintenance /> },
// { name: t("menu.integrations"), path: "integrations", icon: <Integrations /> },
{
name: t("menu.settings"),
icon: <Settings />,

35
client/src/Hooks/useFetchUptimeMonitorById.js Normal file
View File

@@ -0,0 +1,35 @@
import { useState, useEffect } from "react";
import { useDispatch } from "react-redux";
import { getUptimeMonitorById } from "../Features/UptimeMonitors/uptimeMonitorsSlice";
import { useNavigate } from "react-router";
const useFetchUptimeMonitorById = (monitorId, updateTrigger) => {
const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState(null);
const [monitor, setMonitor] = useState(null);
const navigate = useNavigate();
const dispatch = useDispatch();
useEffect(() => {
const fetchMonitor = async () => {
try {
setIsLoading(true);
const action = await dispatch(getUptimeMonitorById({ monitorId }));
if (getUptimeMonitorById.fulfilled.match(action)) {
const monitor = action.payload.data;
setMonitor(monitor);
} else if (getUptimeMonitorById.rejected.match(action)) {
throw new Error(action.error.message);
}
} catch (error) {
navigate("/not-found", { replace: true });
} finally {
setIsLoading(false);
}
};
fetchMonitor();
}, [monitorId, dispatch, navigate, updateTrigger]);
return [monitor, isLoading, error];
};
export { useFetchUptimeMonitorById };

91
client/src/Hooks/useNotifications.js Normal file
View File

@@ -0,0 +1,91 @@
import { useState, useEffect, useCallback } from "react";
import { createToast } from "../Utils/toastUtils";
import { networkService } from "../main";
import { useNavigate } from "react-router-dom";
import { useSelector } from "react-redux";
import { useTranslation } from "react-i18next";
const useCreateNotification = () => {
const navigate = useNavigate();
const { t } = useTranslation();
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState(null);
const createNotification = async (notification) => {
try {
setIsLoading(true);
await networkService.createNotification({ notification });
createToast({
body: t("notifications.create.success"),
});
navigate("/notifications");
} catch (error) {
setError(error);
createToast({
body: t("notifications.create.failed"),
});
} finally {
setIsLoading(false);
}
};
return [createNotification, isLoading, error];
};
const useGetNotificationsByTeamId = (updateTrigger) => {
const [notifications, setNotifications] = useState([]);
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState(null);
const { user } = useSelector((state) => state.auth);
const { t } = useTranslation();
const getNotifications = useCallback(async () => {
try {
setIsLoading(true);
const response = await networkService.getNotificationsByTeamId({
teamId: user.teamId,
});
setNotifications(response?.data?.data ?? []);
} catch (error) {
setError(error);
createToast({
body: t("notifications.fetch.failed"),
});
} finally {
setIsLoading(false);
}
}, [user.teamId]);
useEffect(() => {
getNotifications();
}, [getNotifications, updateTrigger]);
return [notifications, isLoading, error];
};
const useDeleteNotification = () => {
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState(null);
const { t } = useTranslation();
const deleteNotification = async (id, triggerUpdate) => {
try {
setIsLoading(true);
await networkService.deleteNotificationById({ id });
createToast({
body: t("notifications.delete.success"),
});
triggerUpdate();
} catch (error) {
setError(error);
createToast({
body: t("notifications.delete.failed"),
});
} finally {
setIsLoading(false);
}
};
return [deleteNotification, isLoading, error];
};
export { useCreateNotification, useGetNotificationsByTeamId, useDeleteNotification };

83
client/src/Pages/Infrastructure/Create/index.jsx
View File

@@ -13,6 +13,8 @@ import {
import { useHardwareMonitorsFetch } from "../Details/Hooks/useHardwareMonitorsFetch";
import { capitalizeFirstLetter } from "../../../Utils/stringUtils";
import { useTranslation } from "react-i18next";
import { useGetNotificationsByTeamId } from "../../../Hooks/useNotifications";
import NotificationsConfig from "../../../Components/NotificationConfig";
// MUI
import { Box, Stack, Typography, Button, ButtonGroup } from "@mui/material";
@@ -24,7 +26,6 @@ import ConfigBox from "../../../Components/ConfigBox";
import TextInput from "../../../Components/Inputs/TextInput";
import { HttpAdornment } from "../../../Components/Inputs/TextInput/Adornments";
import { createToast } from "../../../Utils/toastUtils";
import Checkbox from "../../../Components/Inputs/Checkbox";
import Select from "../../../Components/Inputs/Select";
import { CustomThreshold } from "./Components/CustomThreshold";
@@ -65,6 +66,8 @@ const CreateInfrastructureMonitor = () => {
// Fetch monitor details if editing
const { monitor, isLoading, networkError } = useHardwareMonitorsFetch({ monitorId });
const [notifications, notificationsAreLoading, notificationsError] =
useGetNotificationsByTeamId();
// State
const [errors, setErrors] = useState({});
@@ -93,8 +96,7 @@ const CreateInfrastructureMonitor = () => {
setInfrastructureMonitor({
url: monitor.url.replace(/^https?:\/\//, ""),
name: monitor.name || "",
notifications: monitor.notifications?.filter((n) => typeof n === "object") || [],
notify_email: (monitor.notifications?.length ?? 0) > 0,
notifications: monitor.notifications,
interval: monitor.interval / MS_PER_MINUTE,
cpu: monitor.thresholds?.usage_cpu !== undefined,
usage_cpu: monitor.thresholds?.usage_cpu ? monitor.thresholds.usage_cpu * 100 : "",
@@ -119,17 +121,9 @@ const CreateInfrastructureMonitor = () => {
}, [isCreate, monitor]);
// Handlers
const handleCreateInfrastructureMonitor = async (event) => {
const onSubmit = async (event) => {
event.preventDefault();
const formattedNotifications = infrastructureMonitor.notifications.map((n) =>
typeof n === "string" ? { type: "email", address: n } : n
);
if (infrastructureMonitor.notify_email) {
formattedNotifications.push({ type: "email", address: user.email });
}
// Build the form
let form = {
url: `http${https ? "s" : ""}://` + infrastructureMonitor.url,
@@ -155,7 +149,6 @@ const CreateInfrastructureMonitor = () => {
? { usage_temperature: infrastructureMonitor.usage_temperature }
: {}),
secret: infrastructureMonitor.secret,
notifications: formattedNotifications,
};
const { error } = infrastructureMonitorValidation.validate(form, {
@@ -167,6 +160,7 @@ const CreateInfrastructureMonitor = () => {
error.details.forEach((err) => {
newErrors[err.path[0]] = err.message;
});
console.log(newErrors);
setErrors(newErrors);
createToast({ body: "Please check the form for errors." });
return;
@@ -218,7 +212,7 @@ const CreateInfrastructureMonitor = () => {
}
};
const handleChange = (event) => {
const onChange = (event) => {
const { value, name } = event.target;
setInfrastructureMonitor({
...infrastructureMonitor,
@@ -244,27 +238,6 @@ const CreateInfrastructureMonitor = () => {
});
};
const handleNotifications = (event, type) => {
const { value, checked } = event.target;
let notifications = [...infrastructureMonitor.notifications];
if (checked) {
if (!notifications.some((n) => n.type === type && n.address === value)) {
notifications.push({ type, address: value });
}
} else {
notifications = notifications.filter(
(n) => !(n.type === type && n.address === value)
);
}
setInfrastructureMonitor((prev) => ({
...prev,
notifications,
...(type === "email" ? { notify_email: checked } : {}),
}));
};
return (
<Box className="create-infrastructure-monitor">
<Breadcrumbs
@@ -280,8 +253,7 @@ const CreateInfrastructureMonitor = () => {
/>
<Stack
component="form"
className="create-infrastructure-monitor-form"
onSubmit={handleCreateInfrastructureMonitor}
onSubmit={onSubmit}
noValidate
spellCheck="false"
gap={theme.spacing(12)}
@@ -336,7 +308,7 @@ const CreateInfrastructureMonitor = () => {
label={t("infrastructureServerUrlLabel")}
https={https}
value={infrastructureMonitor.url}
onChange={handleChange}
onChange={onChange}
error={errors["url"] ? true : false}
helperText={errors["url"]}
disabled={!isCreate}
@@ -370,7 +342,7 @@ const CreateInfrastructureMonitor = () => {
placeholder="Google"
isOptional={true}
value={infrastructureMonitor.name}
onChange={handleChange}
onChange={onChange}
error={errors["name"]}
/>
<TextInput
@@ -379,7 +351,7 @@ const CreateInfrastructureMonitor = () => {
name="secret"
label={t("infrastructureAuthorizationSecretLabel")}
value={infrastructureMonitor.secret}
onChange={handleChange}
onChange={onChange}
error={errors["secret"] ? true : false}
helperText={errors["secret"]}
/>
@@ -387,25 +359,14 @@ const CreateInfrastructureMonitor = () => {
</ConfigBox>
<ConfigBox>
<Box>
<Typography
component="h2"
variant="h2"
>
{t("distributedUptimeCreateIncidentNotification")}
</Typography>
<Typography component="p">
{t("distributedUptimeCreateIncidentDescription")}
</Typography>
<Typography component="h2">{t("notificationConfig.title")}</Typography>
<Typography component="p">{t("notificationConfig.description")}</Typography>
</Box>
<Stack gap={theme.spacing(6)}>
<Checkbox
id="notify-email-default"
label={`Notify via email (to ${user.email})`}
isChecked={infrastructureMonitor.notify_email}
value={user?.email}
onChange={(event) => handleNotifications(event, "email")}
/>
</Stack>
<NotificationsConfig
notifications={notifications}
setMonitor={setInfrastructureMonitor}
setNotifications={infrastructureMonitor.notifications}
/>
</ConfigBox>
<ConfigBox>
<Box>
@@ -438,7 +399,7 @@ const CreateInfrastructureMonitor = () => {
fieldId={METRIC_PREFIX + metric}
fieldName={METRIC_PREFIX + metric}
fieldValue={String(infrastructureMonitor[METRIC_PREFIX + metric])}
onFieldChange={handleChange}
onFieldChange={onChange}
alertUnit={metric == "temperature" ? "°C" : "%"}
/>
);
@@ -474,7 +435,7 @@ const CreateInfrastructureMonitor = () => {
name="interval"
label="Check frequency"
value={infrastructureMonitor.interval || 15}
onChange={handleChange}
onChange={onChange}
items={SELECT_VALUES}
/>
</Stack>
@@ -484,9 +445,9 @@ const CreateInfrastructureMonitor = () => {
justifyContent="flex-end"
>
<Button
type="submit"
variant="contained"
color="accent"
onClick={handleCreateInfrastructureMonitor}
loading={monitorState?.isLoading}
>
{t(isCreate ? "infrastructureCreateMonitor" : "infrastructureEditMonitor")}

364
client/src/Pages/Notifications/create/index.jsx Normal file
View File

@@ -0,0 +1,364 @@
// Components
import Stack from "@mui/material/Stack";
import Typography from "@mui/material/Typography";
import Breadcrumbs from "../../../Components/Breadcrumbs";
import Button from "@mui/material/Button";
import ConfigBox from "../../../Components/ConfigBox";
import Box from "@mui/material/Box";
import Select from "../../../Components/Inputs/Select";
import TextInput from "../../../Components/Inputs/TextInput";
// Utils
import { useState } from "react";
import { useSelector } from "react-redux";
import { useTheme } from "@emotion/react";
import { useCreateNotification } from "../../../Hooks/useNotifications";
import {
notificationEmailValidation,
notificationWebhookValidation,
notificationPagerDutyValidation,
} from "../../../Validation/validation";
import { createToast } from "../../../Utils/toastUtils";
import { useTranslation } from "react-i18next";
// Setup
const NOTIFICATION_TYPES = [
{ _id: 1, name: "E-mail", value: "email" },
{ _id: 2, name: "Slack", value: "webhook" },
{ _id: 3, name: "PagerDuty", value: "pager_duty" },
{ _id: 4, name: "Webhook", value: "webhook" },
];
const CreateNotifications = () => {
const theme = useTheme();
const [createNotification, isLoading, error] = useCreateNotification();
const BREADCRUMBS = [
{ name: "notifications", path: "/notifications" },
{ name: "create", path: "/notifications/create" },
];
// Redux state
const { user } = useSelector((state) => state.auth);
// local state
const [notification, setNotification] = useState({
userId: user._id,
teamId: user.teamId,
notificationName: "",
address: "",
type: NOTIFICATION_TYPES[0]._id,
config: {
webhookUrl: "",
platform: "",
routingKey: "",
},
});
const [errors, setErrors] = useState({});
const { t } = useTranslation();
// handlers
const onSubmit = (e) => {
e.preventDefault();
const form = {
...notification,
type: NOTIFICATION_TYPES.find((type) => type._id === notification.type).value,
};
if (notification.type === 2) {
form.type = "webhook";
}
let error = null;
if (form.type === "email") {
error = notificationEmailValidation.validate(
{ notificationName: form.notificationName, address: form.address },
{ abortEarly: false }
).error;
} else if (form.type === "webhook") {
form.config = {
platform: form.config.platform,
webhookUrl: form.config.webhookUrl,
};
error = notificationWebhookValidation.validate(
{ notificationName: form.notificationName, config: form.config },
{ abortEarly: false }
).error;
} else if (form.type === "pager_duty") {
form.config = {
platform: form.config.platform,
routingKey: form.config.routingKey,
};
error = notificationPagerDutyValidation.validate(
{ notificationName: form.notificationName, config: form.config },
{ abortEarly: false }
).error;
}
if (error) {
const newErrors = {};
error.details.forEach((err) => {
newErrors[err.path[0]] = err.message;
});
createToast({ body: "Please check the form for errors." });
setErrors(newErrors);
return;
}
createNotification(form);
};
const onChange = (e) => {
const { name, value } = e.target;
const newNotification = { ...notification, [name]: value };
// Handle config/platform initialization if type is webhook
if (newNotification.type === 1) {
newNotification.config = null;
} else if (newNotification.type === 2) {
newNotification.address = "";
newNotification.config = newNotification.config || {};
if (name === "config") {
newNotification.config = value;
}
newNotification.config.platform = "slack";
} else if (newNotification.type === 3) {
newNotification.config = newNotification.config || {};
if (name === "config") {
newNotification.config = value;
}
newNotification.config.platform = "pager_duty";
} else if (newNotification.type === 4) {
newNotification.config = newNotification.config || {};
if (name === "config") {
newNotification.config = value;
}
newNotification.config.platform = "webhook";
}
// Field-level validation
let fieldError;
if (name === "notificationName") {
const { error } = notificationEmailValidation.extract(name).validate(value);
fieldError = error?.message;
}
if (newNotification.type === 1 && name === "address") {
const { error } = notificationEmailValidation.extract(name).validate(value);
fieldError = error?.message;
}
if (newNotification.type === 2 && name === "config") {
// Validate only webhookUrl inside config
const { error } = notificationWebhookValidation.extract("config").validate(value);
fieldError = error?.message;
}
// Set field-level error
setErrors((prev) => ({
...prev,
[name]: fieldError,
}));
setNotification(newNotification);
};
return (
<Stack gap={theme.spacing(10)}>
<Breadcrumbs list={BREADCRUMBS} />
<Typography variant="h1">{t("createNotifications.title")}</Typography>
<Stack
component="form"
onSubmit={onSubmit}
noValidate
gap={theme.spacing(12)}
mt={theme.spacing(6)}
>
<ConfigBox>
<Box>
<Typography component="h2">
{t("createNotifications.nameSettings.title")}
</Typography>
<Typography component="p">
{t("createNotifications.nameSettings.description")}
</Typography>
</Box>
<Stack gap={theme.spacing(12)}>
<TextInput
label={t("createNotifications.nameSettings.nameLabel")}
name="notificationName"
placeholder={t("createNotifications.nameSettings.namePlaceholder")}
value={notification.notificationName}
onChange={onChange}
error={Boolean(errors.notificationName)}
helperText={errors["notificationName"]}
/>
</Stack>
</ConfigBox>
<ConfigBox>
<Box>
<Typography component="h2">
{t("createNotifications.typeSettings.title")}
</Typography>
<Typography component="p">
{t("createNotifications.typeSettings.description")}
</Typography>
</Box>
<Stack gap={theme.spacing(12)}>
<Select
items={NOTIFICATION_TYPES}
label="Type"
name="type"
value={notification.type}
onChange={onChange}
/>
</Stack>
</ConfigBox>
{notification.type === 1 && (
<ConfigBox>
<Box>
<Typography component="h2">
{t("createNotifications.emailSettings.title")}
</Typography>
<Typography component="p">
{t("createNotifications.emailSettings.description")}
</Typography>
</Box>
<Stack gap={theme.spacing(12)}>
<TextInput
label={t("createNotifications.emailSettings.emailLabel")}
name="address"
placeholder={t("createNotifications.emailSettings.emailPlaceholder")}
value={notification.address}
onChange={onChange}
error={Boolean(errors.address)}
helperText={errors["address"]}
/>
</Stack>
</ConfigBox>
)}
{notification.type === 2 && (
<ConfigBox>
<Box>
<Typography component="h2">
{t("createNotifications.slackSettings.title")}
</Typography>
<Typography component="p">
{t("createNotifications.slackSettings.description")}
</Typography>
</Box>
<Stack gap={theme.spacing(12)}>
<TextInput
label={t("createNotifications.slackSettings.webhookLabel")}
value={notification.config.webhookUrl || ""}
error={Boolean(errors.config)}
helperText={errors["config"]}
onChange={(e) => {
const updatedConfig = {
...notification.config,
webhookUrl: e.target.value,
};
onChange({
target: {
name: "config",
value: updatedConfig,
},
});
}}
/>
</Stack>
</ConfigBox>
)}
{notification.type === 3 && (
<ConfigBox>
<Box>
<Typography component="h2">
{t("createNotifications.pagerdutySettings.title")}
</Typography>
<Typography component="p">
{t("createNotifications.pagerdutySettings.description")}
</Typography>
</Box>
<Stack gap={theme.spacing(12)}>
<TextInput
label={t("createNotifications.pagerdutySettings.integrationKeyLabel")}
placeholder={t(
"createNotifications.pagerdutySettings.integrationKeyPlaceholder"
)}
value={notification.config.routingKey || ""}
error={Boolean(errors.config)}
helperText={errors["config"]}
onChange={(e) => {
const updatedConfig = {
...notification.config,
routingKey: e.target.value,
};
onChange({
target: {
name: "config",
value: updatedConfig,
},
});
}}
/>
</Stack>
</ConfigBox>
)}
{notification.type === 4 && (
<ConfigBox>
<Box>
<Typography component="h2">
{t("createNotifications.genericWebhookSettings.title")}
</Typography>
<Typography component="p">
{t("createNotifications.genericWebhookSettings.description")}
</Typography>
</Box>
<Stack gap={theme.spacing(12)}>
<TextInput
label={t("createNotifications.genericWebhookSettings.webhookLabel")}
value={notification.config.webhookUrl || ""}
error={Boolean(errors.config)}
helperText={errors["config"]}
onChange={(e) => {
const updatedConfig = {
...notification.config,
webhookUrl: e.target.value,
};
onChange({
target: {
name: "config",
value: updatedConfig,
},
});
}}
/>
</Stack>
</ConfigBox>
)}
<Stack
direction="row"
justifyContent="flex-end"
>
<Button
loading={isLoading}
type="submit"
variant="contained"
color="accent"
>
Submit
</Button>
</Stack>
</Stack>
</Stack>
);
};
export default CreateNotifications;

121
client/src/Pages/Notifications/index.jsx Normal file
View File

@@ -0,0 +1,121 @@
// Components
import Stack from "@mui/material/Stack";
import Typography from "@mui/material/Typography";
import Breadcrumbs from "../../Components/Breadcrumbs";
import Button from "@mui/material/Button";
import DataTable from "../../Components/Table";
import Fallback from "../../Components/Fallback";
// Utils
import { useIsAdmin } from "../../Hooks/useIsAdmin";
import { useState } from "react";
import { useTheme } from "@emotion/react";
import { useNavigate } from "react-router-dom";
import {
useGetNotificationsByTeamId,
useDeleteNotification,
} from "../../Hooks/useNotifications";
import { useTranslation } from "react-i18next";
// Setup
const Notifications = () => {
const navigate = useNavigate();
const theme = useTheme();
const BREADCRUMBS = [{ name: "notifications", path: "/notifications" }];
const [updateTrigger, setUpdateTrigger] = useState(false);
const isAdmin = useIsAdmin();
const [notifications, isLoading, error] = useGetNotificationsByTeamId(updateTrigger);
const [deleteNotification, isDeleting, deleteError] = useDeleteNotification();
const { t } = useTranslation();
// Handlers
const triggerUpdate = () => {
setUpdateTrigger(!updateTrigger);
};
const onDelete = (id) => {
deleteNotification(id, triggerUpdate);
};
const headers = [
{
id: "name",
content: "Name",
render: (row) => {
return row.notificationName;
},
},
{
id: "type",
content: "Type",
render: (row) => {
return row.type;
},
},
{
id: "target",
content: "Target",
render: (row) => {
return row.address || row.config?.webhookUrl || row.config?.routingKey;
},
},
{
id: "platform",
content: "Platform",
render: (row) => {
return row?.config?.platform || row.type;
},
},
{
id: "actions",
content: "Actions",
render: (row) => {
return (
<Button
variant="contained"
color="error"
onClick={() => onDelete(row._id)}
>
Delete
</Button>
);
},
},
];
if (notifications?.length === 0) {
return (
<Fallback
vowelStart={false}
title={t("notifications.fallback.title")}
checks={[t("notifications.fallback.checks")]}
link="/notifications/create"
isAdmin={isAdmin}
/>
);
}
return (
<Stack gap={theme.spacing(10)}>
<Breadcrumbs list={BREADCRUMBS} />
<Stack
direction="row"
justifyContent="flex-end"
>
<Button
variant="contained"
color="accent"
onClick={() => navigate("/notifications/create")}
>
{t("notifications.createButton")}
</Button>
</Stack>
<Typography variant="h1">{t("notifications.createTitle")}</Typography>
<DataTable
headers={headers}
data={notifications}
/>
</Stack>
);
};
export default Notifications;

204
client/src/Pages/PageSpeed/Configure/index.jsx
View File

@@ -1,6 +1,19 @@
// Components
import { Box, Stack, Tooltip, Typography, Button } from "@mui/material";
import ConfigBox from "../../../Components/ConfigBox";
import Select from "../../../Components/Inputs/Select";
import TextInput from "../../../Components/Inputs/TextInput";
import PauseCircleOutlineIcon from "@mui/icons-material/PauseCircleOutline";
import Breadcrumbs from "../../../Components/Breadcrumbs";
import PulseDot from "../../../Components/Animated/PulseDot";
import PlayCircleOutlineRoundedIcon from "@mui/icons-material/PlayCircleOutlineRounded";
import SkeletonLayout from "./skeleton";
import NotificationsConfig from "../../../Components/NotificationConfig";
import Dialog from "../../../Components/Dialog";
// Utils
import { useEffect, useState } from "react";
import { useTheme } from "@emotion/react";
import { Box, Stack, Tooltip, Typography, Button } from "@mui/material";
import { useDispatch, useSelector } from "react-redux";
import { useNavigate, useParams } from "react-router";
import {
@@ -12,41 +25,31 @@ import {
} from "../../../Features/PageSpeedMonitor/pageSpeedMonitorSlice";
import { monitorValidation } from "../../../Validation/validation";
import { createToast } from "../../../Utils/toastUtils";
import { logger } from "../../../Utils/Logger";
import { useTranslation } from "react-i18next";
import ConfigBox from "../../../Components/ConfigBox";
import TextInput from "../../../Components/Inputs/TextInput";
import Select from "../../../Components/Inputs/Select";
import Checkbox from "../../../Components/Inputs/Checkbox";
import PauseCircleOutlineIcon from "@mui/icons-material/PauseCircleOutline";
import Breadcrumbs from "../../../Components/Breadcrumbs";
import PulseDot from "../../../Components/Animated/PulseDot";
import PlayCircleOutlineRoundedIcon from "@mui/icons-material/PlayCircleOutlineRounded";
import SkeletonLayout from "./skeleton";
import useUtils from "../../Uptime/Monitors/Hooks/useUtils";
import "./index.css";
import Dialog from "../../../Components/Dialog";
import { useGetNotificationsByTeamId } from "../../../Hooks/useNotifications";
const PageSpeedConfigure = () => {
// Redux state
const { isLoading } = useSelector((state) => state.pageSpeedMonitors);
// Local state
const [monitor, setMonitor] = useState({});
const [errors, setErrors] = useState({});
const [buttonLoading, setButtonLoading] = useState(false);
const [isOpen, setIsOpen] = useState(false);
// Utils
const theme = useTheme();
const { t } = useTranslation();
const navigate = useNavigate();
const dispatch = useDispatch();
const MS_PER_MINUTE = 60000;
const { user } = useSelector((state) => state.auth);
const { isLoading } = useSelector((state) => state.pageSpeedMonitors);
const { monitorId } = useParams();
const [monitor, setMonitor] = useState({});
const [errors, setErrors] = useState({});
const { statusColor, pagespeedStatusMsg, determineState } = useUtils();
const [buttonLoading, setButtonLoading] = useState(false);
const idMap = {
"monitor-url": "url",
"monitor-name": "name",
"monitor-checks-http": "type",
"monitor-checks-ping": "type",
"notify-email-default": "notification-email",
};
const [notifications, notificationsAreLoading, notificationsError] =
useGetNotificationsByTeamId();
const frequencies = [
{ _id: 3, name: "3 minutes" },
@@ -77,57 +80,29 @@ const PageSpeedConfigure = () => {
fetchMonitor();
}, [dispatch, monitorId, navigate]);
const handleChange = (event, name) => {
let { value, id } = event.target;
if (!name) name = idMap[id];
const onChange = (event) => {
let { value, name } = event.target;
if (name.includes("notification-")) {
name = name.replace("notification-", "");
let hasNotif = monitor.notifications.some(
(notification) => notification.type === name
);
setMonitor((prev) => {
const notifs = [...prev.notifications];
if (hasNotif) {
return {
...prev,
notifications: notifs.filter((notif) => notif.type !== name),
};
} else {
return {
...prev,
notifications: [
...notifs,
name === "email"
? { type: name, address: value }
: // TODO - phone number
{ type: name, phone: value },
],
};
}
});
} else {
if (name === "interval") {
value = value * MS_PER_MINUTE;
}
setMonitor((prev) => ({
...prev,
[name]: value,
}));
const validation = monitorValidation.validate(
{ [name]: value },
{ abortEarly: false }
);
setErrors((prev) => {
const updatedErrors = { ...prev };
if (validation.error) updatedErrors[name] = validation.error.details[0].message;
else delete updatedErrors[name];
return updatedErrors;
});
if (name === "interval") {
value = value * MS_PER_MINUTE;
}
setMonitor((prev) => ({
...prev,
[name]: value,
}));
const validation = monitorValidation.validate(
{ [name]: value },
{ abortEarly: false }
);
setErrors((prev) => {
const updatedErrors = { ...prev };
if (validation.error) updatedErrors[name] = validation.error.details[0].message;
else delete updatedErrors[name];
return updatedErrors;
});
};
const handlePause = async () => {
@@ -142,12 +117,11 @@ const PageSpeedConfigure = () => {
throw new Error(action.error.message);
}
} catch (error) {
logger.error("Error pausing monitor: " + monitorId);
createToast({ body: "Failed to pause monitor" });
}
};
const handleSave = async (event) => {
const onSubmit = async (event) => {
event.preventDefault();
const action = await dispatch(updatePageSpeed({ monitor: monitor }));
if (action.meta.requestStatus === "fulfilled") {
@@ -158,7 +132,6 @@ const PageSpeedConfigure = () => {
}
};
const [isOpen, setIsOpen] = useState(false);
const handleRemove = async (event) => {
event.preventDefault();
setButtonLoading(true);
@@ -191,7 +164,7 @@ const PageSpeedConfigure = () => {
component="form"
noValidate
spellCheck="false"
onSubmit={handleSave}
onSubmit={onSubmit}
flex={1}
gap={theme.spacing(10)}
>
@@ -329,24 +302,24 @@ const PageSpeedConfigure = () => {
}}
>
<TextInput
name="url"
type="url"
id="monitor-url"
label={t("url")}
placeholder="random.website.com"
value={monitor?.url || ""}
onChange={handleChange}
onChange={onChange}
error={errors.url ? true : false}
helperText={errors.url}
disabled={true}
/>
<TextInput
name="name"
type="text"
id="monitor-name"
label={t("monitorDisplayName")}
placeholder="Example monitor"
isOptional={true}
value={monitor?.name || ""}
onChange={handleChange}
onChange={onChange}
error={errors.name ? true : false}
helperText={errors.name}
/>
@@ -354,64 +327,16 @@ const PageSpeedConfigure = () => {
</ConfigBox>
<ConfigBox>
<Box>
<Typography
component="h2"
variant="h2"
>
{t("distributedUptimeCreateIncidentNotification")}
</Typography>
<Typography component="h2">{t("notificationConfig.title")}</Typography>
<Typography component="p">
{t("distributedUptimeCreateIncidentDescription")}
{t("notificationConfig.description")}
</Typography>
</Box>
<Stack gap={theme.spacing(6)}>
<Typography component="p">{t("whenNewIncident")}</Typography>
{/* Future Feature: Notify via SMS */}
{/* <Checkbox
id="notify-sms"
label={t("notifySMS")}
isChecked={false}
value=""
onChange={() => logger.warn("disabled")}
isDisabled={true}
/> */}
<Checkbox
id="notify-email-default"
label={`Notify via email (to ${user.email})`}
isChecked={
monitor?.notifications?.some(
(notification) => notification.type === "email"
) || false
}
value={user?.email}
onChange={(event) => handleChange(event)}
/>
{/* Future Feature: Notify via Email */}
{/* <Checkbox
id="notify-email"
label={t("notifyEmails")}
isChecked={false}
value=""
onChange={() => logger.warn("disabled")}
isDisabled={true}
/> */}
{monitor?.notifications?.some(
(notification) => notification.type === "emails"
) ? (
<Box mx={theme.spacing(16)}>
<TextInput
id="notify-email-list"
type="text"
placeholder="name@gmail.com"
value=""
onChange={() => logger.warn("disabled")}
/>
<Typography mt={theme.spacing(4)}>{t("seperateEmails")}</Typography>
</Box>
) : (
""
)}
</Stack>
<NotificationsConfig
notifications={notifications}
setMonitor={setMonitor}
setNotifications={monitor.notifications}
/>
</ConfigBox>
<ConfigBox>
<Box>
@@ -424,11 +349,11 @@ const PageSpeedConfigure = () => {
</Box>
<Stack gap={theme.spacing(20)}>
<Select
id="monitor-frequency"
name="interval"
label={t("checkFrequency")}
items={frequencies}
value={monitor?.interval / MS_PER_MINUTE || 3}
onChange={(event) => handleChange(event, "interval")}
onChange={onChange}
/>
</Stack>
</ConfigBox>
@@ -442,7 +367,6 @@ const PageSpeedConfigure = () => {
type="submit"
variant="contained"
color="accent"
onClick={handleSave}
sx={{ px: theme.spacing(12) }}
>
{t("settingsSave")}

59
client/src/Pages/PageSpeed/Create/index.jsx
View File

@@ -2,7 +2,6 @@
import { useNavigate } from "react-router-dom";
import { useState } from "react";
import { useSelector, useDispatch } from "react-redux";
// Utility and Network
import { monitorValidation } from "../../../Validation/validation";
import {
@@ -11,6 +10,7 @@ import {
} from "../../../Features/PageSpeedMonitor/pageSpeedMonitorSlice";
import { parseDomainName } from "../../../Utils/monitorUtils";
import { useTranslation } from "react-i18next";
import { useGetNotificationsByTeamId } from "../../../Hooks/useNotifications";
// MUI
import { useTheme } from "@emotion/react";
@@ -23,8 +23,8 @@ import { HttpAdornment } from "../../../Components/Inputs/TextInput/Adornments";
import ConfigBox from "../../../Components/ConfigBox";
import { createToast } from "../../../Utils/toastUtils";
import Radio from "../../../Components/Inputs/Radio";
import Checkbox from "../../../Components/Inputs/Checkbox";
import Select from "../../../Components/Inputs/Select";
import NotificationsConfig from "../../../Components/NotificationConfig";
const MS_PER_MINUTE = 60000;
@@ -57,6 +57,7 @@ const CreatePageSpeed = () => {
const [errors, setErrors] = useState({});
const { user } = useSelector((state) => state.auth);
const { isLoading } = useSelector((state) => state.pageSpeedMonitors);
const [notifications, notificationsAreLoading, error] = useGetNotificationsByTeamId();
// Setup
const dispatch = useDispatch();
@@ -64,7 +65,7 @@ const CreatePageSpeed = () => {
const theme = useTheme();
// Handlers
const handleCreateMonitor = async (event) => {
const onSubmit = async (event) => {
event.preventDefault();
let form = {
url: `http${https ? "s" : ""}://` + monitor.url,
@@ -134,32 +135,6 @@ const CreatePageSpeed = () => {
}));
};
const handleNotifications = (event, type) => {
const { value } = event.target;
let notifications = [...monitor.notifications];
const notificationExists = notifications.some((notification) => {
if (notification.type === type && notification.address === value) {
return true;
}
return false;
});
if (notificationExists) {
notifications = notifications.filter((notification) => {
if (notification.type === type && notification.address === value) {
return false;
}
return true;
});
} else {
notifications.push({ type, address: value });
}
setMonitor((prev) => ({
...prev,
notifications,
}));
};
const handleBlur = (event) => {
const { name } = event.target;
if (name === "url") {
@@ -189,7 +164,7 @@ const CreatePageSpeed = () => {
<Stack
component="form"
className="create-monitor-form"
onSubmit={handleCreateMonitor}
onSubmit={onSubmit}
noValidate
spellCheck="false"
gap={theme.spacing(12)}
@@ -312,24 +287,14 @@ const CreatePageSpeed = () => {
component="h2"
variant="h2"
>
{t("distributedUptimeCreateIncidentNotification")}
</Typography>
<Typography component="p">
{t("distributedUptimeCreateIncidentDescription")}
{t("notificationConfig.title")}
</Typography>
<Typography component="p">{t("notificationConfig.description")}</Typography>
</Box>
<Stack gap={theme.spacing(6)}>
<Typography component="p">{t("whenNewIncident")}</Typography>
<Checkbox
id="notify-email-default"
label={`Notify via email (to ${user.email})`}
isChecked={monitor.notifications.some(
(notification) => notification.type === "email"
)}
value={user?.email}
onChange={(event) => handleNotifications(event, "email")}
/>
</Stack>
<NotificationsConfig
notifications={notifications}
setMonitor={setMonitor}
/>
</ConfigBox>
<ConfigBox>
<Box>
@@ -356,9 +321,9 @@ const CreatePageSpeed = () => {
justifyContent="flex-end"
>
<Button
type="submit"
variant="contained"
color="accent"
onClick={handleCreateMonitor}
disabled={!Object.values(errors).every((value) => value === undefined)}
loading={isLoading}
>

1
client/src/Pages/Settings/index.jsx
View File

@@ -132,7 +132,6 @@ const Settings = () => {
};
const handleSave = () => {
console.log(settingsData.settings);
const { error } = settingsValidation.validate(settingsData.settings, {
abortEarly: false,
});

907
client/src/Pages/Uptime/Configure/index.jsx
View File

@@ -1,7 +1,7 @@
import { useNavigate, useParams } from "react-router";
import { useTheme } from "@emotion/react";
import { useDispatch, useSelector } from "react-redux";
import { useEffect, useState } from "react";
import { useState, useEffect } from "react";
import {
Box,
Stack,
@@ -13,31 +13,26 @@ import {
} from "@mui/material";
import { monitorValidation } from "../../../Validation/validation";
import { createToast } from "../../../Utils/toastUtils";
import { logger } from "../../../Utils/Logger";
import { useTranslation } from "react-i18next";
import ConfigBox from "../../../Components/ConfigBox";
import {
updateUptimeMonitor,
pauseUptimeMonitor,
getUptimeMonitorById,
deleteUptimeMonitor,
} from "../../../Features/UptimeMonitors/uptimeMonitorsSlice";
import TextInput from "../../../Components/Inputs/TextInput";
import { HttpAdornment } from "../../../Components/Inputs/TextInput/Adornments";
import PauseIcon from "../../../assets/icons/pause-icon.svg?react";
import ResumeIcon from "../../../assets/icons/resume-icon.svg?react";
import Select from "../../../Components/Inputs/Select";
import Checkbox from "../../../Components/Inputs/Checkbox";
import Breadcrumbs from "../../../Components/Breadcrumbs";
import PulseDot from "../../../Components/Animated/PulseDot";
import SkeletonLayout from "./skeleton";
import "./index.css";
import Dialog from "../../../Components/Dialog";
import NotificationIntegrationModal from "../../../Components/NotificationIntegrationModal/Components/NotificationIntegrationModal";
import { usePauseMonitor } from "../../../Hooks/useMonitorControls";
import PauseOutlinedIcon from "@mui/icons-material/PauseOutlined";
import PlayArrowOutlinedIcon from "@mui/icons-material/PlayArrowOutlined";
import { useMonitorUtils } from "../../../Hooks/useMonitorUtils";
import { useFetchUptimeMonitorById } from "../../../Hooks/useFetchUptimeMonitorById";
import { useGetNotificationsByTeamId } from "../../../Hooks/useNotifications";
import NotificationsConfig from "../../../Components/NotificationConfig";
/**
* Parses a URL string and returns a URL object.
@@ -58,22 +53,41 @@ const parseUrl = (url) => {
* @component
*/
const Configure = () => {
const { monitorId } = useParams();
// Local state
const [form, setForm] = useState({
ignoreTlsErrors: false,
interval: 60000,
matchMethod: "equal",
expectedValue: "",
jsonPath: "",
notifications: [],
port: "",
type: "http",
});
const [useAdvancedMatching, setUseAdvancedMatching] = useState(false);
const [updateTrigger, setUpdateTrigger] = useState(false);
const [isOpen, setIsOpen] = useState(false);
const [errors, setErrors] = useState({});
const triggerUpdate = () => {
setUpdateTrigger(!updateTrigger);
};
// Network
const [monitor, isLoading, error] = useFetchUptimeMonitorById(monitorId, updateTrigger);
const [notifications, notificationsAreLoading, notificationsError] =
useGetNotificationsByTeamId();
const [pauseMonitor, isPausing, pauseError] = usePauseMonitor({
monitorId: monitor?._id,
triggerUpdate,
});
const MS_PER_MINUTE = 60000;
const navigate = useNavigate();
const theme = useTheme();
const dispatch = useDispatch();
const { user } = useSelector((state) => state.auth);
const { isLoading } = useSelector((state) => state.uptimeMonitors);
const [monitor, setMonitor] = useState({});
const [errors, setErrors] = useState({});
const { monitorId } = useParams();
const idMap = {
"monitor-url": "url",
"monitor-name": "name",
"monitor-checks-http": "type",
"monitor-checks-ping": "type",
"notify-email-default": "notification-email",
};
const matchMethodOptions = [
{ _id: "equal", name: "Equal" },
@@ -81,106 +95,28 @@ const Configure = () => {
{ _id: "regex", name: "Regex" },
];
const frequencies = [
{ _id: 1, name: "1 minute" },
{ _id: 2, name: "2 minutes" },
{ _id: 3, name: "3 minutes" },
{ _id: 4, name: "4 minutes" },
{ _id: 5, name: "5 minutes" },
];
const expectedValuePlaceholders = {
regex: "^(success|ok)$",
equal: "success",
include: "ok",
};
const [trigger, setTrigger] = useState(false);
const triggerUpdate = () => {
setTrigger(!trigger);
};
const [pauseMonitor, isPausing, error] = usePauseMonitor({
monitorId: monitor?._id,
triggerUpdate,
});
useEffect(() => {
const fetchMonitor = async () => {
try {
const action = await dispatch(getUptimeMonitorById({ monitorId }));
if (getUptimeMonitorById.fulfilled.match(action)) {
const monitor = action.payload.data;
setMonitor(monitor);
} else if (getUptimeMonitorById.rejected.match(action)) {
throw new Error(action.error.message);
}
} catch (error) {
logger.error("Error fetching monitor of id: " + monitorId);
navigate("/not-found", { replace: true });
}
};
fetchMonitor();
}, [monitorId, navigate, trigger]);
const handleChange = (event, name) => {
let { checked, value, id } = event.target;
if (!name) name = idMap[id];
if (name.includes("notification-")) {
name = name.replace("notification-", "");
let hasNotif = monitor.notifications.some(
(notification) => notification.type === name
);
setMonitor((prev) => {
const notifs = [...prev.notifications];
if (hasNotif) {
return {
...prev,
notifications: notifs.filter((notif) => notif.type !== name),
};
} else {
return {
...prev,
notifications: [
...notifs,
name === "email"
? { type: name, address: value }
: // TODO - phone number
{ type: name, phone: value },
],
};
}
});
} else {
if (name === "interval") {
value = value * MS_PER_MINUTE;
}
if (name === "ignoreTlsErrors") {
value = checked;
}
setMonitor((prev) => ({
...prev,
[name]: value,
}));
const validation = monitorValidation.validate(
{ [name]: value },
{ abortEarly: false }
);
setErrors((prev) => {
const updatedErrors = { ...prev };
if (validation.error) updatedErrors[name] = validation.error.details[0].message;
else delete updatedErrors[name];
return updatedErrors;
});
// Handlers
const handlePause = async () => {
const res = await pauseMonitor();
if (typeof res !== "undefined") {
triggerUpdate();
}
};
const handleSubmit = async (event) => {
event.preventDefault();
const action = await dispatch(updateUptimeMonitor({ monitor: monitor }));
if (action.meta.requestStatus === "fulfilled") {
createToast({ body: "Monitor updated successfully!" });
} else {
createToast({ body: "Failed to update monitor." });
}
};
const [isOpen, setIsOpen] = useState(false);
const handleRemove = async (event) => {
event.preventDefault();
const action = await dispatch(deleteUptimeMonitor({ monitor }));
@@ -191,403 +127,391 @@ const Configure = () => {
}
};
const frequencies = [
{ _id: 1, name: "1 minute" },
{ _id: 2, name: "2 minutes" },
{ _id: 3, name: "3 minutes" },
{ _id: 4, name: "4 minutes" },
{ _id: 5, name: "5 minutes" },
];
const onChange = (event) => {
let { name, value, checked } = event.target;
if (name === "ignoreTlsErrors") {
value = checked;
}
if (name === "interval") {
value = value * MS_PER_MINUTE;
}
setForm({ ...form, [name]: value });
const validation = monitorValidation.validate(
{ [name]: value },
{ abortEarly: false }
);
setErrors((prev) => {
const updatedErrors = { ...prev };
if (validation.error) updatedErrors[name] = validation.error.details[0].message;
else delete updatedErrors[name];
return updatedErrors;
});
};
const onSubmit = async (e) => {
e.preventDefault();
const toSubmit = {
_id: form._id,
url: form.url,
name: form.name,
type: form.type,
matchMethod: form.matchMethod,
expectedValue: form.expectedValue,
jsonPath: form.jsonPath,
interval: form.interval,
teamId: form.teamId,
userId: form.userId,
port: form.port,
ignoreTlsErrors: form.ignoreTlsErrors,
};
if (!useAdvancedMatching) {
toSubmit.matchMethod = "";
toSubmit.expectedValue = "";
toSubmit.jsonPath = "";
}
const validation = monitorValidation.validate(toSubmit, {
abortEarly: false,
});
if (validation.error) {
const newErrors = {};
error.details.forEach((err) => {
newErrors[err.path[0]] = err.message;
});
setErrors(newErrors);
createToast({ body: "Please check the form for errors." });
return;
}
toSubmit.notifications = form.notifications;
const action = await dispatch(updateUptimeMonitor({ monitor: toSubmit }));
if (action.meta.requestStatus === "fulfilled") {
createToast({ body: "Monitor updated successfully!" });
} else {
createToast({ body: "Failed to update monitor." });
}
};
// Effects
useEffect(() => {
if (monitor?.matchMethod) {
setUseAdvancedMatching(true);
}
setForm({
...monitor,
});
}, [monitor, notifications]);
// Parse the URL
const parsedUrl = parseUrl(monitor?.url);
const protocol = parsedUrl?.protocol?.replace(":", "") || "";
// Notification modal state
const [isNotificationModalOpen, setIsNotificationModalOpen] = useState(false);
const handleOpenNotificationModal = () => {
setIsNotificationModalOpen(true);
};
const handleClosenNotificationModal = () => {
setIsNotificationModalOpen(false);
};
const { determineState, statusColor } = useMonitorUtils();
const { t } = useTranslation();
return (
<Stack
className="configure-monitor"
gap={theme.spacing(10)}
>
{Object.keys(monitor).length === 0 ? (
<SkeletonLayout />
) : (
<>
<Breadcrumbs
list={[
{ name: "uptime", path: "/uptime" },
{ name: "details", path: `/uptime/${monitorId}` },
{ name: "configure", path: `/uptime/configure/${monitorId}` },
]}
/>
<Stack
component="form"
noValidate
spellCheck="false"
gap={theme.spacing(12)}
flex={1}
>
<Stack gap={theme.spacing(10)}>
<Breadcrumbs
list={[
{ name: "uptime", path: "/uptime" },
{ name: "details", path: `/uptime/${monitorId}` },
{ name: "configure", path: `/uptime/configure/${monitorId}` },
]}
/>
<Stack
component="form"
onSubmit={onSubmit}
noValidate
spellCheck="false"
gap={theme.spacing(12)}
flex={1}
>
<Stack
direction="row"
gap={theme.spacing(12)}
>
<Box>
<Typography
component="h1"
variant="monitorName"
>
{form.name}
</Typography>
<Stack
direction="row"
alignItems="center"
height="fit-content"
gap={theme.spacing(2)}
>
<Box>
<Typography
component="h1"
variant="monitorName"
>
{monitor.name}
</Typography>
<Stack
direction="row"
alignItems="center"
height="fit-content"
gap={theme.spacing(2)}
>
<Tooltip
title={t(`statusMsg.${[determineState(monitor)]}`)}
disableInteractive
slotProps={{
popper: {
modifiers: [
{
name: "offset",
options: {
offset: [0, -8],
},
},
],
<Tooltip
title={t(`statusMsg.${[determineState(form)]}`)}
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: 4,
height: 4,
borderRadius: "50%",
backgroundColor: theme.palette.primary.contrastTextTertiary,
opacity: 0.8,
left: -10,
top: "50%",
transform: "translateY(-50%)",
},
}}
>
{t("editing")}
</Typography>
</Stack>
</Box>
<Box
justifyContent="space-between"
sx={{
alignSelf: "flex-end",
ml: "auto",
display: "flex",
gap: theme.spacing(2),
],
},
}}
>
<Button
variant="contained"
color="secondary"
loading={isPausing}
startIcon={
monitor?.isActive ? <PauseOutlinedIcon /> : <PlayArrowOutlinedIcon />
}
onClick={() => {
pauseMonitor();
}}
>
{monitor?.isActive ? t("pause") : t("resume")}
</Button>
<Button
loading={isLoading}
variant="contained"
color="error"
sx={{ px: theme.spacing(8) }}
onClick={() => setIsOpen(true)}
>
{t("remove")}
</Button>
</Box>
</Stack>
<ConfigBox>
<Box>
<Typography
component="h2"
variant="h2"
>
{t("settingsGeneralSettings")}
</Typography>
<Typography component="p">
{t("distributedUptimeCreateSelectURL")}
</Typography>
</Box>
<Stack gap={theme.spacing(20)}>
<TextInput
type={monitor?.type === "http" ? "url" : "text"}
https={protocol === "https"}
startAdornment={
monitor?.type === "http" && (
<HttpAdornment https={protocol === "https"} />
)
}
id="monitor-url"
label={t("urlMonitor")}
placeholder="google.com"
value={parsedUrl?.host || monitor?.url || ""}
disabled={true}
/>
<TextInput
type="number"
id="monitor-port"
label={t("portToMonitor")}
placeholder="5173"
value={monitor.port || ""}
onChange={(event) => handleChange(event, "port")}
error={errors["port"] ? true : false}
helperText={errors["port"]}
hidden={monitor.type !== "port"}
/>
<TextInput
type="text"
id="monitor-name"
label={t("displayName")}
isOptional={true}
placeholder="Google"
value={monitor?.name || ""}
onChange={handleChange}
error={errors["name"] ? true : false}
helperText={errors["name"]}
/>
</Stack>
</ConfigBox>
<ConfigBox>
<Box>
<Typography
component="h2"
variant="h2"
>
{t("distributedUptimeCreateIncidentNotification")}
</Typography>
<Typography component="p">
{t("distributedUptimeCreateIncidentDescription")}
</Typography>
</Box>
<Stack gap={theme.spacing(6)}>
<Typography component="p">{t("whenNewIncident")}</Typography>
{/* {Leaving components commented for future funtionality implimentation} */}
{/* <Checkbox
id="notify-sms"
label="Notify via SMS (coming soon)"
isChecked={false}
value=""
onChange={() => logger.warn("disabled")}
isDisabled={true}
/> */}
<Checkbox
id="notify-email-default"
label={`Notify via email (to ${user.email})`}
isChecked={
monitor?.notifications?.some(
(notification) => notification.type === "email"
) || false
}
value={user?.email}
onChange={(event) => handleChange(event)}
/>
<Box mt={theme.spacing(2)}>
<Button
variant="contained"
color="accent"
onClick={handleOpenNotificationModal}
>
{t("notifications.integrationButton")}
</Button>
<Box>
<PulseDot color={statusColor[determineState(form)]} />
</Box>
{/* <Checkbox
id="notify-email"
label="Also notify via email to multiple addresses (coming soon)"
isChecked={false}
value=""
onChange={() => logger.warn("disabled")}
isDisabled={true}
/> */}
{/* {monitor?.notifications?.some(
(notification) => notification.type === "emails"
) ? (
<Box mx={theme.spacing(16)}>
<TextInput
id="notify-email-list"
type="text"
placeholder="name@gmail.com"
value=""
onChange={() => logger.warn("disabled")}
/>
<Typography mt={theme.spacing(4)}>
You can separate multiple emails with a comma
</Typography>
</Box>
) : (
""
)} */}
</Stack>
</ConfigBox>
<ConfigBox>
<Box>
<Typography
component="h2"
variant="h2"
>
{t("ignoreTLSError")}
</Typography>
<Typography component="p">{t("ignoreTLSErrorDescription")}</Typography>
</Box>
<Stack>
<FormControlLabel
sx={{ marginLeft: 0 }}
control={
<Switch
name="ignore-error"
checked={monitor.ignoreTlsErrors}
onChange={(event) => handleChange(event, "ignoreTlsErrors")}
sx={{ mr: theme.spacing(2) }}
/>
}
label={t("tlsErrorIgnored")}
/>
</Stack>
</ConfigBox>
<ConfigBox>
<Box>
<Typography
component="h2"
variant="h2"
>
{t("distributedUptimeCreateAdvancedSettings")}
</Typography>
</Box>
<Stack gap={theme.spacing(20)}>
<Select
id="monitor-interval-configure"
label={t("checkFrequency")}
value={monitor?.interval / MS_PER_MINUTE || 1}
onChange={(event) => handleChange(event, "interval")}
items={frequencies}
/>
{monitor.type === "http" && (
<>
<Select
id="match-method"
label={t("matchMethod")}
value={monitor.matchMethod || "equal"}
onChange={(event) => handleChange(event, "matchMethod")}
items={matchMethodOptions}
/>
<Stack>
<TextInput
type="text"
id="expected-value"
label={t("expectedValue")}
isOptional={true}
placeholder={
expectedValuePlaceholders[monitor.matchMethod || "equal"]
}
value={monitor.expectedValue}
onChange={(event) => handleChange(event, "expectedValue")}
error={errors["expectedValue"] ? true : false}
helperText={errors["expectedValue"]}
/>
<Typography
component="span"
color={theme.palette.primary.contrastTextTertiary}
opacity={0.8}
>
{t("uptimeCreate")}
</Typography>
</Stack>
<Stack>
<TextInput
type="text"
id="json-path"
label="JSON Path"
isOptional={true}
placeholder="data.status"
value={monitor.jsonPath}
onChange={(event) => handleChange(event, "jsonPath")}
error={errors["jsonPath"] ? true : false}
helperText={errors["jsonPath"]}
/>
<Typography
component="span"
color={theme.palette.primary.contrastTextTertiary}
opacity={0.8}
>
{t("uptimeCreateJsonPath")}&nbsp;
<Typography
component="a"
href="https://jmespath.org/"
target="_blank"
color="info"
>
jmespath.org
</Typography>
&nbsp;{t("uptimeCreateJsonPathQuery")}
</Typography>
</Stack>
</>
)}
</Stack>
</ConfigBox>
<Stack
direction="row"
justifyContent="flex-end"
mt="auto"
>
<Button
variant="contained"
color="accent"
loading={isLoading}
sx={{ px: theme.spacing(12) }}
onClick={handleSubmit}
</Tooltip>
<Typography
component="h2"
variant="monitorUrl"
>
{t("settingsSave")}
</Button>
{form.url?.replace(/^https?:\/\//, "") || "..."}
</Typography>
<Typography
position="relative"
variant="body2"
ml={theme.spacing(6)}
mt={theme.spacing(1)}
sx={{
"&:before": {
position: "absolute",
content: `""`,
width: 4,
height: 4,
borderRadius: "50%",
backgroundColor: theme.palette.primary.contrastTextTertiary,
opacity: 0.8,
left: -10,
top: "50%",
transform: "translateY(-50%)",
},
}}
>
{t("editing")}
</Typography>
</Stack>
</Box>
<Box
justifyContent="space-between"
sx={{
alignSelf: "flex-end",
ml: "auto",
display: "flex",
gap: theme.spacing(2),
}}
>
<Button
variant="contained"
color="secondary"
loading={isPausing}
startIcon={
form?.isActive ? <PauseOutlinedIcon /> : <PlayArrowOutlinedIcon />
}
onClick={handlePause}
>
{form?.isActive ? t("pause") : t("resume")}
</Button>
<Button
loading={isLoading}
variant="contained"
color="error"
sx={{ px: theme.spacing(8) }}
onClick={() => setIsOpen(true)}
>
{t("remove")}
</Button>
</Box>
</Stack>
<ConfigBox>
<Box>
<Typography
component="h2"
variant="h2"
>
{t("settingsGeneralSettings")}
</Typography>
<Typography component="p">{t("distributedUptimeCreateSelectURL")}</Typography>
</Box>
<Stack gap={theme.spacing(20)}>
<TextInput
type={form?.type === "http" ? "url" : "text"}
https={protocol === "https"}
startAdornment={
form?.type === "http" && <HttpAdornment https={protocol === "https"} />
}
id="monitor-url"
label={t("urlMonitor")}
placeholder="google.com"
value={parsedUrl?.host || form?.url || ""}
disabled={true}
/>
<TextInput
name="port"
type="number"
label={t("portToMonitor")}
placeholder="5173"
value={form.port || ""}
onChange={onChange}
error={errors["port"] ? true : false}
helperText={errors["port"]}
hidden={form.type !== "port"}
/>
<TextInput
name="name"
type="text"
label={t("displayName")}
isOptional={true}
placeholder="Google"
value={form?.name || ""}
onChange={onChange}
error={errors["name"] ? true : false}
helperText={errors["name"]}
/>
</Stack>
</>
)}
</ConfigBox>
<ConfigBox>
<Box>
<Typography component="h2">{t("notificationConfig.title")}</Typography>
<Typography component="p">{t("notificationConfig.description")}</Typography>
</Box>
<NotificationsConfig
notifications={notifications}
setMonitor={setForm}
setNotifications={form.notifications}
/>
</ConfigBox>
<ConfigBox>
<Box>
<Typography
component="h2"
variant="h2"
>
{t("ignoreTLSError")}
</Typography>
<Typography component="p">{t("ignoreTLSErrorDescription")}</Typography>
</Box>
<Stack>
<FormControlLabel
sx={{ marginLeft: 0 }}
control={
<Switch
name="ignoreTlsErrors"
checked={form.ignoreTlsErrors ?? false}
onChange={onChange}
sx={{ mr: theme.spacing(2) }}
/>
}
label={t("tlsErrorIgnored")}
/>
</Stack>
</ConfigBox>
<ConfigBox>
<Box>
<Typography
component="h2"
variant="h2"
>
{t("distributedUptimeCreateAdvancedSettings")}
</Typography>
</Box>
<Stack gap={theme.spacing(20)}>
<Select
name="interval"
label={t("checkFrequency")}
value={form?.interval / MS_PER_MINUTE || 1}
onChange={onChange}
items={frequencies}
/>
{form.type === "http" && (
<>
<Select
name="matchMethod"
label={t("matchMethod")}
value={form.matchMethod || "equal"}
onChange={onChange}
items={matchMethodOptions}
/>
<Stack>
<TextInput
type="text"
name="expectedValue"
label={t("expectedValue")}
isOptional={true}
placeholder={expectedValuePlaceholders[form.matchMethod || "equal"]}
value={form.expectedValue}
onChange={onChange}
error={errors["expectedValue"] ? true : false}
helperText={errors["expectedValue"]}
/>
<Typography
component="span"
color={theme.palette.primary.contrastTextTertiary}
opacity={0.8}
>
{t("uptimeCreate")}
</Typography>
</Stack>
<Stack>
<TextInput
name="jsonPath"
type="text"
label="JSON Path"
isOptional={true}
placeholder="data.status"
value={form.jsonPath}
onChange={onChange}
error={errors["jsonPath"] ? true : false}
helperText={errors["jsonPath"]}
/>
<Typography
component="span"
color={theme.palette.primary.contrastTextTertiary}
opacity={0.8}
>
{t("uptimeCreateJsonPath")}&nbsp;
<Typography
component="a"
href="https://jmespath.org/"
target="_blank"
color="info"
>
jmespath.org
</Typography>
&nbsp;{t("uptimeCreateJsonPathQuery")}
</Typography>
</Stack>
</>
)}
</Stack>
</ConfigBox>
<Stack
direction="row"
justifyContent="flex-end"
mt="auto"
>
<Button
type="submit"
variant="contained"
color="accent"
loading={isLoading}
sx={{ px: theme.spacing(12) }}
>
{t("settingsSave")}
</Button>
</Stack>
</Stack>
<Dialog
open={isOpen}
theme={theme}
@@ -598,13 +522,6 @@ const Configure = () => {
onConfirm={handleRemove}
isLoading={isLoading}
/>
<NotificationIntegrationModal
open={isNotificationModalOpen}
onClose={handleClosenNotificationModal}
monitor={monitor}
setMonitor={setMonitor}
/>
</Stack>
);
};

304
client/src/Pages/Uptime/Create/index.jsx
View File

@@ -1,15 +1,12 @@
// React, Redux, Router
import { useTheme } from "@emotion/react";
import { useNavigate, useParams } from "react-router-dom";
import { useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { useState } from "react";
import { useSelector, useDispatch } from "react-redux";
import { useTranslation } from "react-i18next";
// Utility and Network
import { checkEndpointResolution } from "../../../Features/UptimeMonitors/uptimeMonitorsSlice";
import { monitorValidation } from "../../../Validation/validation";
import { getUptimeMonitorById } from "../../../Features/UptimeMonitors/uptimeMonitorsSlice";
import { createUptimeMonitor } from "../../../Features/UptimeMonitors/uptimeMonitorsSlice";
// MUI
import { Box, Stack, Typography, Button, ButtonGroup } from "@mui/material";
@@ -22,11 +19,37 @@ import TextInput from "../../../Components/Inputs/TextInput";
import { HttpAdornment } from "../../../Components/Inputs/TextInput/Adornments";
import { createToast } from "../../../Utils/toastUtils";
import Radio from "../../../Components/Inputs/Radio";
import Checkbox from "../../../Components/Inputs/Checkbox";
import Select from "../../../Components/Inputs/Select";
import ConfigBox from "../../../Components/ConfigBox";
import NotificationIntegrationModal from "../../../Components/NotificationIntegrationModal/Components/NotificationIntegrationModal";
import { useGetNotificationsByTeamId } from "../../../Hooks/useNotifications";
import NotificationsConfig from "../../../Components/NotificationConfig";
const CreateMonitor = () => {
// Redux state
const { user } = useSelector((state) => state.auth);
const { isLoading } = useSelector((state) => state.uptimeMonitors);
const dispatch = useDispatch();
// Local state
const [errors, setErrors] = useState({});
const [https, setHttps] = useState(true);
const [useAdvancedMatching, setUseAdvancedMatching] = useState(false);
const [monitor, setMonitor] = useState({
url: "",
name: "",
type: "http",
matchMethod: "equal",
notifications: [],
interval: 1,
ignoreTlsErrors: false,
});
// Setup
const theme = useTheme();
const { t } = useTranslation();
const navigate = useNavigate();
const [notifications, notificationsAreLoading, error] = useGetNotificationsByTeamId();
const MS_PER_MINUTE = 60000;
const SELECT_VALUES = [
{ _id: 1, name: "1 minute" },
@@ -71,37 +94,19 @@ const CreateMonitor = () => {
},
};
const { user } = useSelector((state) => state.auth);
const { isLoading } = useSelector((state) => state.uptimeMonitors);
const dispatch = useDispatch();
const navigate = useNavigate();
const theme = useTheme();
const { monitorId } = useParams();
const crumbs = [
const BREADCRUMBS = [
{ name: "uptime", path: "/uptime" },
{ name: "create", path: `/uptime/create` },
];
// State
const [isNotificationModalOpen, setIsNotificationModalOpen] = useState(false);
// Handlers
const handleOpenNotificationModal = () => {
setIsNotificationModalOpen(true);
};
const [errors, setErrors] = useState({});
const [https, setHttps] = useState(true);
const [monitor, setMonitor] = useState({
url: "",
name: "",
type: "http",
ignoreTlsErrors: false,
notifications: [],
interval: 1,
});
const handleCreateMonitor = async (event) => {
const onSubmit = async (event) => {
event.preventDefault();
const { notifications, ...rest } = monitor;
let form = {
...rest,
url:
//prepending protocol for url
monitor.type === "http"
@@ -110,14 +115,14 @@ const CreateMonitor = () => {
port: monitor.type === "port" ? monitor.port : undefined,
name: monitor.name || monitor.url.substring(0, 50),
type: monitor.type,
ignoreTlsErrors: monitor.ignoreTlsErrors,
interval: monitor.interval * MS_PER_MINUTE,
};
if (monitor.type === "http") {
form.expectedValue = monitor.expectedValue;
form.jsonPath = monitor.jsonPath;
form.matchMethod = monitor.matchMethod;
// If not using advanced matching, remove advanced settings
if (!useAdvancedMatching) {
form.matchMethod = undefined;
form.expectedValue = undefined;
form.jsonPath = undefined;
}
const { error } = monitorValidation.validate(form, {
@@ -141,6 +146,7 @@ const CreateMonitor = () => {
userId: user._id,
notifications: monitor.notifications,
};
const action = await dispatch(createUptimeMonitor({ monitor: form }));
if (action.meta.requestStatus === "fulfilled") {
createToast({ body: "Monitor created successfully!" });
@@ -150,115 +156,60 @@ const CreateMonitor = () => {
}
};
const handleChange = (event, formName) => {
const { type, checked, value } = event.target;
const newVal = type === "checkbox" ? checked : value;
const newMonitor = {
...monitor,
[formName]: newVal,
};
if (formName === "type") {
newMonitor.url = "";
const onChange = (event) => {
const { name, value, checked } = event.target;
let newValue = value;
if (name === "ignoreTlsErrors") {
newValue = checked;
}
setMonitor(newMonitor);
const updatedMonitor = {
...monitor,
[name]: newValue,
};
setMonitor(updatedMonitor);
const { error } = monitorValidation.validate(
{ type: monitor.type, [formName]: newVal },
{ type: monitor.type, [name]: newValue },
{ abortEarly: false }
);
setErrors((prev) => ({
...prev,
url: undefined,
...(error ? { [formName]: error.details[0].message } : { [formName]: undefined }),
...(error ? { [name]: error.details[0].message } : { [name]: undefined }),
}));
};
const handleNotifications = (event, type) => {
const { value } = event.target;
let notifications = [...monitor.notifications];
const notificationExists = notifications.some((notification) => {
if (notification.type === type && notification.address === value) {
return true;
}
return false;
});
if (notificationExists) {
notifications = notifications.filter((notification) => {
if (notification.type === type && notification.address === value) {
return false;
}
return true;
});
} else {
notifications.push({ type, address: value });
}
setMonitor((prev) => ({
...prev,
notifications,
}));
};
useEffect(() => {
const fetchMonitor = async () => {
if (monitorId) {
const action = await dispatch(getUptimeMonitorById({ monitorId }));
if (action.payload.success) {
const data = action.payload.data;
const { name, ...rest } = data; //data.name is read-only
if (rest.type === "http") {
const url = new URL(rest.url);
rest.url = url.host;
}
rest.name = `${name} (Clone)`;
rest.interval /= MS_PER_MINUTE;
setMonitor({
...rest,
});
} else {
navigate("/not-found", { replace: true });
createToast({
body: "There was an error cloning the monitor.",
});
}
}
};
fetchMonitor();
}, [monitorId, dispatch, navigate]);
const { t } = useTranslation();
return (
<Box className="create-monitor">
<Breadcrumbs list={crumbs} />
<Stack
component="form"
gap={theme.spacing(12)}
mt={theme.spacing(6)}
onSubmit={handleCreateMonitor}
<Stack gap={theme.spacing(10)}>
<Breadcrumbs list={BREADCRUMBS} />
<Typography
component="h1"
variant="h1"
>
<Typography
component="h1"
variant="h1"
component="span"
fontSize="inherit"
>
<Typography
component="span"
fontSize="inherit"
>
{t("createYour")}{" "}
</Typography>
<Typography
component="span"
variant="h2"
fontSize="inherit"
fontWeight="inherit"
>
{t("monitor")}
</Typography>
{t("createYour")}{" "}
</Typography>
<Typography
component="span"
variant="h2"
fontSize="inherit"
fontWeight="inherit"
>
{t("monitor")}
</Typography>
</Typography>
<Stack
component="form"
noValidate
gap={theme.spacing(12)}
mt={theme.spacing(6)}
onSubmit={onSubmit}
>
<ConfigBox>
<Box>
<Typography
@@ -274,13 +225,13 @@ const CreateMonitor = () => {
<Stack gap={theme.spacing(12)}>
<Stack gap={theme.spacing(6)}>
<Radio
id="monitor-checks-http"
name="type"
title={t("websiteMonitoring")}
desc={t("websiteMonitoringDescription")}
size="small"
value="http"
checked={monitor.type === "http"}
onChange={(event) => handleChange(event, "type")}
onChange={onChange}
/>
{monitor.type === "http" ? (
<ButtonGroup sx={{ ml: theme.spacing(16) }}>
@@ -304,31 +255,31 @@ const CreateMonitor = () => {
)}
</Stack>
<Radio
id="monitor-checks-ping"
name="type"
title={t("pingMonitoring")}
desc={t("pingMonitoringDescription")}
size="small"
value="ping"
checked={monitor.type === "ping"}
onChange={(event) => handleChange(event, "type")}
onChange={onChange}
/>
<Radio
id="monitor-checks-docker"
name="type"
title={t("dockerContainerMonitoring")}
desc={t("dockerContainerMonitoringDescription")}
size="small"
value="docker"
checked={monitor.type === "docker"}
onChange={(event) => handleChange(event, "type")}
onChange={onChange}
/>
<Radio
id="monitor-checks-port"
name="type"
title={t("portMonitoring")}
desc={t("portMonitoringDescription")}
size="small"
value="port"
checked={monitor.type === "port"}
onChange={(event) => handleChange(event, "type")}
onChange={onChange}
/>
{errors["type"] ? (
<Box className="error-container">
@@ -359,8 +310,8 @@ const CreateMonitor = () => {
</Box>
<Stack gap={theme.spacing(15)}>
<TextInput
name="url"
type={monitor.type === "http" ? "url" : "text"}
id="monitor-url"
startAdornment={
monitor.type === "http" ? <HttpAdornment https={https} /> : null
}
@@ -368,29 +319,29 @@ const CreateMonitor = () => {
https={https}
placeholder={monitorTypeMaps[monitor.type].placeholder || ""}
value={monitor.url}
onChange={(event) => handleChange(event, "url")}
onChange={onChange}
error={errors["url"] ? true : false}
helperText={errors["url"]}
/>
<TextInput
name="port"
type="number"
id="monitor-port"
label={t("portToMonitor")}
placeholder="5173"
value={monitor.port}
onChange={(event) => handleChange(event, "port")}
onChange={onChange}
error={errors["port"] ? true : false}
helperText={errors["port"]}
hidden={monitor.type !== "port"}
/>
<TextInput
name="name"
type="text"
id="monitor-name"
label={t("displayName")}
isOptional={true}
placeholder={monitorTypeMaps[monitor.type].namePlaceholder || ""}
value={monitor.name}
onChange={(event) => handleChange(event, "name")}
onChange={onChange}
error={errors["name"] ? true : false}
helperText={errors["name"]}
/>
@@ -398,37 +349,13 @@ const CreateMonitor = () => {
</ConfigBox>
<ConfigBox>
<Box>
<Typography
component="h2"
variant="h2"
>
{t("distributedUptimeCreateIncidentNotification")}
</Typography>
<Typography component="p">
{t("distributedUptimeCreateIncidentDescription")}
</Typography>
<Typography component="h2">{t("notificationConfig.title")}</Typography>
<Typography component="p">{t("notificationConfig.description")}</Typography>
</Box>
<Stack gap={theme.spacing(6)}>
<Checkbox
id="notify-email-default"
label={`Notify via email (to ${user.email})`}
isChecked={monitor.notifications.some(
(notification) => notification.type === "email"
)}
value={user?.email}
onChange={(event) => handleNotifications(event, "email")}
/>
<Box mt={theme.spacing(2)}>
<Button
variant="contained"
color="accent"
onClick={handleOpenNotificationModal}
>
{t("notifications.integrationButton")}
</Button>
</Box>
</Stack>
<NotificationsConfig
notifications={notifications}
setMonitor={setMonitor}
/>
</ConfigBox>
<ConfigBox>
<Box>
@@ -445,9 +372,9 @@ const CreateMonitor = () => {
sx={{ marginLeft: 0 }}
control={
<Switch
name="ignore-error"
name="ignoreTlsErrors"
checked={monitor.ignoreTlsErrors}
onChange={(event) => handleChange(event, "ignoreTlsErrors")}
onChange={onChange}
sx={{ mr: theme.spacing(2) }}
/>
}
@@ -466,32 +393,32 @@ const CreateMonitor = () => {
</Box>
<Stack gap={theme.spacing(12)}>
<Select
id="monitor-interval"
name="interval"
label="Check frequency"
value={monitor.interval || 1}
onChange={(event) => handleChange(event, "interval")}
onChange={onChange}
items={SELECT_VALUES}
/>
{monitor.type === "http" && (
<>
<Select
id="match-method"
name="matchMethod"
label="Match Method"
value={monitor.matchMethod || "equal"}
onChange={(event) => handleChange(event, "matchMethod")}
onChange={onChange}
items={matchMethodOptions}
/>
<Stack>
<TextInput
name="expectedValue"
type="text"
id="expected-value"
label="Expected value"
isOptional={true}
placeholder={
expectedValuePlaceholders[monitor.matchMethod || "equal"]
}
value={monitor.expectedValue}
onChange={(event) => handleChange(event, "expectedValue")}
onChange={onChange}
error={errors["expectedValue"] ? true : false}
helperText={errors["expectedValue"]}
/>
@@ -505,13 +432,13 @@ const CreateMonitor = () => {
</Stack>
<Stack>
<TextInput
name="jsonPath"
type="text"
id="json-path"
label="JSON Path"
isOptional={true}
placeholder="data.status"
value={monitor.jsonPath}
onChange={(event) => handleChange(event, "jsonPath")}
onChange={onChange}
error={errors["jsonPath"] ? true : false}
helperText={errors["jsonPath"]}
/>
@@ -541,9 +468,9 @@ const CreateMonitor = () => {
justifyContent="flex-end"
>
<Button
type="submit"
variant="contained"
color="accent"
onClick={handleCreateMonitor}
disabled={!Object.values(errors).every((value) => value === undefined)}
loading={isLoading}
>
@@ -551,14 +478,7 @@ const CreateMonitor = () => {
</Button>
</Stack>
</Stack>
<NotificationIntegrationModal
open={isNotificationModalOpen}
onClose={() => setIsNotificationModalOpen(false)}
monitor={monitor}
setMonitor={setMonitor}
/>
</Box>
</Stack>
);
};

11
client/src/Routes/index.jsx
View File

@@ -38,7 +38,8 @@ import CreateStatus from "../Pages/StatusPage/Create";
import StatusPages from "../Pages/StatusPage/StatusPages";
import Status from "../Pages/StatusPage/Status";
import Integrations from "../Pages/Integrations";
import Notifications from "../Pages/Notifications";
import CreateNotifications from "../Pages/Notifications/create";
// Settings
import Account from "../Pages/Account";
@@ -149,8 +150,12 @@ const Routes = () => {
/>
<Route
path="integrations"
element={<Integrations />}
path="notifications"
element={<Notifications />}
/>
<Route
path="notifications/create"
element={<CreateNotifications />}
/>
<Route
path="maintenance"

15
client/src/Utils/NetworkService.js
View File

@@ -1034,6 +1034,21 @@ class NetworkService {
// Fallback to original behavior for backward compatibility
return this.axiosInstance.post(`/settings/test-email`, { to });
}
async createNotification(config) {
const { notification } = config;
return this.axiosInstance.post(`/notifications`, notification);
}
async getNotificationsByTeamId(config) {
const { teamId } = config;
return this.axiosInstance.get(`/notifications/team/${teamId}`);
}
async deleteNotificationById(config) {
const { id } = config;
return this.axiosInstance.delete(`/notifications/${id}`);
}
}
export default NetworkService;

74
client/src/Validation/validation.js
View File

@@ -111,6 +111,9 @@ const loginCredentials = joi.object({
});
const monitorValidation = joi.object({
_id: joi.string(),
userId: joi.string(),
teamId: joi.string(),
url: joi.when("type", {
is: "docker",
then: joi
@@ -198,9 +201,9 @@ const monitorValidation = joi.object({
"number.base": "Frequency must be a number.",
"any.required": "Frequency is required.",
}),
expectedValue: joi.string().allow(""),
jsonPath: joi.string().allow(""),
matchMethod: joi.string(),
expectedValue: joi.string().allow(null, ""),
jsonPath: joi.string().allow(null, ""),
matchMethod: joi.string().allow(null, ""),
});
const imageValidation = joi.object({
@@ -392,15 +395,61 @@ const infrastructureMonitorValidation = joi.object({
"number.base": "Frequency must be a number.",
"any.required": "Frequency is required.",
}),
notifications: joi.array().items(
joi.object({
type: joi.string().valid("email").required(),
address: joi
.string()
.email({ tlds: { allow: false } })
.required(),
notifications: joi.array().items(joi.string()),
});
const notificationEmailValidation = joi.object({
notificationName: joi.string().required().messages({
"string.empty": "Notification name is required",
"any.required": "Notification name is required",
}),
address: joi
.string()
.email({ tlds: { allow: false } })
.required()
.messages({
"string.empty": "E-mail address cannot be empty",
"string.email": "Please enter a valid e-mail address",
"string.base": "E-mail address must be a string",
"any.required": "E-mail address is required",
}),
});
const notificationWebhookValidation = joi.object({
notificationName: joi.string().required().messages({
"string.empty": "Notification name is required",
"any.required": "Notification name is required",
}),
config: joi
.object({
webhookUrl: joi.string().uri().required().messages({
"string.empty": "Webhook URL is required",
"string.uri": "Webhook URL must be a valid URI",
"any.required": "Webhook URL is required",
}),
platform: joi.string().required().messages({
"string.base": "Platform must be a string",
"any.required": "Platform is required",
}),
})
),
.unknown(true),
});
const notificationPagerDutyValidation = joi.object({
notificationName: joi.string().required().messages({
"string.empty": "Notification name is required",
"any.required": "Notification name is required",
}),
config: joi.object({
platform: joi.string().required().messages({
"string.base": "Platform must be a string",
"any.required": "Platform is required",
}),
routingKey: joi.string().required().messages({
"string.empty": "Routing key is required",
"any.required": "Routing key is required",
}),
}),
});
export {
@@ -414,4 +463,7 @@ export {
infrastructureMonitorValidation,
statusPageValidation,
logoImageValidation,
notificationEmailValidation,
notificationWebhookValidation,
notificationPagerDutyValidation,
};

63
client/src/locales/en.json
View File

@@ -255,7 +255,55 @@
"distributedUptimeDetailsNoMonitorHistory": "There is no check history for this monitor yet.",
"distributedUptimeDetailsStatusHeaderUptime": "Uptime:",
"distributedUptimeDetailsStatusHeaderLastUpdate": "Last updated",
"createNotifications": {
"title": "Create notification channel",
"nameSettings": {
"title": "Name",
"description": "A descriptive name for your integration.",
"nameLabel": "Name",
"namePlaceholder": "e.g. Slack notifications"
},
"typeSettings": {
"title": "Type",
"description": "Select the type of notification channel you want to create.",
"typeLabel": "Type"
},
"emailSettings": {
"title": "Email",
"description": "Destination email addresses.",
"emailLabel": "Email address",
"emailPlaceholder": "e.g. john@example.com"
},
"slackSettings": {
"title": "Slack",
"description": "Configure your Slack webhook here",
"webhookLabel": "Slack webhook URL",
"webhookPlaceholder": "https://hooks.slack.com/services/..."
},
"pagerdutySettings": {
"title": "PagerDuty",
"description": "Configure your PagerDuty integration here",
"integrationKeyLabel": "Integration key",
"integrationKeyPlaceholder": "1234567890"
},
"genericWebhookSettings": {
"title": "Webhook",
"description": "Configure your webhook here",
"webhookLabel": "Webhook URL",
"webhookPlaceholder": "https://your-server.com/webhook"
}
},
"notificationConfig": {
"title": "Notifications",
"description": "Select the notifications channels you want to use"
},
"notifications": {
"fallback": {
"title": "notification channel",
"checks": "Alert teams about downtime or performance issues"
},
"createButton": "Create notification channel",
"createTitle": "Notification channel",
"enableNotifications": "Enable {{platform}} notifications",
"testNotification": "Test notification",
"addOrEditNotifications": "Add or edit notifications",
@@ -294,7 +342,19 @@
"testSuccess": "Test notification sent successfully!",
"testFailed": "Failed to send test notification",
"unsupportedType": "Unsupported notification type",
"networkError": "Network error occurred"
"networkError": "Network error occurred",
"create": {
"success": "Notification created successfully",
"failed": "Failed to create notification"
},
"fetch": {
"success": "Notifications fetched successfully",
"failed": "Failed to fetch notifications"
},
"delete": {
"success": "Notification deleted successfully",
"failed": "Failed to delete notification"
}
},
"testLocale": "testLocale",
"add": "Add",
@@ -580,6 +640,7 @@
"menu": {
"uptime": "Uptime",
"pagespeed": "Pagespeed",
"notifications": "Notifications",
"infrastructure": "Infrastructure",
"incidents": "Incidents",
"statusPages": "Status pages",

40
server/controllers/monitorController.js
View File

@@ -219,19 +219,8 @@ class MonitorController {
}
try {
const notifications = req.body.notifications;
const monitor = await this.db.createMonitor(req, res);
if (notifications && notifications.length > 0) {
monitor.notifications = await Promise.all(
notifications.map(async (notification) => {
notification.monitorId = monitor._id;
return await this.db.createNotification(notification);
})
);
}
await monitor.save();
// Add monitor to job queue
this.jobQueue.addJob(monitor._id, monitor);
return res.success({
@@ -325,18 +314,6 @@ class MonitorController {
await Promise.all(
monitors.map(async (monitor, index) => {
const notifications = enrichedData[index].notifications;
if (notifications?.length) {
monitor.notifications = await Promise.all(
notifications.map(async (notification) => {
notification.monitorId = monitor._id;
return await this.db.createNotification(notification);
})
);
await monitor.save();
}
this.jobQueue.addJob(monitor._id, monitor);
})
);
@@ -422,10 +399,7 @@ class MonitorController {
name: "deletePageSpeedChecks",
fn: () => this.db.deletePageSpeedChecksByMonitorId(monitor._id),
},
{
name: "deleteNotifications",
fn: () => this.db.deleteNotificationsByMonitorId(monitor._id),
},
{
name: "deleteHardwareChecks",
fn: () => this.db.deleteHardwareChecksByMonitorId(monitor._id),
@@ -530,21 +504,9 @@ class MonitorController {
try {
const { monitorId } = req.params;
const monitorBeforeEdit = await this.db.getMonitorById(monitorId);
// Get notifications from the request body
const notifications = req.body.notifications ?? [];
const editedMonitor = await this.db.editMonitor(monitorId, req.body);
await this.db.deleteNotificationsByMonitorId(editedMonitor._id);
await Promise.all(
notifications.map(async (notification) => {
notification.monitorId = editedMonitor._id;
await this.db.createNotification(notification);
})
);
await this.jobQueue.updateJob(editedMonitor);
return res.success({

2
server/db/models/Monitor.js
View File

@@ -42,7 +42,7 @@ const MonitorSchema = mongoose.Schema(
},
matchMethod: {
type: String,
enum: ["equal", "include", "regex"],
enum: ["equal", "include", "regex", ""],
},
url: {
type: String,

2
server/db/models/Notification.js
View File

@@ -7,7 +7,7 @@ const configSchema = mongoose.Schema(
chatId: { type: String },
platform: {
type: String,
enum: ["slack", "pager_duty"],
enum: ["slack", "pager_duty", "webhook"],
},
routingKey: { type: String },
},

16
server/db/mongo/modules/monitorModule.js
View File

@@ -500,14 +500,6 @@ const getMonitorById = async (monitorId) => {
error.status = 404;
throw error;
}
// Get notifications
const notifications = await Notification.find({
monitorId: monitorId,
});
// Update monitor with notifications and save
monitor.notifications = notifications;
await monitor.save();
return monitor;
} catch (error) {
@@ -664,10 +656,8 @@ const getMonitorsWithChecksByTeamId = async (req) => {
const createMonitor = async (req, res) => {
try {
const monitor = new Monitor({ ...req.body });
// Remove notifications fom monitor as they aren't needed here
monitor.notifications = undefined;
await monitor.save();
return monitor;
const saved = await monitor.save();
return saved;
} catch (error) {
error.service = SERVICE_NAME;
error.method = "createMonitor";
@@ -764,8 +754,6 @@ const deleteMonitorsByUserId = async (userId) => {
* @throws {Error}
*/
const editMonitor = async (candidateId, candidateMonitor) => {
candidateMonitor.notifications = undefined;
try {
const editedMonitor = await Monitor.findByIdAndUpdate(candidateId, candidateMonitor, {
new: true,

1
server/db/mongo/modules/monitorModuleQueries.js
View File

@@ -148,6 +148,7 @@ const buildUptimeDetailsPipeline = (monitorId, dates, dateString) => {
type: 1,
url: 1,
isActive: 1,
notifications: 1,
},
},
],

4
server/service/bufferService.js
View File

@@ -1,5 +1,5 @@
const SERVICE_NAME = "BufferService";
const BUFFER_TIMEOUT = 1000 * 60 * 1; // 1 minute
const BUFFER_TIMEOUT = process.env.NODE_ENV === "development" ? 5000 : 1000 * 60 * 1; // 1 minute
const TYPE_MAP = {
http: "checks",
ping: "checks",
@@ -89,7 +89,7 @@ class BufferService {
}
this.buffers[bufferName] = [];
}
this.logger.info({
this.logger.debug({
message: `Flushed ${items} items`,
service: this.SERVICE_NAME,
method: "flushBuffers",

6
server/validation/joi.js
View File

@@ -183,7 +183,7 @@ const createMonitorBodyValidation = joi.object({
usage_disk: joi.number(),
usage_temperature: joi.number(),
}),
notifications: joi.array().items(joi.object()),
notifications: joi.array().items(joi.string()),
secret: joi.string(),
jsonPath: joi.string().allow(""),
expectedValue: joi.string().allow(""),
@@ -196,12 +196,12 @@ const editMonitorBodyValidation = joi.object({
name: joi.string(),
description: joi.string(),
interval: joi.number(),
notifications: joi.array().items(joi.object()),
notifications: joi.array().items(joi.string()),
secret: joi.string(),
ignoreTlsErrors: joi.boolean(),
jsonPath: joi.string().allow(""),
expectedValue: joi.string().allow(""),
matchMethod: joi.string(),
matchMethod: joi.string().allow(null, ""),
port: joi.number().min(1).max(65535),
thresholds: joi.object().keys({
usage_cpu: joi.number(),