headers

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<string>("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<HardwareDetailsResponse>(
+		monitorDetailsUrl,
+		{},
+		{ refreshInterval: 10000, keepPreviousData: true }
+	);
+
+	console.log(monitorDetailsData);
+
+	const monitor = monitorDetailsData?.monitor;
+	const monitorStats = monitorDetailsData?.monitorStats ?? null;
+
+	return (
+		<BasePage>
+			<HeaderMonitorControls
+				path="hardware"
+				monitor={monitor}
+				isAdmin={isAdmin}
+				refetch={refetchMonitor}
+			/>
+			<MonitorStatBoxes
+				monitor={monitor}
+				monitorStats={monitorStats}
+			/>
+		</BasePage>
+	);
 };
 
 export default InfrastructureDetails;

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";
 

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;
+}