From ec03addba674c8552d98c360ea87f89c21611d57 Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Wed, 28 Jan 2026 22:00:33 +0000 Subject: [PATCH] headers --- .../Pages/Infrastructure/Details/index.tsx | 58 ++++++++++++++++++- client/src/Pages/Uptime/Details/index.tsx | 2 +- client/src/Types/Monitor.ts | 40 +++++++++++++ server/src/controllers/monitorController.ts | 4 +- server/src/service/business/monitorService.ts | 5 +- server/src/types/monitor.ts | 4 +- 6 files changed, 107 insertions(+), 6 deletions(-) diff --git a/client/src/Pages/Infrastructure/Details/index.tsx b/client/src/Pages/Infrastructure/Details/index.tsx index 384f9c188..38b814410 100644 --- a/client/src/Pages/Infrastructure/Details/index.tsx +++ b/client/src/Pages/Infrastructure/Details/index.tsx @@ -1,5 +1,61 @@ +import { BasePage } from "@/Components/v2/design-elements"; +import { HeaderMonitorControls, HeaderTimeRange } from "@/Components/v2/common"; +import Stack from "@mui/material/Stack"; +import { MonitorStatBoxes } from "@/Components/v2/monitors"; + +import { useTheme } from "@mui/material"; +import { useMemo, useState } from "react"; +import { useParams } from "react-router-dom"; +import { useGet } from "@/Hooks/UseApi"; +import type { HardwareDetailsResponse } from "@/Types/Monitor"; +import { useIsAdmin } from "@/Hooks/useIsAdmin"; + const InfrastructureDetails = () => { - return null; + const theme = useTheme(); + const isAdmin = useIsAdmin(); + + const { monitorId } = useParams<{ monitorId: string }>(); + + const [dateRange, setDateRange] = useState("recent"); + + const monitorDetailsUrl = useMemo(() => { + if (!monitorId) { + return null; + } + const params = new URLSearchParams(); + params.append("dateRange", dateRange); + return `/monitors/hardware/details/${monitorId}?${params.toString()}`; + }, [monitorId, dateRange]); + + const { + data: monitorDetailsData, + isLoading: monitorIsLoading, + refetch: refetchMonitor, + } = useGet( + monitorDetailsUrl, + {}, + { refreshInterval: 10000, keepPreviousData: true } + ); + + console.log(monitorDetailsData); + + const monitor = monitorDetailsData?.monitor; + const monitorStats = monitorDetailsData?.monitorStats ?? null; + + return ( + + + + + ); }; export default InfrastructureDetails; diff --git a/client/src/Pages/Uptime/Details/index.tsx b/client/src/Pages/Uptime/Details/index.tsx index 1a6177ddc..f32ae1989 100644 --- a/client/src/Pages/Uptime/Details/index.tsx +++ b/client/src/Pages/Uptime/Details/index.tsx @@ -8,6 +8,7 @@ import { } from "@/Components/v2/monitors"; import { TrendingUp, AlertTriangle } from "lucide-react"; import { ChecksTable } from "@/Pages/Uptime/Details/Components/ChecksTable"; +import { MonitorStatBoxes } from "@/Components/v2/monitors"; import { useTheme } from "@mui/material/styles"; import { useIsAdmin } from "@/Hooks/useIsAdmin"; @@ -18,7 +19,6 @@ import { useGet } from "@/Hooks/UseApi"; import type { MonitorDetailsResponse } from "@/Types/Monitor"; import type { ChecksResponse } from "@/Types/Check"; import type { RootState } from "@/Types/state"; -import { MonitorStatBoxes } from "@/Components/v2/monitors"; import { formatDateWithTz } from "@/Utils/timeUtilsLegacy"; import { t } from "i18next"; diff --git a/client/src/Types/Monitor.ts b/client/src/Types/Monitor.ts index d4dcf5a38..aaafb9a11 100644 --- a/client/src/Types/Monitor.ts +++ b/client/src/Types/Monitor.ts @@ -107,3 +107,43 @@ export interface PageSpeedDetailsResponse { monitor: MonitorWithChecks; monitorStats: MonitorStats | null; } + +export interface HardwareDetailsResponse { + monitor: Monitor; + stats: { + aggregateData: { + totalChecks: number; + }; + upChecks: { + totalChecks: number; + }; + checks: Array<{ + _id: string; + avgCpuUsage: number; + avgMemoryUsage: number; + avgTemperature: number[]; + disks: Array<{ + name: string; + readSpeed: number; + writeSpeed: number; + totalBytes: number; + freeBytes: number; + usagePercent: number; + }>; + net: Array<{ + name: string; + bytesSentPerSecond: number; + deltaBytesRecv: number; + deltaPacketsSent: number; + deltaPacketsRecv: number; + deltaErrIn: number; + deltaErrOut: number; + deltaDropIn: number; + deltaDropOut: number; + deltaFifoIn: number; + deltaFifoOut: number; + }>; + }>; + }; + monitorStats: MonitorStats | null; +} diff --git a/server/src/controllers/monitorController.ts b/server/src/controllers/monitorController.ts index 721565f59..df1945fcc 100644 --- a/server/src/controllers/monitorController.ts +++ b/server/src/controllers/monitorController.ts @@ -93,7 +93,7 @@ class MonitorController { const dateRange = optionalString(req?.query?.dateRange, "dateRange") || "recent"; const teamId = requireTeamId(req?.user?.teamId); - const monitor = await this.monitorService.getHardwareDetailsById({ + const data = await this.monitorService.getHardwareDetailsById({ teamId, monitorId, dateRange, @@ -102,7 +102,7 @@ class MonitorController { return res.status(200).json({ success: true, msg: "Hardware details retrieved successfully", - data: monitor, + data: data, }); } catch (error) { next(error); diff --git a/server/src/service/business/monitorService.ts b/server/src/service/business/monitorService.ts index b950c9a32..b824908b5 100644 --- a/server/src/service/business/monitorService.ts +++ b/server/src/service/business/monitorService.ts @@ -257,9 +257,12 @@ export class MonitorService implements IMonitorService { checks: checksData.checks, }; + const monitorStats = await this.monitorStatsRepository.findByMonitorId(monitor.id); + return { - ...monitor, + monitor, stats, + monitorStats, }; }; diff --git a/server/src/types/monitor.ts b/server/src/types/monitor.ts index b2bf360dc..39fa9d9ac 100644 --- a/server/src/types/monitor.ts +++ b/server/src/types/monitor.ts @@ -75,7 +75,8 @@ export interface UptimeDetailsResult { monitorStats: import("./monitorStats.js").MonitorStats | null; } -export interface HardwareDetailsResult extends Monitor { +export interface HardwareDetailsResult { + monitor: Monitor; stats: { aggregateData: { totalChecks: number; @@ -111,6 +112,7 @@ export interface HardwareDetailsResult extends Monitor { }>; }>; }; + monitorStats: import("./monitorStats.js").MonitorStats | null; } export interface PageSpeedDetailsResult {