From 9263f9f950f963fc72e6022d7633ce36a8ab6859 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Thu, 15 May 2025 10:48:54 -0700
Subject: [PATCH] add unified control header for all monitor details pages

---
 .../MonitorDetailsControlHeader/index.jsx     | 80 +++++++++++++++++++
 .../MonitorDetailsControlHeader/skeleton.jsx  | 23 ++++++
 .../MonitorDetailsControlHeader/status.jsx    | 44 ++++++++++
 3 files changed, 147 insertions(+)
 create mode 100644 client/src/Components/MonitorDetailsControlHeader/index.jsx
 create mode 100644 client/src/Components/MonitorDetailsControlHeader/skeleton.jsx
 create mode 100644 client/src/Components/MonitorDetailsControlHeader/status.jsx

diff --git a/client/src/Components/MonitorDetailsControlHeader/index.jsx b/client/src/Components/MonitorDetailsControlHeader/index.jsx
new file mode 100644
index 000000000..1639799c4
--- /dev/null
+++ b/client/src/Components/MonitorDetailsControlHeader/index.jsx
@@ -0,0 +1,80 @@
+import Stack from "@mui/material/Stack";
+import Status from "./status";
+import Skeleton from "./skeleton";
+import Button from "@mui/material/Button";
+import SettingsOutlinedIcon from "@mui/icons-material/SettingsOutlined";
+import PauseOutlinedIcon from "@mui/icons-material/PauseOutlined";
+import PlayArrowOutlinedIcon from "@mui/icons-material/PlayArrowOutlined";
+
+// Utils
+import PropTypes from "prop-types";
+import { useNavigate } from "react-router-dom";
+import { useTheme } from "@mui/material/styles";
+import { usePauseMonitor } from "../../Hooks/useMonitorControls";
+import { useEffect } from "react";
+const MonitorDetailsControlHeader = ({
+	path,
+	isLoading = false,
+	isAdmin = false,
+	monitor,
+	triggerUpdate,
+}) => {
+	const navigate = useNavigate();
+	const theme = useTheme();
+	const [pauseMonitor, updatedMonitor, isPausing, error] = usePauseMonitor({
+		monitorId: monitor?._id,
+		triggerUpdate,
+	});
+
+	if (isLoading) {
+		return <Skeleton />;
+	}
+
+	return (
+		<Stack
+			direction="row"
+			justifyContent="space-between"
+		>
+			<Status monitor={monitor} />
+
+			<Stack
+				direction="row"
+				gap={theme.spacing(2)}
+			>
+				<Button
+					variant="contained"
+					color="secondary"
+					startIcon={
+						monitor?.isActive ? <PauseOutlinedIcon /> : <PlayArrowOutlinedIcon />
+					}
+					onClick={() => {
+						pauseMonitor();
+					}}
+				>
+					{monitor?.isActive ? "Pause" : "Resume"}
+				</Button>
+
+				{isAdmin && (
+					<Button
+						variant="contained"
+						color="secondary"
+						startIcon={<SettingsOutlinedIcon />}
+						onClick={() => navigate(`/${path}/configure/${monitor._id}`)}
+					>
+						Configure
+					</Button>
+				)}
+			</Stack>
+		</Stack>
+	);
+};
+
+MonitorDetailsControlHeader.propTypes = {
+	path: PropTypes.string,
+	isLoading: PropTypes.bool,
+	isAdmin: PropTypes.bool,
+	monitor: PropTypes.object,
+	triggerUpdate: PropTypes.func,
+};
+
+export default MonitorDetailsControlHeader;
diff --git a/client/src/Components/MonitorDetailsControlHeader/skeleton.jsx b/client/src/Components/MonitorDetailsControlHeader/skeleton.jsx
new file mode 100644
index 000000000..64dc0547f
--- /dev/null
+++ b/client/src/Components/MonitorDetailsControlHeader/skeleton.jsx
@@ -0,0 +1,23 @@
+import { Stack, Skeleton } from "@mui/material";
+
+const SkeletonLayout = () => {
+	return (
+		<Stack
+			direction="row"
+			justifyContent="space-between"
+		>
+			<Skeleton
+				height={40}
+				variant="rounded"
+				width="15%"
+			/>
+			<Skeleton
+				height={40}
+				variant="rounded"
+				width="15%"
+			/>
+		</Stack>
+	);
+};
+
+export default SkeletonLayout;
diff --git a/client/src/Components/MonitorDetailsControlHeader/status.jsx b/client/src/Components/MonitorDetailsControlHeader/status.jsx
new file mode 100644
index 000000000..910a22210
--- /dev/null
+++ b/client/src/Components/MonitorDetailsControlHeader/status.jsx
@@ -0,0 +1,44 @@
+// Components
+import Stack from "@mui/material/Stack";
+import PulseDot from "../../Components/Animated/PulseDot";
+import Typography from "@mui/material/Typography";
+import Dot from "../../Components/Dot";
+// Utils
+import { formatDurationRounded } from "../../Utils/timeUtils";
+import PropTypes from "prop-types";
+import { useTheme } from "@emotion/react";
+import useUtils from "../../Pages/Uptime/Monitors/Hooks/useUtils";
+
+const Status = ({ monitor }) => {
+	const theme = useTheme();
+	const { statusColor, determineState } = useUtils();
+
+	return (
+		<Stack>
+			<Typography variant="h1">{monitor?.name}</Typography>
+			<Stack
+				direction="row"
+				alignItems={"center"}
+				gap={theme.spacing(4)}
+			>
+				<PulseDot color={statusColor[determineState(monitor)]} />
+				<Typography
+					variant="h2"
+					style={{ fontFamily: "monospace", fontWeight: "bolder" }}
+				>
+					{monitor?.url?.replace(/^https?:\/\//, "") || "..."}
+				</Typography>
+				<Dot />
+				<Typography>
+					Checking every {formatDurationRounded(monitor?.interval)}.
+				</Typography>
+			</Stack>
+		</Stack>
+	);
+};
+
+Status.propTypes = {
+	monitor: PropTypes.object,
+};
+
+export default Status;