From fa8e045946751f5fa99ed4e0df6311b51885e019 Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Mon, 16 Sep 2024 13:29:04 +0800 Subject: [PATCH 1/9] Use getMonitorsByTeamId endpoint --- Client/src/Pages/PageSpeed/index.jsx | 46 ++++++++++++++++++++++------ 1 file changed, 37 insertions(+), 9 deletions(-) diff --git a/Client/src/Pages/PageSpeed/index.jsx b/Client/src/Pages/PageSpeed/index.jsx index 738a5f3da..6dd03c0b7 100644 --- a/Client/src/Pages/PageSpeed/index.jsx +++ b/Client/src/Pages/PageSpeed/index.jsx @@ -1,5 +1,5 @@ import { Box, Button, Grid, Stack } from "@mui/material"; -import { useEffect } from "react"; +import { useEffect, useState } from "react"; import { useTheme } from "@emotion/react"; import { useDispatch, useSelector } from "react-redux"; import { getPageSpeedByTeamId } from "../../Features/PageSpeedMonitor/pageSpeedMonitorSlice"; @@ -11,24 +11,52 @@ import Breadcrumbs from "../../Components/Breadcrumbs"; import Greeting from "../../Utils/greeting"; import SkeletonLayout from "./skeleton"; import Card from "./card"; +import { networkService } from "../../main"; const PageSpeed = ({ isAdmin }) => { const theme = useTheme(); const dispatch = useDispatch(); const navigate = useNavigate(); - const { authToken } = useSelector((state) => state.auth); - const { monitorsSummary, isLoading } = useSelector( - (state) => state.pageSpeedMonitors - ); + const { user, authToken } = useSelector((state) => state.auth); + const [isLoading, setIsLoading] = useState(false); + const [monitors, setMonitors] = useState([]); useEffect(() => { dispatch(getPageSpeedByTeamId(authToken)); }, [authToken, dispatch]); + useEffect(() => { + const fetchMonitors = async () => { + try { + setIsLoading(true); + const res = await networkService.getMonitorsByTeamId( + authToken, + user.teamId, + 10, + ["pagespeed"], + null, + "desc", + true, + null, + null + ); + if (res?.data?.data?.monitors) { + setMonitors(res.data.data.monitors); + } + } catch (error) { + console.log(error); + } finally { + setIsLoading(false); + } + }; + + fetchMonitors(); + }, []); + // will show skeletons only on initial load // since monitor state is being added to redux persist, there's no reason to display skeletons on every render - let isActuallyLoading = isLoading && monitorsSummary?.monitors?.length === 0; - + let isActuallyLoading = isLoading && monitors?.length === 0; + console.log(monitors); return ( { > {isActuallyLoading ? ( - ) : monitorsSummary?.monitors?.length !== 0 ? ( + ) : monitors?.length !== 0 ? ( { - {monitorsSummary?.monitors?.map((monitor) => ( + {monitors?.map((monitor) => ( ))} From 267ef14bb80d78966deab4d70c34611ad8f60cde Mon Sep 17 00:00:00 2001 From: Daniel Cojocea Date: Mon, 16 Sep 2024 12:53:59 -0400 Subject: [PATCH 2/9] Basic grid structure --- Client/src/Pages/Monitors/Home/index.jsx | 7 ++- Client/src/Pages/PageSpeed/card.jsx | 77 ++++++++++-------------- Client/src/Pages/PageSpeed/index.css | 5 +- Client/src/Pages/PageSpeed/index.jsx | 10 +-- Server/db/mongo/modules/checkModule.js | 14 ----- 5 files changed, 42 insertions(+), 71 deletions(-) diff --git a/Client/src/Pages/Monitors/Home/index.jsx b/Client/src/Pages/Monitors/Home/index.jsx index 31f4800a7..b66076387 100644 --- a/Client/src/Pages/Monitors/Home/index.jsx +++ b/Client/src/Pages/Monitors/Home/index.jsx @@ -96,7 +96,12 @@ const Monitors = ({ isAdmin }) => { alignItems="center" mb={theme.spacing(8)} > - + Actively monitoring { const { determineState, pagespeedStatusMsg } = useUtils(); @@ -14,19 +15,8 @@ const Card = ({ monitor }) => { const navigate = useNavigate(); const monitorState = determineState(monitor); return ( - .MuiStack-root": { - backgroundColor: theme.palette.background.accent, - }, - }} - > - + navigate(`/pagespeed/${monitor._id}`)} border={1} @@ -34,41 +24,40 @@ const Card = ({ monitor }) => { borderRadius={theme.shape.borderRadius} backgroundColor={theme.palette.background.main} sx={{ + display: "grid", + gridTemplateColumns: "34px 2fr 1fr", + columnGap: theme.spacing(5), + gridTemplateRows: "34px 1fr 3fr", cursor: "pointer", - "& svg path": { stroke: theme.palette.other.icon, strokeWidth: 0.8 }, + "&:hover": { + backgroundColor: theme.palette.background.accent, + }, }} > - + + + + {monitor.name} + + - - - - {monitor.name} - - - - {monitor.url.replace(/^https?:\/\//, "")} - - - Last checked:{" "} - - {formatDate(getLastChecked(monitor.checks, false))}{" "} - - ({formatDurationRounded(getLastChecked(monitor.checks))} ago) - - - - + + {monitor.url} + + ); }; diff --git a/Client/src/Pages/PageSpeed/index.css b/Client/src/Pages/PageSpeed/index.css index bbf75c96c..c39a20fe0 100644 --- a/Client/src/Pages/PageSpeed/index.css +++ b/Client/src/Pages/PageSpeed/index.css @@ -1,9 +1,6 @@ -.page-speed h2.MuiTypography-root { - line-height: 1.1; -} .page-speed .label { padding: 7px; - height: 22px; + height: 24px; font-size: var(--env-var-font-size-small); } .page-speed:not(:has([class*="fallback__"])) button { diff --git a/Client/src/Pages/PageSpeed/index.jsx b/Client/src/Pages/PageSpeed/index.jsx index 6dd03c0b7..68da033e4 100644 --- a/Client/src/Pages/PageSpeed/index.jsx +++ b/Client/src/Pages/PageSpeed/index.jsx @@ -56,7 +56,7 @@ const PageSpeed = ({ isAdmin }) => { // will show skeletons only on initial load // since monitor state is being added to redux persist, there's no reason to display skeletons on every render let isActuallyLoading = isLoading && monitors?.length === 0; - console.log(monitors); + return ( { {isActuallyLoading ? ( ) : monitors?.length !== 0 ? ( - + { } }; -const updateChecksTTL = async (teamId, ttl) => { - try { - await Check.collection.dropIndex("expiry_1"); - await Check.collection.createIndex( - { expiry: 1 }, - { expireAfterSeconds: ttl } // TTL in seconds, adjust as necessary - ); - } catch (error) { - error.service = SERVICE_NAME; - error.method = "updateChecksTTL"; - throw error; - } -}; - module.exports = { createCheck, getChecksCount, From 78680d036c3847112e3740eaafba9f3689b1a0f4 Mon Sep 17 00:00:00 2001 From: Daniel Cojocea Date: Mon, 16 Sep 2024 15:01:29 -0400 Subject: [PATCH 3/9] Added area chart --- Client/src/Pages/Monitors/utils.jsx | 23 ++++++ Client/src/Pages/PageSpeed/card.jsx | 100 +++++++++++++++++++++++++-- Client/src/Pages/PageSpeed/index.jsx | 2 +- 3 files changed, 120 insertions(+), 5 deletions(-) diff --git a/Client/src/Pages/Monitors/utils.jsx b/Client/src/Pages/Monitors/utils.jsx index c6f0a8476..cc079fedc 100644 --- a/Client/src/Pages/Monitors/utils.jsx +++ b/Client/src/Pages/Monitors/utils.jsx @@ -52,12 +52,35 @@ const useUtils = () => { "& h2": { color: theme.palette.warning.main }, }, }; + const pagespeedStyles = { + up: { + bg: theme.palette.success.bg, + light: theme.palette.success.light, + stroke: theme.palette.success.main, + }, + down: { + bg: theme.palette.error.bg, + light: theme.palette.error.light, + stroke: theme.palette.error.main, + }, + paused: { + bg: theme.palette.warning.bg, + light: theme.palette.warning.light, + stroke: theme.palette.warning.main, + }, + pending: { + bg: theme.palette.warning.bg, + light: theme.palette.warning.light, + stroke: theme.palette.warning.main, + }, + }; return { determineState, statusColor, statusMsg, pagespeedStatusMsg, + pagespeedStyles, statusStyles, }; }; diff --git a/Client/src/Pages/PageSpeed/card.jsx b/Client/src/Pages/PageSpeed/card.jsx index eeb1c77a7..00b717ce4 100644 --- a/Client/src/Pages/PageSpeed/card.jsx +++ b/Client/src/Pages/PageSpeed/card.jsx @@ -1,19 +1,103 @@ import PageSpeedIcon from "../../assets/icons/page-speed.svg?react"; import { StatusLabel } from "../../Components/Label"; -import { Box, Grid, Stack, Typography } from "@mui/material"; +import { Box, Grid, Typography } from "@mui/material"; import { useNavigate } from "react-router"; import { useTheme } from "@emotion/react"; -import { formatDate, formatDurationRounded } from "../../Utils/timeUtils"; -import { getLastChecked } from "../../Utils/monitorUtils"; +import { IconBox } from "./Details/styled"; import useUtils from "../Monitors/utils"; import PropTypes from "prop-types"; -import { IconBox } from "./Details/styled"; +import { Area, AreaChart, CartesianGrid, ResponsiveContainer } from "recharts"; + +const processData = (data) => { + if (data.length === 0) return []; + let formattedData = []; + + const calculateScore = (entry) => { + return ( + (entry.accessibility + + entry.bestPractices + + entry.performance + + entry.seo) / + 4 + ); + }; + + data.forEach((entry) => { + entry = { ...entry, score: calculateScore(entry) }; + formattedData.push(entry); + }); + + return formattedData; +}; + +const PagespeedAreaChart = ({ data, status }) => { + const theme = useTheme(); + const { pagespeedStyles } = useUtils(); + + const formattedData = processData(data); + + return ( + + + + {/* } + /> */} + + + + + + + + + + ); +}; const Card = ({ monitor }) => { const { determineState, pagespeedStatusMsg } = useUtils(); const theme = useTheme(); const navigate = useNavigate(); const monitorState = determineState(monitor); + return ( { > {monitor.url} + + + ); diff --git a/Client/src/Pages/PageSpeed/index.jsx b/Client/src/Pages/PageSpeed/index.jsx index 68da033e4..a76e4cca1 100644 --- a/Client/src/Pages/PageSpeed/index.jsx +++ b/Client/src/Pages/PageSpeed/index.jsx @@ -56,7 +56,6 @@ const PageSpeed = ({ isAdmin }) => { // will show skeletons only on initial load // since monitor state is being added to redux persist, there's no reason to display skeletons on every render let isActuallyLoading = isLoading && monitors?.length === 0; - return ( { variant="contained" color="primary" onClick={() => navigate("/pagespeed/create")} + sx={{ whiteSpace: "nowrap" }} > Create new From 205e82f1b33db89cb51da7854270c6968a33e2be Mon Sep 17 00:00:00 2001 From: Daniel Cojocea Date: Mon, 16 Sep 2024 15:03:36 -0400 Subject: [PATCH 4/9] Added docs --- Client/src/Pages/PageSpeed/card.jsx | 34 +++++++++++++++++++++++++++-- 1 file changed, 32 insertions(+), 2 deletions(-) diff --git a/Client/src/Pages/PageSpeed/card.jsx b/Client/src/Pages/PageSpeed/card.jsx index 00b717ce4..6b87703f5 100644 --- a/Client/src/Pages/PageSpeed/card.jsx +++ b/Client/src/Pages/PageSpeed/card.jsx @@ -1,13 +1,18 @@ +import PropTypes from "prop-types"; import PageSpeedIcon from "../../assets/icons/page-speed.svg?react"; import { StatusLabel } from "../../Components/Label"; import { Box, Grid, Typography } from "@mui/material"; import { useNavigate } from "react-router"; import { useTheme } from "@emotion/react"; import { IconBox } from "./Details/styled"; -import useUtils from "../Monitors/utils"; -import PropTypes from "prop-types"; import { Area, AreaChart, CartesianGrid, ResponsiveContainer } from "recharts"; +import useUtils from "../Monitors/utils"; +/** + * Processes the raw data to include a score for each entry. + * @param {Array} data - The raw data array. + * @returns {Array} - The formatted data array with scores. + */ const processData = (data) => { if (data.length === 0) return []; let formattedData = []; @@ -30,6 +35,13 @@ const processData = (data) => { return formattedData; }; +/** + * Renders an area chart displaying page speed scores. + * @param {Object} props + * @param {Array} props.data - The raw data to be displayed in the chart. + * @param {string} props.status - The status of the page speed which determines the chart's color scheme. + * @returns {JSX.Element} - The rendered area chart. + */ const PagespeedAreaChart = ({ data, status }) => { const theme = useTheme(); const { pagespeedStyles } = useUtils(); @@ -92,6 +104,24 @@ const PagespeedAreaChart = ({ data, status }) => { ); }; +PagespeedAreaChart.propTypes = { + data: PropTypes.arrayOf( + PropTypes.shape({ + accessibility: PropTypes.number.isRequired, + bestPractices: PropTypes.number.isRequired, + performance: PropTypes.number.isRequired, + seo: PropTypes.number.isRequired, + }) + ).isRequired, + status: PropTypes.string.isRequired, +}; + +/** + * Renders a card displaying monitor details and an area chart. + * @param {Object} props + * @param {Object} props.monitor - The monitor data to be displayed in the card. + * @returns {JSX.Element} - The rendered card. + */ const Card = ({ monitor }) => { const { determineState, pagespeedStatusMsg } = useUtils(); const theme = useTheme(); From 78914c9566da660733ed0744221db45019bfea67 Mon Sep 17 00:00:00 2001 From: Daniel Cojocea Date: Mon, 16 Sep 2024 15:18:41 -0400 Subject: [PATCH 5/9] Added tooltip --- Client/src/Pages/PageSpeed/card.jsx | 93 ++++++++++++++++++++++++++--- 1 file changed, 86 insertions(+), 7 deletions(-) diff --git a/Client/src/Pages/PageSpeed/card.jsx b/Client/src/Pages/PageSpeed/card.jsx index 6b87703f5..e45cc3b45 100644 --- a/Client/src/Pages/PageSpeed/card.jsx +++ b/Client/src/Pages/PageSpeed/card.jsx @@ -1,13 +1,92 @@ import PropTypes from "prop-types"; import PageSpeedIcon from "../../assets/icons/page-speed.svg?react"; import { StatusLabel } from "../../Components/Label"; -import { Box, Grid, Typography } from "@mui/material"; +import { Box, Grid, Stack, Typography } from "@mui/material"; import { useNavigate } from "react-router"; import { useTheme } from "@emotion/react"; import { IconBox } from "./Details/styled"; -import { Area, AreaChart, CartesianGrid, ResponsiveContainer } from "recharts"; +import { + Area, + AreaChart, + CartesianGrid, + ResponsiveContainer, + Tooltip, +} from "recharts"; +import { useSelector } from "react-redux"; +import { formatDateWithTz } from "../../Utils/timeUtils"; import useUtils from "../Monitors/utils"; +/** + * CustomToolTip displays a tooltip with formatted date and score information. + * @param {Object} props + * @param {Array} props.payload - Data to display in the tooltip + * @returns {JSX.Element} The rendered tooltip component + */ +const CustomToolTip = ({ payload }) => { + const theme = useTheme(); + const uiTimezone = useSelector((state) => state.ui.timezone); + + return ( + + + {formatDateWithTz( + payload[0]?.payload.createdAt, + "ddd, MMMM D, YYYY, h:mm A", + uiTimezone + )} + + + + + + {payload[0]?.name} + {" "} + {payload[0]?.payload.score} + + + ); +}; + +CustomToolTip.propTypes = { + payload: PropTypes.array, +}; + /** * Processes the raw data to include a score for each entry. * @param {Array} data - The raw data array. @@ -64,10 +143,10 @@ const PagespeedAreaChart = ({ data, status }) => { fill="transparent" vertical={false} /> - {/* } - /> */} + content={} + /> { strokeWidth={1.5} fill={`url(#pagespeed-chart-${status})`} activeDot={{ - stroke: pagespeedStyles[status].stroke, + stroke: pagespeedStyles[status].light, fill: pagespeedStyles[status].stroke, r: 4.5, }} @@ -118,7 +197,7 @@ PagespeedAreaChart.propTypes = { /** * Renders a card displaying monitor details and an area chart. - * @param {Object} props + * @param {Object} props * @param {Object} props.monitor - The monitor data to be displayed in the card. * @returns {JSX.Element} - The rendered card. */ From 5bab1514fcc5431f2bd1bd7bf10e50959849ae78 Mon Sep 17 00:00:00 2001 From: Daniel Cojocea Date: Mon, 16 Sep 2024 17:06:45 -0400 Subject: [PATCH 6/9] Added monitor interval check --- Client/src/Pages/PageSpeed/card.jsx | 53 ++++++++++++++++++++++++++--- 1 file changed, 49 insertions(+), 4 deletions(-) diff --git a/Client/src/Pages/PageSpeed/card.jsx b/Client/src/Pages/PageSpeed/card.jsx index e45cc3b45..5c688a041 100644 --- a/Client/src/Pages/PageSpeed/card.jsx +++ b/Client/src/Pages/PageSpeed/card.jsx @@ -13,7 +13,11 @@ import { Tooltip, } from "recharts"; import { useSelector } from "react-redux"; -import { formatDateWithTz } from "../../Utils/timeUtils"; +import { + formatDateWithTz, + formatDurationRounded, + formatDurationSplit, +} from "../../Utils/timeUtils"; import useUtils from "../Monitors/utils"; /** @@ -128,7 +132,7 @@ const PagespeedAreaChart = ({ data, status }) => { const formattedData = processData(data); return ( - + { return ( navigate(`/pagespeed/${monitor._id}`)} border={1} @@ -230,7 +235,12 @@ const Card = ({ monitor }) => { - + {monitor.name} { /> {monitor.url} @@ -258,6 +268,41 @@ const Card = ({ monitor }) => { > + + + Checking every{" "} + {(() => { + const { time, format } = formatDurationSplit(monitor?.interval); + return ( + <> + + {time}{" "} + + {format} + + ); + })()} + + ); From 60ffc2f1d218b007b5bee0788b1bff00ddb10597 Mon Sep 17 00:00:00 2001 From: Daniel Cojocea Date: Mon, 16 Sep 2024 17:46:03 -0400 Subject: [PATCH 7/9] Fixed pulse dot not displaying accurate status color --- Client/src/Pages/PageSpeed/Details/index.jsx | 16 ++++------------ 1 file changed, 4 insertions(+), 12 deletions(-) diff --git a/Client/src/Pages/PageSpeed/Details/index.jsx b/Client/src/Pages/PageSpeed/Details/index.jsx index 9774bb97c..48d8aa86a 100644 --- a/Client/src/Pages/PageSpeed/Details/index.jsx +++ b/Client/src/Pages/PageSpeed/Details/index.jsx @@ -29,11 +29,13 @@ import PulseDot from "../../../Components/Animated/PulseDot"; import PagespeedDetailsAreaChart from "./Charts/AreaChart"; import Checkbox from "../../../Components/Inputs/Checkbox"; import PieChart from "./Charts/PieChart"; +import useUtils from "../../Monitors/utils"; import "./index.css"; const PageSpeedDetails = () => { const theme = useTheme(); const navigate = useNavigate(); + const { statusColor, pagespeedStatusMsg, determineState } = useUtils(); const [monitor, setMonitor] = useState({}); const [audits, setAudits] = useState({}); const { monitorId } = useParams(); @@ -109,11 +111,7 @@ const PageSpeedDetails = () => { gap={theme.spacing(2)} > { }} > - + From 6842c40fdc22b6681204290565b2cfabf091fd02 Mon Sep 17 00:00:00 2001 From: Daniel Cojocea Date: Mon, 16 Sep 2024 18:49:51 -0400 Subject: [PATCH 8/9] Fixed pulse dot styling --- .../src/Pages/PageSpeed/Configure/index.css | 24 ------- .../src/Pages/PageSpeed/Configure/index.jsx | 72 +++++++++++++++---- 2 files changed, 58 insertions(+), 38 deletions(-) diff --git a/Client/src/Pages/PageSpeed/Configure/index.css b/Client/src/Pages/PageSpeed/Configure/index.css index 14c2df3de..c9790c3d8 100644 --- a/Client/src/Pages/PageSpeed/Configure/index.css +++ b/Client/src/Pages/PageSpeed/Configure/index.css @@ -1,29 +1,6 @@ -.configure-pagespeed span.MuiTypography-root { - font-size: var(--env-var-font-size-small-plus); -} -.configure-pagespeed h3.MuiTypography-root { - font-weight: 500; -} -.configure-pagespeed .MuiBox-root > .field + p.MuiTypography-root { - font-size: var(--env-var-font-size-small-plus); -} -.configure-pagespeed .MuiBox-root > .field + p.MuiTypography-root, -.configure-pagespeed h3.MuiTypography-root > span.MuiTypography-root { - opacity: 0.6; -} .configure-pagespeed .checkbox-wrapper { margin-bottom: 1px; } - -/* to be removed */ -.configure-pagespeed .section-disabled { - opacity: 0.4; - padding: 10px; - border-radius: 8px; - user-select: none; - pointer-events: none; -} - .configure-pagespeed button { height: var(--env-var-height-2); } @@ -31,7 +8,6 @@ .configure-pagespeed h3.MuiTypography-root { flex: 0.7; } - .configure-pagespeed .field, .configure-pagespeed .section-disabled, .configure-pagespeed .select-wrapper { diff --git a/Client/src/Pages/PageSpeed/Configure/index.jsx b/Client/src/Pages/PageSpeed/Configure/index.jsx index 80786bc89..b056404eb 100644 --- a/Client/src/Pages/PageSpeed/Configure/index.jsx +++ b/Client/src/Pages/PageSpeed/Configure/index.jsx @@ -1,6 +1,6 @@ import { useEffect, useState } from "react"; import { useTheme } from "@emotion/react"; -import { Box, Button, Modal, Stack, Typography } from "@mui/material"; +import { Box, Button, Modal, Stack, Tooltip, Typography } from "@mui/material"; import { useDispatch, useSelector } from "react-redux"; import { useNavigate, useParams } from "react-router"; import { @@ -35,7 +35,7 @@ const PageSpeedConfigure = () => { const { monitorId } = useParams(); const [monitor, setMonitor] = useState({}); const [errors, setErrors] = useState({}); - const { determineState, statusColor } = useUtils(); + const { statusColor, pagespeedStatusMsg, determineState } = useUtils(); const frequencies = [ { _id: 3, name: "3 minutes" }, @@ -128,7 +128,7 @@ const PageSpeedConfigure = () => { }; return ( - + {Object.keys(monitor).length === 0 ? ( ) : ( @@ -146,22 +146,65 @@ const PageSpeedConfigure = () => { spellCheck="false" onSubmit={handleSave} flex={1} - gap={theme.spacing(12)} + gap={theme.spacing(10)} > - - - {monitor?.url} + + {monitor.name} - - Your pagespeed monitor is {determineState(monitor)}. - + + + + + + + {monitor.url?.replace(/^https?:\/\//, "") || "..."} + + + Editting... + + { id="modal-delete-pagespeed-monitor" component="h2" variant="h2" + fontWeight={500} > Do you really want to delete this monitor? From 1e659f6c64b476f9d61c0b99cf3705fa2144fa6d Mon Sep 17 00:00:00 2001 From: Daniel Cojocea Date: Mon, 16 Sep 2024 19:06:42 -0400 Subject: [PATCH 9/9] Fixed pagespeed config box styling --- .../src/Pages/PageSpeed/Configure/index.css | 6 - .../src/Pages/PageSpeed/Configure/index.jsx | 230 +++++++++++------- 2 files changed, 143 insertions(+), 93 deletions(-) diff --git a/Client/src/Pages/PageSpeed/Configure/index.css b/Client/src/Pages/PageSpeed/Configure/index.css index c9790c3d8..ee04d7ab2 100644 --- a/Client/src/Pages/PageSpeed/Configure/index.css +++ b/Client/src/Pages/PageSpeed/Configure/index.css @@ -1,13 +1,7 @@ -.configure-pagespeed .checkbox-wrapper { - margin-bottom: 1px; -} .configure-pagespeed button { height: var(--env-var-height-2); } -.configure-pagespeed h3.MuiTypography-root { - flex: 0.7; -} .configure-pagespeed .field, .configure-pagespeed .section-disabled, .configure-pagespeed .select-wrapper { diff --git a/Client/src/Pages/PageSpeed/Configure/index.jsx b/Client/src/Pages/PageSpeed/Configure/index.jsx index b056404eb..297940cd3 100644 --- a/Client/src/Pages/PageSpeed/Configure/index.jsx +++ b/Client/src/Pages/PageSpeed/Configure/index.jsx @@ -13,6 +13,7 @@ import { import { monitorValidation } from "../../../Validation/validation"; import { createToast } from "../../../Utils/toastUtils"; import { logger } from "../../../Utils/Logger"; +import { ConfigBox } from "../../Monitors/styled"; import Field from "../../../Components/Inputs/Field"; import Select from "../../../Components/Inputs/Select"; import Checkbox from "../../../Components/Inputs/Checkbox"; @@ -22,20 +23,27 @@ import PulseDot from "../../../Components/Animated/PulseDot"; import LoadingButton from "@mui/lab/LoadingButton"; import PlayCircleOutlineRoundedIcon from "@mui/icons-material/PlayCircleOutlineRounded"; import SkeletonLayout from "./skeleton"; -import "./index.css"; import useUtils from "../../Monitors/utils"; +import "./index.css"; const PageSpeedConfigure = () => { const theme = useTheme(); const navigate = useNavigate(); const dispatch = useDispatch(); const MS_PER_MINUTE = 60000; - const { authToken } = useSelector((state) => state.auth); + const { user, authToken } = 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 idMap = { + "monitor-url": "url", + "monitor-name": "name", + "monitor-checks-http": "type", + "monitor-checks-ping": "type", + "notify-email-default": "notification-email", + }; const frequencies = [ { _id: 3, name: "3 minutes" }, @@ -68,24 +76,58 @@ const PageSpeedConfigure = () => { fetchMonitor(); }, [dispatch, authToken, monitorId, navigate]); - const handleChange = (event, id) => { - let { value } = event.target; - if (id === "interval") { - value = value * MS_PER_MINUTE; + const handleChange = (event, name) => { + let { 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; + } + 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; + }); } - setMonitor((prev) => ({ ...prev, [id]: value })); - - const { error } = monitorValidation.validate( - { [id]: value }, - { abortEarly: false } - ); - - setErrors((prev) => { - const newErrors = { ...prev }; - if (error) newErrors[id] = error.details[0].message; - else delete newErrors[id]; - return newErrors; - }); }; const handlePause = async () => { @@ -249,102 +291,116 @@ const PageSpeedConfigure = () => { - - - Monitor display name - handleChange(event, "name")} - error={errors.name} - /> - + + + General settings + + Here you can select the URL of the host, together with the + type of monitor. + + .Mui-disabled)": { backgroundColor: theme.palette.background.accent, }, }} > - URL handleChange(event, "url")} + onChange={handleChange} error={errors.url} disabled={true} /> - - - Check frequency - handleChange(event, "interval")} + /> + +