refactor all call sites

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<Check>[] = [
 			{
 				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 = (
-						<ValueLabel
-							value={getStatusCodeValueType(code)}
-							text={text}
+					return (
+						<StatusCodeLabel
+							statusCode={row.statusCode}
+							message={row.message}
 						/>
 					);
-					return tooltip ? (
-						<Tooltip title={tooltip}>
-							<span>{label}</span>
-						</Tooltip>
-					) : (
-						label
-					);
 				},
 			},
 			{
@@ -104,7 +86,7 @@ export const ChecksTable = ({
 		return headers;
 	};
 
-	const headers = getHeaders(t, uiTimezone);
+	const headers = getHeaders();
 
 	const handlePageChange = (
 		_e: React.MouseEvent<HTMLButtonElement> | null,

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 (
 		<Stack
 			gap={theme.spacing(LAYOUT.MD)}
@@ -133,13 +125,10 @@ export const CardDetails = ({ incident, monitor, sx }: CardDetailsProps) => {
 						</Grid>
 						<Grid size={4}>
 							<Cell>
-								{statusCodeTooltip ? (
-									<Tooltip title={statusCodeTooltip}>
-										<span>{statusCodeText}</span>
-									</Tooltip>
-								) : (
-									statusCodeText
-								)}
+								<StatusCodeLabel
+									statusCode={incident.statusCode}
+									message={incident.message}
+								/>
 							</Cell>
 						</Grid>
 						<Grid size={2}>

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 (
 							<Typography
 								variant="body2"
-								sx={{
-									textTransform: "capitalize",
-									color:
-										row.resolutionType === "manual"
-											? theme.palette.warning.main
-											: theme.palette.success.main,
-								}}
+								color={
+									row.resolutionType === "manual"
+										? theme.palette.warning.main
+										: theme.palette.success.main
+								}
+								textTransform={"capitalize"}
 							>
 								{row.resolutionType}
 							</Typography>
@@ -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 = (
-						<ValueLabel
-							value={getStatusCodeValueType(code)}
-							text={text}
+					return (
+						<StatusCodeLabel
+							statusCode={row.statusCode}
+							message={row.message}
 						/>
 					);
-					return tooltip ? (
-						<Tooltip title={tooltip}>
-							<span>{label}</span>
-						</Tooltip>
-					) : (
-						label
-					);
 				},
 			},
 			{

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<Check>[] = [
 		{
 			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 ? (
-					<Tooltip title={tooltip}>
-						<span>{text}</span>
-					</Tooltip>
-				) : (
-					text
+				return (
+					<StatusCodeLabel
+						statusCode={row.statusCode}
+						message={row.message}
+					/>
 				);
 			},
 		},
 	];
-	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<HTMLButtonElement> | null,

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<FlatGeoCheck>[] = [
 		{
 			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 ? (
-					<Tooltip title={tooltip}>
-						<span>{text}</span>
-					</Tooltip>
-				) : (
-					text
-				);
+				return <StatusCodeLabel statusCode={row.statusCode} />;
 			},
 		},
 		{
@@ -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<HTMLButtonElement> | null,