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 ( + + + + {isAdmin && ( + + )} + {isAdmin && ( + + )} + ); }; 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",