416 lines
14 KiB
React
416 lines
14 KiB
React
import "./index.css";
|
|
import ConfigBox from "../../Components/ConfigBox";
|
|
import FlexibileTextField from "../../Components/TextFields/Flexibile/FlexibileTextField";
|
|
import React, { useState } from "react";
|
|
import RadioButton from "../../Components/RadioButton";
|
|
import CustomizableCheckBox from "../../Components/Checkbox/CustomizableCheckbox";
|
|
import Button from "../../Components/Button";
|
|
import { MenuItem, Select, Typography } from "@mui/material";
|
|
import { useSelector, useDispatch } from "react-redux";
|
|
import { createMonitorValidation } from "../../Validation/validation";
|
|
import { createMonitor } from "../../Features/Monitors/monitorsSlice";
|
|
import { useNavigate } from "react-router-dom";
|
|
|
|
const CreateNewMonitor = () => {
|
|
const MS_PER_MINUTE = 60000;
|
|
const { user, authToken } = useSelector((state) => state.auth);
|
|
const dispatch = useDispatch();
|
|
const navigate = useNavigate();
|
|
|
|
const [errors, setErrors] = useState({});
|
|
|
|
//General Settings Form
|
|
const [generalSettings, setGeneralSettings] = useState({ url: "", name: "" });
|
|
//Checks Form
|
|
const [checks, setChecks] = useState({
|
|
type: "",
|
|
// port: ""
|
|
});
|
|
//Incidents Form
|
|
// const [notifications, setNotifications] = useState({
|
|
// viaSms: false,
|
|
// viaEmail: false,
|
|
// viaOther: false,
|
|
// email: "",
|
|
// });
|
|
//Advanced Settings Form
|
|
const [advancedSettings, setAdvancedSettings] = useState({
|
|
frequency: 1,
|
|
// retries: "",
|
|
// codes: "",
|
|
// redirects: "",
|
|
});
|
|
//Proxy Settings Form
|
|
// const [proxy, setProxy] = useState({
|
|
// enabled: false,
|
|
// protocol: "",
|
|
// address: "",
|
|
// proxy_port: "",
|
|
// });
|
|
|
|
const handleChange = (event, id, setState, checkbox) => {
|
|
const { value } = event.target;
|
|
setState((prev) => ({
|
|
...prev,
|
|
[id]: checkbox ? true : value,
|
|
}));
|
|
|
|
const validation = createMonitorValidation.validate(
|
|
{ [id]: value },
|
|
{ abortEarly: false }
|
|
);
|
|
|
|
setErrors((prev) => {
|
|
const updatedErrors = { ...prev };
|
|
|
|
if (validation.error) {
|
|
updatedErrors[id] = validation.error.details[0].message;
|
|
} else {
|
|
delete updatedErrors[id];
|
|
}
|
|
return updatedErrors;
|
|
});
|
|
};
|
|
// const handleCheck = (id, setState) => {
|
|
// setState((prev) => ({
|
|
// ...prev,
|
|
// [id]: !prev[id],
|
|
// }));
|
|
// };
|
|
|
|
const handleCreateNewMonitor = async (event) => {
|
|
event.preventDefault();
|
|
//obj to submit
|
|
let monitor = {
|
|
...generalSettings,
|
|
...checks,
|
|
};
|
|
|
|
const { error } = createMonitorValidation.validate(monitor, {
|
|
abortEarly: false,
|
|
});
|
|
|
|
if (error) {
|
|
const newErrors = {};
|
|
error.details.forEach((err) => {
|
|
newErrors[err.path[0]] = err.message;
|
|
});
|
|
setErrors(newErrors);
|
|
} else {
|
|
monitor = {
|
|
...monitor,
|
|
description: monitor.name,
|
|
userId: user._id,
|
|
// ...advancedSettings, // TODO frequency should be interval, then we can use spread
|
|
interval: advancedSettings.frequency * MS_PER_MINUTE,
|
|
};
|
|
try {
|
|
const action = await dispatch(createMonitor({ authToken, monitor }));
|
|
if (action.meta.requestStatus === "fulfilled") {
|
|
navigate("/monitors");
|
|
}
|
|
} catch (error) {
|
|
alert(error);
|
|
}
|
|
}
|
|
};
|
|
|
|
//select values
|
|
// const ports = ["Port 1", "Port 2", "Port 3"];
|
|
const frequencies = [1, 2, 3, 4, 5];
|
|
|
|
return (
|
|
<form onSubmit={handleCreateNewMonitor} noValidate spellCheck="false">
|
|
<div className="new-monitor-header">Create new monitor</div>
|
|
<div className="monitors-gaps-medium"></div>
|
|
<ConfigBox
|
|
leftLayout={
|
|
<div className="config-box-desc">
|
|
<div className="config-box-desc-title">General settings</div>
|
|
<div className="config-box-desc-text">
|
|
Here you can select the URL of the host, together with the type of
|
|
monitor.
|
|
</div>
|
|
</div>
|
|
}
|
|
rightLayout={
|
|
<div className="config-box-inputs">
|
|
<FlexibileTextField
|
|
id="monitor-url"
|
|
title="URL to monitor"
|
|
type="url"
|
|
placeholder="https://google.com"
|
|
value={generalSettings.url}
|
|
onChange={(event) =>
|
|
handleChange(event, "url", setGeneralSettings)
|
|
}
|
|
/>
|
|
{errors["url"] ? (
|
|
<Typography variant="h5" component="p" className="input-error">
|
|
{errors["url"]}
|
|
</Typography>
|
|
) : (
|
|
""
|
|
)}
|
|
<div className="monitors-gaps-medium"></div>
|
|
<FlexibileTextField
|
|
id="monitor-name"
|
|
title="Friendly name (optional)"
|
|
type="text"
|
|
placeholder="Google"
|
|
value={generalSettings.name}
|
|
onChange={(event) =>
|
|
handleChange(event, "name", setGeneralSettings)
|
|
}
|
|
/>
|
|
{errors["name"] ? (
|
|
<Typography variant="h5" component="p" className="input-error">
|
|
{errors["name"]}
|
|
</Typography>
|
|
) : (
|
|
""
|
|
)}
|
|
</div>
|
|
}
|
|
/>
|
|
<div className="monitors-gaps-medium"></div>
|
|
<div className="monitors-gaps-medium"></div>
|
|
<ConfigBox
|
|
leftLayout={
|
|
<div className="config-box-desc">
|
|
<div className="config-box-desc-title">Checks to perform</div>
|
|
<div className="config-box-desc-text">
|
|
You can always add or remove checks after adding your site.
|
|
</div>
|
|
</div>
|
|
}
|
|
rightLayout={
|
|
<div className="service-check-list">
|
|
<RadioButton
|
|
id="monitor-checks-http"
|
|
title="HTTP/website monitoring"
|
|
desc="Use HTTP(s) to monitor your website or API endpoint."
|
|
value="http"
|
|
checked={checks.type === "http"}
|
|
onChange={(event) => handleChange(event, "type", setChecks)}
|
|
/>
|
|
<div className="monitors-gaps-medium"></div>
|
|
<RadioButton
|
|
id="monitor-checks-ping"
|
|
title="Ping monitoring"
|
|
desc="Check whether your server is available or not."
|
|
value="ping"
|
|
checked={checks.type === "ping"}
|
|
onChange={(event) => handleChange(event, "type", setChecks)}
|
|
/>
|
|
<div className="monitors-gaps-medium"></div>
|
|
{/* TODO */}
|
|
{/* <RadioButton
|
|
id="monitor-checks-port"
|
|
title="Port monitoring"
|
|
desc="Monitor a specific service on your server."
|
|
value="port"
|
|
checked={checks.type === "port"}
|
|
onChange={(event) => handleChange(event, "type", setChecks)}
|
|
/>
|
|
<div className="monitors-gaps-small-plus"></div>
|
|
<div className="monitors-dropdown-holder">
|
|
<Select
|
|
id="monitor-ports"
|
|
value={checks.port || "placeholder"}
|
|
inputProps={{ id: "monitor-ports-select" }}
|
|
onChange={(event) => handleChange(event, "port", setChecks)}
|
|
>
|
|
<MenuItem id="port-placeholder" value="placeholder">
|
|
Select a port to check
|
|
</MenuItem>
|
|
{ports.map((port, index) => (
|
|
<MenuItem key={`port-${index}`} value={port}>
|
|
{port}
|
|
</MenuItem>
|
|
))}
|
|
</Select>
|
|
</div> */}
|
|
{errors["type"] ? (
|
|
<Typography variant="h5" component="p" className="input-error">
|
|
{errors["type"]}
|
|
</Typography>
|
|
) : (
|
|
""
|
|
)}
|
|
</div>
|
|
}
|
|
/>
|
|
{/* TODO */}
|
|
{/* <div className="monitors-gaps-medium"></div>
|
|
<div className="monitors-gaps-medium"></div>
|
|
<ConfigBox
|
|
leftLayout={
|
|
<div className="config-box-desc">
|
|
<div className="config-box-desc-title">Incident notifications</div>
|
|
<div className="config-box-desc-text">
|
|
When there is an incident, notify users.
|
|
</div>
|
|
</div>
|
|
}
|
|
rightLayout={
|
|
<div className="incident-notif-config">
|
|
<div className="incident-notif-config-title">
|
|
When there is a new incident,
|
|
</div>
|
|
<div className="monitors-gaps-medium"></div>
|
|
<div className="incident-notif-config-checks">
|
|
<CustomizableCheckBox
|
|
id="monitor-notify-sms"
|
|
title="Notify via SMS (to be implemented)"
|
|
isChecked={notifications.viaSms}
|
|
handleChange={() => handleCheck("viaSms", setNotifications)}
|
|
/>
|
|
<div className="monitors-gaps-medium"></div>
|
|
<CustomizableCheckBox
|
|
id="monitor-notify-email"
|
|
title="Notify via email (to current email address)"
|
|
isChecked={notifications.viaEmail}
|
|
handleChange={() => handleCheck("viaEmail", setNotifications)}
|
|
/>
|
|
<div className="monitors-gaps-medium"></div>
|
|
<CustomizableCheckBox
|
|
id="monitor-notify-other"
|
|
title="Notify via email (to another email address below)"
|
|
isChecked={notifications.viaOther}
|
|
handleChange={() => handleCheck("viaOther", setNotifications)}
|
|
/>
|
|
<div className="monitors-gaps-small-plus"></div>
|
|
<div className="monitors-dropdown-holder">
|
|
<FlexibileTextField
|
|
id="monitor-notify-other-email"
|
|
placeholder="notifications@gmail.com"
|
|
type="email"
|
|
value={notifications.email}
|
|
onChange={(event) =>
|
|
handleChange(event, "email", setNotifications)
|
|
}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
/> */}
|
|
<div className="monitors-gaps-medium"></div>
|
|
<div className="monitors-gaps-medium"></div>
|
|
<ConfigBox
|
|
leftLayout={
|
|
<div className="config-box-desc">
|
|
<div className="config-box-desc-title">Advanced settings</div>
|
|
</div>
|
|
}
|
|
rightLayout={
|
|
<div className="advanced-setting-config">
|
|
<div className="adv-setting-title">Check frequency</div>
|
|
<div className="monitors-gaps-small"></div>
|
|
<Select
|
|
id="monitor-frequencies"
|
|
value={advancedSettings.frequency || 1}
|
|
inputProps={{ id: "monitor-frequencies-select" }}
|
|
onChange={(event) =>
|
|
handleChange(event, "frequency", setAdvancedSettings)
|
|
}
|
|
>
|
|
{frequencies.map((freq) => (
|
|
<MenuItem key={`port-${freq}`} value={freq}>
|
|
{freq} {freq === 1 ? "minute" : "minutes"}
|
|
</MenuItem>
|
|
))}
|
|
</Select>
|
|
<div className="monitors-gaps-medium"></div>
|
|
{/* TODO */}
|
|
{/* <FlexibileTextField
|
|
id="monitor-settings-retries"
|
|
title="Maximum retries before the service is marked as down"
|
|
type="number"
|
|
value={advancedSettings.retries}
|
|
onChange={(event) =>
|
|
handleChange(event, "retries", setAdvancedSettings)
|
|
}
|
|
/>
|
|
<div className="monitors-gaps-medium"></div>
|
|
<FlexibileTextField
|
|
id="monitor-settings-codes"
|
|
title="Accepted status codes"
|
|
type="number"
|
|
value={advancedSettings.codes}
|
|
onChange={(event) =>
|
|
handleChange(event, "codes", setAdvancedSettings)
|
|
}
|
|
/>
|
|
<div className="monitors-gaps-medium"></div>
|
|
<FlexibileTextField
|
|
id="monitor-settings-redirects"
|
|
title="Maximum redirects"
|
|
type="number"
|
|
value={advancedSettings.redirects}
|
|
onChange={(event) =>
|
|
handleChange(event, "redirects", setAdvancedSettings)
|
|
}
|
|
/> */}
|
|
</div>
|
|
}
|
|
/>
|
|
{/* TODO */}
|
|
{/* <div className="monitors-gaps-medium"></div>
|
|
<div className="monitors-gaps-medium"></div>
|
|
<ConfigBox
|
|
leftLayout={
|
|
<div className="config-box-desc">
|
|
<div className="config-box-desc-title">Proxy settings</div>
|
|
</div>
|
|
}
|
|
rightLayout={
|
|
<div className="proxy-setting-config">
|
|
<CustomizableCheckBox
|
|
id="monitor-proxy-enable"
|
|
title="Enable proxy"
|
|
isChecked={proxy.enabled}
|
|
handleChange={() => handleCheck("enabled", setProxy)}
|
|
/>
|
|
<div className="monitors-gaps-medium"></div>
|
|
<FlexibileTextField
|
|
id="monitor-proxy-protocol"
|
|
title="Proxy protocol"
|
|
value={proxy.protocol}
|
|
onChange={(event) => handleChange(event, "protocol", setProxy)}
|
|
/>
|
|
<div className="monitors-gaps-medium"></div>
|
|
<FlexibileTextField
|
|
id="monitor-proxy-address"
|
|
title="Proxy address"
|
|
value={proxy.address}
|
|
onChange={(event) => handleChange(event, "address", setProxy)}
|
|
/>
|
|
<div className="monitors-gaps-medium"></div>
|
|
<FlexibileTextField
|
|
id="monitor-proxy-port"
|
|
title="Proxy port"
|
|
value={proxy.proxy_port}
|
|
onChange={(event) => handleChange(event, "proxy_port", setProxy)}
|
|
/>
|
|
</div>
|
|
}
|
|
/> */}
|
|
<div className="monitors-gaps-medium"></div>
|
|
<div className="monitors-gaps-small"></div>
|
|
<div className="monitors-create-button-holder">
|
|
<Button
|
|
id="create-new-monitor-btn"
|
|
level="primary"
|
|
label="Create new monitor"
|
|
sx={{ width: "210px", fontSize: "var(--env-var-font-size-medium)" }}
|
|
onClick={handleCreateNewMonitor}
|
|
/>
|
|
</div>
|
|
</form>
|
|
);
|
|
};
|
|
|
|
export default CreateNewMonitor;
|