From 38ef9ccad360e3a56f2f582603626642fb797989 Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Thu, 29 Jan 2026 00:01:22 +0000 Subject: [PATCH] network charts --- .../charts/HistogramInfrastructure.tsx | 13 ++- .../Details/Components/Charts.tsx | 7 +- .../Details/Components/ChartsNetwork.tsx | 107 ++++++++++++++++++ .../Details/Components/TabNetwork.tsx | 30 ++++- .../Details/Components/TabOverview.tsx | 4 +- .../Pages/Infrastructure/Details/index.tsx | 14 ++- client/src/locales/en.json | 4 +- 7 files changed, 166 insertions(+), 13 deletions(-) create mode 100644 client/src/Pages/Infrastructure/Details/Components/ChartsNetwork.tsx diff --git a/client/src/Components/v2/monitors/charts/HistogramInfrastructure.tsx b/client/src/Components/v2/monitors/charts/HistogramInfrastructure.tsx index f5f122c93..7ef82ba0c 100644 --- a/client/src/Components/v2/monitors/charts/HistogramInfrastructure.tsx +++ b/client/src/Components/v2/monitors/charts/HistogramInfrastructure.tsx @@ -93,7 +93,7 @@ const createGradient = ({ ); export const HistogramInfrastructure = ({ - range, + dateRange, title, type, idx: _idx, @@ -107,8 +107,9 @@ export const HistogramInfrastructure = ({ gradientEndColor, strokeColor, fillColor, + yAxisFormatter, }: { - range: string; + dateRange: string; title: string; type: string; idx: number | null; @@ -122,6 +123,7 @@ export const HistogramInfrastructure = ({ gradientEndColor?: string; strokeColor: string; fillColor?: string; + yAxisFormatter?: (value: number) => string; }) => { const theme = useTheme(); const uniqueId = useId(); @@ -160,11 +162,14 @@ export const HistogramInfrastructure = ({ tick={(props) => ( )} /> - + { export const InfraDetailsCharts = ({ checks, - range, + dateRange, }: { checks: HardwareCheckStats[]; - range: string; + dateRange: string; }) => { const theme = useTheme(); const isSmall = useMediaQuery(theme.breakpoints.down("md")); @@ -63,7 +63,6 @@ export const InfraDetailsCharts = ({ [theme, checks, t] ); - console.log(checks); return ( + `${(value / (1024 * 1024)).toFixed(2)} MB`; + +interface ChartConfig { + title: string; + type: string; + dataKeys: string[]; + strokeColor: string; + gradientStartColor: string; + idx: number | null; + interfaceName?: string; +} + +const getChartConfigs = ( + theme: any, + checks: HardwareCheckStats[], + t: any +): ChartConfig[] => { + const configs: ChartConfig[] = []; + + const netInterfaces = checks[0]?.net || []; + + netInterfaces.forEach((iface, idx) => { + configs.push( + { + title: t("pages.infrastructure.charts.labels.netBytesSent", { + name: iface.name, + }), + type: "netBytesSent", + dataKeys: [`net[${idx}].bytesSentPerSecond`], + strokeColor: theme.palette.primary.main, + gradientStartColor: theme.palette.primary.main, + idx, + interfaceName: iface.name, + }, + { + title: t("pages.infrastructure.charts.labels.netBytesRecv", { + name: iface.name, + }), + type: "netBytesRecv", + dataKeys: [`net[${idx}].deltaBytesRecv`], + strokeColor: theme.palette.success.main, + gradientStartColor: theme.palette.success.main, + idx, + interfaceName: iface.name, + } + ); + }); + + return configs; +}; + +export const InfraNetworkCharts = ({ + checks, + dateRange, +}: { + checks: HardwareCheckStats[]; + dateRange: string; +}) => { + const theme = useTheme(); + const isSmall = useMediaQuery(theme.breakpoints.down("md")); + const { t } = useTranslation(); + const chartConfigs = useMemo( + () => getChartConfigs(theme, checks, t), + [theme, checks, t] + ); + + return ( + + {chartConfigs.map((config) => { + return ( + + + + ); + })} + + ); +}; diff --git a/client/src/Pages/Infrastructure/Details/Components/TabNetwork.tsx b/client/src/Pages/Infrastructure/Details/Components/TabNetwork.tsx index 241a092d4..612040cb1 100644 --- a/client/src/Pages/Infrastructure/Details/Components/TabNetwork.tsx +++ b/client/src/Pages/Infrastructure/Details/Components/TabNetwork.tsx @@ -1,3 +1,29 @@ -export const TabNetwork = () => { - return
Network Content
; +import Stack from "@mui/material/Stack"; +import { InfraNetworkCharts } from "./ChartsNetwork"; + +import { useTheme } from "@mui/material"; +import type { HardwareStats } from "@/Types/Monitor"; + +export const TabNetwork = ({ + stats, + dateRange, +}: { + stats: HardwareStats | undefined; + dateRange: string; +}) => { + const theme = useTheme(); + + if (!stats) { + return null; + } + + const checks = stats?.checks || []; + return ( + + + + ); }; diff --git a/client/src/Pages/Infrastructure/Details/Components/TabOverview.tsx b/client/src/Pages/Infrastructure/Details/Components/TabOverview.tsx index 7bb79ae6d..447a2cce6 100644 --- a/client/src/Pages/Infrastructure/Details/Components/TabOverview.tsx +++ b/client/src/Pages/Infrastructure/Details/Components/TabOverview.tsx @@ -9,9 +9,11 @@ import type { HardwareStats, Monitor } from "@/Types/Monitor"; export const TabOverview = ({ monitor, stats, + dateRange, }: { monitor: Monitor | undefined; stats: HardwareStats | undefined; + dateRange: string; }) => { const theme = useTheme(); if (!monitor) { @@ -25,7 +27,7 @@ export const TabOverview = ({ ); diff --git a/client/src/Pages/Infrastructure/Details/index.tsx b/client/src/Pages/Infrastructure/Details/index.tsx index 5260c5d15..31357d3c7 100644 --- a/client/src/Pages/Infrastructure/Details/index.tsx +++ b/client/src/Pages/Infrastructure/Details/index.tsx @@ -59,6 +59,12 @@ const InfrastructureDetails = () => { monitor={monitor} monitorStats={monitorStats} /> + { @@ -72,9 +78,15 @@ const InfrastructureDetails = () => { + )} + {selectedTab === 1 && ( + )} - {selectedTab === 1 && } ); }; diff --git a/client/src/locales/en.json b/client/src/locales/en.json index cfea5299a..2c79562f0 100644 --- a/client/src/locales/en.json +++ b/client/src/locales/en.json @@ -322,7 +322,9 @@ "memory": "Memory usage", "cpu": "CPU usage", "temp": "Temp", - "disk": "Disk usage" + "disk": "Disk usage", + "netBytesSent": "{{name}} - Bytes Sent", + "netBytesRecv": "{{name}} - Bytes Received" } } }