From 24cf4896aaa3171434e66057306edad815fbaa20 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Thu, 15 May 2025 10:51:06 -0700
Subject: [PATCH] use new header

---
 client/src/Pages/Uptime/Details/index.jsx | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/client/src/Pages/Uptime/Details/index.jsx b/client/src/Pages/Uptime/Details/index.jsx
index be1ccbcd2..a45c1cdd6 100644
--- a/client/src/Pages/Uptime/Details/index.jsx
+++ b/client/src/Pages/Uptime/Details/index.jsx
@@ -1,5 +1,6 @@
 // Components
 import Breadcrumbs from "../../../Components/Breadcrumbs";
+import MonitorDetailsControlHeader from "../../../Components/MonitorDetailsControlHeader";
 import MonitorStatusHeader from "../../../Components/MonitorStatusHeader";
 import MonitorTimeFrameHeader from "../../../Components/MonitorTimeFrameHeader";
 import ChartBoxes from "./Components/ChartBoxes";
@@ -36,9 +37,9 @@ const UptimeDetails = () => {
 
 	// Local state
 	const [dateRange, setDateRange] = useState("recent");
-
 	const [page, setPage] = useState(0);
 	const [rowsPerPage, setRowsPerPage] = useState(5);
+	const [trigger, setTrigger] = useState(false);
 
 	// Utils
 	const dateFormat =
@@ -52,6 +53,7 @@ const UptimeDetails = () => {
 		useFetchUptimeMonitorDetails({
 			monitorId,
 			dateRange,
+			trigger,
 		});
 
 	const monitor = monitorData?.monitor;
@@ -73,6 +75,11 @@ const UptimeDetails = () => {
 	});
 
 	// Handlers
+	const triggerUpdate = () => {
+		console.log("trigger update");
+		setTrigger(!trigger);
+	};
+
 	const handlePageChange = (_, newPage) => {
 		setPage(newPage);
 	};
@@ -101,11 +108,12 @@ const UptimeDetails = () => {
 		return (
 			<Stack gap={theme.spacing(10)}>
 				<Breadcrumbs list={BREADCRUMBS} />
-				<MonitorStatusHeader
+				<MonitorDetailsControlHeader
 					path={"uptime"}
 					isAdmin={isAdmin}
-					shouldRender={!monitorIsLoading}
+					isLoading={monitorIsLoading}
 					monitor={monitor}
+					triggerUpdate={triggerUpdate}
 				/>
 				<GenericFallback>
 					<Typography>{t("distributedUptimeDetailsNoMonitorHistory")}</Typography>
@@ -117,11 +125,12 @@ const UptimeDetails = () => {
 	return (
 		<Stack gap={theme.spacing(10)}>
 			<Breadcrumbs list={BREADCRUMBS} />
-			<MonitorStatusHeader
+			<MonitorDetailsControlHeader
 				path={"uptime"}
 				isAdmin={isAdmin}
 				isLoading={monitorIsLoading}
 				monitor={monitor}
+				triggerUpdate={triggerUpdate}
 			/>
 			<UptimeStatusBoxes
 				isLoading={monitorIsLoading}