From 805ee9391432b5ccbc5b97edfab088ceac593469 Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Tue, 23 Dec 2025 13:50:24 -0800 Subject: [PATCH] translations --- .../components/checks/CardCheckDetails.tsx | 52 +++++++++++-------- client/src/components/checks/ChartTiming.tsx | 12 +++-- client/src/locales/en.json | 32 ++++++++++++ 3 files changed, 70 insertions(+), 26 deletions(-) diff --git a/client/src/components/checks/CardCheckDetails.tsx b/client/src/components/checks/CardCheckDetails.tsx index 3b8811ec5..b926574d0 100644 --- a/client/src/components/checks/CardCheckDetails.tsx +++ b/client/src/components/checks/CardCheckDetails.tsx @@ -13,16 +13,18 @@ import type { MonitorStatus } from "@/types/monitor"; import { formatDateWithTz } from "@/utils/TimeUtils"; import { useTheme } from "@mui/material/styles"; import { getMonitorPath } from "@/utils/MonitorUtils"; +import { useTranslation } from "react-i18next"; type CheckDetailsCardProps = { check: ICheck; }; export const CheckDetailsCard = ({ check }: CheckDetailsCardProps) => { + const { t } = useTranslation(); const theme = useTheme(); const uiTimezone = useAppSelector((state: any) => state.ui.timezone); const phases = check?.timings?.phases; - const phaseKeys = [ + type phaseKeys = [ "wait", "dns", "tcp", @@ -31,7 +33,7 @@ export const CheckDetailsCard = ({ check }: CheckDetailsCardProps) => { "firstByte", "download", "total", - ] as const; + ]; const status = (check?.status as MonitorStatus) ?? ("initializing" as MonitorStatus); @@ -53,7 +55,7 @@ export const CheckDetailsCard = ({ check }: CheckDetailsCardProps) => { ? formatDateWithTz(check.createdAt, "ddd, MMM D, YYYY, HH:mm A", uiTimezone) : "-"; const messageText = check?.message ?? "-"; - const getPhaseMs = (key: (typeof phaseKeys)[number]) => { + const getPhaseMs = (key: phaseKeys[number]) => { const v = Number((phases as any)?.[key] ?? NaN); return Number.isFinite(v) ? `${Math.floor(Math.max(0, v))} ms` : "-"; }; @@ -62,8 +64,12 @@ export const CheckDetailsCard = ({ check }: CheckDetailsCardProps) => { - Check details - {`Total request time: ${getPhaseMs("total")}`} + {t("checks.details.detailsCard.title")} + + {t("checks.details.common.requestTime", { + time: getPhaseMs("total"), + })} + {(() => { const href = `/${getMonitorPath(check.metadata.type)}/${check.metadata.monitorId}`; return href ? ( @@ -74,7 +80,7 @@ export const CheckDetailsCard = ({ check }: CheckDetailsCardProps) => { underline="hover" color="primary" > - View monitor details + {t("checks.details.detailsCard.linkText")} ) : null; @@ -89,11 +95,13 @@ export const CheckDetailsCard = ({ check }: CheckDetailsCardProps) => { mt={4} mb={2} > - Basic check info + + {t("checks.details.detailsCard.headers.basicInfo")} + - Status + {t("checks.details.detailsCard.fields.status")} @@ -103,7 +111,7 @@ export const CheckDetailsCard = ({ check }: CheckDetailsCardProps) => { - HTTP Code + {t("checks.details.detailsCard.fields.code")} @@ -113,7 +121,7 @@ export const CheckDetailsCard = ({ check }: CheckDetailsCardProps) => { - Type + {t("checks.details.detailsCard.fields.type")} @@ -122,7 +130,7 @@ export const CheckDetailsCard = ({ check }: CheckDetailsCardProps) => { - Check time + {t("checks.details.detailsCard.fields.checkTime")} @@ -130,7 +138,7 @@ export const CheckDetailsCard = ({ check }: CheckDetailsCardProps) => { - Message + {t("checks.details.detailsCard.fields.message")} @@ -146,12 +154,14 @@ export const CheckDetailsCard = ({ check }: CheckDetailsCardProps) => { mb={4} mt={2} > - Timing phases + + {t("checks.details.detailsCard.headers.timing")} + - Wait + {t("checks.details.detailsCard.fields.wait")} @@ -160,7 +170,7 @@ export const CheckDetailsCard = ({ check }: CheckDetailsCardProps) => { - DNS + {t("checks.details.detailsCard.fields.dns")} @@ -169,7 +179,7 @@ export const CheckDetailsCard = ({ check }: CheckDetailsCardProps) => { - TCP + {t("checks.details.detailsCard.fields.tcp")} @@ -178,7 +188,7 @@ export const CheckDetailsCard = ({ check }: CheckDetailsCardProps) => { - TLS + {t("checks.details.detailsCard.fields.tls")} @@ -187,7 +197,7 @@ export const CheckDetailsCard = ({ check }: CheckDetailsCardProps) => { - Request + {t("checks.details.detailsCard.fields.request")} @@ -196,7 +206,7 @@ export const CheckDetailsCard = ({ check }: CheckDetailsCardProps) => { - First Byte + {t("checks.details.detailsCard.fields.firstByte")} @@ -205,7 +215,7 @@ export const CheckDetailsCard = ({ check }: CheckDetailsCardProps) => { - Download + {t("checks.details.detailsCard.fields.download")} @@ -214,7 +224,7 @@ export const CheckDetailsCard = ({ check }: CheckDetailsCardProps) => { - Total + {t("checks.details.detailsCard.fields.total")} diff --git a/client/src/components/checks/ChartTiming.tsx b/client/src/components/checks/ChartTiming.tsx index b935cd13d..2341357ff 100644 --- a/client/src/components/checks/ChartTiming.tsx +++ b/client/src/components/checks/ChartTiming.tsx @@ -5,7 +5,7 @@ import Typography from "@mui/material/Typography"; import { alpha, useTheme } from "@mui/material/styles"; import { useState } from "react"; import { BaseBox } from "@/components/design-elements"; - +import { useTranslation } from "react-i18next"; type TimingsChartProps = { check: ICheck | null }; export type TimingSegment = { @@ -41,11 +41,11 @@ const buildTimingSegments = ( }; export const TimingsChart = ({ check }: TimingsChartProps) => { - if (!check) return null; - const theme = useTheme(); + const { t } = useTranslation(); const strokeColor = alpha(theme.palette.primary.main, 0.8); const [hoveredIndex, setHoveredIndex] = useState(null); + if (!check) return null; const segments = buildTimingSegments( check?.timings?.phases, strokeColor, @@ -57,9 +57,11 @@ export const TimingsChart = ({ check }: TimingsChartProps) => { return ( - Request timings + {t("checks.details.timingChart.title")} - {`Total request time: ${Math.floor(Number(check?.timings?.phases?.total ?? 0))} ms`} + {t("checks.details.common.requestTime", { + time: `${Math.floor(Number(check?.timings?.phases?.total ?? 0))} ms`, + })} diff --git a/client/src/locales/en.json b/client/src/locales/en.json index d0d5f2ce4..65cd8b76f 100644 --- a/client/src/locales/en.json +++ b/client/src/locales/en.json @@ -115,6 +115,38 @@ "dateTime": "Date & Time", "statusCode": "Status code" } + }, + "details": { + "common": { + "requestTime": "Total request time: {{time}}" + }, + "detailsCard": { + "title": "Check details", + "linkText": "View monitor", + "headers": { + "basicInfo": "Basic check info", + "timing": "Timing phases" + }, + "fields": { + "status": "Status", + "code": "HTTP Code", + "type": "Type", + "checkTime": "Check time", + "message": "Message", + "timingPhases": "Timing phases", + "wait": "Wait", + "dns": "DNS", + "tcp": "TCP", + "tls": "TLS", + "request": "Request", + "firstByte": "First byte", + "download": "Download", + "total": "Total" + } + }, + "timingChart": { + "title": "Request timings" + } } }, "common": {