From 2d99bba4277b02b0b0d1f2a1bbb99d187c4e8c4e Mon Sep 17 00:00:00 2001
From: Sotski Eugene <y.sotski@corp.profigroup.by>
Date: Wed, 30 Apr 2025 15:11:45 +0300
Subject: [PATCH] Extend i18n (#17969)

* Add i18n support for camera metrics labels

* Fix missing dependency in useMemo hooks
---
 web/public/locales/en/views/system.json | 11 +++++-
 web/src/views/system/CameraMetrics.tsx  | 45 ++++++++++++++++++-------
 2 files changed, 43 insertions(+), 13 deletions(-)

diff --git a/web/public/locales/en/views/system.json b/web/public/locales/en/views/system.json
index 942b30c63..525644e9b 100644
--- a/web/public/locales/en/views/system.json
+++ b/web/public/locales/en/views/system.json
@@ -129,7 +129,16 @@
       "detect": "detect",
       "skipped": "skipped",
       "ffmpeg": "ffmpeg",
-      "capture": "capture"
+      "capture": "capture",
+      "overallFramesPerSecond": "overall frames per second",
+      "overallDetectionsPerSecond": "overall detections per second",
+      "overallSkippedDetectionsPerSecond": "overall skipped detections per second",
+      "cameraFfmpeg": "{{camName}} ffmpeg",
+      "cameraCapture": "{{camName}} capture",
+      "cameraDetect": "{{camName}} detect",
+      "cameraFramesPerSecond": "{{camName}} frames per second",
+      "cameraDetectionsPerSecond": "{{camName}} detections per second",
+      "cameraSkippedDetectionsPerSecond": "{{camName}} skipped detections per second"
     },
     "toast": {
       "success": {
diff --git a/web/src/views/system/CameraMetrics.tsx b/web/src/views/system/CameraMetrics.tsx
index d9cfadeb4..7db059d09 100644
--- a/web/src/views/system/CameraMetrics.tsx
+++ b/web/src/views/system/CameraMetrics.tsx
@@ -79,10 +79,16 @@ export default function CameraMetrics({
       [key: string]: { name: string; data: { x: number; y: number }[] };
     } = {};
 
-    series["overall_fps"] = { name: "overall frames per second", data: [] };
-    series["overall_dps"] = { name: "overall detections per second", data: [] };
+    series["overall_fps"] = {
+      name: t("cameras.label.overallFramesPerSecond"),
+      data: [],
+    };
+    series["overall_dps"] = {
+      name: t("cameras.label.overallDetectionsPerSecond"),
+      data: [],
+    };
     series["overall_skipped_dps"] = {
-      name: "overall skipped detections per second",
+      name: t("cameras.label.overallSkippedDetectionsPerSecond"),
       data: [],
     };
 
@@ -117,7 +123,7 @@ export default function CameraMetrics({
       });
     });
     return Object.values(series);
-  }, [statsHistory]);
+  }, [statsHistory, t]);
 
   const cameraCpuSeries = useMemo(() => {
     if (!statsHistory || statsHistory.length == 0) {
@@ -143,9 +149,18 @@ export default function CameraMetrics({
         if (!(key in series)) {
           const camName = key.replaceAll("_", " ");
           series[key] = {};
-          series[key]["ffmpeg"] = { name: `${camName} ffmpeg`, data: [] };
-          series[key]["capture"] = { name: `${camName} capture`, data: [] };
-          series[key]["detect"] = { name: `${camName} detect`, data: [] };
+          series[key]["ffmpeg"] = {
+            name: t("cameras.label.cameraFfmpeg", { camName: camName }),
+            data: [],
+          };
+          series[key]["capture"] = {
+            name: t("cameras.label.cameraCapture", { camName: camName }),
+            data: [],
+          };
+          series[key]["detect"] = {
+            name: t("cameras.label.cameraCapture", { camName: camName }),
+            data: [],
+          };
         }
 
         series[key]["ffmpeg"].data.push({
@@ -163,7 +178,7 @@ export default function CameraMetrics({
       });
     });
     return series;
-  }, [config, statsHistory]);
+  }, [config, statsHistory, t]);
 
   const cameraFpsSeries = useMemo(() => {
     if (!statsHistory) {
@@ -186,15 +201,21 @@ export default function CameraMetrics({
           const camName = key.replaceAll("_", " ");
           series[key] = {};
           series[key]["fps"] = {
-            name: `${camName} frames per second`,
+            name: t("cameras.label.cameraFramesPerSecond", {
+              camName: camName,
+            }),
             data: [],
           };
           series[key]["det"] = {
-            name: `${camName} detections per second`,
+            name: t("cameras.label.cameraDetectionsPerSecond", {
+              camName: camName,
+            }),
             data: [],
           };
           series[key]["skip"] = {
-            name: `${camName} skipped detections per second`,
+            name: t("cameras.label.cameraSkippedDetectionsPerSecond", {
+              camName: camName,
+            }),
             data: [],
           };
         }
@@ -214,7 +235,7 @@ export default function CameraMetrics({
       });
     });
     return series;
-  }, [statsHistory]);
+  }, [statsHistory, t]);
 
   useEffect(() => {
     if (!showCameraInfoDialog) {