From f176768b54dec5423ae14624efe7b28b42431f02 Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Tue, 31 Dec 2024 20:00:22 -0800 Subject: [PATCH] Refactor FE to use new query --- .../Components/Charts/Utils/chartUtils.jsx | 3 +- .../Pages/Infrastructure/Details/index.jsx | 153 +++++++++++------- Client/src/Utils/NetworkService.js | 14 ++ 3 files changed, 113 insertions(+), 57 deletions(-) diff --git a/Client/src/Components/Charts/Utils/chartUtils.jsx b/Client/src/Components/Charts/Utils/chartUtils.jsx index 004f9a227..1d82f10b4 100644 --- a/Client/src/Components/Charts/Utils/chartUtils.jsx +++ b/Client/src/Components/Charts/Utils/chartUtils.jsx @@ -17,7 +17,6 @@ import { Box, Stack, Typography } from "@mui/material"; */ export const TzTick = ({ x, y, payload, index }) => { const theme = useTheme(); - const uiTimezone = useSelector((state) => state.ui.timezone); return ( {yIdx >= 0 ? `${yLabel} ${getFormattedPercentage(payload[0].payload[hardwareType][yIdx][metric])}` - : `${yLabel} ${getFormattedPercentage(payload[0].payload[hardwareType][metric])}`} + : `${yLabel} ${getFormattedPercentage(payload[0].payload[yKey])}`} diff --git a/Client/src/Pages/Infrastructure/Details/index.jsx b/Client/src/Pages/Infrastructure/Details/index.jsx index 66cebdea7..5c131deec 100644 --- a/Client/src/Pages/Infrastructure/Details/index.jsx +++ b/Client/src/Pages/Infrastructure/Details/index.jsx @@ -1,7 +1,7 @@ import { useParams } from "react-router-dom"; import { useEffect, useState } from "react"; import Breadcrumbs from "../../../Components/Breadcrumbs"; -import { Stack, Box, Typography } from "@mui/material"; +import { Button, ButtonGroup, Stack, Box, Typography } from "@mui/material"; import { useTheme } from "@emotion/react"; import CustomGauge from "../../../Components/Charts/CustomGauge"; import AreaChart from "../../../Components/Charts/AreaChart"; @@ -185,9 +185,11 @@ GaugeBox.propTypes = { value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired, heading: PropTypes.string.isRequired, metricOne: PropTypes.string.isRequired, - valueOne: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, + valueOne: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.element]) + .isRequired, metricTwo: PropTypes.string.isRequired, - valueTwo: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, + valueTwo: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.element]) + .isRequired, }; /** @@ -217,8 +219,9 @@ const InfrastructureDetails = () => { (chartContainerHeight - totalChartContainerPadding - totalTypographyPadding) * 0.95; // end height calculations - const buildStatBoxes = (checks, uptime) => { - let latestCheck = checks[0] ?? null; + const buildStatBoxes = (stats, uptime) => { + if (Object.keys(stats).length === 0) return []; + let latestCheck = stats.aggregateData.latestCheck ?? null; if (latestCheck === null) return []; // Extract values from latest check @@ -311,8 +314,10 @@ const InfrastructureDetails = () => { ]; }; - const buildGaugeBoxConfigs = (checks) => { - let latestCheck = checks[0] ?? null; + const buildGaugeBoxConfigs = (stats) => { + if (Object.keys(stats).length === 0) return []; + + let latestCheck = stats.aggregateData.latestCheck ?? null; if (latestCheck === null) return []; // Extract values from latest check @@ -359,27 +364,27 @@ const InfrastructureDetails = () => { if (checks === null) return { temps: [], tempKeys: [] }; for (const check of checks) { - if (check?.cpu?.temperature?.length > numCores) { - numCores = check.cpu.temperature.length; + if (check?.avgTemperature?.length > numCores) { + numCores = check.avgTemperature.length; break; } } const temps = checks.map((check) => { // If there's no data, set the temperature to 0 if ( - check?.cpu?.temperature?.length === 0 || - check?.cpu?.temperature === undefined || - check?.cpu?.temperature === null + check?.avgTemperature?.length === 0 || + check?.avgTemperature === undefined || + check?.avgTemperature === null ) { - check.cpu.temperature = Array(numCores).fill(0); + check.avgTemperature = Array(numCores).fill(0); } - const res = check?.cpu?.temperature?.reduce( + const res = check?.avgTemperature?.reduce( (acc, cur, idx) => { acc[`core${idx + 1}`] = cur; return acc; }, { - createdAt: check.createdAt, + _id: check._id, } ); return res; @@ -389,7 +394,7 @@ const InfrastructureDetails = () => { } return { - tempKeys: Object.keys(temps[0] || {}).filter((key) => key !== "createdAt"), + tempKeys: Object.keys(temps[0] || {}).filter((key) => key !== "_id"), temps, }; }; @@ -397,13 +402,12 @@ const InfrastructureDetails = () => { const buildAreaChartConfigs = (checks) => { let latestCheck = checks[0] ?? null; if (latestCheck === null) return []; - const reversedChecks = checks.toReversed(); - const tempData = buildTemps(reversedChecks); + const { temps, tempKeys } = buildTemps(checks); return [ { type: "memory", - data: reversedChecks, - dataKeys: ["memory.usage_percent"], + data: checks, + dataKeys: ["avgMemoryUsage"], heading: "Memory usage", strokeColor: theme.palette.primary.main, gradientStartColor: theme.palette.primary.main, @@ -414,15 +418,15 @@ const InfrastructureDetails = () => { toolTip: ( ), }, { type: "cpu", - data: reversedChecks, - dataKeys: ["cpu.usage_percent"], + data: checks, + dataKeys: ["avgCpuUsage"], heading: "CPU usage", strokeColor: theme.palette.success.main, gradientStartColor: theme.palette.success.main, @@ -433,15 +437,15 @@ const InfrastructureDetails = () => { toolTip: ( ), }, { type: "temperature", - data: tempData.temps, - dataKeys: tempData.tempKeys, + data: temps, + dataKeys: tempKeys, strokeColor: theme.palette.error.main, gradientStartColor: theme.palette.error.main, heading: "CPU Temperature", @@ -450,24 +454,22 @@ const InfrastructureDetails = () => { yDomain: [ 0, Math.max( - Math.max( - ...tempData.temps.flatMap((t) => tempData.tempKeys.map((k) => t[k])) - ) * 1.1, + Math.max(...temps.flatMap((t) => tempKeys.map((k) => t[k]))) * 1.1, 200 ), ], toolTip: ( ), }, - ...(latestCheck?.disk?.map((disk, idx) => ({ + ...(latestCheck?.disks?.map((disk, idx) => ({ type: "disk", - data: reversedChecks, + data: checks, diskIndex: idx, - dataKeys: [`disk[${idx}].usage_percent`], + dataKeys: [`disks[${idx}].usagePercent`], heading: `Disk${idx} usage`, strokeColor: theme.palette.warning.main, gradientStartColor: theme.palette.warning.main, @@ -478,7 +480,7 @@ const InfrastructureDetails = () => { toolTip: ( @@ -491,15 +493,12 @@ const InfrastructureDetails = () => { useEffect(() => { const fetchData = async () => { try { - const response = await networkService.getStatsByMonitorId({ + const response = await networkService.getHardwareDetailsByMonitorId({ authToken: authToken, monitorId: monitorId, - sortOrder: null, - limit: null, dateRange: dateRange, - numToDisplay: 50, - normalize: false, }); + response.data.data; setMonitor(response.data.data); } catch (error) { navigate("/not-found", { replace: true }); @@ -510,16 +509,16 @@ const InfrastructureDetails = () => { }, [authToken, monitorId, dateRange, navigate]); const statBoxConfigs = buildStatBoxes( - monitor?.checks ?? [], + monitor?.stats ?? {}, monitor?.uptimePercentage ?? "Unknown" ); - const gaugeBoxConfigs = buildGaugeBoxConfigs(monitor?.checks ?? []); - const areaChartConfigs = buildAreaChartConfigs(monitor?.checks ?? []); + const gaugeBoxConfigs = buildGaugeBoxConfigs(monitor?.stats ?? {}); + const areaChartConfigs = buildAreaChartConfigs(monitor?.stats?.checks ?? []); return ( - {monitor?.checks?.length > 0 ? ( + {monitor?.stats.checks?.length > 0 ? ( { {formatDurationSplit(monitor?.lastChecked).format} ago + { /> ))} + - {gaugeBoxConfigs.map((config) => ( - - ))} + {gaugeBoxConfigs.map((config) => { + return ( + + ); + })} + + + + Showing statistics for past{" "} + {dateRange === "day" + ? "24 hours" + : dateRange === "week" + ? "7 days" + : "30 days"} + . + + + + + + { height={areaChartHeight} data={config.data} dataKeys={config.dataKeys} - xKey="createdAt" + xKey="_id" yDomain={config.yDomain} customTooltip={config.toolTip} xTick={config.xTick} diff --git a/Client/src/Utils/NetworkService.js b/Client/src/Utils/NetworkService.js index 71cbe9670..148e61051 100644 --- a/Client/src/Utils/NetworkService.js +++ b/Client/src/Utils/NetworkService.js @@ -242,6 +242,20 @@ class NetworkService { ); } + async getHardwareDetailsByMonitorId(config) { + const params = new URLSearchParams(); + if (config.dateRange) params.append("dateRange", config.dateRange); + + return this.axiosInstance.get( + `/monitors/hardware/details/${config.monitorId}?${params.toString()}`, + { + headers: { + Authorization: `Bearer ${config.authToken}`, + }, + } + ); + } + /** * ************************************ * Updates a single monitor