This commit is contained in:
Nicolas Mowen 2026-03-29 10:48:55 -06:00
parent 6f77398a0d
commit 0b42e34fd2

View File

@ -3,7 +3,6 @@ import { CameraLineGraph } from "@/components/graph/LineGraph";
import CameraInfoDialog from "@/components/overlay/CameraInfoDialog";
import { ConnectionQualityIndicator } from "@/components/camera/ConnectionQualityIndicator";
import { Skeleton } from "@/components/ui/skeleton";
import { cn } from "@/lib/utils";
import { FrigateConfig } from "@/types/frigateConfig";
import { FrigateStats } from "@/types/stats";
import { useCallback, useEffect, useMemo, useState } from "react";
@ -44,7 +43,7 @@ export default function CameraMetrics({
[
"stats/history",
{
keys: "cpu_usages,gpu_usages,cameras,camera_fps,detection_fps,skipped_fps,service",
keys: "cpu_usages,cameras,camera_fps,detection_fps,skipped_fps,service",
},
],
{
@ -184,64 +183,6 @@ export default function CameraMetrics({
return series;
}, [config, getCameraName, statsHistory, t]);
const cameraGpuSeries = useMemo(() => {
if (!statsHistory || statsHistory.length == 0) {
return {};
}
// Find GPU entry with per-client data
const firstGpu = statsHistory.find((s) => s?.gpu_usages);
if (!firstGpu?.gpu_usages) {
return {};
}
const gpuWithClients = Object.values(firstGpu.gpu_usages).find(
(g) => g.clients,
);
if (!gpuWithClients) {
return {};
}
const series: {
[cam: string]: {
[key: string]: { name: string; data: { x: number; y: string }[] };
};
} = {};
statsHistory.forEach((stats, statsIdx) => {
if (!stats) {
return;
}
const gpuClients = Object.values(stats.gpu_usages || {}).find(
(g) => g.clients,
)?.clients;
Object.entries(stats.cameras).forEach(([key, camStats]) => {
if (!config?.cameras[key].enabled) {
return;
}
if (!(key in series)) {
const camName = getCameraName(key);
series[key] = {};
series[key]["gpu"] = {
name: t("cameras.label.cameraGpu", { camName: camName }),
data: [],
};
}
const pid = camStats.ffmpeg_pid?.toString();
series[key]["gpu"].data.push({
x: statsIdx,
y: (gpuClients && pid ? gpuClients[pid] : undefined)
?.slice(0, -1) ?? "0",
});
});
});
return series;
}, [config, getCameraName, statsHistory, t]);
const cameraFpsSeries = useMemo(() => {
if (!statsHistory) {
return {};
@ -391,11 +332,7 @@ export default function CameraMetrics({
</div>
<div
key={camera.name}
className={cn(
"grid gap-2 sm:grid-cols-2",
Object.keys(cameraGpuSeries).length > 0 &&
"lg:grid-cols-3",
)}
className="grid gap-2 sm:grid-cols-2"
>
{Object.keys(cameraCpuSeries).includes(camera.name) ? (
<div className="rounded-lg bg-background_alt p-2.5 md:rounded-2xl">
@ -413,20 +350,6 @@ export default function CameraMetrics({
) : (
<Skeleton className="aspect-video size-full" />
)}
{Object.keys(cameraGpuSeries).includes(camera.name) && (
<div className="rounded-lg bg-background_alt p-2.5 md:rounded-2xl">
<div className="mb-5">GPU</div>
<CameraLineGraph
graphId={`${camera.name}-gpu`}
unit="%"
dataLabels={["gpu"]}
updateTimes={updateTimes}
data={Object.values(
cameraGpuSeries[camera.name] || {},
)}
/>
</div>
)}
{Object.keys(cameraFpsSeries).includes(camera.name) ? (
<div className="rounded-lg bg-background_alt p-2.5 md:rounded-2xl">
<div className="mb-5">