monitor controls header

client/src/Components/v2/common/controls/HeaderMonitorControls.tsx

@@ -1,19 +1,93 @@
 import Stack from "@mui/material/Stack";
-import { MonitorStatus } from "@/Components/v2/design-elements";
+import { Icon, MonitorStatus } from "@/Components/v2/design-elements";
+import { Button } from "@/Components/v2/inputs";
+import { Settings, Pause, Play, Mail, Bug } from "lucide-react";
+
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import { useTheme } from "@mui/material/styles";
 
 import type { Monitor } from "@/Types/Monitor.js";
 
 interface HeaderMonitorControlsProps {
+	path: string;
 	monitor: Monitor;
+	isAdmin: boolean;
 }
 
-export const HeaderMonitorControls = ({ monitor }: HeaderMonitorControlsProps) => {
+export const HeaderMonitorControls = ({
+	path,
+	monitor,
+	isAdmin,
+}: HeaderMonitorControlsProps) => {
+	const { t } = useTranslation();
+	const navigate = useNavigate();
+	const theme = useTheme();
 	return (
 		<Stack
-			direction="row"
+			spacing={{ xs: theme.spacing(4), md: 0 }}
+			direction={{ xs: "column", md: "row" }}
+			alignItems={"center"}
 			justifyContent={"space-between"}
 		>
 			<MonitorStatus monitor={monitor} />
+			<Stack
+				width={{ xs: "100%", md: "auto" }}
+				direction={{ xs: "column", md: "row" }}
+				gap={theme.spacing(2)}
+			>
+				<Button
+					variant="contained"
+					color="secondary"
+					// loading={isSending}
+					startIcon={<Icon icon={Mail} />}
+					// disabled={isTestNotificationsDisabled}
+					onClick={() => {
+						// testAllNotifications({ monitorId: monitor?.id });
+					}}
+					sx={{
+						whiteSpace: "nowrap",
+					}}
+				>
+					{t("common.buttons.testNotifications")}
+				</Button>
+				<Button
+					variant="contained"
+					color="secondary"
+					startIcon={<Icon icon={Bug} />}
+					onClick={(e) => {
+						navigate(`/incidents/${monitor?.id}`);
+					}}
+				>
+					{t("common.buttons.incidents")}
+				</Button>
+				{isAdmin && (
+					<Button
+						variant="contained"
+						color="secondary"
+						// loading={isPausing}
+						startIcon={monitor?.isActive ? <Icon icon={Pause} /> : <Icon icon={Play} />}
+						onClick={() => {
+							// pauseMonitor({
+							// 	monitorId: monitor?.id,
+							// 	triggerUpdate,
+							// });
+						}}
+					>
+						{monitor?.isActive ? t("pause") : t("resume")}
+					</Button>
+				)}
+				{isAdmin && (
+					<Button
+						variant="contained"
+						color="secondary"
+						startIcon={<Icon icon={Settings} />}
+						onClick={() => navigate(`/${path}/configure/${monitor.id}`)}
+					>
+						Configure
+					</Button>
+				)}
+			</Stack>
 		</Stack>
 	);
 };

client/src/Components/v2/design-elements/Icon.tsx

@@ -0,0 +1,13 @@
+import type { LucideIcon } from "lucide-react";
+
+interface IconProps {
+	icon: LucideIcon;
+	size?: number;
+	strokeWidth?: number;
+}
+
+const Icon = ({ icon: Icon, size = 20, strokeWidth = 1.5 }: IconProps) => {
+	return <Icon size={size} strokeWidth={strokeWidth} />;
+};
+
+export default Icon;

client/src/Components/v2/design-elements/index.tsx

@@ -11,3 +11,4 @@ export * from "./StatusLabel";
 export * from "./PulseDot";
 export * from "./Dot";
 export * from "./MonitorStatus";
+export { default as Icon } from "./Icon";

client/src/Pages/Uptime/Details/index.tsx

@@ -1,3 +1,7 @@
+import { BasePage } from "@/Components/v2/design-elements";
+import { HeaderMonitorControls } from "@/Components/v2/common";
+
+import { useIsAdmin } from "@/Hooks/useIsAdmin";
 import { useState, useMemo } from "react";
 import { useParams } from "react-router-dom";
 import { useSelector } from "react-redux";
@@ -6,12 +10,11 @@ import type { MonitorDetailsResponse } from "@/Types/Monitor";
 import type { ChecksResponse } from "@/Types/Check";
 import type { RootState } from "@/Types/state";
 import useCertificateFetch from "./Hooks/useCertificateFetch";
-import { BasePage } from "@/Components/v2/design-elements";
-import { HeaderMonitorControls } from "@/Components/v2/common";
 
 const certificateDateFormat = "MMM D, YYYY h A";
 
 const UptimeDetailsPage = () => {
+	const isAdmin = useIsAdmin();
 	const { monitorId } = useParams<{ monitorId: string }>();
 	const uiTimezone = useSelector((state: RootState) => state.ui.timezone);
 
@@ -86,9 +89,17 @@ const UptimeDetailsPage = () => {
 		setDateRange,
 	});
 
+	if (!monitor) {
+		return null;
+	}
+
 	return (
 		<BasePage>
-			<HeaderMonitorControls monitor={monitor} />
+			<HeaderMonitorControls
+				path="uptime"
+				monitor={monitor}
+				isAdmin={isAdmin}
+			/>
 		</BasePage>
 	);
 };

client/src/locales/en.json

@@ -4,7 +4,9 @@
 		"monitoringAgentName": "Capture",
 		"buttons": {
 			"toggleTheme": "Toggles light & dark",
-			"create": "Create"
+			"testNotifications": "Test notifications",
+			"create": "Create",
+			"incidents": "Incidents"
 		},
 		"toasts": {
 			"networkError": "Network error",