From f6b97c691ec27aa5a5dba1cc0a220e35e44c5db5 Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Fri, 3 Oct 2025 15:40:53 -0700 Subject: [PATCH 1/5] iniital uptime --- .../v2/DesignElements/StatusBox.tsx | 101 ++++++++++++++++++ .../Components/v2/DesignElements/Table.tsx | 69 ++++++++++++ .../Components/v2/DesignElements/index.tsx | 2 + client/src/Components/v2/Inputs/Button.tsx | 12 +++ client/src/Components/v2/Inputs/index.tsx | 1 + .../src/Components/v2/Layouts/RootLayout.tsx | 1 + .../Components/v2/Monitors/HeaderCreate.tsx | 35 ++++++ .../v2/Monitors/HistogramResponseTime.tsx | 91 ++++++++++++++++ client/src/Components/v2/Monitors/index.tsx | 1 + client/src/Pages/v2/Uptime/MonitorTable.tsx | 63 +++++++++++ client/src/Pages/v2/Uptime/UptimeMonitors.tsx | 49 +++++++++ client/src/Routes/v2router.tsx | 5 +- client/src/Types/Check.ts | 12 +++ client/src/Types/Monitor.ts | 19 ++++ client/src/{types => Types}/env.d.ts | 0 client/src/{types => Types}/mui.d.ts | 0 client/src/Utils/Theme/globalTheme.js | 2 +- client/src/Utils/Theme/v2/palette.ts | 30 ++++++ 18 files changed, 490 insertions(+), 3 deletions(-) create mode 100644 client/src/Components/v2/DesignElements/StatusBox.tsx create mode 100644 client/src/Components/v2/DesignElements/Table.tsx create mode 100644 client/src/Components/v2/Inputs/Button.tsx create mode 100644 client/src/Components/v2/Inputs/index.tsx create mode 100644 client/src/Components/v2/Monitors/HeaderCreate.tsx create mode 100644 client/src/Components/v2/Monitors/HistogramResponseTime.tsx create mode 100644 client/src/Components/v2/Monitors/index.tsx create mode 100644 client/src/Pages/v2/Uptime/MonitorTable.tsx create mode 100644 client/src/Pages/v2/Uptime/UptimeMonitors.tsx create mode 100644 client/src/Types/Check.ts create mode 100644 client/src/Types/Monitor.ts rename client/src/{types => Types}/env.d.ts (100%) rename client/src/{types => Types}/mui.d.ts (100%) diff --git a/client/src/Components/v2/DesignElements/StatusBox.tsx b/client/src/Components/v2/DesignElements/StatusBox.tsx new file mode 100644 index 000000000..540255dfd --- /dev/null +++ b/client/src/Components/v2/DesignElements/StatusBox.tsx @@ -0,0 +1,101 @@ +import Stack from "@mui/material/Stack"; +import Typography from "@mui/material/Typography"; +import Box from "@mui/material/Box"; +import Background from "@/assets/Images/background-grid.svg?react"; +import { useTranslation } from "react-i18next"; + +import { useTheme } from "@mui/material/styles"; + +type StatusBoxProps = React.PropsWithChildren<{}>; + +export const BGBox: React.FC = ({ children }) => { + const theme = useTheme(); + return ( + + + + + {children} + + ); +}; + +const StatusBox = ({ + label, + n, + color, +}: { + label: string; + n: number; + color: string | undefined; +}) => { + const theme = useTheme(); + return ( + + + + {label} + + + {n} + + + + ); +}; + +export const UpStatusBox = ({ n }: { n: number }) => { + const theme = useTheme(); + const { t } = useTranslation(); + return ( + + ); +}; + +export const DownStatusBox = ({ n }: { n: number }) => { + const theme = useTheme(); + const { t } = useTranslation(); + return ( + + ); +}; + +export const PausedStatusBox = ({ n }: { n: number }) => { + const theme = useTheme(); + const { t } = useTranslation(); + return ( + + ); +}; diff --git a/client/src/Components/v2/DesignElements/Table.tsx b/client/src/Components/v2/DesignElements/Table.tsx new file mode 100644 index 000000000..b45a5bee9 --- /dev/null +++ b/client/src/Components/v2/DesignElements/Table.tsx @@ -0,0 +1,69 @@ +import Paper from "@mui/material/Paper"; +import Table from "@mui/material/Table"; +import TableBody from "@mui/material/TableBody"; +import TableCell from "@mui/material/TableCell"; +import TableContainer from "@mui/material/TableContainer"; +import TableHead from "@mui/material/TableHead"; +import TableRow from "@mui/material/TableRow"; + +export type Header = { + id: number | string; + content: React.ReactNode; + onClick?: (event: React.MouseEvent, row: T) => void; + render: (row: T) => React.ReactNode; +}; + +type DataTableProps = { + headers: Header[]; + data: T[]; +}; + +export function DataTable({ + headers, + data, +}: DataTableProps) { + if (data.length === 0 || headers.length === 0) return
No data
; + return ( + + + + + {headers.map((header, idx) => { + return ( + + {header.content} + + ); + })} + + + + {data.map((row) => { + const key = row.id || row._id || Math.random(); + + return ( + + {headers.map((header, index) => { + return ( + header.onClick!(e, row) : undefined + } + > + {header.render(row)} + + ); + })} + + ); + })} + +
+ + ); +} diff --git a/client/src/Components/v2/DesignElements/index.tsx b/client/src/Components/v2/DesignElements/index.tsx index bc21144c0..41b4b319a 100644 --- a/client/src/Components/v2/DesignElements/index.tsx +++ b/client/src/Components/v2/DesignElements/index.tsx @@ -1,2 +1,4 @@ export { SplitBox as HorizontalSplitBox, ConfigBox } from "./SplitBox"; export { BasePage } from "./BasePage"; +export { BGBox, UpStatusBox, DownStatusBox, PausedStatusBox } from "./StatusBox"; +export { DataTable as Table } from "./Table"; diff --git a/client/src/Components/v2/Inputs/Button.tsx b/client/src/Components/v2/Inputs/Button.tsx new file mode 100644 index 000000000..9409f9af8 --- /dev/null +++ b/client/src/Components/v2/Inputs/Button.tsx @@ -0,0 +1,12 @@ +import Button from "@mui/material/Button"; +import type { ButtonProps } from "@mui/material/Button"; +import { useTheme } from "@mui/material/styles"; +export const ButtonInput: React.FC = ({ ...props }) => { + const theme = useTheme(); + return ( + + + ); +}; diff --git a/client/src/Components/v2/Monitors/HistogramResponseTime.tsx b/client/src/Components/v2/Monitors/HistogramResponseTime.tsx new file mode 100644 index 000000000..43e9a9677 --- /dev/null +++ b/client/src/Components/v2/Monitors/HistogramResponseTime.tsx @@ -0,0 +1,91 @@ +import Stack from "@mui/material/Stack"; +import Box from "@mui/material/Box"; +import { useTheme } from "@mui/material/styles"; +import type { Check } from "@/Types/Check"; + +export const HistogramResponseTime = ({ checks }: { checks: Check[] }) => { + let data = Array(); + + data = checks.map((c) => Math.max(c.responseTime, 1)); + + const logResponses = data.map((r) => Math.log10(r)); + const logMin = Math.min(...logResponses); + const logMax = Math.max(...logResponses); + + if (!checks) { + return null; + } + if (checks.length !== 25) { + const placeholders = Array(25 - checks.length).fill("placeholder"); + data = [...checks, ...placeholders]; + } else { + data = checks; + } + + const theme = useTheme(); + + return ( + event.stopPropagation()} + sx={{ + cursor: "default", + }} + > + {data.map((check, index) => { + const safeResponse = Math.max(check.responseTime, 1); + const logValue = Math.log10(safeResponse); + const barHeight = + logMax === logMin ? 100 : ((logValue - logMin) / (logMax - logMin)) * 100; + + if (check === "placeholder") { + return ( + + ); + } else { + return ( + + + + ); + } + })} + + ); +}; diff --git a/client/src/Components/v2/Monitors/index.tsx b/client/src/Components/v2/Monitors/index.tsx new file mode 100644 index 000000000..3b0acbd20 --- /dev/null +++ b/client/src/Components/v2/Monitors/index.tsx @@ -0,0 +1 @@ +export { HeaderCreate } from "./HeaderCreate"; diff --git a/client/src/Pages/v2/Uptime/MonitorTable.tsx b/client/src/Pages/v2/Uptime/MonitorTable.tsx new file mode 100644 index 000000000..55d3cdfe3 --- /dev/null +++ b/client/src/Pages/v2/Uptime/MonitorTable.tsx @@ -0,0 +1,63 @@ +import Stack from "@mui/material/Stack"; +import { HistogramResponseTime } from "@/Components/v2/Monitors/HistogramResponseTime"; +import type { Header } from "@/Components/v2/DesignElements/Table"; +import type { IMonitor } from "@/Types/Monitor"; +import { Table } from "@/Components/v2/DesignElements"; +import { useTranslation } from "react-i18next"; +import { useMediaQuery } from "@mui/material"; +import { useTheme } from "@mui/material/styles"; +const getHeaders = (t: Function) => { + const headers: Header[] = [ + { + id: "name", + content: t("host"), + render: (row) => { + return row.name; + }, + }, + { + id: "status", + content: t("status"), + render: (row) => { + return row.status; + }, + }, + { + id: "histogram", + content: t("responseTime"), + render: (row) => { + return ( + + + + ); + }, + }, + { + id: "type", + content: t("type"), + render: (row) => { + return row.type; + }, + }, + ]; + return headers; +}; + +export const MonitorTable = ({ monitors }: { monitors: IMonitor[] }) => { + const { t } = useTranslation(); + const theme = useTheme(); + const isSmall = useMediaQuery(theme.breakpoints.down("md")); + + let headers = getHeaders(t); + + if (isSmall) { + headers = headers.filter((h) => h.id !== "histogram"); + } + return ( + + ); +}; diff --git a/client/src/Pages/v2/Uptime/UptimeMonitors.tsx b/client/src/Pages/v2/Uptime/UptimeMonitors.tsx new file mode 100644 index 000000000..9c626c991 --- /dev/null +++ b/client/src/Pages/v2/Uptime/UptimeMonitors.tsx @@ -0,0 +1,49 @@ +import { + BasePage, + UpStatusBox, + DownStatusBox, + PausedStatusBox, +} from "@/Components/v2/DesignElements"; +import { HeaderCreate } from "@/Components/v2/Monitors"; +import Stack from "@mui/material/Stack"; +import { MonitorTable } from "@/Pages/v2/Uptime/MonitorTable"; + +import { useTheme } from "@mui/material/styles"; +import { useGet } from "@/Hooks/v2/UseApi"; +import type { ApiResponse } from "@/Hooks/v2/UseApi"; +import type { IMonitor } from "@/Types/Monitor"; +import { useMediaQuery } from "@mui/material"; + +const UptimeMonitors = () => { + const theme = useTheme(); + const isSmall = useMediaQuery(theme.breakpoints.down("md")); + + const { response, error, loading, refetch } = useGet( + "/monitors?embedChecks=true" + ); + const monitors = response?.data ?? ([] as IMonitor[]); + + if (monitors.length === 0 && !loading) { + return "No monitors found"; + } + + return ( + + + + + + + + + + ); +}; + +export default UptimeMonitors; diff --git a/client/src/Routes/v2router.tsx b/client/src/Routes/v2router.tsx index 4be761a4b..742302762 100644 --- a/client/src/Routes/v2router.tsx +++ b/client/src/Routes/v2router.tsx @@ -4,6 +4,7 @@ import { lightTheme, darkTheme } from "@/Utils/Theme/v2/theme"; import AuthLoginV2 from "@/Pages/v2/Auth/Login"; import AuthRegisterV2 from "@/Pages/v2/Auth/Register"; +import UptimeMonitorsPage from "@/Pages/v2/Uptime/UptimeMonitors"; import CreateUptimePage from "@/Pages/v2/Uptime/Create"; import RootLayout from "@/Components/v2/Layouts/RootLayout"; @@ -27,11 +28,11 @@ const V2Routes = ({ mode = "light" }) => { > Uptime} + element={} /> Test Page} + element={} /> ({ variants: [ { props: (props) => props.variant === "contained" && props.color === "accent", + backgroundColor: theme.palette.accent.main, style: { - backgroundColor: theme.palette.accent.main, color: theme.palette.primary.contrastTextSecondaryDarkBg, letterSpacing: "0.5px", textShadow: "0 0 1px rgba(0, 0, 0, 0.15)", diff --git a/client/src/Utils/Theme/v2/palette.ts b/client/src/Utils/Theme/v2/palette.ts index 855f7b6b8..43370fe8b 100644 --- a/client/src/Utils/Theme/v2/palette.ts +++ b/client/src/Utils/Theme/v2/palette.ts @@ -66,6 +66,21 @@ export const lightPalette = { main: colors.gray100, contrastText: colors.blueGray800, }, + success: { + main: colors.green700, + contrastText: colors.offWhite, + lowContrast: colors.green400, + }, + warning: { + main: colors.orange700, + contrastText: colors.offWhite, + lowContrast: colors.orange100, + }, + error: { + main: colors.red700, + contrastText: colors.offWhite, + lowContrast: colors.red400, + }, }; export const darkPalette = { @@ -91,4 +106,19 @@ export const darkPalette = { main: colors.blueGray800, contrastText: colors.gray100, }, + success: { + main: colors.green100, + contrastText: colors.offBlack, + lowContrast: colors.green200, + }, + warning: { + main: colors.orange200, + contrastText: colors.offBlack, + lowContrast: colors.orange600, + }, + error: { + main: colors.red100, + contrastText: colors.offBlack, + lowContrast: colors.red600, + }, }; From 7c3a05077c6126b7e3bf697ef018bcfdd2e96b7d Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Mon, 6 Oct 2025 10:56:29 -0700 Subject: [PATCH 2/5] tooltip --- .../v2/Monitors/HistogramResponseTime.tsx | 50 +++++++++++-------- .../Monitors/HistogramResponseTimeTooltip.tsx | 29 +++++++++++ client/src/Types/Check.ts | 7 +++ client/src/Utils/TimeUtils.ts | 25 ++++++++++ 4 files changed, 90 insertions(+), 21 deletions(-) create mode 100644 client/src/Components/v2/Monitors/HistogramResponseTimeTooltip.tsx create mode 100644 client/src/Utils/TimeUtils.ts diff --git a/client/src/Components/v2/Monitors/HistogramResponseTime.tsx b/client/src/Components/v2/Monitors/HistogramResponseTime.tsx index 43e9a9677..d19ddbf53 100644 --- a/client/src/Components/v2/Monitors/HistogramResponseTime.tsx +++ b/client/src/Components/v2/Monitors/HistogramResponseTime.tsx @@ -2,6 +2,7 @@ import Stack from "@mui/material/Stack"; import Box from "@mui/material/Box"; import { useTheme } from "@mui/material/styles"; import type { Check } from "@/Types/Check"; +import { HistogramResponseTimeTooltip } from "@/Components/v2/Monitors/HistogramResponseTimeTooltip"; export const HistogramResponseTime = ({ checks }: { checks: Check[] }) => { let data = Array(); @@ -39,8 +40,11 @@ export const HistogramResponseTime = ({ checks }: { checks: Check[] }) => { {data.map((check, index) => { const safeResponse = Math.max(check.responseTime, 1); const logValue = Math.log10(safeResponse); + const minHeight = 10; const barHeight = - logMax === logMin ? 100 : ((logValue - logMin) / (logMax - logMin)) * 100; + logMax === logMin + ? 100 + : Math.max(minHeight, ((logValue - logMin) / (logMax - logMin)) * 100); if (check === "placeholder") { return ( @@ -57,32 +61,36 @@ export const HistogramResponseTime = ({ checks }: { checks: Check[] }) => { ); } else { return ( - - + > + + + ); } })} diff --git a/client/src/Components/v2/Monitors/HistogramResponseTimeTooltip.tsx b/client/src/Components/v2/Monitors/HistogramResponseTimeTooltip.tsx new file mode 100644 index 000000000..d704cf5d4 --- /dev/null +++ b/client/src/Components/v2/Monitors/HistogramResponseTimeTooltip.tsx @@ -0,0 +1,29 @@ +import Stack from "@mui/material/Stack"; +import Tooltip from "@mui/material/Tooltip"; +import Typography from "@mui/material/Typography"; +import { formatDateWithTz } from "@/Utils/TimeUtils"; +import { useSelector } from "react-redux"; +import type { LatestCheck } from "@/Types/Check"; + +export const HistogramResponseTimeTooltip: React.FC<{ + children: React.ReactElement; + check: LatestCheck; +}> = ({ children, check }) => { + const uiTimezone = useSelector((state: any) => state.ui.timezone); + return ( + + + {formatDateWithTz(check?.checkedAt, "ddd, MMMM D, YYYY, HH:mm A", uiTimezone)} + + {check?.responseTime && ( + Response Time: {check.responseTime} ms + )} + + } + > + {children} + + ); +}; diff --git a/client/src/Types/Check.ts b/client/src/Types/Check.ts index 0590069cc..c3c3712f0 100644 --- a/client/src/Types/Check.ts +++ b/client/src/Types/Check.ts @@ -10,3 +10,10 @@ export interface GroupedCheck { avgResponseTime: number; count: number; } + +export interface LatestCheck { + status: string; + responseTime: number; + checkedAt: string; + _id: string; +} diff --git a/client/src/Utils/TimeUtils.ts b/client/src/Utils/TimeUtils.ts new file mode 100644 index 000000000..5dc9b23c1 --- /dev/null +++ b/client/src/Utils/TimeUtils.ts @@ -0,0 +1,25 @@ +import dayjs from "dayjs"; +import duration from "dayjs/plugin/duration"; +import utc from "dayjs/plugin/utc"; +import timezone from "dayjs/plugin/timezone"; +import customParseFormat from "dayjs/plugin/customParseFormat"; + +dayjs.extend(utc); +dayjs.extend(timezone); +dayjs.extend(customParseFormat); +dayjs.extend(duration); + +export const MS_PER_SECOND = 1000; +export const MS_PER_MINUTE = 60 * MS_PER_SECOND; +export const MS_PER_HOUR = 60 * MS_PER_MINUTE; +export const MS_PER_DAY = 24 * MS_PER_HOUR; +export const MS_PER_WEEK = MS_PER_DAY * 7; + +export const formatDateWithTz = (timestamp: string, format: string, timezone: string) => { + if (!timestamp) { + return "Unknown time"; + } + + const formattedDate = dayjs(timestamp).tz(timezone).format(format); + return formattedDate; +}; From 61651a0f4dcda47f3957e147665227cb60d5a8e8 Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Mon, 6 Oct 2025 11:34:29 -0700 Subject: [PATCH 3/5] action menu --- .../src/Components/v2/ActionsMenu/index.tsx | 50 ++++++++++++++ .../Components/v2/DesignElements/Table.tsx | 25 ++++++- client/src/Pages/v2/Uptime/MonitorTable.tsx | 67 +++++++++++++++++++ client/src/Utils/Theme/v2/theme.ts | 20 ++++++ 4 files changed, 160 insertions(+), 2 deletions(-) create mode 100644 client/src/Components/v2/ActionsMenu/index.tsx diff --git a/client/src/Components/v2/ActionsMenu/index.tsx b/client/src/Components/v2/ActionsMenu/index.tsx new file mode 100644 index 000000000..fb5f48fc9 --- /dev/null +++ b/client/src/Components/v2/ActionsMenu/index.tsx @@ -0,0 +1,50 @@ +import { useState } from "react"; +import Menu from "@mui/material/Menu"; +import MenuItem from "@mui/material/MenuItem"; +import IconButton from "@mui/material/IconButton"; +import Settings from "@/assets/icons/settings-bold.svg?react"; + +export type ActionMenuItem = { + id: number | string; + label: string; + action: Function; + closeMenu?: boolean; +}; + +export const ActionsMenu = ({ items }: { items: ActionMenuItem[] }) => { + const [anchorEl, setAnchorEl] = useState(null); + const open = Boolean(anchorEl); + + const handleClick = (event: React.MouseEvent) => { + setAnchorEl(event.currentTarget); + }; + + const handleClose = () => { + setAnchorEl(null); + }; + + return ( +
+ + + + + {items.map((item) => ( + { + if (item.closeMenu) handleClose(); + item.action(); + }} + > + {item.label} + + ))} + +
+ ); +}; diff --git a/client/src/Components/v2/DesignElements/Table.tsx b/client/src/Components/v2/DesignElements/Table.tsx index b45a5bee9..118a238ea 100644 --- a/client/src/Components/v2/DesignElements/Table.tsx +++ b/client/src/Components/v2/DesignElements/Table.tsx @@ -5,7 +5,8 @@ import TableCell from "@mui/material/TableCell"; import TableContainer from "@mui/material/TableContainer"; import TableHead from "@mui/material/TableHead"; import TableRow from "@mui/material/TableRow"; - +import { useTheme } from "@mui/material/styles"; +import { typographyLevels } from "@/Utils/Theme/v2/palette"; export type Header = { id: number | string; content: React.ReactNode; @@ -22,10 +23,30 @@ export function DataTable) { + const theme = useTheme(); if (data.length === 0 || headers.length === 0) return
No data
; return ( -
+
{headers.map((header, idx) => { diff --git a/client/src/Pages/v2/Uptime/MonitorTable.tsx b/client/src/Pages/v2/Uptime/MonitorTable.tsx index 55d3cdfe3..2d02359c1 100644 --- a/client/src/Pages/v2/Uptime/MonitorTable.tsx +++ b/client/src/Pages/v2/Uptime/MonitorTable.tsx @@ -6,6 +6,66 @@ import { Table } from "@/Components/v2/DesignElements"; import { useTranslation } from "react-i18next"; import { useMediaQuery } from "@mui/material"; import { useTheme } from "@mui/material/styles"; +import { ActionsMenu } from "@/Components/v2/ActionsMenu"; +import type { ActionMenuItem } from "@/Components/v2/ActionsMenu"; + +const getActions = (t: Function): ActionMenuItem[] => { + return [ + { + id: 1, + label: "Open site", + action: () => { + console.log("Open site"); + }, + closeMenu: true, + }, + { + id: 2, + label: "Details", + action: () => { + console.log("Open details"); + }, + }, + { + id: 3, + label: "Incidents", + action: () => { + console.log("Open incidents"); + }, + }, + { + id: 4, + label: "Configure", + action: () => { + console.log("Open configure"); + }, + }, + { + id: 5, + label: "Clone", + action: () => { + console.log("Open clone"); + }, + }, + { + id: 6, + label: "Pause", + action: () => { + console.log("Open pause"); + }, + closeMenu: true, + }, + { + id: 7, + label: "Delete", + action: () => { + console.log("Open delete"); + }, + closeMenu: true, + }, + ]; +}; + const getHeaders = (t: Function) => { const headers: Header[] = [ { @@ -40,6 +100,13 @@ const getHeaders = (t: Function) => { return row.type; }, }, + { + id: "actions", + content: t("actions"), + render: (row) => { + return ; + }, + }, ]; return headers; }; diff --git a/client/src/Utils/Theme/v2/theme.ts b/client/src/Utils/Theme/v2/theme.ts index c278f9004..3d68613b9 100644 --- a/client/src/Utils/Theme/v2/theme.ts +++ b/client/src/Utils/Theme/v2/theme.ts @@ -1,6 +1,8 @@ import { createTheme } from "@mui/material"; import { lightPalette, darkPalette, typographyLevels } from "./palette"; const fontFamilyPrimary = '"Inter" , sans-serif'; +const shadow = + "0px 4px 24px -4px rgba(16, 24, 40, 0.08), 0px 3px 3px -3px rgba(16, 24, 40, 0.03)"; export const theme = (mode: string, palette: any) => createTheme({ @@ -66,6 +68,24 @@ export const theme = (mode: string, palette: any) => }, }, }, + + MuiPaper: { + styleOverrides: { + root: ({ theme }) => { + return { + marginTop: 4, + padding: 0, + border: 1, + borderStyle: "solid", + borderColor: theme.palette.primary.lowContrast, + borderRadius: 4, + boxShadow: shadow, + backgroundColor: theme.palette.primary.main, + backgroundImage: "none", + }; + }, + }, + }, }, shape: { borderRadius: 2, From 56e0ac964016d46d4f896b91976758566829b472 Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Mon, 6 Oct 2025 11:40:08 -0700 Subject: [PATCH 4/5] actions menu --- client/src/Components/v2/ActionsMenu/index.tsx | 4 ++-- client/src/Pages/v2/Uptime/MonitorTable.tsx | 11 ++++++----- 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/client/src/Components/v2/ActionsMenu/index.tsx b/client/src/Components/v2/ActionsMenu/index.tsx index fb5f48fc9..5b606e5b0 100644 --- a/client/src/Components/v2/ActionsMenu/index.tsx +++ b/client/src/Components/v2/ActionsMenu/index.tsx @@ -1,4 +1,4 @@ -import { useState } from "react"; +import React, { useState } from "react"; import Menu from "@mui/material/Menu"; import MenuItem from "@mui/material/MenuItem"; import IconButton from "@mui/material/IconButton"; @@ -6,7 +6,7 @@ import Settings from "@/assets/icons/settings-bold.svg?react"; export type ActionMenuItem = { id: number | string; - label: string; + label: React.ReactNode; action: Function; closeMenu?: boolean; }; diff --git a/client/src/Pages/v2/Uptime/MonitorTable.tsx b/client/src/Pages/v2/Uptime/MonitorTable.tsx index 2d02359c1..151fc31b4 100644 --- a/client/src/Pages/v2/Uptime/MonitorTable.tsx +++ b/client/src/Pages/v2/Uptime/MonitorTable.tsx @@ -8,8 +8,9 @@ import { useMediaQuery } from "@mui/material"; import { useTheme } from "@mui/material/styles"; import { ActionsMenu } from "@/Components/v2/ActionsMenu"; import type { ActionMenuItem } from "@/Components/v2/ActionsMenu"; +import Typography from "@mui/material/Typography"; -const getActions = (t: Function): ActionMenuItem[] => { +const getActions = (theme: any, t: Function): ActionMenuItem[] => { return [ { id: 1, @@ -57,7 +58,7 @@ const getActions = (t: Function): ActionMenuItem[] => { }, { id: 7, - label: "Delete", + label: Remove, action: () => { console.log("Open delete"); }, @@ -66,7 +67,7 @@ const getActions = (t: Function): ActionMenuItem[] => { ]; }; -const getHeaders = (t: Function) => { +const getHeaders = (theme: any, t: Function) => { const headers: Header[] = [ { id: "name", @@ -104,7 +105,7 @@ const getHeaders = (t: Function) => { id: "actions", content: t("actions"), render: (row) => { - return ; + return ; }, }, ]; @@ -116,7 +117,7 @@ export const MonitorTable = ({ monitors }: { monitors: IMonitor[] }) => { const theme = useTheme(); const isSmall = useMediaQuery(theme.breakpoints.down("md")); - let headers = getHeaders(t); + let headers = getHeaders(theme, t); if (isSmall) { headers = headers.filter((h) => h.id !== "histogram"); From f7c094317a0d58974a5fb7fe7ce0e756c79e1b2d Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Mon, 6 Oct 2025 11:43:13 -0700 Subject: [PATCH 5/5] remove unused --- client/src/Components/v2/DesignElements/Table.tsx | 1 - client/src/Components/v2/Inputs/Button.tsx | 2 -- client/src/Pages/v2/Uptime/MonitorTable.tsx | 6 +++--- client/src/Pages/v2/Uptime/UptimeMonitors.tsx | 4 +--- 4 files changed, 4 insertions(+), 9 deletions(-) diff --git a/client/src/Components/v2/DesignElements/Table.tsx b/client/src/Components/v2/DesignElements/Table.tsx index 118a238ea..6296d260c 100644 --- a/client/src/Components/v2/DesignElements/Table.tsx +++ b/client/src/Components/v2/DesignElements/Table.tsx @@ -6,7 +6,6 @@ import TableContainer from "@mui/material/TableContainer"; import TableHead from "@mui/material/TableHead"; import TableRow from "@mui/material/TableRow"; import { useTheme } from "@mui/material/styles"; -import { typographyLevels } from "@/Utils/Theme/v2/palette"; export type Header = { id: number | string; content: React.ReactNode; diff --git a/client/src/Components/v2/Inputs/Button.tsx b/client/src/Components/v2/Inputs/Button.tsx index 9409f9af8..0bf1d14e1 100644 --- a/client/src/Components/v2/Inputs/Button.tsx +++ b/client/src/Components/v2/Inputs/Button.tsx @@ -1,8 +1,6 @@ import Button from "@mui/material/Button"; import type { ButtonProps } from "@mui/material/Button"; -import { useTheme } from "@mui/material/styles"; export const ButtonInput: React.FC = ({ ...props }) => { - const theme = useTheme(); return (