From 219dd5cca7c46cdd3c075c9214b19f07b3c0bbad Mon Sep 17 00:00:00 2001 From: Daniel Cojocea Date: Fri, 19 Jul 2024 14:35:11 -0400 Subject: [PATCH 1/8] Added configure monitor route --- Client/src/App.jsx | 5 +++ .../TabPanels/Account/TeamPanel.jsx | 2 + Client/src/Pages/Monitors/Configure/index.css | 0 Client/src/Pages/Monitors/Configure/index.jsx | 42 +++++++++++++++++++ 4 files changed, 49 insertions(+) create mode 100644 Client/src/Pages/Monitors/Configure/index.css create mode 100644 Client/src/Pages/Monitors/Configure/index.jsx diff --git a/Client/src/App.jsx b/Client/src/App.jsx index a10228795..1443be30c 100644 --- a/Client/src/App.jsx +++ b/Client/src/App.jsx @@ -21,6 +21,7 @@ import ProtectedRoute from "./Components/ProtectedRoute"; import Details from "./Pages/Monitors/Details"; import Maintenance from "./Pages/Maintenance"; import withAdminCheck from "./HOC/withAdminCheck"; +import Configure from "./Pages/Monitors/Configure"; function App() { const AdminCheckedRegister = withAdminCheck(Register); @@ -45,6 +46,10 @@ function App() { path="/monitors/:monitorId/" element={} /> + } + /> } diff --git a/Client/src/Components/TabPanels/Account/TeamPanel.jsx b/Client/src/Components/TabPanels/Account/TeamPanel.jsx index 5ef356f9c..9312c3228 100644 --- a/Client/src/Components/TabPanels/Account/TeamPanel.jsx +++ b/Client/src/Components/TabPanels/Account/TeamPanel.jsx @@ -23,6 +23,7 @@ import { useState } from "react"; import EditSvg from "../../../assets/icons/edit.svg?react"; import Field from "../../Inputs/Field"; import { credentials } from "../../../Validation/validation"; +import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'; /** * TeamPanel component manages the organization and team members, @@ -504,6 +505,7 @@ const TeamPanel = () => { style: { padding: 0 }, }, }} + IconComponent={KeyboardArrowDownIcon} sx={{ mt: theme.gap.xs }} > diff --git a/Client/src/Pages/Monitors/Configure/index.css b/Client/src/Pages/Monitors/Configure/index.css new file mode 100644 index 000000000..e69de29bb diff --git a/Client/src/Pages/Monitors/Configure/index.jsx b/Client/src/Pages/Monitors/Configure/index.jsx new file mode 100644 index 000000000..901a97122 --- /dev/null +++ b/Client/src/Pages/Monitors/Configure/index.jsx @@ -0,0 +1,42 @@ +import { useNavigate } from "react-router"; +import Button from "../../../Components/Button"; +import WestRoundedIcon from "@mui/icons-material/WestRounded"; + +import "./index.css"; +import { useTheme } from "@emotion/react"; + +/** + * Configure component displays monitor configurations and allows for editing actions. + * @component + */ +const Configure = () => { + const navigate = useNavigate(); + const theme = useTheme(); + + return ( +
+
+ ); +}; + +export default Configure; From 076c98f69a7b80bb2146f49c286fce8302545f06 Mon Sep 17 00:00:00 2001 From: Daniel Cojocea Date: Fri, 19 Jul 2024 14:46:26 -0400 Subject: [PATCH 2/8] Fetch monitor from params --- Client/src/Pages/Monitors/Configure/index.jsx | 25 ++++++++++++++++--- Client/src/Pages/Monitors/Details/index.jsx | 1 + 2 files changed, 23 insertions(+), 3 deletions(-) diff --git a/Client/src/Pages/Monitors/Configure/index.jsx b/Client/src/Pages/Monitors/Configure/index.jsx index 901a97122..95e18ce9a 100644 --- a/Client/src/Pages/Monitors/Configure/index.jsx +++ b/Client/src/Pages/Monitors/Configure/index.jsx @@ -1,17 +1,36 @@ -import { useNavigate } from "react-router"; +import { useNavigate, useParams } from "react-router"; +import { useTheme } from "@emotion/react"; +import { useDispatch, useSelector } from "react-redux"; +import { useEffect, useState } from "react"; +import axiosInstance from "../../../Utils/axiosConfig"; import Button from "../../../Components/Button"; import WestRoundedIcon from "@mui/icons-material/WestRounded"; import "./index.css"; -import { useTheme } from "@emotion/react"; /** - * Configure component displays monitor configurations and allows for editing actions. + * Configure page displays monitor configurations and allows for editing actions. * @component */ const Configure = () => { const navigate = useNavigate(); const theme = useTheme(); + const dispatch = useDispatch(); + + const [monitor, setMonitor] = useState(); + const { monitorId } = useParams(); + const { authToken } = useSelector((state) => state.auth); + useEffect(() => { + const fetchMonitor = async () => { + const res = await axiosInstance.get(`/monitors/${monitorId}`, { + headers: { + Authorization: `Bearer ${authToken}`, + }, + }); + setMonitor(res.data.data); + }; + fetchMonitor(); + }, [monitorId, authToken]); return (
{ level="tertiary" label="Configure" img={} + onClick={() => navigate(`/monitors/configure/${monitorId}`)} sx={{ ml: "auto", alignSelf: "flex-end", From 98dad2b5ed7c85386f424c85a9cfeb099455506d Mon Sep 17 00:00:00 2001 From: Daniel Cojocea Date: Fri, 19 Jul 2024 16:42:19 -0400 Subject: [PATCH 3/8] Basic structure and styling --- Client/src/Components/RadioButton/index.css | 11 +- Client/src/Pages/Monitors/Configure/index.css | 43 +++++ Client/src/Pages/Monitors/Configure/index.jsx | 178 ++++++++++++++++++ 3 files changed, 226 insertions(+), 6 deletions(-) diff --git a/Client/src/Components/RadioButton/index.css b/Client/src/Components/RadioButton/index.css index dab37dda0..353bbdf55 100644 --- a/Client/src/Components/RadioButton/index.css +++ b/Client/src/Components/RadioButton/index.css @@ -1,13 +1,12 @@ -.create-monitor-form .custom-radio-button.MuiFormControlLabel-root { +.create-monitor-form .custom-radio-button.MuiFormControlLabel-root, +.configure-monitor .custom-radio-button.MuiFormControlLabel-root { padding: 5px; margin: -5px; border-radius: var(--env-var-radius-1); } -.create-monitor-form .custom-radio-button.MuiFormControlLabel-root:hover { - background-color: var(--env-var-color-13); -} -.create-monitor-form .custom-radio-button.MuiFormControlLabel-root svg{ - stroke-width: 0; +.create-monitor-form .custom-radio-button.MuiFormControlLabel-root:hover, +.configure-monitor .custom-radio-button.MuiFormControlLabel-root:hover { + background-color: var(--env-var-color-15); } .custom-radio-button.MuiFormControlLabel-root .MuiButtonBase-root { diff --git a/Client/src/Pages/Monitors/Configure/index.css b/Client/src/Pages/Monitors/Configure/index.css index e69de29bb..f4e77196a 100644 --- a/Client/src/Pages/Monitors/Configure/index.css +++ b/Client/src/Pages/Monitors/Configure/index.css @@ -0,0 +1,43 @@ +.configure-monitor h1.MuiTypography-root { + font-size: var(--env-var-font-size-large-plus); + color: var(--env-var-color-1); + font-weight: 600; +} +.configure-monitor h2.MuiTypography-root { + font-size: var(--env-var-font-size-large); + font-weight: 600; +} +.configure-monitor h2.MuiTypography-root, +.configure-monitor .config-box p.MuiTypography-root { + color: var(--env-var-color-5); +} +.configure-monitor p.MuiTypography-root { + font-size: var(--env-var-font-size-medium); +} +.configure-monitor h6.MuiTypography-root { + opacity: 0.6; +} +.configure-monitor h6.MuiTypography-root, +.configure-monitor p.MuiTypography-root:has(span), +.configure-monitor p.MuiTypography-root span.MuiTypography-root { + font-size: var(--env-var-font-size-small-plus); +} +.configure-monitor button.MuiButtonBase-root { + font-size: var(--env-var-font-size-medium); +} +.configure-monitor button.MuiButtonBase-root { + height: var(--env-var-height-2); +} +.configure-monitor button.MuiButtonBase-root:has(svg) { + line-height: 1; +} +.configure-monitor .config-box { + padding: var(--env-var-spacing-4) 50px; + padding-bottom: 60px; + border: 1px solid var(--env-var-color-16); + border-radius: var(--env-var-radius-1); +} +.configure-monitor .config-box .MuiBox-root, +.configure-monitor .config-box .MuiStack-root { + flex: 1; +} \ No newline at end of file diff --git a/Client/src/Pages/Monitors/Configure/index.jsx b/Client/src/Pages/Monitors/Configure/index.jsx index 95e18ce9a..e756d0173 100644 --- a/Client/src/Pages/Monitors/Configure/index.jsx +++ b/Client/src/Pages/Monitors/Configure/index.jsx @@ -4,9 +4,54 @@ import { useDispatch, useSelector } from "react-redux"; import { useEffect, useState } from "react"; import axiosInstance from "../../../Utils/axiosConfig"; import Button from "../../../Components/Button"; +import { Box, Stack, Typography } from "@mui/material"; import WestRoundedIcon from "@mui/icons-material/WestRounded"; +import GreenCheck from "../../../assets/icons/checkbox-green.svg?react"; +import RedCheck from "../../../assets/icons/checkbox-red.svg?react"; +import PauseCircleOutlineIcon from "@mui/icons-material/PauseCircleOutline"; import "./index.css"; +import Field from "../../../Components/Inputs/Field"; +import RadioButton from "../../../Components/RadioButton"; + +const formatDurationRounded = (ms) => { + const seconds = Math.floor(ms / 1000); + const minutes = Math.floor(seconds / 60); + const hours = Math.floor(minutes / 60); + const days = Math.floor(hours / 24); + + let time = ""; + if (days > 0) { + time += `${days} day${days !== 1 ? "s" : ""}`; + return time; + } + if (hours > 0) { + time += `${hours} hour${hours !== 1 ? "s" : ""}`; + return time; + } + if (minutes > 0) { + time += `${minutes} minute${minutes !== 1 ? "s" : ""}`; + return time; + } + if (seconds > 0) { + time += `${seconds} second${seconds !== 1 ? "s" : ""}`; + return time; + } + + return time; +}; + +/** + * Helper function to get duration since last check + * @param {Array} checks Array of check objects. + * @returns {number} Timestamp of the most recent check. + */ +const getLastChecked = (checks) => { + if (!checks || checks.length === 0) { + return 0; // Handle case when no checks are available + } + return new Date() - new Date(checks[0].createdAt); +}; /** * Configure page displays monitor configurations and allows for editing actions. @@ -54,6 +99,139 @@ const Configure = () => { }, }} /> + + + {monitor?.status ? : } + + + {monitor?.url.replace(/^https?:\/\//, "") || "..."} + + + + Your site is {monitor?.status ? "up" : "down"}. + {" "} + Checking every {formatDurationRounded(monitor?.interval)}. Last + time checked{" "} + {formatDurationRounded(getLastChecked(monitor?.checks))} ago. + + + +
); }; From 4a14d1c8d9b7dce05fd85915430e5663cf715a9a Mon Sep 17 00:00:00 2001 From: Daniel Cojocea Date: Fri, 19 Jul 2024 17:48:47 -0400 Subject: [PATCH 4/8] Hooked up fields to monitor state --- Client/src/Pages/Monitors/Configure/index.css | 20 +- Client/src/Pages/Monitors/Configure/index.jsx | 311 ++++++++++-------- 2 files changed, 197 insertions(+), 134 deletions(-) diff --git a/Client/src/Pages/Monitors/Configure/index.css b/Client/src/Pages/Monitors/Configure/index.css index f4e77196a..b1808b237 100644 --- a/Client/src/Pages/Monitors/Configure/index.css +++ b/Client/src/Pages/Monitors/Configure/index.css @@ -8,10 +8,12 @@ font-weight: 600; } .configure-monitor h2.MuiTypography-root, -.configure-monitor .config-box p.MuiTypography-root { +.configure-monitor .config-box p.MuiTypography-root, +.configure-monitor .MuiSelect-select { color: var(--env-var-color-5); } -.configure-monitor p.MuiTypography-root { +.configure-monitor p.MuiTypography-root, +.configure-monitor .MuiSelect-select { font-size: var(--env-var-font-size-medium); } .configure-monitor h6.MuiTypography-root { @@ -40,4 +42,16 @@ .configure-monitor .config-box .MuiBox-root, .configure-monitor .config-box .MuiStack-root { flex: 1; -} \ No newline at end of file +} +.MuiInputBase-root:has(#monitor-interval) { + height: 34px; +} +#monitor-interval { + padding: 0 10px; + height: 100%; + display: flex; + align-items: center; +} +.MuiInputBase-root:not(.Mui-focused):has(#monitor-interval):hover fieldset { + border-color: var(--env-var-color-29); +} diff --git a/Client/src/Pages/Monitors/Configure/index.jsx b/Client/src/Pages/Monitors/Configure/index.jsx index e756d0173..0784399cc 100644 --- a/Client/src/Pages/Monitors/Configure/index.jsx +++ b/Client/src/Pages/Monitors/Configure/index.jsx @@ -4,15 +4,16 @@ import { useDispatch, useSelector } from "react-redux"; import { useEffect, useState } from "react"; import axiosInstance from "../../../Utils/axiosConfig"; import Button from "../../../Components/Button"; -import { Box, Stack, Typography } from "@mui/material"; +import Field from "../../../Components/Inputs/Field"; +import RadioButton from "../../../Components/RadioButton"; +import { Box, MenuItem, Select, Stack, Typography } from "@mui/material"; import WestRoundedIcon from "@mui/icons-material/WestRounded"; import GreenCheck from "../../../assets/icons/checkbox-green.svg?react"; import RedCheck from "../../../assets/icons/checkbox-red.svg?react"; import PauseCircleOutlineIcon from "@mui/icons-material/PauseCircleOutline"; +import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown"; import "./index.css"; -import Field from "../../../Components/Inputs/Field"; -import RadioButton from "../../../Components/RadioButton"; const formatDurationRounded = (ms) => { const seconds = Math.floor(ms / 1000); @@ -58,13 +59,15 @@ const getLastChecked = (checks) => { * @component */ const Configure = () => { + const MS_PER_MINUTE = 60000; const navigate = useNavigate(); const theme = useTheme(); const dispatch = useDispatch(); + const { authToken } = useSelector((state) => state.auth); + const { monitorId } = useParams(); const [monitor, setMonitor] = useState(); - const { monitorId } = useParams(); - const { authToken } = useSelector((state) => state.auth); + const [errors, setErrors] = useState({}); useEffect(() => { const fetchMonitor = async () => { const res = await axiosInstance.get(`/monitors/${monitorId}`, { @@ -72,11 +75,20 @@ const Configure = () => { Authorization: `Bearer ${authToken}`, }, }); - setMonitor(res.data.data); + let data = res.data.data; + setMonitor({ + name: data.name, + url: data.url.replace(/^https?:\/\//, ""), + type: data.type, + interval: data.interval / MS_PER_MINUTE, + status: data.status, + }); }; fetchMonitor(); }, [monitorId, authToken]); + const frequencies = [1, 2, 3, 4, 5]; + return (
{ }, }} /> - - - {monitor?.status ? : } - - - {monitor?.url.replace(/^https?:\/\//, "") || "..."} - - - + + + {monitor?.status ? : } + + + {monitor?.url.replace(/^https?:\/\//, "") || "..."} + + + + Your site is {monitor?.status ? "up" : "down"}. + {" "} + Checking every {formatDurationRounded(monitor?.interval)}. Last + time checked{" "} + {formatDurationRounded(getLastChecked(monitor?.checks))} ago. + + + +
); }; From 1aef3300f0f31788fb8fecfee96b55968c889105 Mon Sep 17 00:00:00 2001 From: Daniel Cojocea Date: Fri, 19 Jul 2024 18:04:58 -0400 Subject: [PATCH 5/8] Added validation --- Client/src/Pages/Monitors/Configure/index.css | 8 +++ Client/src/Pages/Monitors/Configure/index.jsx | 59 ++++++++++++++++--- .../Pages/Monitors/CreateMonitor/index.jsx | 16 ++--- Client/src/Validation/validation.js | 6 +- 4 files changed, 69 insertions(+), 20 deletions(-) diff --git a/Client/src/Pages/Monitors/Configure/index.css b/Client/src/Pages/Monitors/Configure/index.css index b1808b237..3a879bcd2 100644 --- a/Client/src/Pages/Monitors/Configure/index.css +++ b/Client/src/Pages/Monitors/Configure/index.css @@ -43,6 +43,14 @@ .configure-monitor .config-box .MuiStack-root { flex: 1; } +.configure-monitor .MuiStack-root:has(span.MuiTypography-root.input-error) { + position: relative; +} +.configure-monitor span.MuiTypography-root.input-error { + position: absolute; + top: 100%; +} + .MuiInputBase-root:has(#monitor-interval) { height: 34px; } diff --git a/Client/src/Pages/Monitors/Configure/index.jsx b/Client/src/Pages/Monitors/Configure/index.jsx index 0784399cc..f74eeae58 100644 --- a/Client/src/Pages/Monitors/Configure/index.jsx +++ b/Client/src/Pages/Monitors/Configure/index.jsx @@ -14,6 +14,7 @@ import PauseCircleOutlineIcon from "@mui/icons-material/PauseCircleOutline"; import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown"; import "./index.css"; +import { monitorValidation } from "../../../Validation/validation"; const formatDurationRounded = (ms) => { const seconds = Math.floor(ms / 1000); @@ -66,6 +67,14 @@ const Configure = () => { const { authToken } = useSelector((state) => state.auth); const { monitorId } = useParams(); + const idMap = { + "monitor-url": "url", + "monitor-name": "name", + "monitor-type": "type", + "monitor-interval": "interval", + }; + + const [config, setConfig] = useState(); const [monitor, setMonitor] = useState(); const [errors, setErrors] = useState({}); useEffect(() => { @@ -76,17 +85,45 @@ const Configure = () => { }, }); let data = res.data.data; + setConfig(data); setMonitor({ name: data.name, url: data.url.replace(/^https?:\/\//, ""), type: data.type, interval: data.interval / MS_PER_MINUTE, - status: data.status, }); }; fetchMonitor(); }, [monitorId, authToken]); + const handleChange = (event) => { + const { value, id } = event.target; + const name = idMap[id]; + 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 handleSubmit = (event) => { + event.preventDefault(); + // TODO + }; + const frequencies = [1, 2, 3, 4, 5]; return ( @@ -114,25 +151,25 @@ const Configure = () => {
- {monitor?.status ? : } + {config?.status ? : } - {monitor?.url.replace(/^https?:\/\//, "") || "..."} + {config?.url.replace(/^https?:\/\//, "") || "..."} - Your site is {monitor?.status ? "up" : "down"}. + Your site is {config?.status ? "up" : "down"}. {" "} - Checking every {formatDurationRounded(monitor?.interval)}. Last + Checking every {formatDurationRounded(config?.interval)}. Last time checked{" "} - {formatDurationRounded(getLastChecked(monitor?.checks))} ago. + {formatDurationRounded(getLastChecked(config?.checks))} ago. { id="monitor-url" label="URL to monitor" placeholder="google.com" - value={monitor?.url} + value={monitor?.url || ""} + onChange={handleChange} + error={errors["url"]} /> { label="Friendly name" isOptional={true} placeholder="Google" - value={monitor?.name} + value={monitor?.name || ""} + onChange={handleChange} + error={errors["name"]} /> diff --git a/Client/src/Pages/Monitors/CreateMonitor/index.jsx b/Client/src/Pages/Monitors/CreateMonitor/index.jsx index e460ccaa2..04cae3fb6 100644 --- a/Client/src/Pages/Monitors/CreateMonitor/index.jsx +++ b/Client/src/Pages/Monitors/CreateMonitor/index.jsx @@ -5,7 +5,7 @@ import RadioButton from "../../../Components/RadioButton"; import Button from "../../../Components/Button"; import { Box, MenuItem, Select, Stack, Typography } from "@mui/material"; import { useSelector, useDispatch } from "react-redux"; -import { createMonitorValidation } from "../../../Validation/validation"; +import { monitorValidation } from "../../../Validation/validation"; import { createMonitor } from "../../../Features/Monitors/monitorsSlice"; import { useNavigate } from "react-router-dom"; import { useTheme } from "@emotion/react"; @@ -37,7 +37,7 @@ const CreateMonitor = () => { // }); //Advanced Settings Form const [advancedSettings, setAdvancedSettings] = useState({ - frequency: 1, + interval: 1, // retries: "", // codes: "", // redirects: "", @@ -57,7 +57,7 @@ const CreateMonitor = () => { [id]: checkbox ? true : value, })); - const validation = createMonitorValidation.validate( + const validation = monitorValidation.validate( { [id]: value }, { abortEarly: false } ); @@ -92,7 +92,7 @@ const CreateMonitor = () => { ...checks, }; - const { error } = createMonitorValidation.validate(monitor, { + const { error } = monitorValidation.validate(monitor, { abortEarly: false, }); @@ -107,8 +107,8 @@ const CreateMonitor = () => { ...monitor, description: monitor.name, userId: user._id, - // ...advancedSettings, // TODO frequency should be interval, then we can use spread - interval: advancedSettings.frequency * MS_PER_MINUTE, + // ...advancedSettings + interval: advancedSettings.interval * MS_PER_MINUTE, }; try { const action = await dispatch(createMonitor({ authToken, monitor })); @@ -333,10 +333,10 @@ const CreateMonitor = () => { { }, }} IconComponent={KeyboardArrowDownIcon} + onChange={(event) => handleChange(event, "interval")} > {frequencies.map((freq) => ( Date: Fri, 19 Jul 2024 19:05:02 -0400 Subject: [PATCH 7/8] Removed fetch request --- Client/src/Pages/Monitors/Configure/index.jsx | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/Client/src/Pages/Monitors/Configure/index.jsx b/Client/src/Pages/Monitors/Configure/index.jsx index d4395aae1..8deb96f8d 100644 --- a/Client/src/Pages/Monitors/Configure/index.jsx +++ b/Client/src/Pages/Monitors/Configure/index.jsx @@ -2,7 +2,6 @@ import { useNavigate, useParams } from "react-router"; import { useTheme } from "@emotion/react"; import { useDispatch, useSelector } from "react-redux"; import { useEffect, useState } from "react"; -import axiosInstance from "../../../Utils/axiosConfig"; import Button from "../../../Components/Button"; import Field from "../../../Components/Inputs/Field"; import RadioButton from "../../../Components/RadioButton"; @@ -65,6 +64,7 @@ const Configure = () => { const theme = useTheme(); const dispatch = useDispatch(); const { authToken } = useSelector((state) => state.auth); + const { monitors } = useSelector((state) => state.monitors); const { monitorId } = useParams(); const idMap = { @@ -78,13 +78,8 @@ const Configure = () => { const [monitor, setMonitor] = useState(); const [errors, setErrors] = useState({}); useEffect(() => { - const fetchMonitor = async () => { - const res = await axiosInstance.get(`/monitors/${monitorId}`, { - headers: { - Authorization: `Bearer ${authToken}`, - }, - }); - let data = res.data.data; + const fetchMonitor = () => { + const data = monitors.find((monitor) => monitor._id === monitorId); setConfig(data); setMonitor({ name: data.name, From f51d14ee7c54d4583a04e834aa2363bb2ad0e125 Mon Sep 17 00:00:00 2001 From: Daniel Cojocea Date: Fri, 19 Jul 2024 19:13:16 -0400 Subject: [PATCH 8/8] Added missing heading --- Client/src/Pages/Monitors/Configure/index.css | 1 + Client/src/Pages/Monitors/Configure/index.jsx | 61 ++++++++++--------- 2 files changed, 34 insertions(+), 28 deletions(-) diff --git a/Client/src/Pages/Monitors/Configure/index.css b/Client/src/Pages/Monitors/Configure/index.css index 3a879bcd2..b9b8792b4 100644 --- a/Client/src/Pages/Monitors/Configure/index.css +++ b/Client/src/Pages/Monitors/Configure/index.css @@ -53,6 +53,7 @@ .MuiInputBase-root:has(#monitor-interval) { height: 34px; + width: 100%; } #monitor-interval { padding: 0 10px; diff --git a/Client/src/Pages/Monitors/Configure/index.jsx b/Client/src/Pages/Monitors/Configure/index.jsx index 8deb96f8d..8f0047206 100644 --- a/Client/src/Pages/Monitors/Configure/index.jsx +++ b/Client/src/Pages/Monitors/Configure/index.jsx @@ -285,35 +285,40 @@ const Configure = () => { Advanced settings - handleChange(event, "interval")} - > - {frequencies.map((freq) => ( - - {freq} {freq === 1 ? "minute" : "minutes"} - - ))} - + }} + IconComponent={KeyboardArrowDownIcon} + onChange={(event) => handleChange(event, "interval")} + > + {frequencies.map((freq) => ( + + {freq} {freq === 1 ? "minute" : "minutes"} + + ))} + +