diff --git a/application/src/components/docker/DockerContainersTable.tsx b/application/src/components/docker/DockerContainersTable.tsx index 9e39429..45e4c5d 100644 --- a/application/src/components/docker/DockerContainersTable.tsx +++ b/application/src/components/docker/DockerContainersTable.tsx @@ -4,6 +4,7 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Table, TableBody } from "@/components/ui/table"; import { DockerContainer } from "@/types/docker.types"; import { DockerMetricsDialog } from "./DockerMetricsDialog"; +import { useLanguage } from "@/contexts/LanguageContext"; import { DockerTableSearch, DockerTableHeader, @@ -18,6 +19,7 @@ interface DockerContainersTableProps { } export const DockerContainersTable = ({ containers, isLoading, onRefresh }: DockerContainersTableProps) => { + const { t } = useLanguage(); const [searchTerm, setSearchTerm] = useState(""); const [selectedContainer, setSelectedContainer] = useState(null); const [metricsDialogOpen, setMetricsDialogOpen] = useState(false); @@ -49,7 +51,7 @@ export const DockerContainersTable = ({ containers, isLoading, onRefresh }: Dock
- Docker Containers + {t('dockerContainers', 'docker')} { const [timeRange, setTimeRange] = useState("1d"); const { theme } = useTheme(); + const { t } = useLanguage(); const { data: metrics = [], @@ -232,11 +234,11 @@ export const DockerMetricsDialog = ({ container, open, onOpenChange }: DockerMet -
+
- Container Metrics: {container.name} + {t('containerMetricsTitle', 'docker', { name: container.name })}
onSearchChange(e.target.value)} className="pl-10 sm:w-64 bg-background border-border" @@ -30,7 +32,7 @@ export const DockerTableSearch = ({ searchTerm, onSearchChange, onRefresh, isLoa className="w-full sm:w-auto bg-background border-border hover:bg-muted" > - Refresh + {t('refresh', 'docker')}
); diff --git a/application/src/components/operational-page/ComponentsSelector.tsx b/application/src/components/operational-page/ComponentsSelector.tsx index 9478fc7..25e3eb1 100644 --- a/application/src/components/operational-page/ComponentsSelector.tsx +++ b/application/src/components/operational-page/ComponentsSelector.tsx @@ -11,6 +11,7 @@ import { Plus, X, Server } from 'lucide-react'; import { StatusPageComponentRecord } from '@/types/statusPageComponents.types'; import { useQuery } from '@tanstack/react-query'; import { serviceService } from '@/services/serviceService'; +import { useLanguage } from "@/contexts/LanguageContext"; interface ComponentsSelectorProps { selectedComponents: Partial[]; @@ -19,6 +20,7 @@ interface ComponentsSelectorProps { } export const ComponentsSelector = ({ selectedComponents, onComponentsChange, onComponentDelete }: ComponentsSelectorProps) => { + const { t } = useLanguage(); const [showAddForm, setShowAddForm] = useState(false); const [newComponent, setNewComponent] = useState({ name: '', @@ -71,16 +73,16 @@ export const ComponentsSelector = ({ selectedComponents, onComponentsChange, onC - Status Page Components + {t('statusPageComponents')} - Add monitoring components like uptime services, SSL certificates, and incident tracking + {t('addMonitoringComponentsDesc')} {selectedComponents.length > 0 && (
- +
{selectedComponents.map((component, index) => (
@@ -92,12 +94,12 @@ export const ComponentsSelector = ({ selectedComponents, onComponentsChange, onC
{component.service_id && ( - Service: {services.find(s => s.id === component.service_id)?.name || component.service_id} + {t('service')}: {services.find(s => s.id === component.service_id)?.name || component.service_id} )} {component.server_id && ( - Server: {component.server_id} + {t('server')}: {component.server_id} )}
@@ -122,22 +124,22 @@ export const ComponentsSelector = ({ selectedComponents, onComponentsChange, onC className="w-full" > - Add Component + {t('addComponent')} ) : (
- + setNewComponent({ ...newComponent, name: e.target.value })} />
- +
- +