From 928f7b84b4f1d85b6c809ef4e5b7314f4617bb76 Mon Sep 17 00:00:00 2001
From: ZhaiSoul <842607283@qq.com>
Date: Tue, 24 Mar 2026 14:22:35 +0800
Subject: [PATCH] fix: fix system stats i18n

---
 web/src/components/graph/SystemGraph.tsx      |  5 +++--
 .../components/overlay/CameraInfoDialog.tsx   |  2 +-
 web/src/views/system/GeneralMetrics.tsx       | 22 +++++++++----------
 3 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/web/src/components/graph/SystemGraph.tsx b/web/src/components/graph/SystemGraph.tsx
index fcafeda22..eaf4ae226 100644
--- a/web/src/components/graph/SystemGraph.tsx
+++ b/web/src/components/graph/SystemGraph.tsx
@@ -11,7 +11,7 @@ import useSWR from "swr";
 
 type ThresholdBarGraphProps = {
   graphId: string;
-  name: string;
+  name?: string;
   unit: string;
   threshold: Threshold;
   updateTimes: number[];
@@ -25,6 +25,7 @@ export function ThresholdBarGraph({
   updateTimes,
   data,
 }: ThresholdBarGraphProps) {
+  const displayName = name || data[0]?.name || "";
   const { data: config } = useSWR<FrigateConfig>("config", {
     revalidateOnFocus: false,
   });
@@ -186,7 +187,7 @@ export function ThresholdBarGraph({
   return (
     <div className="flex w-full flex-col">
       <div className="flex items-center gap-1">
-        <div className="text-xs text-secondary-foreground">{name}</div>
+        <div className="text-xs text-secondary-foreground">{displayName}</div>
         <div className="text-xs text-primary">
           {lastValue}
           {unit}
diff --git a/web/src/components/overlay/CameraInfoDialog.tsx b/web/src/components/overlay/CameraInfoDialog.tsx
index a15d9c590..f05f83b70 100644
--- a/web/src/components/overlay/CameraInfoDialog.tsx
+++ b/web/src/components/overlay/CameraInfoDialog.tsx
@@ -159,7 +159,7 @@ export default function CameraInfoDialog({
                               </div>
                             ) : (
                               <div className="text-muted-foreground">
-                                <div className="ml-2 mt-1">Audio:</div>
+                                <div className="ml-2 mt-1">{t("cameras.info.audio")}</div>
                                 <div className="ml-4">
                                   {t("cameras.info.codec")}{" "}
                                   <span className="text-primary">
diff --git a/web/src/views/system/GeneralMetrics.tsx b/web/src/views/system/GeneralMetrics.tsx
index cdf35c28b..a33532852 100644
--- a/web/src/views/system/GeneralMetrics.tsx
+++ b/web/src/views/system/GeneralMetrics.tsx
@@ -548,7 +548,7 @@ export default function GeneralMetrics({
       Object.entries(stats.processes).forEach(([key, procStats]) => {
         if (procStats.pid.toString() in stats.cpu_usages) {
           if (!(key in series)) {
-            series[key] = { name: key, data: [] };
+            series[key] = { name: t(`general.otherProcesses.series.${key}`), data: [] };
           }
 
           const data = stats.cpu_usages[procStats.pid.toString()]?.cpu;
@@ -563,7 +563,7 @@ export default function GeneralMetrics({
       });
     });
     return Object.keys(series).length > 0 ? Object.values(series) : [];
-  }, [statsHistory]);
+  }, [statsHistory, t]);
 
   const otherProcessMemSeries = useMemo(() => {
     if (!statsHistory) {
@@ -582,7 +582,7 @@ export default function GeneralMetrics({
       Object.entries(stats.processes).forEach(([key, procStats]) => {
         if (procStats.pid.toString() in stats.cpu_usages) {
           if (!(key in series)) {
-            series[key] = { name: key, data: [] };
+            series[key] = { name: t(`general.otherProcesses.series.${key}`), data: [] };
           }
 
           const data = stats.cpu_usages[procStats.pid.toString()]?.mem;
@@ -597,7 +597,7 @@ export default function GeneralMetrics({
       });
     });
     return Object.values(series);
-  }, [statsHistory]);
+  }, [statsHistory, t]);
 
   return (
     <>
@@ -964,11 +964,10 @@ export default function GeneralMetrics({
               <div className="mb-5">
                 {t("general.otherProcesses.processCpuUsage")}
               </div>
-              {otherProcessCpuSeries.map((series) => (
+              {otherProcessCpuSeries.map((series, index) => (
                 <ThresholdBarGraph
-                  key={series.name}
-                  graphId={`${series.name}-cpu`}
-                  name={t(`general.otherProcesses.series.${series.name}`)}
+                  key={`other-process-cpu-${index}`}
+                  graphId={`other-process-cpu-${index}`}
                   unit="%"
                   threshold={DetectorCpuThreshold}
                   updateTimes={updateTimes}
@@ -984,12 +983,11 @@ export default function GeneralMetrics({
               <div className="mb-5">
                 {t("general.otherProcesses.processMemoryUsage")}
               </div>
-              {otherProcessMemSeries.map((series) => (
+              {otherProcessMemSeries.map((series, index) => (
                 <ThresholdBarGraph
-                  key={series.name}
-                  graphId={`${series.name}-mem`}
+                  key={`other-process-mem-${index}`}
+                  graphId={`other-process-mem-${index}`}
                   unit="%"
-                  name={series.name.replaceAll("_", " ")}
                   threshold={DetectorMemThreshold}
                   updateTimes={updateTimes}
                   data={[series]}