From 1d90b8d8d9032ce98b0e9450a598bbee0163304a Mon Sep 17 00:00:00 2001 From: Alex Date: Thu, 7 May 2026 09:54:58 -0700 Subject: [PATCH] refactor all call sites --- .../Pages/Checks/Components/ChecksTable.tsx | 32 ++-------- .../Incidents/Components/CardDetails.tsx | 21 ++---- .../Incidents/Components/IncidentTable.tsx | 39 ++++------- .../Uptime/Details/Components/ChecksTable.tsx | 64 +++++++++---------- .../Details/Components/GeoChecksTable.tsx | 59 ++++++++--------- 5 files changed, 78 insertions(+), 137 deletions(-) diff --git a/client/src/Pages/Checks/Components/ChecksTable.tsx b/client/src/Pages/Checks/Components/ChecksTable.tsx index bd7170572..31737f4bb 100644 --- a/client/src/Pages/Checks/Components/ChecksTable.tsx +++ b/client/src/Pages/Checks/Components/ChecksTable.tsx @@ -1,21 +1,14 @@ import { Table, Pagination, - ValueLabel, StatusLabel, - Tooltip, + StatusCodeLabel, } from "@/Components/design-elements"; import Box from "@mui/material/Box"; import type { Header } from "@/Components/design-elements/Table"; import type { Monitor } from "@/Types/Monitor"; - import { useTranslation } from "react-i18next"; import { formatDateWithTz } from "@/Utils/TimeUtils"; -import { - formatStatusCode, - getStatusCodeTooltip, - getStatusCodeValueType, -} from "@/Utils/statusCode"; import type { Check } from "@/Types/Check"; import type { RootState } from "@/Types/state"; import { useSelector } from "react-redux"; @@ -40,7 +33,7 @@ export const ChecksTable = ({ const { t } = useTranslation(); const uiTimezone = useSelector((state: RootState) => state.ui.timezone); - const getHeaders = (t: (key: string) => string, uiTimezone: string) => { + const getHeaders = () => { const headers: Header[] = [ { id: "monitorName", @@ -74,23 +67,12 @@ export const ChecksTable = ({ id: "statusCode", content: t("pages.checks.table.headers.statusCode"), render: (row) => { - const code = row.statusCode; - if (!code) return "N/A"; - const text = formatStatusCode(code, t); - const tooltip = getStatusCodeTooltip(code, row.message, t); - const label = ( - ); - return tooltip ? ( - - {label} - - ) : ( - label - ); }, }, { @@ -104,7 +86,7 @@ export const ChecksTable = ({ return headers; }; - const headers = getHeaders(t, uiTimezone); + const headers = getHeaders(); const handlePageChange = ( _e: React.MouseEvent | null, diff --git a/client/src/Pages/Incidents/Components/CardDetails.tsx b/client/src/Pages/Incidents/Components/CardDetails.tsx index 2cd8fbde4..b2d72d08c 100644 --- a/client/src/Pages/Incidents/Components/CardDetails.tsx +++ b/client/src/Pages/Incidents/Components/CardDetails.tsx @@ -2,7 +2,7 @@ import Stack from "@mui/material/Stack"; import Grid from "@mui/material/Grid"; import Divider from "@mui/material/Divider"; import Typography from "@mui/material/Typography"; -import { BaseBox, ValueLabel, Tooltip } from "@/Components/design-elements"; +import { BaseBox, ValueLabel, StatusCodeLabel } from "@/Components/design-elements"; import { LAYOUT } from "@/Utils/Theme/constants"; import { useTranslation } from "react-i18next"; @@ -13,7 +13,6 @@ import { useSelector } from "react-redux"; import type { RootState } from "@/Types/state"; import { formatDateWithTz } from "@/Utils/TimeUtils"; import { getIncidentsDuration } from "@/Pages/Incidents/utils"; -import { formatStatusCode, getStatusCodeTooltip } from "@/Utils/statusCode"; interface CardDetailsProps { incident: Incident | null; @@ -48,13 +47,6 @@ export const CardDetails = ({ incident, monitor, sx }: CardDetailsProps) => { return null; } - const statusCodeText = formatStatusCode(incident.statusCode, t); - const statusCodeTooltip = getStatusCodeTooltip( - incident.statusCode, - incident.message, - t - ); - return ( { - {statusCodeTooltip ? ( - - {statusCodeText} - - ) : ( - statusCodeText - )} + diff --git a/client/src/Pages/Incidents/Components/IncidentTable.tsx b/client/src/Pages/Incidents/Components/IncidentTable.tsx index c66cdb0ed..399f4d8f8 100644 --- a/client/src/Pages/Incidents/Components/IncidentTable.tsx +++ b/client/src/Pages/Incidents/Components/IncidentTable.tsx @@ -1,4 +1,4 @@ -import { Table, ValueLabel, Tooltip } from "@/Components/design-elements"; +import { Table, ValueLabel, StatusCodeLabel } from "@/Components/design-elements"; import { Pagination } from "@/Components/design-elements/Table"; import type { Header } from "@/Components/design-elements/Table"; import { ActionsMenu } from "@/Components/actions-menu"; @@ -14,11 +14,6 @@ import Typography from "@mui/material/Typography"; import { useTheme } from "@mui/material/styles"; import Box from "@mui/material/Box"; import { getMonitorPath } from "@/Utils/MonitorUtils"; -import { - formatStatusCode, - getStatusCodeTooltip, - getStatusCodeValueType, -} from "@/Utils/statusCode"; interface IncidentsTableProps { title?: string; @@ -139,13 +134,12 @@ export const IncidentsTable = ({ return ( {row.resolutionType} @@ -158,23 +152,12 @@ export const IncidentsTable = ({ id: "statusCode", content: t("pages.incidents.table.headers.statusCode"), render: (row) => { - const code = row.statusCode; - if (!code) return "N/A"; - const text = formatStatusCode(code, t); - const tooltip = getStatusCodeTooltip(code, row.message, t); - const label = ( - ); - return tooltip ? ( - - {label} - - ) : ( - label - ); }, }, { diff --git a/client/src/Pages/Uptime/Details/Components/ChecksTable.tsx b/client/src/Pages/Uptime/Details/Components/ChecksTable.tsx index 0ab9a7a7c..b100c28c4 100644 --- a/client/src/Pages/Uptime/Details/Components/ChecksTable.tsx +++ b/client/src/Pages/Uptime/Details/Components/ChecksTable.tsx @@ -1,4 +1,9 @@ -import { Table, Pagination, StatusLabel, Tooltip } from "@/Components/design-elements"; +import { + Table, + Pagination, + StatusLabel, + StatusCodeLabel, +} from "@/Components/design-elements"; import Box from "@mui/material/Box"; import type { Header } from "@/Components/design-elements"; import type { Check } from "@/Types/Check"; @@ -6,11 +11,28 @@ import type { Check } from "@/Types/Check"; import { useNavigate } from "react-router"; import { useTranslation } from "react-i18next"; import { formatDateWithTz } from "@/Utils/TimeUtils"; -import { formatStatusCode, getStatusCodeTooltip } from "@/Utils/statusCode"; import type { RootState } from "@/Types/state"; import { useSelector } from "react-redux"; -const getHeaders = (t: (key: string) => string, uiTimezone: string) => { +export const ChecksTable = ({ + checks, + count, + page, + setPage, + rowsPerPage, + setRowsPerPage, +}: { + checks: Check[]; + count: number; + page: number; + setPage: (page: number) => void; + rowsPerPage: number; + setRowsPerPage: (rowsPerPage: number) => void; +}) => { + const navigate = useNavigate(); + const { t } = useTranslation(); + const uiTimezone = useSelector((state: RootState) => state.ui.timezone); + const headers: Header[] = [ { id: "status", @@ -37,41 +59,15 @@ const getHeaders = (t: (key: string) => string, uiTimezone: string) => { id: "statusCode", content: t("pages.checks.table.headers.statusCode"), render: (row) => { - if (!row.statusCode) return "N/A"; - const text = formatStatusCode(row.statusCode, t); - const tooltip = getStatusCodeTooltip(row.statusCode, row.message, t); - return tooltip ? ( - - {text} - - ) : ( - text + return ( + ); }, }, ]; - return headers; -}; - -export const ChecksTable = ({ - checks, - count, - page, - setPage, - rowsPerPage, - setRowsPerPage, -}: { - checks: Check[]; - count: number; - page: number; - setPage: (page: number) => void; - rowsPerPage: number; - setRowsPerPage: (rowsPerPage: number) => void; -}) => { - const navigate = useNavigate(); - const { t } = useTranslation(); - const uiTimezone = useSelector((state: RootState) => state.ui.timezone); - const headers = getHeaders(t, uiTimezone); const handlePageChange = ( _e: React.MouseEvent | null, diff --git a/client/src/Pages/Uptime/Details/Components/GeoChecksTable.tsx b/client/src/Pages/Uptime/Details/Components/GeoChecksTable.tsx index ae56e037e..373e09da2 100644 --- a/client/src/Pages/Uptime/Details/Components/GeoChecksTable.tsx +++ b/client/src/Pages/Uptime/Details/Components/GeoChecksTable.tsx @@ -1,15 +1,36 @@ -import { Table, Pagination, StatusLabel, Tooltip } from "@/Components/design-elements"; +import { + Table, + Pagination, + StatusLabel, + StatusCodeLabel, +} from "@/Components/design-elements"; import Box from "@mui/material/Box"; import type { Header } from "@/Components/design-elements"; import type { FlatGeoCheck } from "@/Types/GeoCheck"; import { useTranslation } from "react-i18next"; import { formatDateWithTz } from "@/Utils/TimeUtils"; -import { formatStatusCode, getStatusCodeTooltip } from "@/Utils/statusCode"; import type { RootState } from "@/Types/state"; import { useSelector } from "react-redux"; import prettyMilliseconds from "pretty-ms"; -const getHeaders = (t: (key: string) => string, uiTimezone: string) => { +export const GeoChecksTable = ({ + geoChecks, + count, + page, + setPage, + rowsPerPage, + setRowsPerPage, +}: { + geoChecks: FlatGeoCheck[]; + count: number; + page: number; + setPage: (page: number) => void; + rowsPerPage: number; + setRowsPerPage: (rowsPerPage: number) => void; +}) => { + const { t } = useTranslation(); + const uiTimezone = useSelector((state: RootState) => state.ui.timezone); + const headers: Header[] = [ { id: "status", @@ -30,16 +51,7 @@ const getHeaders = (t: (key: string) => string, uiTimezone: string) => { id: "statusCode", content: t("pages.checks.table.headers.statusCode"), render: (row) => { - if (!row.statusCode) return "N/A"; - const text = formatStatusCode(row.statusCode, t); - const tooltip = getStatusCodeTooltip(row.statusCode, undefined, t); - return tooltip ? ( - - {text} - - ) : ( - text - ); + return ; }, }, { @@ -61,27 +73,6 @@ const getHeaders = (t: (key: string) => string, uiTimezone: string) => { }, }, ]; - return headers; -}; - -export const GeoChecksTable = ({ - geoChecks, - count, - page, - setPage, - rowsPerPage, - setRowsPerPage, -}: { - geoChecks: FlatGeoCheck[]; - count: number; - page: number; - setPage: (page: number) => void; - rowsPerPage: number; - setRowsPerPage: (rowsPerPage: number) => void; -}) => { - const { t } = useTranslation(); - const uiTimezone = useSelector((state: RootState) => state.ui.timezone); - const headers = getHeaders(t, uiTimezone); const handlePageChange = ( _e: React.MouseEvent | null,