url/checkcle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactory(i18n): Improve internationalization configuration and add new translations

Browse Source 
- 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
This commit is contained in:
YiZixuan
2025-09-08 14:18:05 +08:00
parent 020cdec912
commit 4e07279a54
13 changed files with 123 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
application/src/components/services/LastCheckedTime.tsx
+6 -4
View File
@@ -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]">
application/src/components/services/ServiceEditDialog.tsx
+4 -2
View File
@@ -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 && (
application/src/components/services/add-service/ServiceFormActions.tsx
+5 -2
View File
@@ -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
application/src/components/services/incident-history/IncidentTable.tsx
+2 -2
View File
@@ -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>
application/src/components/services/incident-history/LatestChecksTable.tsx
+3 -1
View File
@@ -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>
application/src/components/services/incident-history/TablePagination.tsx
+3 -1
View File
@@ -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)}
application/src/components/services/service-row/ServiceRowActions.tsx
+9 -7
View File
@@ -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>