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

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

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

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 {