diff --git a/client/src/components/monitors/ChartPageSpeedReport.tsx b/client/src/components/monitors/ChartPageSpeedReport.tsx index 1edd8068f..0262458a4 100644 --- a/client/src/components/monitors/ChartPageSpeedReport.tsx +++ b/client/src/components/monitors/ChartPageSpeedReport.tsx @@ -8,6 +8,7 @@ import { useTheme } from "@mui/material/styles"; import { alpha } from "@mui/material/styles"; import { useState } from "react"; import Tooltip from "@mui/material/Tooltip"; +import { useTranslation } from "react-i18next"; const CenterLabel = ({ viewBox, value }: any) => { const { cx, cy } = viewBox; @@ -21,15 +22,16 @@ const CenterLabel = ({ viewBox, value }: any) => { }; export const ChartPageSpeedReport = ({ latestCheck }: { latestCheck: any }) => { + const { t } = useTranslation(); const theme = useTheme(); const [hoverTitle, setHoverTitle] = useState(null); const LABELS: Record = { - FCP: "First Contentful Paint", - SI: "Speed Index", - LCP: "Largest Contentful Paint", - TBT: "Total Blocking Time", - CLS: "Cumulative Layout Shift", + FCP: t("common.charts.pageSpeed.fcp"), + SI: t("common.charts.pageSpeed.si"), + LCP: t("common.charts.pageSpeed.lcp"), + TBT: t("common.charts.pageSpeed.tbt"), + CLS: t("common.charts.pageSpeed.cls"), }; const metrics = [ { key: "fcp", color: alpha("#1DE9B6", 0.6), weight: 0.1 }, @@ -80,7 +82,7 @@ export const ChartPageSpeedReport = ({ latestCheck }: { latestCheck: any }) => { return ( } - title="Average PageSpeed score" + title={t("common.charts.pageSpeed.title")} > { + const { t } = useTranslation(); const theme = useTheme(); const palette = getPageSpeedPalette(value); return ( @@ -32,7 +34,7 @@ const MetricBox = ({ {label} {`${value}%`} - {`Weight: ${weight}%`} + {`${t("common.charts.pageSpeed.weight")}: ${weight}%`} { const theme = useTheme(); + const { t } = useTranslation(); return ( - } title="PageSpeed report"> + } + title="PageSpeed report" + > diff --git a/client/src/components/monitors/HistogramInfrastructure.tsx b/client/src/components/monitors/HistogramInfrastructure.tsx index 766bd7e8f..742759eb1 100644 --- a/client/src/components/monitors/HistogramInfrastructure.tsx +++ b/client/src/components/monitors/HistogramInfrastructure.tsx @@ -87,6 +87,7 @@ const createGradient = ({ export const HistogramInfrastructure = ({ range, title, + type, idx, checks, xKey, @@ -101,6 +102,7 @@ export const HistogramInfrastructure = ({ }: { range: string; title: string; + type: string; idx: number | null; checks: IInfraCheck[]; xKey: string; @@ -118,7 +120,7 @@ export const HistogramInfrastructure = ({ let avgTemps: { _id: string; avg_temp: number | null }[] = []; let tempYDomain: number[] = []; - if (title === "temp") { + if (type === "temp") { avgTemps = checks.map((check) => { const temps = check.cpu.temperature || []; if (temps.length === 0) return { ...check, avg_temp: null }; @@ -135,14 +137,14 @@ export const HistogramInfrastructure = ({ } return ( - + - + } /> - + { + const { t } = useTranslation(); const theme = useTheme(); const { id } = useParams(); const [range, setRange] = useState("2h"); @@ -68,13 +70,13 @@ const InfraDetailsPage = () => { = 0 ? `${prettyMilliseconds(lastChecked, { @@ -84,35 +86,40 @@ const InfraDetailsPage = () => { } /> - - + + - {/* Infrastructure overview */} diff --git a/client/src/pages/infrastructure/InfraDetailsGauges.tsx b/client/src/pages/infrastructure/InfraDetailsGauges.tsx index 6f1c9f711..1daecea06 100644 --- a/client/src/pages/infrastructure/InfraDetailsGauges.tsx +++ b/client/src/pages/infrastructure/InfraDetailsGauges.tsx @@ -3,6 +3,7 @@ import Typography from "@mui/material/Typography"; import { BaseChart } from "@/components/monitors/Chart"; import { Gauge } from "@/components/design-elements"; +import { useTranslation } from "react-i18next"; import { getGbs, getFrequency } from "./InfraUtils"; import type { IInfraCheck } from "@/types/check"; import { useTheme } from "@mui/material/styles"; @@ -42,6 +43,7 @@ const InfraDetailGauge = ({ }; export const InfraDetailsGauges = ({ checks }: { checks: IInfraCheck[] }) => { + const { t } = useTranslation(); const theme = useTheme(); const isSmall = useMediaQuery(theme.breakpoints.down("md")); return ( @@ -51,30 +53,31 @@ export const InfraDetailsGauges = ({ checks }: { checks: IInfraCheck[] }) => { alignItems={"center"} > {checks[0]?.disk?.map((disk, idx) => { return ( ); diff --git a/client/src/pages/infrastructure/InfraDetailsGraphs.tsx b/client/src/pages/infrastructure/InfraDetailsGraphs.tsx index 2a5590402..15661e6ba 100644 --- a/client/src/pages/infrastructure/InfraDetailsGraphs.tsx +++ b/client/src/pages/infrastructure/InfraDetailsGraphs.tsx @@ -1,14 +1,16 @@ import Grid from "@mui/material/Grid"; import { HistogramInfrastructure } from "@/components/monitors"; +import { useTranslation } from "react-i18next"; import type { IInfraCheck } from "@/types/check"; import { useMemo } from "react"; import { useTheme } from "@mui/material/styles"; import useMediaQuery from "@mui/material/useMediaQuery"; -const getChartConfigs = (theme: any, checks: IInfraCheck[]) => { +const getChartConfigs = (theme: any, checks: IInfraCheck[], t: any) => { return [ { + title: t("common.charts.infrastructure.memory.title"), type: "memory", dataKeys: ["memory.usage_percent"], strokeColor: theme.palette.primary.main, @@ -17,6 +19,7 @@ const getChartConfigs = (theme: any, checks: IInfraCheck[]) => { idx: null, }, { + title: t("common.charts.infrastructure.cpu.title"), type: "cpu", dataKeys: ["cpu.used_percent"], strokeColor: theme.palette.success.main, @@ -25,6 +28,7 @@ const getChartConfigs = (theme: any, checks: IInfraCheck[]) => { idx: null, }, { + title: t("common.charts.infrastructure.temp.title"), type: "temp", dataKeys: ["avg_temp"], strokeColor: theme.palette.error.main, @@ -33,6 +37,7 @@ const getChartConfigs = (theme: any, checks: IInfraCheck[]) => { idx: null, }, ...(checks[0]?.disk?.map((_, idx) => ({ + title: t("common.charts.infrastructure.disk.title", { idx }), type: "disk", dataKeys: [`disk[${idx}].usage_percent`], strokeColor: theme.palette.warning.main, @@ -52,9 +57,10 @@ export const InfraDetailsGraphs = ({ }) => { const theme = useTheme(); const isSmall = useMediaQuery(theme.breakpoints.down("md")); + const { t } = useTranslation(); const chartConfigs = useMemo( - () => getChartConfigs(theme, checks), - [theme, checks] + () => getChartConfigs(theme, checks, t), + [theme, checks, t] ); return ( @@ -66,7 +72,8 @@ export const InfraDetailsGraphs = ({ > { + const { t } = useTranslation(); const theme = useTheme(); const { id } = useParams(); const [range, setRange] = useState("2h"); @@ -62,13 +64,13 @@ const PageSpeedDetailsPage = () => { = 0 ? `${prettyMilliseconds(lastChecked, { @@ -78,7 +80,7 @@ const PageSpeedDetailsPage = () => { } />