From f30529e8a21f55661f34a93811ea63394c69f6b6 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Mon, 16 Jun 2025 11:17:09 +0800
Subject: [PATCH] add universal header to infra details

---
 client/src/Hooks/monitorHooks.js              |  4 ++--
 .../Pages/Infrastructure/Details/index.jsx    | 20 +++++++++++++------
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/client/src/Hooks/monitorHooks.js b/client/src/Hooks/monitorHooks.js
index d88132dae..1aa650cf2 100644
--- a/client/src/Hooks/monitorHooks.js
+++ b/client/src/Hooks/monitorHooks.js
@@ -220,7 +220,7 @@ const useFetchMonitorById = ({ monitorId, setMonitor, updateTrigger }) => {
 	return [isLoading];
 };
 
-const useFetchHardwareMonitorById = ({ monitorId, dateRange }) => {
+const useFetchHardwareMonitorById = ({ monitorId, dateRange, updateTrigger }) => {
 	const [isLoading, setIsLoading] = useState(true);
 	const [networkError, setNetworkError] = useState(false);
 	const [monitor, setMonitor] = useState(undefined);
@@ -243,7 +243,7 @@ const useFetchHardwareMonitorById = ({ monitorId, dateRange }) => {
 			}
 		};
 		fetchMonitor();
-	}, [monitorId, dateRange]);
+	}, [monitorId, dateRange, updateTrigger]);
 	return [monitor, isLoading, networkError];
 };
 
diff --git a/client/src/Pages/Infrastructure/Details/index.jsx b/client/src/Pages/Infrastructure/Details/index.jsx
index 842e0f6d9..b57e0b91e 100644
--- a/client/src/Pages/Infrastructure/Details/index.jsx
+++ b/client/src/Pages/Infrastructure/Details/index.jsx
@@ -1,7 +1,7 @@
 // Components
 import { Stack, Typography } from "@mui/material";
 import Breadcrumbs from "../../../Components/Breadcrumbs";
-import MonitorStatusHeader from "../../../Components/MonitorStatusHeader";
+import MonitorDetailsControlHeader from "../../../Components/MonitorDetailsControlHeader";
 import MonitorTimeFrameHeader from "../../../Components/MonitorTimeFrameHeader";
 import StatusBoxes from "./Components/StatusBoxes";
 import GaugeBoxes from "./Components/GaugeBoxes";
@@ -26,6 +26,7 @@ const InfrastructureDetails = () => {
 
 	// Local state
 	const [dateRange, setDateRange] = useState("recent");
+	const [trigger, setTrigger] = useState(false);
 
 	// Utils
 	const theme = useTheme();
@@ -36,8 +37,13 @@ const InfrastructureDetails = () => {
 	const [monitor, isLoading, networkError] = useFetchHardwareMonitorById({
 		monitorId,
 		dateRange,
+		updateTrigger: trigger,
 	});
 
+	const triggerUpdate = () => {
+		setTrigger(!trigger);
+	};
+
 	if (networkError === true) {
 		return (
 			<GenericFallback>
@@ -57,11 +63,12 @@ const InfrastructureDetails = () => {
 		return (
 			<Stack gap={theme.spacing(10)}>
 				<Breadcrumbs list={BREADCRUMBS} />
-				<MonitorStatusHeader
+				<MonitorDetailsControlHeader
 					path={"infrastructure"}
-					isAdmin={false}
-					shouldRender={!isLoading}
+					isLoading={isLoading}
+					isAdmin={isAdmin}
 					monitor={monitor}
+					triggerUpdate={triggerUpdate}
 				/>
 				<GenericFallback>
 					<Typography>{t("distributedUptimeDetailsNoMonitorHistory")}</Typography>
@@ -73,11 +80,12 @@ const InfrastructureDetails = () => {
 	return (
 		<Stack gap={theme.spacing(10)}>
 			<Breadcrumbs list={BREADCRUMBS} />
-			<MonitorStatusHeader
+			<MonitorDetailsControlHeader
 				path={"infrastructure"}
+				isLoading={isLoading}
 				isAdmin={isAdmin}
-				shouldRender={!isLoading}
 				monitor={monitor}
+				triggerUpdate={triggerUpdate}
 			/>
 			<StatusBoxes
 				shouldRender={!isLoading}