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 )} - {isPaused ? "Paused at " : ""} + {isPaused ? t("pausedAt") : ""} {formattedTime} @@ -66,14 +68,14 @@ export const LastCheckedTime = ({ lastCheckedTime, status, interval }: LastCheck >
- {isPaused ? "Monitoring Paused" : "Last Check Details"} + {isPaused ? t("monitoringPaused") : t("lastCheckDetails")}
- {isPaused ? "No automatic checks" : `Checked at ${formattedTime}`} + {isPaused ? t("noAutomaticChecks") : t("checkedAt") + `${formattedTime}`}
{interval && !isPaused && (
- Check interval: {formatInterval(interval)} + {t("checkInterval")}: {formatInterval(interval)}
)}
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 }}> - Edit Service + {t("editService")} - Update the details of your monitored service. + {t("editServiceDesc")} {open && service && ( 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/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) => { e.preventDefault(); if (!isSubmitting) { @@ -29,7 +32,7 @@ export function ServiceFormActions({ variant="outline" disabled={isSubmitting} > - Cancel + {t("cancel")}