From 107540b2a8c8fec98785ac633cbc09a4662aa9b7 Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Mon, 30 Dec 2024 16:07:28 -0800 Subject: [PATCH] FE refactor --- .../src/Pages/Uptime/Details/Charts/index.jsx | 25 +++++++------ Client/src/Pages/Uptime/Details/index.jsx | 36 +++++++++---------- Client/src/Utils/NetworkService.js | 13 ++++--- Client/src/Utils/timeUtils.js | 10 +++++- Server/db/mongo/modules/monitorModule.js | 13 +++++-- 5 files changed, 60 insertions(+), 37 deletions(-) diff --git a/Client/src/Pages/Uptime/Details/Charts/index.jsx b/Client/src/Pages/Uptime/Details/Charts/index.jsx index 7c5adc9e2..b9e17c138 100644 --- a/Client/src/Pages/Uptime/Details/Charts/index.jsx +++ b/Client/src/Pages/Uptime/Details/Charts/index.jsx @@ -11,11 +11,11 @@ import { } from "recharts"; import { memo, useMemo, useState } from "react"; import { useSelector } from "react-redux"; -import { formatDateWithTz } from "../../../../Utils/timeUtils"; +import { formatDateWithTz, toTimeStamp } from "../../../../Utils/timeUtils"; const CustomLabels = ({ x, width, height, firstDataPoint, lastDataPoint, type }) => { const uiTimezone = useSelector((state) => state.ui.timezone); - const dateFormat = type === "day" ? "MMM D, h:mm A" : "MMM D"; + const dateFormat = type === "day" ? "MMM D, h A" : "MMM D"; return ( <> @@ -26,7 +26,11 @@ const CustomLabels = ({ x, width, height, firstDataPoint, lastDataPoint, type }) textAnchor="start" fontSize={11} > - {formatDateWithTz(new Date(firstDataPoint.time), dateFormat, uiTimezone)} + {formatDateWithTz( + toTimeStamp(firstDataPoint._id, "YYYY-MM-DD-HH"), + dateFormat, + uiTimezone + )} - {formatDateWithTz(new Date(lastDataPoint.time), dateFormat, uiTimezone)} + {lastDataPoint._id} + {/* {formatDateWithTz(new Date(lastDataPoint.time), dateFormat, uiTimezone)} */} ); @@ -57,9 +62,9 @@ const UpBarChart = memo(({ data, type, onBarHover }) => { const [hoveredBarIndex, setHoveredBarIndex] = useState(null); const getColorRange = (uptime) => { - return uptime > 80 + return uptime > 0.8 ? { main: theme.palette.success.main, light: theme.palette.success.light } - : uptime > 50 + : uptime > 0.5 ? { main: theme.palette.warning.main, light: theme.palette.warning.light } : { main: theme.palette.error.contrastText, light: theme.palette.error.light }; }; @@ -79,7 +84,7 @@ const UpBarChart = memo(({ data, type, onBarHover }) => { data={reversedData} onMouseEnter={() => { setChartHovered(true); - onBarHover({ time: null, totalChecks: 0, uptimePercentage: 0 }); + onBarHover({ time: null, totalChecks: 0, groupUptimePercentage: 0 }); }} onMouseLeave={() => { setChartHovered(false); @@ -104,12 +109,12 @@ const UpBarChart = memo(({ data, type, onBarHover }) => { } /> {reversedData.map((entry, index) => { - let { main, light } = getColorRange(entry.uptimePercentage); + let { main, light } = getColorRange(entry.groupUptimePercentage); return ( { onBarHover({ time: null, totalChecks: 0, - uptimePercentage: 0, + groupUptimePercentage: 0, }); }} /> diff --git a/Client/src/Pages/Uptime/Details/index.jsx b/Client/src/Pages/Uptime/Details/index.jsx index 631667d08..46e769571 100644 --- a/Client/src/Pages/Uptime/Details/index.jsx +++ b/Client/src/Pages/Uptime/Details/index.jsx @@ -5,7 +5,6 @@ import { useSelector } from "react-redux"; import { useNavigate, useParams } from "react-router-dom"; import { networkService } from "../../../main"; import { logger } from "../../../Utils/Logger"; -import { formatDurationRounded, formatDurationSplit } from "../../../Utils/timeUtils"; import MonitorDetailsAreaChart from "../../../Components/Charts/MonitorDetailsAreaChart"; import ButtonGroup from "@mui/material/ButtonGroup"; import SettingsIcon from "../../../assets/icons/settings-bold.svg?react"; @@ -22,7 +21,7 @@ import { DownBarChart, ResponseGaugeChart, UpBarChart } from "./Charts"; import SkeletonLayout from "./skeleton"; import "./index.css"; import useUtils from "../utils"; -import { formatDateWithTz } from "../../../Utils/timeUtils"; +import { formatDateWithTz, formatDurationSplit } from "../../../Utils/timeUtils"; import { useIsAdmin } from "../../../Hooks/useIsAdmin"; import IconBox from "../../../Components/IconBox"; import StatBox from "../../../Components/StatBox"; @@ -47,13 +46,10 @@ const DetailsPage = () => { const fetchMonitor = useCallback(async () => { try { - const res = await networkService.getStatsByMonitorId({ + const res = await networkService.getUptimeDetailsById({ authToken: authToken, monitorId: monitorId, - sortOrder: null, - limit: null, dateRange: dateRange, - numToDisplay: 50, normalize: true, }); console.log(res?.data?.data); @@ -185,7 +181,7 @@ const DetailsPage = () => { }, }} > - Checking every {formatDurationRounded(monitor?.interval)}. + {/* Checking every {formatDurationRounded(monitor?.interval)}. */} @@ -224,17 +220,17 @@ const DetailsPage = () => { - {monitor?.latestResponseTime} + {monitor?.aggregateData?.latestResponseTime} {"ms"} } @@ -311,7 +307,7 @@ const DetailsPage = () => { {hoveredUptimeData !== null ? hoveredUptimeData.totalChecks - : monitor?.periodTotalChecks} + : monitor.dateRangeData[0].overallTotalChecks} {hoveredUptimeData !== null && hoveredUptimeData.time !== null && ( { Uptime Percentage {hoveredUptimeData !== null - ? Math.floor(hoveredUptimeData.uptimePercentage * 10) / 10 - : Math.floor(monitor?.periodUptime * 10) / 10} + ? Math.floor(hoveredUptimeData.groupUptimePercentage * 100) + : Math.floor( + monitor?.dateRangeData[0].overallUptimePercentage * 100 + )} % @@ -376,11 +374,11 @@ const DetailsPage = () => { )} - + /> */} @@ -389,9 +387,9 @@ const DetailsPage = () => { Average Response Time - + /> */} { Response Times - + {/* */} { : { time: 0, format: "seconds" }; }; +export const toTimeStamp = (date, format) => { + const dayJsDate = dayjs(date, format); + return dayJsDate.valueOf(); +}; + export const formatDate = (date, customOptions) => { const options = { year: "numeric", @@ -90,6 +98,6 @@ export const formatDate = (date, customOptions) => { }; export const formatDateWithTz = (timestamp, format, timezone) => { - const formattedDate = dayjs(timestamp, timezone).tz(timezone).format(format); + const formattedDate = dayjs(timestamp).tz(timezone).format(format); return formattedDate; }; diff --git a/Server/db/mongo/modules/monitorModule.js b/Server/db/mongo/modules/monitorModule.js index 7dcc450bd..f58d8fa6f 100644 --- a/Server/db/mongo/modules/monitorModule.js +++ b/Server/db/mongo/modules/monitorModule.js @@ -406,8 +406,9 @@ const getUptimeDetailsById = async (req) => { { $addFields: { uptimePercentage: { - $multiply: [{ $divide: ["$upChecks", "$totalChecks"] }, 100], + $divide: ["$upChecks", "$totalChecks"], }, + overallTotalChecks: "$totalChecks", }, }, { @@ -448,6 +449,7 @@ const getUptimeDetailsById = async (req) => { }, { $project: { + totalChecks: 1, avgResponseTime: 1, groupUptimePercentage: { $divide: ["$upChecks", "$totalChecks"] }, }, @@ -465,6 +467,7 @@ const getUptimeDetailsById = async (req) => { $mergeObjects: [ "$groupedResults", { overallUptimePercentage: "$uptimePercentage" }, + { overallTotalChecks: "$overallTotalChecks" }, ], }, }, @@ -474,7 +477,13 @@ const getUptimeDetailsById = async (req) => { }, ]); - return { aggregateResults, dateRangeResults }; + const monitorStats = { + ...monitor.toObject(), + }; + monitorStats.aggregateData = aggregateResults[0]; + monitorStats.dateRangeData = dateRangeResults; + + return monitorStats; } catch (error) { error.service = SERVICE_NAME; error.method = "getUptimeDetailsById";