From f4d47bbd45b4af77bc262dca40886f711f16272f Mon Sep 17 00:00:00 2001 From: YiZixuan Date: Mon, 8 Sep 2025 21:35:48 +0800 Subject: [PATCH] refactory(i18n): Add internationalization support for the service statistics card --- .../components/services/ServiceStatsCards.tsx | 30 ++++++++++++------- .../src/components/services/UptimeBar.tsx | 4 ++- .../services/uptime/UptimeSummary.tsx | 4 ++- application/src/translations/en/services.ts | 15 ++++++++-- .../src/translations/types/services.ts | 14 +++++++++ application/src/translations/zhcn/services.ts | 14 +++++++++ 6 files changed, 66 insertions(+), 15 deletions(-) diff --git a/application/src/components/services/ServiceStatsCards.tsx b/application/src/components/services/ServiceStatsCards.tsx index db469e1..4d84708 100644 --- a/application/src/components/services/ServiceStatsCards.tsx +++ b/application/src/components/services/ServiceStatsCards.tsx @@ -4,6 +4,7 @@ import { Service, UptimeData } from "@/types/service.types"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { useMemo } from "react"; import { formatDistanceStrict } from "date-fns"; +import {useLanguage} from "@/contexts/LanguageContext.tsx"; interface ServiceStatsCardsProps { service: Service; @@ -11,6 +12,8 @@ interface ServiceStatsCardsProps { } export function ServiceStatsCards({ service, uptimeData }: ServiceStatsCardsProps) { + + const { t } = useLanguage(); // Calculate uptime percentage const calculateUptimePercentage = () => { if (uptimeData.length === 0) return 100; @@ -109,41 +112,46 @@ export function ServiceStatsCards({ service, uptimeData }: ServiceStatsCardsProp
- Response Time + {t('responseTime')}
{service.responseTime}ms
-

Last checked at {service.lastChecked}

+

{t('lastCheckedAt').replace('{datetime}', service.lastChecked)}

{avgResponseTime > 0 && avgResponseTime !== service.responseTime && ( -

Avg: {avgResponseTime}ms (last {upChecks.length} up checks)

+

{t('avg')}: {avgResponseTime}ms ({t('lastUpChecksCount').replace('{count}', String(upChecks.length))})

)} - Uptime + {t('uptime')}
{uptimePercentage}%
-

Based on last {uptimeData.length} checks

+

{t('basedOnlastChecksCount').replace('{count}', String(uptimeData.length))}

- Total uptime: {uptimeStats.totalUptimeFormatted} + {t("totalUptime")}: {uptimeStats.totalUptimeFormatted}
- Total downtime: {uptimeStats.totalDowntimeFormatted} + {t("totalDowntime")}: {uptimeStats.totalDowntimeFormatted}
{service.status !== "paused" && (
- {service.status === "up" ? "Up" : "Down"} for {uptimeStats.currentStatusDuration} + { + service.status === "up" ? + t('upStatusDuration').replace("{duration}", uptimeStats.currentStatusDuration) + : + t('downStatusDuration').replace("{duration}", uptimeStats.currentStatusDuration) + }
)} @@ -153,16 +161,16 @@ export function ServiceStatsCards({ service, uptimeData }: ServiceStatsCardsProp - Monitoring Settings + {t('monitoringSettings')}
- Checked every {service.interval} seconds + {t('monitoringSettingsInterval').replace('{interval}', String(service.interval))}
- {service.type} monitoring + {service.type} {t('monitoringSettingsType')}
diff --git a/application/src/components/services/UptimeBar.tsx b/application/src/components/services/UptimeBar.tsx index 642e35e..7a85f05 100644 --- a/application/src/components/services/UptimeBar.tsx +++ b/application/src/components/services/UptimeBar.tsx @@ -5,6 +5,7 @@ import { TooltipProvider } from '@/components/ui/tooltip'; import { UptimeStatusItem } from './uptime/UptimeStatusItem'; import { uptimeService } from '@/services/uptimeService'; import { UptimeData } from '@/types/service.types'; +import {useLanguage} from "@/contexts/LanguageContext.tsx"; interface UptimeBarProps { uptime: number; @@ -15,6 +16,7 @@ interface UptimeBarProps { } const UptimeBarComponent = ({ uptime, status, serviceId, interval, serviceType = "HTTP" }: UptimeBarProps) => { + const { t } = useLanguage(); // Calculate date range for last 20 checks with much more aggressive caching const endDate = useMemo(() => new Date(), []); const startDate = useMemo(() => { @@ -84,7 +86,7 @@ const UptimeBarComponent = ({ uptime, status, serviceId, interval, serviceType =
- Last 20 checks + {t('last20Checks')} ); diff --git a/application/src/components/services/uptime/UptimeSummary.tsx b/application/src/components/services/uptime/UptimeSummary.tsx index aa4e759..61ba496 100644 --- a/application/src/components/services/uptime/UptimeSummary.tsx +++ b/application/src/components/services/uptime/UptimeSummary.tsx @@ -1,5 +1,6 @@ import React from 'react'; +import {useLanguage} from "@/contexts/LanguageContext.tsx"; interface UptimeSummaryProps { uptime: number; @@ -7,13 +8,14 @@ interface UptimeSummaryProps { } export const UptimeSummary = ({ uptime, interval }: UptimeSummaryProps) => { + const { t } = useLanguage(); return (
{Math.round(uptime)}% uptime - Last 20 checks + {t('last20Checks')}
); diff --git a/application/src/translations/en/services.ts b/application/src/translations/en/services.ts index 21ef012..9204fe2 100644 --- a/application/src/translations/en/services.ts +++ b/application/src/translations/en/services.ts @@ -119,10 +119,21 @@ export const servicesTranslations: ServicesTranslations = { editService: "Edit Service", editServiceDesc: "Update the details of your monitored service.", + //ServiceStatsCards.tsx + lastCheckedAt: "Last checked at {datetime}", + avg: "Avg", + lastUpChecksCount: "last {count} up checks", + basedOnlastChecksCount: "Based on last {count} checks", + totalUptime: "Total Uptime", + totalDowntime: "Total Downtime", + monitoringSettings: "Monitoring Settings", + monitoringSettingsInterval: "Checked every {interval} seconds", + monitoringSettingsType: "monitoring", + upStatusDuration: "Up for {duration}", + downStatusDuration: "Down for {duration}", incidentHistory: "Incident History", processing: "Processing", back: "Back", - - + last20Checks: "Last 20 checks", }; \ No newline at end of file diff --git a/application/src/translations/types/services.ts b/application/src/translations/types/services.ts index fcc146d..cda603a 100644 --- a/application/src/translations/types/services.ts +++ b/application/src/translations/types/services.ts @@ -117,7 +117,21 @@ export interface ServicesTranslations { editService: string; editServiceDesc: string; + //ServiceStatsCards.tsx + lastCheckedAt: string; + avg: string; + lastUpChecksCount: string; + basedOnlastChecksCount: string; + totalUptime: string; + totalDowntime: string; + monitoringSettings: string; + monitoringSettingsInterval: string; + monitoringSettingsType: string; + upStatusDuration: string; + downStatusDuration: string; + incidentHistory: string; processing: string; back: string; + last20Checks: string; } diff --git a/application/src/translations/zhcn/services.ts b/application/src/translations/zhcn/services.ts index 1942ab7..f7ba25a 100644 --- a/application/src/translations/zhcn/services.ts +++ b/application/src/translations/zhcn/services.ts @@ -118,7 +118,21 @@ export const servicesTranslations: ServicesTranslations = { editService: "编辑服务", editServiceDesc: "更新您所监控服务的详细信息。", + //ServiceStatsCards.tsx + lastCheckedAt: "最新检查时间 {datetime}", + avg: "平均", + lastUpChecksCount: "最近 {count} 次检查", + basedOnlastChecksCount: "基于最近的 {count} 次检查", + totalUptime: "总在线时间", + totalDowntime: "总宕机时间", + monitoringSettings: "监控设置", + monitoringSettingsInterval: "每 {interval} 秒检查一次", + monitoringSettingsType: "监控", + upStatusDuration: "已在线 {duration}", + downStatusDuration: "已宕机 {duration}", + incidentHistory: "事件历史", processing: "处理中", back: "返回", + last20Checks: "最近 20 次检查", }; \ No newline at end of file