mirror of
https://github.com/blakeblackshear/frigate.git
synced 2026-03-25 09:38:22 +03:00
fix: fix system stats i18n (#22600)
* fix: fix system stats i18n * chore: lint
This commit is contained in:
parent
d27ee166bc
commit
6c5801ac83
@ -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}
|
||||||
|
|||||||
@ -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">
|
||||||
|
|||||||
@ -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]}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user