From 4e07279a54481b0dd81cf2497aa6621a548566d2 Mon Sep 17 00:00:00 2001
From: YiZixuan <sqkkyzx@qq.com>
Date: Mon, 8 Sep 2025 14:18:05 +0800
Subject: [PATCH] refactory(i18n): Improve internationalization configuration
 and add new translations

- Added multiple new translation items
- Updated the two language files: en and zhcn
- Added type definitions for new translation items in types/services.ts
- Modified some components to use the new translation items
---
 .../components/services/LastCheckedTime.tsx   | 10 +++---
 .../components/services/ServiceEditDialog.tsx |  6 ++--
 .../add-service/ServiceFormActions.tsx        |  7 ++--
 .../incident-history/IncidentTable.tsx        |  4 +--
 .../incident-history/LatestChecksTable.tsx    |  4 ++-
 .../incident-history/TablePagination.tsx      |  4 ++-
 .../service-row/ServiceRowActions.tsx         | 16 ++++++----
 .../alerts-templates/TemplateDialog.tsx       |  2 ++
 .../NotificationChannelDialog.tsx             |  2 ++
 application/src/translations/en/services.ts   | 32 ++++++++++++++++++-
 .../src/translations/types/incident.ts        |  1 +
 .../src/translations/types/services.ts        | 30 +++++++++++++++--
 application/src/translations/zhcn/services.ts | 28 +++++++++++++++-
 13 files changed, 123 insertions(+), 23 deletions(-)

diff --git a/application/src/components/services/LastCheckedTime.tsx b/application/src/components/services/LastCheckedTime.tsx
index 3757f12..85756a3 100644
--- a/application/src/components/services/LastCheckedTime.tsx
+++ b/application/src/components/services/LastCheckedTime.tsx
@@ -2,6 +2,7 @@
 import React from "react";
 import { Clock, TimerOff } from "lucide-react";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import { useLanguage } from "@/contexts/LanguageContext";
 
 interface LastCheckedTimeProps {
   lastCheckedTime: string;
@@ -10,6 +11,7 @@ interface LastCheckedTimeProps {
 }
 
 export const LastCheckedTime = ({ lastCheckedTime, status, interval }: LastCheckedTimeProps) => {
+	const { t } = useLanguage();
   // Format the time without seconds to display a static time
   const formatTimeWithoutSeconds = (timeString: string) => {
     try {
@@ -55,7 +57,7 @@ export const LastCheckedTime = ({ lastCheckedTime, status, interval }: LastCheck
               <Clock className="h-4 w-4" />
             )}
             <span>
-              {isPaused ? "Paused at " : ""}
+              {isPaused ? t("pausedAt") : ""}
               {formattedTime}
             </span>
           </div>
@@ -66,14 +68,14 @@ export const LastCheckedTime = ({ lastCheckedTime, status, interval }: LastCheck
         >
           <div className="flex flex-col gap-1 text-xs">
             <div className="font-medium">
-              {isPaused ? "Monitoring Paused" : "Last Check Details"}
+              {isPaused ? t("monitoringPaused") : t("lastCheckDetails")}
             </div>
             <div>
-              {isPaused ? "No automatic checks" : `Checked at ${formattedTime}`}
+              {isPaused ? t("noAutomaticChecks") : t("checkedAt") + `${formattedTime}`}
             </div>
             {interval && !isPaused && (
               <div>
-                Check interval: {formatInterval(interval)}
+	              {t("checkInterval")}: {formatInterval(interval)}
               </div>
             )}
             <div className="text-gray-400 text-[10px]">
diff --git a/application/src/components/services/ServiceEditDialog.tsx b/application/src/components/services/ServiceEditDialog.tsx
index 8603398..d020d56 100644
--- a/application/src/components/services/ServiceEditDialog.tsx
+++ b/application/src/components/services/ServiceEditDialog.tsx
@@ -11,6 +11,7 @@ import { Service } from "@/types/service.types";
 import { useQueryClient } from "@tanstack/react-query";
 import { useState, useEffect } from "react";
 import { ScrollArea } from "@/components/ui/scroll-area";
+import { useLanguage } from "@/contexts/LanguageContext";
 
 interface ServiceEditDialogProps {
   open: boolean;
@@ -19,6 +20,7 @@ interface ServiceEditDialogProps {
 }
 
 export function ServiceEditDialog({ open, onOpenChange, service }: ServiceEditDialogProps) {
+	const { t } = useLanguage();
   const queryClient = useQueryClient();
   const [isSubmitting, setIsSubmitting] = useState(false);
   
@@ -53,9 +55,9 @@ export function ServiceEditDialog({ open, onOpenChange, service }: ServiceEditDi
     }}>
       <DialogContent className="sm:max-w-[700px] max-h-[90vh] flex flex-col">
         <DialogHeader>
-          <DialogTitle className="text-xl">Edit Service</DialogTitle>
+          <DialogTitle className="text-xl">{t("editService")}</DialogTitle>
           <DialogDescription>
-            Update the details of your monitored service.
+	          {t("editServiceDesc")}
           </DialogDescription>
         </DialogHeader>
         {open && service && (
diff --git a/application/src/components/services/add-service/ServiceFormActions.tsx b/application/src/components/services/add-service/ServiceFormActions.tsx
index 4f6ad59..e9a5552 100644
--- a/application/src/components/services/add-service/ServiceFormActions.tsx
+++ b/application/src/components/services/add-service/ServiceFormActions.tsx
@@ -2,6 +2,7 @@
 import { Button } from "@/components/ui/button";
 import { Loader2 } from "lucide-react";
 import { MouseEvent } from "react";
+import {useLanguage} from "@/contexts/LanguageContext.tsx";
 
 interface ServiceFormActionsProps {
   isSubmitting: boolean;
@@ -14,6 +15,8 @@ export function ServiceFormActions({
   onCancel,
   submitLabel = "Create Service"
 }: ServiceFormActionsProps) {
+
+	const {t} = useLanguage();
   const handleCancel = (e: MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
     if (!isSubmitting) {
@@ -29,7 +32,7 @@ export function ServiceFormActions({
         variant="outline"
         disabled={isSubmitting}
       >
-        Cancel
+	      {t("cancel")}
       </Button>
       <Button 
         type="submit" 
@@ -38,7 +41,7 @@ export function ServiceFormActions({
         {isSubmitting ? (
           <>
             <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-            Processing...
+	          {t("processing")}...
           </>
         ) : (
           submitLabel
diff --git a/application/src/components/services/incident-history/IncidentTable.tsx b/application/src/components/services/incident-history/IncidentTable.tsx
index d8118ed..e2184aa 100644
--- a/application/src/components/services/incident-history/IncidentTable.tsx
+++ b/application/src/components/services/incident-history/IncidentTable.tsx
@@ -25,8 +25,8 @@ export function IncidentTable({ incidents }: IncidentTableProps) {
           <TableHead className={theme === 'dark' ? 'text-gray-300' : 'text-gray-700'}>{t("time")}</TableHead>
           <TableHead className={theme === 'dark' ? 'text-gray-300' : 'text-gray-700'}>{t("status")}</TableHead>
           <TableHead className={theme === 'dark' ? 'text-gray-300' : 'text-gray-700'}>{t("responseTime")}</TableHead>
-          <TableHead className={theme === 'dark' ? 'text-gray-300' : 'text-gray-700'}>Error Message</TableHead>
-          <TableHead className={theme === 'dark' ? 'text-gray-300' : 'text-gray-700'}>Details</TableHead>
+          <TableHead className={theme === 'dark' ? 'text-gray-300' : 'text-gray-700'}>{t("errorMessage")}</TableHead>
+          <TableHead className={theme === 'dark' ? 'text-gray-300' : 'text-gray-700'}>{t("details")}</TableHead>
         </TableRow>
       </TableHeader>
       <TableBody>
diff --git a/application/src/components/services/incident-history/LatestChecksTable.tsx b/application/src/components/services/incident-history/LatestChecksTable.tsx
index a3143ea..7b976c1 100644
--- a/application/src/components/services/incident-history/LatestChecksTable.tsx
+++ b/application/src/components/services/incident-history/LatestChecksTable.tsx
@@ -9,10 +9,12 @@ import { IncidentTable } from "./IncidentTable";
 import { StatusFilter, PageSize } from "./types";
 import { getStatusChangeEvents } from "./utils";
 import { useTheme } from "@/contexts/ThemeContext";
+import { useLanguage } from "@/contexts/LanguageContext";
 
 export function LatestChecksTable({ uptimeData }: { uptimeData: UptimeData[] }) {
   // Get current theme
   const { theme } = useTheme();
+	const { t } = useLanguage();
   
   // Filter state
   const [statusFilter, setStatusFilter] = useState<StatusFilter>("all");
@@ -65,7 +67,7 @@ export function LatestChecksTable({ uptimeData }: { uptimeData: UptimeData[] })
       <CardHeader>
         <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
           <CardTitle className="text-card-foreground">
-            <span>Incident History</span>
+            <span>{t("incidentHistory")}</span>
           </CardTitle>
           <StatusFilterTabs statusFilter={statusFilter} onStatusFilterChange={setStatusFilter} />
         </div>
diff --git a/application/src/components/services/incident-history/TablePagination.tsx b/application/src/components/services/incident-history/TablePagination.tsx
index 8ce20a9..ca0f808 100644
--- a/application/src/components/services/incident-history/TablePagination.tsx
+++ b/application/src/components/services/incident-history/TablePagination.tsx
@@ -15,6 +15,7 @@ import {
   SelectValue 
 } from "@/components/ui/select";
 import { PageSize } from "./types";
+import {useLanguage} from "@/contexts/LanguageContext.tsx";
 
 interface TablePaginationProps {
   currentPage: number;
@@ -35,6 +36,7 @@ export function TablePagination({
   onPageChange,
   onPageSizeChange,
 }: TablePaginationProps) {
+	const {t} = useLanguage()
   // Generate page numbers
   const getPageNumbers = () => {
     const pages = [];
@@ -58,7 +60,7 @@ export function TablePagination({
   return (
     <div className="mt-4 flex items-center justify-between">
       <div className="flex items-center space-x-2">
-        <span className="text-sm text-muted-foreground">Rows per page:</span>
+        <span className="text-sm text-muted-foreground">{t("rowsPerPage")}:</span>
         <Select
           value={pageSize}
           onValueChange={(value) => onPageSizeChange(value as PageSize)}
diff --git a/application/src/components/services/service-row/ServiceRowActions.tsx b/application/src/components/services/service-row/ServiceRowActions.tsx
index 7cdc1e0..fd7c3b1 100644
--- a/application/src/components/services/service-row/ServiceRowActions.tsx
+++ b/application/src/components/services/service-row/ServiceRowActions.tsx
@@ -12,6 +12,7 @@ import {
 import { Service } from "@/types/service.types";
 import { serviceService } from "@/services/serviceService";
 import { useToast } from "@/hooks/use-toast";
+import { useLanguage } from "@/contexts/LanguageContext";
 
 interface ServiceRowActionsProps {
   service: Service;
@@ -31,6 +32,7 @@ export const ServiceRowActions = ({
   onMuteAlerts
 }: ServiceRowActionsProps) => {
   const { toast } = useToast();
+	const { t } = useLanguage();
 
   // Handle pause/resume directly from dropdown
   const handlePauseResume = async (e: React.MouseEvent) => {
@@ -122,7 +124,7 @@ export const ServiceRowActions = ({
             }}
           >
             <Eye className="h-4 w-4" />
-            <span>View Detail</span>
+            <span>{t("viewDetail")}</span>
           </DropdownMenuItem>
           <DropdownMenuItem 
             className="flex items-center gap-2 cursor-pointer text-base py-2.5"
@@ -131,12 +133,12 @@ export const ServiceRowActions = ({
             {service.status === "paused" ? (
               <>
                 <Play className="h-4 w-4" />
-                <span>Resume Monitoring</span>
+                <span>{t("resumeMonitoring")}</span>
               </>
             ) : (
               <>
                 <Pause className="h-4 w-4" />
-                <span>Pause Monitoring</span>
+                <span>{t("pauseMonitoring")}</span>
               </>
             )}
           </DropdownMenuItem>
@@ -148,7 +150,7 @@ export const ServiceRowActions = ({
             }}
           >
             <Edit className="h-4 w-4" />
-            <span>Edit</span>
+            <span>{t("edit")}</span>
           </DropdownMenuItem>
           <DropdownMenuItem 
             className="flex items-center gap-2 cursor-pointer text-base py-2.5"
@@ -157,12 +159,12 @@ export const ServiceRowActions = ({
             {alertsMuted ? (
               <>
                 <Bell className="h-4 w-4" />
-                <span>Unmute Alerts</span>
+                <span>{t("unmuteAlerts")}</span>
               </>
             ) : (
               <>
                 <BellOff className="h-4 w-4" />
-                <span>Mute Alerts</span>
+                <span>{t("muteAlerts")}</span>
               </>
             )}
           </DropdownMenuItem>
@@ -175,7 +177,7 @@ export const ServiceRowActions = ({
             }}
           >
             <Trash2 className="h-4 w-4" />
-            <span>Delete</span>
+            <span>{t("delete")}</span>
           </DropdownMenuItem>
         </DropdownMenuContent>
       </DropdownMenu>
diff --git a/application/src/components/settings/alerts-templates/TemplateDialog.tsx b/application/src/components/settings/alerts-templates/TemplateDialog.tsx
index fb547d6..fc7f26a 100644
--- a/application/src/components/settings/alerts-templates/TemplateDialog.tsx
+++ b/application/src/components/settings/alerts-templates/TemplateDialog.tsx
@@ -16,6 +16,7 @@ import { ScrollArea } from "@/components/ui/scroll-area";
 import { TemplateType, templateTypeConfigs } from "@/services/templateService";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Textarea } from "@/components/ui/textarea";
+import {z} from "zod";
 
 interface TemplateDialogProps {
   open: boolean;
@@ -81,6 +82,7 @@ export const TemplateDialog: React.FC<TemplateDialogProps> = ({
   };
 
   const renderPlaceholderGuide = () => {
+
     const config = templateTypeConfigs[selectedTemplateType];
     if (!config) return null;
 
diff --git a/application/src/components/settings/notification-settings/NotificationChannelDialog.tsx b/application/src/components/settings/notification-settings/NotificationChannelDialog.tsx
index 0b1d3e1..ef0591d 100644
--- a/application/src/components/settings/notification-settings/NotificationChannelDialog.tsx
+++ b/application/src/components/settings/notification-settings/NotificationChannelDialog.tsx
@@ -27,6 +27,7 @@ import { Switch } from "@/components/ui/switch";
 import { Loader2, Copy } from "lucide-react";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { toast } from "@/hooks/use-toast";
+import { useLanguage } from "@/contexts/LanguageContext";
 
 interface NotificationChannelDialogProps {
   open: boolean;
@@ -34,6 +35,7 @@ interface NotificationChannelDialogProps {
   editingConfig: AlertConfiguration | null;
 }
 
+
 const baseSchema = z.object({
   notify_name: z.string().min(1, "Name is required"),
   notification_type: z.enum(["telegram", "discord", "slack", "signal", "google_chat", "email", "ntfy", "pushover", "notifiarr", "gotify", "webhook"]),
diff --git a/application/src/translations/en/services.ts b/application/src/translations/en/services.ts
index 3058a85..21ef012 100644
--- a/application/src/translations/en/services.ts
+++ b/application/src/translations/en/services.ts
@@ -3,7 +3,6 @@ import { ServicesTranslations } from '../types/services';
 
 export const servicesTranslations: ServicesTranslations = {
   serviceStatus: "Service Status",
-  responseTime: "Response Time",
   uptime: "Uptime",
   lastChecked: "Last Checked",
   noServices: "No services match your filter criteria.",
@@ -95,4 +94,35 @@ export const servicesTranslations: ServicesTranslations = {
 	downServices: "DOWN SERVICES",
 	pausedServices: "PAUSED SERVICES",
 	warningServices: "WARNING SERVICES",
+
+	// ServiceRowActions.tsx
+	viewDetail: "View Detail",
+	resumeMonitoring: "Resume Monitoring",
+	pauseMonitoring: "Pause Monitoring",
+
+
+	//IncidentTable.tsx
+	responseTime: "Response Time",
+	errorMessage: "Error Message",
+	details: "Details",
+	unmuteAlerts: "Unmute Alerts",
+	muteAlerts: "Mute Alerts",
+
+	//LastCheckedTime.tsx
+	pausedAt: "Paused at ",
+	lastCheckDetails: "Last Check Details",
+	checkedAt: "Checked at ",
+	monitoringPaused: "Monitoring Paused",
+	noAutomaticChecks: "No automatic checks",
+
+	//ServiveEditDialog.tsx
+	editService: "Edit Service",
+	editServiceDesc: "Update the details of your monitored service.",
+
+
+	incidentHistory: "Incident History",
+	processing: "Processing",
+	back: "Back",
+
+
 };
\ No newline at end of file
diff --git a/application/src/translations/types/incident.ts b/application/src/translations/types/incident.ts
index 4ad5ccf..8df2f92 100644
--- a/application/src/translations/types/incident.ts
+++ b/application/src/translations/types/incident.ts
@@ -59,4 +59,5 @@ export interface IncidentTranslations {
   affectedSystems: string;
   enterAffectedSystems: string;
   separateSystemsWithComma: string;
+
 }
diff --git a/application/src/translations/types/services.ts b/application/src/translations/types/services.ts
index bd9e7a9..fcc146d 100644
--- a/application/src/translations/types/services.ts
+++ b/application/src/translations/types/services.ts
@@ -2,7 +2,6 @@
 export interface ServicesTranslations {
 
   serviceStatus: string;
-  responseTime: string;
   uptime: string;
   lastChecked: string;
   noServices: string;
@@ -93,5 +92,32 @@ export interface ServicesTranslations {
 	upServices: string;
 	downServices: string;
 	pausedServices: string;
-	warningServices: string;	
+	warningServices: string;
+
+	// ServiceRowActions.tsx
+	viewDetail: string;
+	resumeMonitoring: string;
+	pauseMonitoring: string;
+	unmuteAlerts: string;
+	muteAlerts: string;
+
+	//IncidentTable.tsx
+	responseTime: string;
+	errorMessage: string;
+	details: string;
+
+	//LastCheckedTime.tsx
+	pausedAt: string;
+	lastCheckDetails: string;
+	checkedAt: string;
+	monitoringPaused: string;
+	noAutomaticChecks: string;
+
+	//ServiveEditDialog.tsx
+	editService: string;
+	editServiceDesc: string;
+
+	incidentHistory: string;
+	processing: string;
+	back: string;
 }
diff --git a/application/src/translations/zhcn/services.ts b/application/src/translations/zhcn/services.ts
index 4e9cc95..1942ab7 100644
--- a/application/src/translations/zhcn/services.ts
+++ b/application/src/translations/zhcn/services.ts
@@ -3,7 +3,6 @@ import { ServicesTranslations } from '../types/services';
 
 export const servicesTranslations: ServicesTranslations = {
   serviceStatus: "服务状态",
-  responseTime: "响应时间",
   uptime: "在线时间",
   lastChecked: "最后检查时间",
   noServices: "没有符合您筛选条件的服务。",
@@ -95,4 +94,31 @@ export const servicesTranslations: ServicesTranslations = {
 	downServices: "下线服务",
 	pausedServices: "暂停服务",
 	warningServices: "告警服务",
+
+	// ServiceRowActions.tsx
+	viewDetail: "查看详情",
+	resumeMonitoring: "恢复监控",
+	pauseMonitoring: "暂停监控",
+	unmuteAlerts: "取消静音警报",
+	muteAlerts: "静音警报",
+
+	//IncidentTable.tsx
+	responseTime: "响应时间",
+	errorMessage: "错误信息",
+	details: "详情",
+
+	//LastCheckedTime.tsx
+	pausedAt: "暂停于 ",
+	lastCheckDetails: "最近检查详情",
+	checkedAt: "检查于 ",
+	monitoringPaused: "监控已暂停",
+	noAutomaticChecks: "无自动检查",
+
+	//ServiveEditDialog.tsx
+	editService: "编辑服务",
+	editServiceDesc: "更新您所监控服务的详细信息。",
+
+	incidentHistory: "事件历史",
+	processing: "处理中",
+	back: "返回",
 };
\ No newline at end of file