administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-04-03 13:54:55 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Remove

Browse Source
This commit is contained in:
Nicolas Mowen 2026-03-29 10:48:55 -06:00
parent 6f77398a0d
commit 0b42e34fd2
1 changed files with 2 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
web/src/views/system/CameraMetrics.tsx
View File

@ -3,7 +3,6 @@ import { CameraLineGraph } from "@/components/graph/LineGraph";
import CameraInfoDialog from "@/components/overlay/CameraInfoDialog"; import CameraInfoDialog from "@/components/overlay/CameraInfoDialog";
import { ConnectionQualityIndicator } from "@/components/camera/ConnectionQualityIndicator"; import { ConnectionQualityIndicator } from "@/components/camera/ConnectionQualityIndicator";
import { Skeleton } from "@/components/ui/skeleton"; import { Skeleton } from "@/components/ui/skeleton";
import { cn } from "@/lib/utils";
import { FrigateConfig } from "@/types/frigateConfig"; import { FrigateConfig } from "@/types/frigateConfig";
import { FrigateStats } from "@/types/stats"; import { FrigateStats } from "@/types/stats";
import { useCallback, useEffect, useMemo, useState } from "react"; import { useCallback, useEffect, useMemo, useState } from "react";
@ -44,7 +43,7 @@ export default function CameraMetrics({
[ [
"stats/history", "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; return series;
}, [config, getCameraName, statsHistory, t]); }, [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(() => { const cameraFpsSeries = useMemo(() => {
if (!statsHistory) { if (!statsHistory) {
return {}; return {};
@ -391,11 +332,7 @@ export default function CameraMetrics({
</div> </div>
<div <div
key={camera.name} key={camera.name}
className={cn( className="grid gap-2 sm:grid-cols-2"
"grid gap-2 sm:grid-cols-2",
Object.keys(cameraGpuSeries).length > 0 &&
"lg:grid-cols-3",
)}
> >
{Object.keys(cameraCpuSeries).includes(camera.name) ? ( {Object.keys(cameraCpuSeries).includes(camera.name) ? (
<div className="rounded-lg bg-background_alt p-2.5 md:rounded-2xl"> <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" /> <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) ? ( {Object.keys(cameraFpsSeries).includes(camera.name) ? (
<div className="rounded-lg bg-background_alt p-2.5 md:rounded-2xl"> <div className="rounded-lg bg-background_alt p-2.5 md:rounded-2xl">
<div className="mb-5"> <div className="mb-5">