diagnostics locale

client/src/locales/en.json

@@ -113,7 +113,6 @@
       "empty": "No checks",
       "headers": {
         "dateTime": "Date & Time",
-        "message": "Message",
         "statusCode": "Status code"
       }
     }
@@ -229,7 +228,8 @@
         "monitor": "Monitor",
         "name": "Name",
         "status": "Status",
-        "type": "Type"
+        "type": "Type",
+        "message": "Message"
       }
     },
     "toasts": {
@@ -244,6 +244,63 @@
       "toggleTheme": "Toggle theme"
     }
   },
+  "diagnostics": {
+    "infoBox": {
+      "title": "System Diagnostics",
+      "description": "Review system logs and background job status to troubleshoot issues. Monitor the health of your monitoring infrastructure and investigate any problems."
+    },
+    "tabs": {
+      "logs": "Logs",
+      "queue": "Queue",
+      "config": "Config",
+      "access": "Access"
+    },
+    "logs": {
+      "table": {
+        "headers": {
+          "timestamp": "Timestamp",
+          "level": "Level",
+          "service": "Service"
+        }
+      }
+    },
+    "queue": {
+      "stats": {
+        "monitoringJobs": {
+          "title": "Monitoring jobs",
+          "tooltip": "Total number of monitoring jobs in the queue"
+        },
+        "activeJobs": {
+          "title": "Active jobs",
+          "tooltip": "Number of jobs being processed"
+        },
+        "failingJobs": {
+          "title": "Failing jobs",
+          "tooltip": "Jobs that failed on their last execution"
+        },
+        "totalRuns": {
+          "title": "Total runs",
+          "tooltip": "Total number of job executions"
+        },
+        "totalFailures": {
+          "title": "Total failures",
+          "tooltip": "Total number of failed job executions"
+        }
+      },
+      "table": {
+        "headers": {
+          "jobId": "Job ID",
+          "url": "URL",
+          "interval": "Interval",
+          "runs": "Runs",
+          "lastRun": "Last run",
+          "lockedAt": "Locked at",
+          "finishedAt": "Finished at",
+          "lastRunTook": "Last run took (ms)"
+        }
+      }
+    }
+  },
   "export": {
     "form": {
       "exportIncidents": {

client/src/pages/diagnostic/DiagnosticPage.tsx

@@ -4,9 +4,12 @@ import { DiagnosticsQueueTab } from "@/pages/diagnostic/DiagnosticsQueueTab";
 import DiagnosticsConfigTab from "@/pages/diagnostic/DiagnosticsConfigTab";
 import DiagnosticsAccessTab from "@/pages/diagnostic/DiagnosticsAccessTab";
 import { FileText, ListTodo, Settings, Shield } from "lucide-react";
+
 import { useState } from "react";
+import { useTranslation } from "react-i18next";
 
 const DiagnosticPage = () => {
+  const { t } = useTranslation();
   const [tabValue, setTabValue] = useState("logs");
 
   const handleTabChange = (_: React.SyntheticEvent, newValue: string) => {
@@ -16,33 +19,33 @@ const DiagnosticPage = () => {
   return (
     <BasePage>
       <InfoBox
-        title="System Diagnostics"
-        description="Review system logs and background job status to troubleshoot issues. Monitor the health of your monitoring infrastructure and investigate any problems."
+        title={t("diagnostics.infoBox.title")}
+        description={t("diagnostics.infoBox.description")}
       />
       <Tabs value={tabValue} onChange={handleTabChange}>
         <Tab
-          label="Logs"
+          label={t("diagnostics.tabs.logs")}
           value="logs"
           icon={<FileText size={18} strokeWidth={1.5} />}
         />
         <Tab
-          label="Jobs"
-          value="jobs"
+          label={t("diagnostics.tabs.queue")}
+          value="queue"
           icon={<ListTodo size={18} strokeWidth={1.5} />}
         />
         <Tab
-          label="Config"
+          label={t("diagnostics.tabs.config")}
           value="config"
           icon={<Settings size={18} strokeWidth={1.5} />}
         />
         <Tab
-          label="Access"
+          label={t("diagnostics.tabs.access")}
           value="access"
           icon={<Shield size={18} strokeWidth={1.5} />}
         />
       </Tabs>
       {tabValue === "logs" && <DiagnosticsLogTab />}
-      {tabValue === "jobs" && <DiagnosticsQueueTab />}
+      {tabValue === "queue" && <DiagnosticsQueueTab />}
       {tabValue === "config" && <DiagnosticsConfigTab />}
       {tabValue === "access" && <DiagnosticsAccessTab />}
     </BasePage>

client/src/pages/diagnostic/DiagnosticsLogTab.tsx

@@ -11,9 +11,11 @@ import { useGet } from "@/hooks/UseApi";
 import { useTheme } from "@mui/material/styles";
 import type { ILogEntry } from "@/types/log";
 import type { ApiResponse } from "@/types/api";
+import { useTranslation } from "react-i18next";
 
 export const DiagnosticsLogTab = () => {
   const theme = useTheme();
+  const { t } = useTranslation();
   const [logLevel, setLogLevel] = useState("all");
   const { response } = useGet<ApiResponse<ILogEntry[]>>(
     `/diagnostic/logs`,
@@ -33,12 +35,12 @@ export const DiagnosticsLogTab = () => {
   const headers: Header<ILogEntry>[] = [
     {
       id: "timestamp",
-      content: "Timestamp",
+      content: t("diagnostics.logs.table.headers.timestamp"),
       render: (log: ILogEntry) => log.timestamp,
     },
     {
       id: "level",
-      content: "Level",
+      content: t("diagnostics.logs.table.headers.level"),
       render: (log: ILogEntry) => {
         const color =
           levelColors[log.level] || theme.palette.primary.contrastText;
@@ -53,12 +55,12 @@ export const DiagnosticsLogTab = () => {
     },
     {
       id: "service",
-      content: "Service",
+      content: t("diagnostics.logs.table.headers.service"),
       render: (log: ILogEntry) => log.service,
     },
     {
       id: "message",
-      content: "Message",
+      content: t("common.table.headers.message"),
       render: (log: ILogEntry) => log.message,
     },
   ];

client/src/pages/diagnostic/DiagnosticsQueueTab.tsx

@@ -27,21 +27,21 @@ export const DiagnosticsQueueTab = () => {
     const headers: Header<IJob>[] = [
       {
         id: "name",
-        content: t("diagnosticsPage.tableHeaderId"),
+        content: t("diagnostics.queue.table.headers.jobId"),
         render: (row) => {
           return row?.id || "-";
         },
       },
       {
         id: "url",
-        content: t("diagnosticsPage.tableHeaderUrl"),
+        content: t("diagnostics.queue.table.headers.url"),
         render: (row) => {
           return row?.data?.url || "-";
         },
       },
       {
         id: "interval",
-        content: t("diagnosticsPage.tableHeaderInterval"),
+        content: t("diagnostics.queue.table.headers.interval"),
         render: (row) => {
           if (!row?.data?.interval) return "-";
           const seconds = row.data.interval / 1000;
@@ -50,14 +50,14 @@ export const DiagnosticsQueueTab = () => {
       },
       {
         id: "type",
-        content: t("diagnosticsPage.tableHeaderType"),
+        content: t("common.table.headers.type"),
         render: (row) => {
           return row?.data?.type || "-";
         },
       },
       {
         id: "active",
-        content: t("diagnosticsPage.tableHeaderActive"),
+        content: t("common.table.headers.active"),
         render: (row) => {
           return row?.active === true ? "true" : "false";
         },
@@ -65,14 +65,14 @@ export const DiagnosticsQueueTab = () => {
 
       {
         id: "runCount",
-        content: t("diagnosticsPage.tableHeaderRunCount"),
+        content: t("diagnostics.queue.table.headers.runs"),
         render: (row) => {
           return row?.runCount || "-";
         },
       },
       {
         id: "lastRun",
-        content: t("diagnosticsPage.tableHeaderLastRun"),
+        content: t("diagnostics.queue.table.headers.lastRun"),
         render: (row) => {
           if (!row?.lastRunAt) return "-";
           const date = new Date(row.lastRunAt);
@@ -86,7 +86,7 @@ export const DiagnosticsQueueTab = () => {
       },
       {
         id: "lockedAt",
-        content: t("diagnosticsPage.tableHeaderLockedAt"),
+        content: t("diagnostics.queue.table.headers.lockedAt"),
         render: (row) => {
           if (!row?.lockedAt) return "-";
           const date = new Date(row.lockedAt);
@@ -100,7 +100,7 @@ export const DiagnosticsQueueTab = () => {
       },
       {
         id: "lastFinishedAt",
-        content: t("diagnosticsPage.tableHeaderLastFinishedAt"),
+        content: t("diagnostics.queue.table.headers.finishedAt"),
         render: (row) => {
           if (!row?.lastFinishedAt) return "-";
           const date = new Date(row.lastFinishedAt);
@@ -114,7 +114,7 @@ export const DiagnosticsQueueTab = () => {
       },
       {
         id: "lastRunTook",
-        content: t("diagnosticsPage.tableHeaderLastRunTook"),
+        content: t("diagnostics.queue.table.headers.lastRunTook"),
         render: (row) => {
           return row?.lastRunTook || "-";
         },
@@ -129,34 +129,34 @@ export const DiagnosticsQueueTab = () => {
     <Stack spacing={theme.spacing(8)}>
       <Stack direction={{ s: "column", md: "row" }} gap={theme.spacing(8)}>
         <StatBox
-          title={t("diagnosticsPage.statBoxJobsTitle")}
+          title={t("diagnostics.queue.stats.monitoringJobs.title")}
           subtitle={`${metrics?.jobs}`}
           sx={{ width: "100%" }}
-          tooltip="Total number of monitoring jobs in the queue"
+          tooltip={t("diagnostics.queue.stats.monitoringJobs.tooltip")}
         />
         <StatBox
-          title={t("diagnosticsPage.statBoxActiveJobsTitle")}
+          title={t("diagnostics.queue.stats.activeJobs.title")}
           subtitle={`${metrics.activeJobs}`}
           sx={{ width: "100%" }}
-          tooltip="Jobs currently running or locked for execution"
+          tooltip={t("diagnostics.queue.stats.activeJobs.tooltip")}
         />
         <StatBox
-          title={t("diagnosticsPage.statBoxFailingJobsTitle")}
+          title={t("diagnostics.queue.stats.failingJobs.title")}
           subtitle={`${metrics.failingJobs}`}
           sx={{ width: "100%" }}
-          tooltip="Jobs that failed on their last execution"
+          tooltip={t("diagnostics.queue.stats.failingJobs.tooltip")}
         />
         <StatBox
-          title={t("diagnosticsPage.statBoxTotalRunsTitle")}
+          title={t("diagnostics.queue.stats.totalRuns.title")}
           subtitle={`${metrics.totalRuns}`}
           sx={{ width: "100%" }}
-          tooltip="Total number of job executions across all jobs"
+          tooltip={t("diagnostics.queue.stats.totalRuns.tooltip")}
         />
         <StatBox
-          title={t("diagnosticsPage.statBoxTotalFailuresTitle")}
+          title={t("diagnostics.queue.stats.totalFailures.title")}
           subtitle={`${metrics.totalFailures}`}
           sx={{ width: "100%" }}
-          tooltip="Total number of failed job executions across all jobs"
+          tooltip={t("diagnostics.queue.stats.totalFailures.tooltip")}
         />
       </Stack>
       <Table headers={headers} data={jobs} />

client/src/pages/uptime/CheckTable.tsx

@@ -16,14 +16,14 @@ const getHeaders = (t: Function, uiTimezone: string) => {
   const headers: Header<ICheck>[] = [
     {
       id: "status",
-      content: t("monitors.common.table.headers.status"),
+      content: t("common.table.headers.status"),
       render: (row) => {
         return <StatusLabel status={row.status as MonitorStatus} />;
       },
     },
     {
       id: "date",
-      content: t("monitors.common.table.headers.dateTime"),
+      content: t("checks.table.headers.dateTime"),
       render: (row) => {
         return formatDateWithTz(
           row.createdAt,
@@ -34,14 +34,14 @@ const getHeaders = (t: Function, uiTimezone: string) => {
     },
     {
       id: "message",
-      content: t("monitors.common.table.headers.message"),
+      content: t("common.table.headers.message"),
       render: (row) => {
         return row.message || "N/A";
       },
     },
     {
       id: "statusCode",
-      content: t("monitors.common.table.headers.statusCode"),
+      content: t("checks.table.headers.statusCode"),
       render: (row) => {
         return row.httpStatusCode || "N/A";
       },