diff --git a/client/src/Components/v2/common/controls/HeaderMonitorControls.tsx b/client/src/Components/v2/common/controls/HeaderMonitorControls.tsx
index 9a1f99380..f908e4185 100644
--- a/client/src/Components/v2/common/controls/HeaderMonitorControls.tsx
+++ b/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 (
+
+ }
+ // disabled={isTestNotificationsDisabled}
+ onClick={() => {
+ // testAllNotifications({ monitorId: monitor?.id });
+ }}
+ sx={{
+ whiteSpace: "nowrap",
+ }}
+ >
+ {t("common.buttons.testNotifications")}
+
+ }
+ onClick={(e) => {
+ navigate(`/incidents/${monitor?.id}`);
+ }}
+ >
+ {t("common.buttons.incidents")}
+
+ {isAdmin && (
+ : }
+ onClick={() => {
+ // pauseMonitor({
+ // monitorId: monitor?.id,
+ // triggerUpdate,
+ // });
+ }}
+ >
+ {monitor?.isActive ? t("pause") : t("resume")}
+
+ )}
+ {isAdmin && (
+ }
+ onClick={() => navigate(`/${path}/configure/${monitor.id}`)}
+ >
+ Configure
+
+ )}
+
);
};
diff --git a/client/src/Components/v2/design-elements/Icon.tsx b/client/src/Components/v2/design-elements/Icon.tsx
new file mode 100644
index 000000000..bc49ddcc0
--- /dev/null
+++ b/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 ;
+};
+
+export default Icon;
diff --git a/client/src/Components/v2/design-elements/index.tsx b/client/src/Components/v2/design-elements/index.tsx
index ce2a3b48d..e71cfb2ec 100644
--- a/client/src/Components/v2/design-elements/index.tsx
+++ b/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";
diff --git a/client/src/Pages/Uptime/Details/index.tsx b/client/src/Pages/Uptime/Details/index.tsx
index b2f32276b..a816bd4d9 100644
--- a/client/src/Pages/Uptime/Details/index.tsx
+++ b/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 (
-
+
);
};
diff --git a/client/src/locales/en.json b/client/src/locales/en.json
index de02815b1..11b003442 100644
--- a/client/src/locales/en.json
+++ b/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",