fix: fix system stats i18n (#22600)

* fix: fix system stats i18n

* chore: lint
This commit is contained in:
GuoQing Liu 2026-03-24 20:49:05 +08:00 committed by GitHub
parent d27ee166bc
commit 6c5801ac83
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 22 additions and 15 deletions

View File

@ -11,7 +11,7 @@ import useSWR from "swr";
type ThresholdBarGraphProps = { type ThresholdBarGraphProps = {
graphId: string; graphId: string;
name: string; name?: string;
unit: string; unit: string;
threshold: Threshold; threshold: Threshold;
updateTimes: number[]; updateTimes: number[];
@ -25,6 +25,7 @@ export function ThresholdBarGraph({
updateTimes, updateTimes,
data, data,
}: ThresholdBarGraphProps) { }: ThresholdBarGraphProps) {
const displayName = name || data[0]?.name || "";
const { data: config } = useSWR<FrigateConfig>("config", { const { data: config } = useSWR<FrigateConfig>("config", {
revalidateOnFocus: false, revalidateOnFocus: false,
}); });
@ -186,7 +187,7 @@ export function ThresholdBarGraph({
return ( return (
<div className="flex w-full flex-col"> <div className="flex w-full flex-col">
<div className="flex items-center gap-1"> <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"> <div className="text-xs text-primary">
{lastValue} {lastValue}
{unit} {unit}

View File

@ -159,7 +159,9 @@ export default function CameraInfoDialog({
</div> </div>
) : ( ) : (
<div className="text-muted-foreground"> <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"> <div className="ml-4">
{t("cameras.info.codec")}{" "} {t("cameras.info.codec")}{" "}
<span className="text-primary"> <span className="text-primary">

View File

@ -548,7 +548,10 @@ export default function GeneralMetrics({
Object.entries(stats.processes).forEach(([key, procStats]) => { Object.entries(stats.processes).forEach(([key, procStats]) => {
if (procStats.pid.toString() in stats.cpu_usages) { if (procStats.pid.toString() in stats.cpu_usages) {
if (!(key in series)) { 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; const data = stats.cpu_usages[procStats.pid.toString()]?.cpu;
@ -563,7 +566,7 @@ export default function GeneralMetrics({
}); });
}); });
return Object.keys(series).length > 0 ? Object.values(series) : []; return Object.keys(series).length > 0 ? Object.values(series) : [];
}, [statsHistory]); }, [statsHistory, t]);
const otherProcessMemSeries = useMemo(() => { const otherProcessMemSeries = useMemo(() => {
if (!statsHistory) { if (!statsHistory) {
@ -582,7 +585,10 @@ export default function GeneralMetrics({
Object.entries(stats.processes).forEach(([key, procStats]) => { Object.entries(stats.processes).forEach(([key, procStats]) => {
if (procStats.pid.toString() in stats.cpu_usages) { if (procStats.pid.toString() in stats.cpu_usages) {
if (!(key in series)) { 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; const data = stats.cpu_usages[procStats.pid.toString()]?.mem;
@ -597,7 +603,7 @@ export default function GeneralMetrics({
}); });
}); });
return Object.values(series); return Object.values(series);
}, [statsHistory]); }, [statsHistory, t]);
return ( return (
<> <>
@ -964,11 +970,10 @@ export default function GeneralMetrics({
<div className="mb-5"> <div className="mb-5">
{t("general.otherProcesses.processCpuUsage")} {t("general.otherProcesses.processCpuUsage")}
</div> </div>
{otherProcessCpuSeries.map((series) => ( {otherProcessCpuSeries.map((series, index) => (
<ThresholdBarGraph <ThresholdBarGraph
key={series.name} key={`other-process-cpu-${index}`}
graphId={`${series.name}-cpu`} graphId={`other-process-cpu-${index}`}
name={t(`general.otherProcesses.series.${series.name}`)}
unit="%" unit="%"
threshold={DetectorCpuThreshold} threshold={DetectorCpuThreshold}
updateTimes={updateTimes} updateTimes={updateTimes}
@ -984,12 +989,11 @@ export default function GeneralMetrics({
<div className="mb-5"> <div className="mb-5">
{t("general.otherProcesses.processMemoryUsage")} {t("general.otherProcesses.processMemoryUsage")}
</div> </div>
{otherProcessMemSeries.map((series) => ( {otherProcessMemSeries.map((series, index) => (
<ThresholdBarGraph <ThresholdBarGraph
key={series.name} key={`other-process-mem-${index}`}
graphId={`${series.name}-mem`} graphId={`other-process-mem-${index}`}
unit="%" unit="%"
name={series.name.replaceAll("_", " ")}
threshold={DetectorMemThreshold} threshold={DetectorMemThreshold}
updateTimes={updateTimes} updateTimes={updateTimes}
data={[series]} data={[series]}