{
+const FlexibileTextField = ({
+ id,
+ title,
+ type,
+ placeholder,
+ value,
+ onChange,
+}) => {
return (
{title}
{
+ try {
+ const { authToken, monitor } = data;
+
+ const res = await axios.post(`${BASE_URL}/monitors`, monitor, {
+ headers: {
+ Authorization: `Bearer ${authToken}`,
+ "Content-Type": "application/json",
+ },
+ });
+ return res.data;
+ } catch (error) {
+ if (error.response && error.response.data) {
+ return thunkApi.rejectWithValue(error.response.data);
+ }
+ return thunkApi.rejectWithValue(error.message);
+ }
+ }
+);
+
export const getMonitors = createAsyncThunk(
"monitors/getMonitors",
async (token, thunkApi) => {
@@ -99,6 +122,25 @@ const monitorsSlice = createSlice({
state.msg = action.payload
? action.payload.msg
: "Getting montiors failed";
+ })
+
+ // *****************************************************
+ // Create Monitor
+ // *****************************************************
+ .addCase(createMonitor.pending, (state) => {
+ state.isLoading = true;
+ })
+ .addCase(createMonitor.fulfilled, (state, action) => {
+ state.isLoading = false;
+ state.success = action.payload.success;
+ state.msg = action.payload.msg;
+ })
+ .addCase(createMonitor.rejected, (state, action) => {
+ state.isLoading = false;
+ state.success = false;
+ state.msg = action.payload
+ ? action.payload.msg
+ : "Failed to create monitor";
});
},
});
diff --git a/Client/src/Pages/Account/index.css b/Client/src/Pages/Account/index.css
new file mode 100644
index 000000000..212292d9b
--- /dev/null
+++ b/Client/src/Pages/Account/index.css
@@ -0,0 +1,200 @@
+.account h1.MuiTypography-root,
+.account p.MuiTypography-root,
+.account input,
+.account button,
+.account td,
+.account .MuiSelect-select {
+ font-size: var(--env-var-font-size-medium);
+}
+.account h1.MuiTypography-root,
+.account p.MuiTypography-root,
+.account input,
+.account .MuiSelect-select {
+ color: var(--env-var-color-2);
+}
+.account h1.MuiTypography-root {
+ font-weight: 600;
+}
+.account .MuiStack-root:not(.table-stack) {
+ flex: 1;
+ -webkit-flex: 1;
+ -ms-flex: 1;
+}
+.account .MuiTabPanel-root {
+ padding: 0;
+ margin-top: 50px;
+}
+.account .MuiDivider-root:not(.short-divider) {
+ margin: 50px 0;
+}
+.account .MuiDivider-root,
+.account .MuiOutlinedInput-root fieldset,
+.account .announcement-tile {
+ border-color: var(--env-var-color-29);
+}
+.account [class$="-form"] {
+ width: inherit;
+}
+.account [class$="__wrapper"],
+.account [class$="__wrapper compact"] {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: flex-start;
+}
+.edit-profile-form__wrapper .MuiStack-root:not(.row-stack),
+.edit-password-form__wrapper .MuiStack-root:not(.row-stack),
+.edit-organization-form__wrapper .MuiStack-root:not(.row-stack) {
+ flex-direction: column;
+ gap: 8px;
+ margin-right: 10px;
+}
+.edit-profile-form__wrapper p.MuiTypography-root,
+.delete-profile-form__wrapper p.MuiTypography-root {
+ opacity: 0.6;
+}
+#modal-delete-account,
+#modal-edit-org-name,
+#modal-invite-member {
+ font-size: var(--env-var-font-size-large);
+}
+.edit-profile-form__wrapper:not(:first-of-type),
+.edit-password-form__wrapper:not(:first-of-type),
+.edit-team-form__wrapper:not(:first-of-type) {
+ margin-top: var(--env-var-spacing-4);
+}
+.edit-team-form__wrapper.compact {
+ margin-top: var(--env-var-spacing-3);
+ justify-content: flex-start;
+ align-items: center;
+}
+.edit-profile-form__wrapper input,
+.edit-password-form__wrapper input,
+#edit-organization-name,
+#input-team-member {
+ padding: 10px;
+}
+.edit-password-form__wrapper > .announcement-tile {
+ width: 100%;
+}
+.edit-password-form__wrapper
+ > .announcement-tile
+ .announcement-content-subject {
+ margin-bottom: 2px;
+}
+#edit-new-password + div > button > svg,
+#edit-confirm-password + div > button > svg,
+#edit-current-password + div > button > svg {
+ color: var(--env-var-color-29);
+}
+.edit-password-form__wrapper .announcement-tile {
+ margin: 0;
+}
+.edit-password-form__wrapper .announcement-tile .announcement-close {
+ margin-left: auto;
+}
+.MuiBox-root > .announcement-tile {
+ border-color: var(--env-var-color-27);
+ background-color: var(--lighter-env-var-color-27);
+}
+.MuiBox-root > .announcement-tile .announcement-content-body {
+ color: var(--env-var-color-28);
+}
+.MuiBox-root > .announcement-tile .announcement-close svg,
+.edit-password-form__wrapper > .announcement-tile .announcement-close svg {
+ display: none;
+}
+#org-name-flex-container .Mui-disabled {
+ color: var(--env-var-color-2) !important;
+}
+
+.edit-team-form__wrapper td {
+ padding: 10px 0;
+ padding-top: 20px;
+ vertical-align: text-top;
+}
+.edit-team-form__wrapper th {
+ padding: var(--env-var-spacing-1) 0;
+}
+.edit-team-form__wrapper th:first-of-type {
+ padding-left: 20px;
+}
+.edit-team-form__wrapper td {
+ color: var(--env-var-color-25);
+}
+
+#select-actions,
+#select-role {
+ padding: 5px 0;
+ padding-left: 15px;
+ padding-right: 50px;
+ line-height: 1.75;
+}
+.MuiInputBase-root:has(#select-actions) fieldset,
+.MuiInputBase-root:has(#select-role) fieldset {
+ border-color: #a1a7b1;
+ margin: -1px;
+ border-width: 1px;
+}
+.MuiInputBase-root:has(#select-actions):hover fieldset,
+.MuiInputBase-root:has(#select-role):hover fieldset {
+ border-color: var(--env-var-color-2);
+}
+
+.MuiStack-root:has(.MuiBox-root > .members-query) .MuiBox-root {
+ cursor: pointer;
+}
+.members-query {
+ display: inline-flex;
+ justify-content: center;
+ align-items: center;
+ margin-left: 6px;
+ padding: 2px;
+ font-size: 12px;
+ font-weight: 500;
+ color: var(--env-var-color-3);
+ background-color: #e0e9fd;
+ min-width: 22px;
+ min-height: 22px;
+ border-radius: 50%;
+}
+
+/* for testing, will remove later */
+@media only screen and (max-width: 1600px) {
+ .edit-profile-form__wrapper .MuiStack-root:not(.row-stack),
+ .edit-password-form__wrapper .MuiStack-root:not(.row-stack),
+ .edit-organization-form__wrapper .MuiStack-root:not(.row-stack) {
+ margin-right: 30px;
+ }
+}
+
+.account .MuiStack-root:has(p.MuiTypography-root.input-error) {
+ position: relative;
+}
+.account .text-field-icon {
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ width: 18px !important;
+ height: 18px !important;
+ opacity: 0.8;
+}
+.account p.MuiTypography-root.input-error {
+ color: var(--env-var-color-24);
+ opacity: 0.8;
+ position: absolute;
+ top: calc(100% + 5px);
+}
+.account .email-text-field,
+.account .password-text-field {
+ margin: 0;
+}
+
+.edit-profile-form__wrapper .MuiFormControl-root,
+.edit-password-form__wrapper .MuiFormControl-root {
+ width: 100%;
+}
+.edit-profile-form__wrapper .MuiStack-root:has(.MuiFormControl-root),
+.edit-password-form__wrapper .MuiStack-root:has(.MuiFormControl-root) {
+ margin: 0;
+}
\ No newline at end of file
diff --git a/Client/src/Pages/Account/index.jsx b/Client/src/Pages/Account/index.jsx
new file mode 100644
index 000000000..1a24bb36e
--- /dev/null
+++ b/Client/src/Pages/Account/index.jsx
@@ -0,0 +1,84 @@
+import PropTypes from "prop-types";
+import { useState } from "react";
+import { Box, Tab, useTheme } from "@mui/material";
+import TabContext from "@mui/lab/TabContext";
+import TabList from "@mui/lab/TabList";
+import "./index.css";
+import ProfilePanel from "../../Components/TabPanels/Account/ProfilePanel";
+import PasswordPanel from "../../Components/TabPanels/Account/PasswordPanel";
+import TeamPanel from "../../Components/TabPanels/Account/TeamPanel";
+import { useNavigate } from "react-router";
+
+/**
+ * Account component renders a settings page with tabs for Profile, Password, and Team settings.
+ * @param {string} [props.open] - Specifies the initially open tab: 'profile', 'password', or 'team'.
+ * @returns {JSX.Element}
+ */
+
+const tabList = ["Profile", "Password", "Team"];
+
+const Account = ({ open = "profile" }) => {
+ const theme = useTheme();
+ const navigate = useNavigate();
+ const tab = open;
+ const handleTabChange = (event, newTab) => {
+ navigate(`/account/${newTab}`);
+ };
+
+ return (
+
+
+
+
+ {tabList.map((label, index) => (
+
+ ))}
+
+
+
+
+
+
+
+ );
+};
+
+Account.propTypes = {
+ open: PropTypes.oneOf(["profile", "password", "team"]),
+};
+
+export default Account;
diff --git a/Client/src/Pages/CreateNewMonitor/index.jsx b/Client/src/Pages/CreateNewMonitor/index.jsx
index d4f795b47..19dd1386a 100644
--- a/Client/src/Pages/CreateNewMonitor/index.jsx
+++ b/Client/src/Pages/CreateNewMonitor/index.jsx
@@ -3,122 +3,124 @@ import ConfigBox from "../../Components/ConfigBox";
import FlexibileTextField from "../../Components/TextFields/Flexibile/FlexibileTextField";
import React, { useState } from "react";
import RadioButton from "../../Components/RadioButton";
-import Dropdown from "../../Components/Dropdown";
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 portOptions = [
- { label: "Port 1", value: "Port1" },
- { label: "Port 2", value: "Port2" },
- // Add more Ports as needed
- ];
+ const MS_PER_MINUTE = 60000;
+ const { user, authToken } = useSelector((state) => state.auth);
+ const dispatch = useDispatch();
+ const navigate = useNavigate();
- const frequencyOptions = [
- { label: "1 minute", value: "1" },
- { label: "5 minutes", value: "5" },
- // Add more Ports as needed
- ];
+ const [errors, setErrors] = useState({});
- const [incidentEmail, setIncidentEmail] = 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 [notifyViaSMS, setNotifyViaSMS] = useState(false);
- const [notifyViaEmail, setNotifyViaEmail] = useState(false);
- const [notifyViaCurrentEmail, setNotifyViaCurrentEmail] = useState(false);
+ const handleChange = (event, id, setState, checkbox) => {
+ const { value } = event.target;
+ setState((prev) => ({
+ ...prev,
+ [id]: checkbox ? true : value,
+ }));
- const [maxRetries, setMaxRetries] = useState(0);
- const [acceptCode, setAcceptCode] = useState(0);
- const [maxRedirects, setMaxRedirects] = useState(0);
+ const validation = createMonitorValidation.validate(
+ { [id]: value },
+ { abortEarly: false }
+ );
- const [proxy, setProxy] = useState(false);
+ setErrors((prev) => {
+ const updatedErrors = { ...prev };
- const [proxyAddress, setProxyAddress] = useState("");
- const [proxyPort, setProxyPort] = useState("");
+ 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 [selectedMonitorType, setSelectedMonitorType] = useState("");
+ const handleCreateNewMonitor = async (event) => {
+ event.preventDefault();
+ //obj to submit
+ let monitor = {
+ ...generalSettings,
+ ...checks,
+ };
- const [urlToMonitor, setUrlToMonitor] = useState("");
- const [friendlyName, setFriendlyName] = useState("");
+ const { error } = createMonitorValidation.validate(monitor, {
+ abortEarly: false,
+ });
- const [port, setPort] = useState("Select a port to check");
- const [frequncy, setFrequency] = useState("1 minute");
-
- const handlePortOptionChange = (newValue) => {
- setPort(newValue);
+ 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);
+ }
+ }
};
- const handleFrequencyOptionChange = (newValue) => {
- setPort(newValue);
- };
-
- const handleUrlToMonitor = (event) => {
- setUrlToMonitor(event.target.value);
- console.log(urlToMonitor);
- };
-
- const handleFriendlyName = (event) => {
- setFriendlyName(event.target.value);
- console.log(friendlyName);
- };
-
- const handleIncidentEmail = (event) => {
- setIncidentEmail(event.target.value);
- console.log(incidentEmail);
- };
-
- const handleNotifyViaSMS = (event) => {
- setNotifyViaSMS(event.target.checked);
- };
-
- const handleNotifyViaEmail = (event) => {
- setNotifyViaEmail(event.target.checked);
- };
-
- const handleNotifyViaCurrentEmail = (event) => {
- setNotifyViaCurrentEmail(event.target.checked);
- };
-
- const handleSetMaxRetries = (event) => {
- setMaxRetries(event.target.value);
- console.log(maxRetries);
- };
-
- const handleSetAcceptCode = (event) => {
- setAcceptCode(event.target.value);
- console.log(acceptCode);
- };
-
- const handleSetMaxRedirects = (event) => {
- setMaxRedirects(event.target.value);
- console.log(maxRedirects);
- };
-
- const handleEnableProxy = (event) => {
- setProxy(event.target.value);
- console.log(proxy);
- };
-
- const handleproxyAddress = (event) => {
- setProxyAddress(event.target.value);
- console.log(proxyAddress);
- };
-
- const handleproxyPort = (event) => {
- setProxyPort(event.target.value);
- console.log(proxyPort);
- };
-
- const handleMonitorTypeChange = (value) => {
- setSelectedMonitorType(value);
- console.log(value);
- };
-
- const handleCreateNewMonitor = () => {
- console.log("Created");
- };
+ //select values
+ // const ports = ["Port 1", "Port 2", "Port 3"];
+ const frequencies = [1, 2, 3, 4, 5];
return (
-
}
/>
-
+ {/* TODO */}
+ {/*
{
handleCheck("viaSms", setNotifications)}
/>
handleCheck("viaEmail", setNotifications)}
/>
handleCheck("viaOther", setNotifications)}
/>
+ handleChange(event, "email", setNotifications)
+ }
/>