Merge branch 'develop' into fix/fe/create-monitor-field-adornment

This commit is contained in:
Alexander Holliday
2024-12-03 17:42:01 -08:00
committed by GitHub
8 changed files with 258 additions and 231 deletions

View File

@@ -28,7 +28,7 @@
"react-router": "^6.23.0",
"react-router-dom": "^6.23.1",
"react-toastify": "^10.0.5",
"recharts": "2.14.0",
"recharts": "2.14.1",
"redux-persist": "6.0.0",
"vite-plugin-svgr": "^4.2.0"
},
@@ -5442,9 +5442,9 @@
}
},
"node_modules/recharts": {
"version": "2.14.0",
"resolved": "https://registry.npmjs.org/recharts/-/recharts-2.14.0.tgz",
"integrity": "sha512-kgDvDdNOh/gHQ4Q8hu7VrLNKs/bP/meG/XaRnsQG+Yp4PxugfPvaRFC0m4q7RWdlw0HxIkTSdcsGrsVQsg2qTA==",
"version": "2.14.1",
"resolved": "https://registry.npmjs.org/recharts/-/recharts-2.14.1.tgz",
"integrity": "sha512-xtWulflkA+/xu4/QClBdtZYN30dbvTHjxjkh5XTMrH/CQ3WGDDPHHa/LLKCbgoqz0z3UaSH2/blV1i6VNMeh1g==",
"license": "MIT",
"dependencies": {
"clsx": "^2.0.0",

View File

@@ -31,7 +31,7 @@
"react-router": "^6.23.0",
"react-router-dom": "^6.23.1",
"react-toastify": "^10.0.5",
"recharts": "2.14.0",
"recharts": "2.14.1",
"redux-persist": "6.0.0",
"vite-plugin-svgr": "^4.2.0"
},

View File

@@ -1,61 +1,54 @@
import { useState, useEffect } from "react";
import { Box, Button, ButtonGroup, Stack, Typography } from "@mui/material";
import LoadingButton from "@mui/lab/LoadingButton";
import { useSelector, useDispatch } from "react-redux";
import { monitorValidation } from "../../../Validation/validation";
import { createUptimeMonitor } from "../../../Features/UptimeMonitors/uptimeMonitorsSlice";
import { checkEndpointResolution } from "../../../Features/UptimeMonitors/uptimeMonitorsSlice";
import { useNavigate, useParams } from "react-router-dom";
// React, Redux, Router
import { useTheme } from "@emotion/react";
import { createToast } from "../../../Utils/toastUtils";
import { logger } from "../../../Utils/Logger";
import { useNavigate, useParams } from "react-router-dom";
import { useEffect } from "react";
import { useState } from "react";
import { useSelector, useDispatch } from "react-redux";
// 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";
import LoadingButton from "@mui/lab/LoadingButton";
//Components
import Breadcrumbs from "../../../Components/Breadcrumbs";
import { ConfigBox } from "../styled";
import Radio from "../../../Components/Inputs/Radio";
import TextInput from "../../../Components/Inputs/TextInput";
import { HttpAdornment } from "../../../Components/Inputs/TextInput/Adornments";
import Select from "../../../Components/Inputs/Select";
import { createToast } from "../../../Utils/toastUtils";
import Radio from "../../../Components/Inputs/Radio";
import Checkbox from "../../../Components/Inputs/Checkbox";
import Breadcrumbs from "../../../Components/Breadcrumbs";
import { getUptimeMonitorById } from "../../../Features/UptimeMonitors/uptimeMonitorsSlice";
import "./index.css";
import { parseDomainName } from "../../../Utils/monitorUtils";
import Select from "../../../Components/Inputs/Select";
const CreateMonitor = () => {
const MS_PER_MINUTE = 60000;
const SELECT_VALUES = [
{ _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 { user, authToken } = useSelector((state) => state.auth);
const { monitors, isLoading } = useSelector((state) => state.uptimeMonitors);
const dispatch = useDispatch();
const navigate = useNavigate();
const theme = useTheme();
const idMap = {
"monitor-url": "url",
"monitor-name": "name",
"monitor-checks-http": "type",
"monitor-checks-ping": "type",
"monitor-checks-docker": "type",
"notify-email-default": "notification-email",
};
const monitorTypeMaps = {
http: {
label: "URL to monitor",
placeholder: "google.com",
namePlaceholder: "Google",
},
ping: {
label: "IP address to monitor",
placeholder: "1.1.1.1",
namePlaceholder: "Google",
},
docker: {
label: "Container ID",
placeholder: "abc123",
namePlaceholder: "My Container",
},
};
const { monitorId } = useParams();
const crumbs = [
{ name: "monitors", path: "/monitors" },
{ name: "create", path: `/monitors/create` },
];
// State
const [errors, setErrors] = useState({});
const [https, setHttps] = useState(true);
const [monitor, setMonitor] = useState({
url: "",
name: "",
@@ -63,8 +56,107 @@ const CreateMonitor = () => {
notifications: [],
interval: 1,
});
const [https, setHttps] = useState(true);
const [errors, setErrors] = useState({});
const handleCreateMonitor = async (event) => {
event.preventDefault();
let form = {
url:
//prepending protocol for url
monitor.type === "http"
? `http${https ? "s" : ""}://` + monitor.url
: monitor.url,
name: monitor.name === "" ? monitor.url : monitor.name,
type: monitor.type,
interval: monitor.interval * MS_PER_MINUTE,
};
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: "Please check the form for errors." });
return;
}
if (monitor.type === "http") {
const checkEndpointAction = await dispatch(
checkEndpointResolution({ authToken, monitorURL: form.url })
);
if (checkEndpointAction.meta.requestStatus === "rejected") {
createToast({
body: "The endpoint you entered doesn't resolve. Check the URL again.",
});
setErrors({ url: "The entered URL is not reachable." });
return;
}
}
form = {
...form,
description: form.name,
teamId: user.teamId,
userId: user._id,
notifications: monitor.notifications,
};
const action = await dispatch(createUptimeMonitor({ authToken, monitor: form }));
if (action.meta.requestStatus === "fulfilled") {
createToast({ body: "Monitor created successfully!" });
navigate("/monitors");
} else {
createToast({ body: "Failed to create monitor." });
}
};
const handleChange = (event, formName) => {
const { value } = event.target;
setMonitor({
...monitor,
[formName]: value,
});
const { error } = monitorValidation.validate(
{ [formName]: value },
{ abortEarly: false }
);
setErrors((prev) => ({
...prev,
...(error ? { [formName]: error.details[0].message } : { [formName]: 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 () => {
@@ -94,143 +186,14 @@ const CreateMonitor = () => {
fetchMonitor();
}, [monitorId, authToken, monitors, dispatch, navigate]);
const handleChange = (event, name) => {
const { 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 {
setMonitor((prev) => ({
...prev,
[name]: value,
}));
const { error } = monitorValidation.validate(
{ [name]: value },
{ abortEarly: false }
);
setErrors((prev) => {
const updatedErrors = { ...prev };
if (error) updatedErrors[name] = error.details[0].message;
else delete updatedErrors[name];
return updatedErrors;
});
}
};
const onUrlBlur = (event) => {
const { value } = event.target;
setMonitor((prev) => ({
...prev,
name: parseDomainName(value),
}));
};
const handleCreateMonitor = async (event) => {
event.preventDefault();
//obj to submit
let form = {
url:
//preprending protocol for url
monitor.type === "http"
? `http${https ? "s" : ""}://` + monitor.url
: monitor.url,
name: monitor.name === "" ? monitor.url : monitor.name,
type: monitor.type,
interval: monitor.interval * MS_PER_MINUTE,
};
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: "Error validation data." });
} else {
if (monitor.type === "http") {
const checkEndpointAction = await dispatch(
checkEndpointResolution({ authToken, monitorURL: form.url })
);
if (checkEndpointAction.meta.requestStatus === "rejected") {
createToast({
body: "The endpoint you entered doesn't resolve. Check the URL again.",
});
setErrors({ url: "The entered URL is not reachable." });
return;
}
}
form = {
...form,
description: form.name,
teamId: user.teamId,
userId: user._id,
notifications: monitor.notifications,
};
const action = await dispatch(createUptimeMonitor({ authToken, monitor: form }));
if (action.meta.requestStatus === "fulfilled") {
createToast({ body: "Monitor created successfully!" });
navigate("/monitors");
} else {
createToast({ body: "Failed to create monitor." });
}
}
};
//select values
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" },
];
console.log(monitor.type);
return (
<Box className="create-monitor">
<Breadcrumbs
list={[
{ name: "monitors", path: "/monitors" },
{ name: "create", path: `/monitors/create` },
]}
/>
<Breadcrumbs list={crumbs} />
<Stack
component="form"
className="create-monitor-form"
onSubmit={handleCreateMonitor}
noValidate
spellCheck="false"
gap={theme.spacing(12)}
mt={theme.spacing(6)}
onSubmit={handleCreateMonitor}
>
<Typography
component="h1"
@@ -251,6 +214,7 @@ const CreateMonitor = () => {
monitor
</Typography>
</Typography>
<ConfigBox>
<Box>
<Typography component="h2">General settings</Typography>
@@ -269,8 +233,7 @@ const CreateMonitor = () => {
https={https}
placeholder={monitorTypeMaps[monitor.type].placeholder || ""}
value={monitor.url}
onChange={handleChange}
onBlur={onUrlBlur}
onChange={(event) => handleChange(event, "url")}
error={errors["url"] ? true : false}
helperText={errors["url"]}
/>
@@ -279,9 +242,8 @@ const CreateMonitor = () => {
id="monitor-name"
label="Display name"
isOptional={true}
placeholder={monitorTypeMaps[monitor.type].namePlaceholder || ""}
value={monitor.name}
onChange={handleChange}
onChange={(event) => handleChange(event, "name")}
error={errors["name"] ? true : false}
helperText={errors["name"]}
/>
@@ -303,7 +265,7 @@ const CreateMonitor = () => {
size="small"
value="http"
checked={monitor.type === "http"}
onChange={(event) => handleChange(event)}
onChange={(event) => handleChange(event, "type")}
/>
{monitor.type === "http" ? (
<ButtonGroup sx={{ ml: theme.spacing(16) }}>
@@ -333,7 +295,7 @@ const CreateMonitor = () => {
size="small"
value="ping"
checked={monitor.type === "ping"}
onChange={(event) => handleChange(event)}
onChange={(event) => handleChange(event, "type")}
/>
<Radio
id="monitor-checks-docker"
@@ -342,7 +304,7 @@ const CreateMonitor = () => {
size="small"
value="docker"
checked={monitor.type === "docker"}
onChange={(event) => handleChange(event)}
onChange={(event) => handleChange(event, "type")}
/>
{errors["type"] ? (
<Box className="error-container">
@@ -368,14 +330,7 @@ const CreateMonitor = () => {
</Box>
<Stack gap={theme.spacing(6)}>
<Typography component="p">When there is a new incident,</Typography>
<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})`}
@@ -383,34 +338,8 @@ const CreateMonitor = () => {
(notification) => notification.type === "email"
)}
value={user?.email}
onChange={(event) => handleChange(event)}
onChange={(event) => handleNotifications(event, "email")}
/>
<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>
@@ -423,7 +352,7 @@ const CreateMonitor = () => {
label="Check frequency"
value={monitor.interval || 1}
onChange={(event) => handleChange(event, "interval")}
items={frequencies}
items={SELECT_VALUES}
/>
</Stack>
</ConfigBox>
@@ -435,7 +364,7 @@ const CreateMonitor = () => {
variant="contained"
color="primary"
onClick={handleCreateMonitor}
disabled={Object.keys(errors).length !== 0 && true}
disabled={!Object.values(errors).every((value) => value === undefined)}
loading={isLoading}
>
Create monitor

View File

@@ -93,6 +93,20 @@ const baseTheme = (palette) => ({
"&:hover": {
boxShadow: "none",
},
"&.MuiLoadingButton-root": {
"&:disabled": {
backgroundColor: theme.palette.secondary.main,
color: theme.palette.text.primary,
},
},
"&.MuiLoadingButton-loading": {
"& .MuiLoadingButton-label": {
color: "transparent",
},
"& .MuiLoadingButton-loadingIndicator": {
color: "inherit",
},
},
}),
},
},
@@ -218,6 +232,10 @@ const baseTheme = (palette) => ({
fontSize: "var(--env-var-font-size-medium)",
fontWeight: 400,
color: palette.text.secondary,
"&.Mui-disabled": {
opacity: 0.25,
"-webkit-text-fill-color": "unset",
},
},
"& .MuiInputBase-input.MuiOutlinedInput-input": {
padding: "0 var(--env-var-spacing-1-minus) !important",

View File

@@ -0,0 +1,19 @@
version: "3"
services:
webserver:
image: nginx:latest
ports:
- 80:80
- 443:443
restart: always
volumes:
- ./nginx/conf.d/:/etc/nginx/conf.d/:ro
- ./certbot/www/:/var/www/certbot/:ro
certbot:
image: certbot/certbot:latest
volumes:
- ./certbot/www/:/var/www/certbot/:rw
- ./certbot/conf/:/etc/letsencrypt/:rw
depends_on:
- webserver

View File

@@ -1,5 +1,6 @@
import HardwareCheck from "../../models/HardwareCheck.js";
import Monitor from "../../models/Monitor.js";
import logger from "../../../utils/logger.js";
const SERVICE_NAME = "hardwareCheckModule";
const createHardwareCheck = async (hardwareCheckData) => {
@@ -15,6 +16,7 @@ const createHardwareCheck = async (hardwareCheckData) => {
method: "createHardwareCheck",
details: `monitor ID: ${monitorId}`,
});
return null;
}
if (monitor.uptimePercentage === undefined) {

View File

@@ -2179,9 +2179,9 @@
}
},
"node_modules/dotenv": {
"version": "16.4.6",
"resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.6.tgz",
"integrity": "sha512-JhcR/+KIjkkjiU8yEpaB/USlzVi3i5whwOjpIRNGi9svKEXZSe+Qp6IWAjFjv+2GViAoDRCUv/QLNziQxsLqDg==",
"version": "16.4.7",
"resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.7.tgz",
"integrity": "sha512-47qPchRCykZC03FhkYAhrvwU4xDBFIj1QPqaarj6mdM/hgUzfPHcpkHJOn3mJAufFeeAxAzeGsr5X0M4k6fLZQ==",
"license": "BSD-2-Clause",
"engines": {
"node": ">=12"

View File

@@ -1,6 +1,8 @@
import sinon from "sinon";
import HardwareCheck from "../../db/models/HardwareCheck.js";
import { createHardwareCheck } from "../../db/mongo/modules/hardwareCheckModule.js";
import Monitor from "../../db/models/Monitor.js";
import logger from "../../utils/logger.js";
const mockHardwareCheck = {
data: {
@@ -42,10 +44,23 @@ const mockHardwareCheck = {
],
};
const mockMonitor = {
_id: "123",
uptimePercentage: 1,
status: true,
save: () => this,
};
describe("HardwareCheckModule", () => {
let hardwareCheckSaveStub;
let hardwareCheckSaveStub,
hardwareCheckCountDocumentsStub,
monitorFindByIdStub,
loggerStub;
beforeEach(() => {
loggerStub = sinon.stub(logger, "error");
hardwareCheckSaveStub = sinon.stub(HardwareCheck.prototype, "save");
monitorFindByIdStub = sinon.stub(Monitor, "findById");
hardwareCheckCountDocumentsStub = sinon.stub(HardwareCheck, "countDocuments");
});
afterEach(() => {
@@ -55,12 +70,23 @@ describe("HardwareCheckModule", () => {
describe("createHardwareCheck", () => {
it("should return a hardware check", async () => {
hardwareCheckSaveStub.resolves(mockHardwareCheck);
const hardwareCheck = await createHardwareCheck({});
monitorFindByIdStub.resolves(mockMonitor);
hardwareCheckCountDocumentsStub.resolves(1);
const hardwareCheck = await createHardwareCheck({ status: true });
expect(hardwareCheck).to.exist;
expect(hardwareCheck).to.deep.equal(mockHardwareCheck);
});
it("should return a hardware check for a check with status false", async () => {
hardwareCheckSaveStub.resolves(mockHardwareCheck);
monitorFindByIdStub.resolves(mockMonitor);
hardwareCheckCountDocumentsStub.resolves(1);
const hardwareCheck = await createHardwareCheck({ status: false });
expect(hardwareCheck).to.exist;
expect(hardwareCheck).to.deep.equal(mockHardwareCheck);
});
it("should handle an error", async () => {
const err = new Error("test error");
monitorFindByIdStub.resolves(mockMonitor);
hardwareCheckSaveStub.rejects(err);
try {
await createHardwareCheck({});
@@ -69,5 +95,38 @@ describe("HardwareCheckModule", () => {
expect(error).to.deep.equal(err);
}
});
it("should log an error if a monitor is not found", async () => {
monitorFindByIdStub.resolves(null);
const res = await createHardwareCheck({});
expect(loggerStub.calledOnce).to.be.true;
expect(res).to.be.null;
});
it("should handle a monitor with undefined uptimePercentage", async () => {
monitorFindByIdStub.resolves({ ...mockMonitor, uptimePercentage: undefined });
hardwareCheckSaveStub.resolves(mockHardwareCheck);
hardwareCheckCountDocumentsStub.resolves(1);
const res = await createHardwareCheck({});
expect(res).to.exist;
});
it("should handle a monitor with undefined uptimePercentage and true status", async () => {
monitorFindByIdStub.resolves({
...mockMonitor,
uptimePercentage: undefined,
});
hardwareCheckSaveStub.resolves(mockHardwareCheck);
hardwareCheckCountDocumentsStub.resolves(1);
const res = await createHardwareCheck({ status: true });
expect(res).to.exist;
});
it("should handle a monitor with undefined uptimePercentage and false status", async () => {
monitorFindByIdStub.resolves({
...mockMonitor,
uptimePercentage: undefined,
});
hardwareCheckSaveStub.resolves(mockHardwareCheck);
hardwareCheckCountDocumentsStub.resolves(1);
const res = await createHardwareCheck({ status: false });
expect(res).to.exist;
});
});
});