From 975d134dd88254126fc95fd952b080a892bf6e6c Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Wed, 28 Jan 2026 18:45:11 +0000 Subject: [PATCH] extract strings --- .../v2/common/controls/HeaderTimeRange.tsx | 45 +++-------- .../v2/design-elements/StatusBox.tsx | 9 --- .../Pages/Checks/Components/ChecksTable.tsx | 52 ++----------- client/src/Pages/Checks/index.tsx | 78 ++++++++++++++++--- client/src/locales/en.json | 16 ++++ 5 files changed, 101 insertions(+), 99 deletions(-) diff --git a/client/src/Components/v2/common/controls/HeaderTimeRange.tsx b/client/src/Components/v2/common/controls/HeaderTimeRange.tsx index 9b8b9dcec..799cbc9a3 100644 --- a/client/src/Components/v2/common/controls/HeaderTimeRange.tsx +++ b/client/src/Components/v2/common/controls/HeaderTimeRange.tsx @@ -3,6 +3,7 @@ import Typography from "@mui/material/Typography"; import { ToggleButtonGroup, ToggleButton } from "@/Components/v2/inputs"; import { useTheme } from "@mui/material/styles"; import CircularProgress from "@mui/material/CircularProgress"; +import { useTranslation } from "react-i18next"; import Box from "@mui/material/Box"; interface MonitorTimeFrameHeaderProps { @@ -19,7 +20,7 @@ export const HeaderTimeRange = ({ setDateRange, }: MonitorTimeFrameHeaderProps) => { const theme = useTheme(); - + const { t } = useTranslation(); const handleChange = ( _event: React.MouseEvent, newValue: string | null @@ -39,29 +40,17 @@ export const HeaderTimeRange = ({ onChange={handleChange} size="small" > - - Recent + + {t("components.headerTimeRange.labels.recent")} - - Day + + {t("components.headerTimeRange.labels.day")} - - Week + + {t("components.headerTimeRange.labels.week")} - - Month + + {t("components.headerTimeRange.labels.month")} ); @@ -74,19 +63,9 @@ export const HeaderTimeRange = ({ alignItems="center" gap={theme.spacing(4)} > - - {isLoading && } - + {isLoading && } - Showing statistics for past{" "} - {dateRange === "recent" - ? "2 hours" - : dateRange === "day" - ? "24 hours" - : dateRange === "week" - ? "7 days" - : "30 days"} - . + {t(`components.headerTimeRange.description.${dateRange}`)} {timeFramePicker} diff --git a/client/src/Components/v2/design-elements/StatusBox.tsx b/client/src/Components/v2/design-elements/StatusBox.tsx index d48871a2a..bf7979cca 100644 --- a/client/src/Components/v2/design-elements/StatusBox.tsx +++ b/client/src/Components/v2/design-elements/StatusBox.tsx @@ -113,9 +113,6 @@ export const TotalChecksBox = ({ n }: { n: number }) => { label={t("pages.common.monitors.status.total")} n={n} color={theme.palette.primary.light} - sx={{ - maxWidth: "300px", - }} /> ); }; @@ -127,9 +124,6 @@ export const DownChecksBox = ({ n }: { n: number }) => { label={t("pages.common.monitors.status.down")} n={n} color={theme.palette.error.light} - sx={{ - maxWidth: "300px", - }} /> ); }; @@ -141,9 +135,6 @@ export const UpChecksBox = ({ n }: { n: number }) => { label={t("pages.common.monitors.status.up")} n={n} color={theme.palette.success.light} - sx={{ - maxWidth: "300px", - }} /> ); }; diff --git a/client/src/Pages/Checks/Components/ChecksTable.tsx b/client/src/Pages/Checks/Components/ChecksTable.tsx index e48af37b8..6464be25c 100644 --- a/client/src/Pages/Checks/Components/ChecksTable.tsx +++ b/client/src/Pages/Checks/Components/ChecksTable.tsx @@ -9,28 +9,24 @@ import type { Header } from "@/Components/v2/design-elements/Table"; import type { Monitor, MonitorStatus } from "@/Types/Monitor"; import { useTranslation } from "react-i18next"; -import { useMemo } from "react"; import { formatDateWithTz } from "@/Utils/TimeUtils"; import { useNavigate } from "react-router"; -import type { Check, ChecksResponse } from "@/Types/Check"; +import type { Check } from "@/Types/Check"; import type { RootState } from "@/Types/state"; import { useSelector } from "react-redux"; -import { useGet } from "@/Hooks/UseApi"; export const ChecksTable = ({ monitors, - selectedMonitorId, - statusFilter, - dateRange, + checks, + checksCount, page, setPage, rowsPerPage, setRowsPerPage, }: { monitors: Monitor[] | null; - selectedMonitorId: string; - statusFilter: string; - dateRange: string; + checks: Check[]; + checksCount: number; page: number; setPage: (page: number) => void; rowsPerPage: number; @@ -40,44 +36,6 @@ export const ChecksTable = ({ const uiTimezone = useSelector((state: RootState) => state.ui.timezone); const navigate = useNavigate(); - const selectedMonitorType = monitors?.find((m) => m.id === selectedMonitorId)?.type; - - const teamChecksUrl = useMemo(() => { - if (selectedMonitorId !== "0") return null; - const params = new URLSearchParams(); - params.append("sortOrder", "desc"); - if (dateRange) params.append("dateRange", dateRange); - if (statusFilter) params.append("filter", statusFilter); - params.append("page", String(page)); - params.append("rowsPerPage", String(rowsPerPage)); - return `/checks/team?${params.toString()}`; - }, [selectedMonitorId, dateRange, statusFilter, page, rowsPerPage]); - - const monitorChecksUrl = useMemo(() => { - if (selectedMonitorId === "0" || !selectedMonitorType) return null; - const params = new URLSearchParams(); - params.append("type", selectedMonitorType); - params.append("sortOrder", "desc"); - if (statusFilter) params.append("filter", statusFilter); - if (dateRange) params.append("dateRange", dateRange); - params.append("page", String(page)); - params.append("rowsPerPage", String(rowsPerPage)); - return `/checks/${selectedMonitorId}?${params.toString()}`; - }, [selectedMonitorId, selectedMonitorType, dateRange, statusFilter, page, rowsPerPage]); - - const { data: teamData, isLoading: isLoadingTeam } = - useGet(teamChecksUrl); - const { data: monitorData, isLoading: isLoadingMonitor } = - useGet(monitorChecksUrl); - - const checks = - selectedMonitorId === "0" ? (teamData?.checks ?? []) : (monitorData?.checks ?? []); - const checksCount = - selectedMonitorId === "0" - ? (teamData?.checksCount ?? 0) - : (monitorData?.checksCount ?? 0); - const isLoading = isLoadingTeam || isLoadingMonitor; - const getHeaders = (t: Function, uiTimezone: string) => { const headers: Header[] = [ { diff --git a/client/src/Pages/Checks/index.tsx b/client/src/Pages/Checks/index.tsx index e69146f42..150656a88 100644 --- a/client/src/Pages/Checks/index.tsx +++ b/client/src/Pages/Checks/index.tsx @@ -11,24 +11,22 @@ import { ChecksTable } from "./Components/ChecksTable"; import { MenuItem, useTheme } from "@mui/material"; import { useTranslation } from "react-i18next"; -import { useState } from "react"; +import { useState, useMemo } from "react"; import { useParams } from "react-router-dom"; import { useGet } from "@/Hooks/UseApi"; import type { Monitor } from "@/Types/Monitor"; -import type { ChecksSummary } from "@/Types/Check"; +import type { ChecksSummary, ChecksResponse } from "@/Types/Check"; const Checks = () => { const { t } = useTranslation(); const { monitorId } = useParams<{ monitorId?: string }>(); - // Local state const [selectedMonitor, setSelectedMonitor] = useState(monitorId || "0"); const [dateRange, setDateRange] = useState("recent"); const [statusFilter, setStatusFilter] = useState("down"); const [page, setPage] = useState(0); const [rowsPerPage, setRowsPerPage] = useState(10); - // Data fetching with SWR const monitorsUrl = "/monitors/team"; const summaryUrl = `/checks/team/summary?dateRange=${dateRange}`; @@ -38,7 +36,68 @@ const Checks = () => { const { data: summaryResponse, isLoading: isLoadingSummary } = useGet(summaryUrl); - const isLoading = isLoadingMonitors || isLoadingSummary; + const selectedMonitorType = monitorsResponse?.find( + (m) => m.id === selectedMonitor + )?.type; + + const teamChecksUrl = useMemo(() => { + if (selectedMonitor !== "0") return null; + const params = new URLSearchParams(); + params.append("sortOrder", "desc"); + if (dateRange) params.append("dateRange", dateRange); + if (statusFilter) params.append("filter", statusFilter); + params.append("page", String(page)); + params.append("rowsPerPage", String(rowsPerPage)); + return `/checks/team?${params.toString()}`; + }, [selectedMonitor, dateRange, statusFilter, page, rowsPerPage]); + + const monitorChecksUrl = useMemo(() => { + if (selectedMonitor === "0" || !selectedMonitorType) return null; + const params = new URLSearchParams(); + params.append("type", selectedMonitorType); + params.append("sortOrder", "desc"); + if (statusFilter) params.append("filter", statusFilter); + if (dateRange) params.append("dateRange", dateRange); + params.append("page", String(page)); + params.append("rowsPerPage", String(rowsPerPage)); + return `/checks/${selectedMonitor}?${params.toString()}`; + }, [selectedMonitor, selectedMonitorType, dateRange, statusFilter, page, rowsPerPage]); + + const { + data: teamChecksData, + isLoading: isLoadingTeamChecks, + isValidating: isValidatingTeamChecks, + } = useGet( + teamChecksUrl, + {}, + { keepPreviousData: true, refreshInterval: 30000 } + ); + const { + data: monitorChecksData, + isLoading: isLoadingMonitorChecks, + isValidating: isValidatingMonitorChecks, + } = useGet( + monitorChecksUrl, + {}, + { keepPreviousData: true, refreshInterval: 30000 } + ); + + const checks = + selectedMonitor === "0" + ? (teamChecksData?.checks ?? []) + : (monitorChecksData?.checks ?? []); + const checksCount = + selectedMonitor === "0" + ? (teamChecksData?.checksCount ?? 0) + : (monitorChecksData?.checksCount ?? 0); + + const isLoadingChecks = + isLoadingTeamChecks || + isLoadingMonitorChecks || + isValidatingTeamChecks || + isValidatingMonitorChecks; + + const isLoading = isLoadingMonitors || isLoadingSummary || isLoadingChecks; const totalChecks = summaryResponse?.totalChecks || 0; const downChecks = summaryResponse?.downChecks || 0; const upChecks = totalChecks - (summaryResponse?.downChecks || 0); @@ -61,7 +120,7 @@ const Checks = () => { gap={2} > @@ -102,9 +161,8 @@ const Checks = () => {