chris/frigate
1
0
Fork 0
forked from Github/frigate
Code Pull Requests Packages Activity

Implement camera stats graphs (#10831)

Browse Source 
* Implement camera graphs

* Cleanup naming

* Cleanup rendering

* Cleanup spacing

* Fix audio name

* theme updates to match design corretly

* Mobile color fixes

* Mobile color fixes
This commit is contained in:
Nicolas Mowen
2024-04-04 14:55:04 -06:00
committed by GitHub
parent 466a9104e5
commit fb7cfe5471
22 changed files with 430 additions and 292 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
web/src/pages/SubmitPlus.tsx
View File

@@ -237,8 +237,8 @@ function PlusFilterGroup({
>
<Trigger asChild>
<Button size="sm" className="mx-1 capitalize" variant="secondary">
<FaVideo className="md:mr-[10px] text-muted-foreground" />
<div className="hidden md:block">
<FaVideo className="md:mr-[10px] text-secondary-foreground" />
<div className="hidden md:block text-primary-foreground">
{selectedCameras == undefined
? "All Cameras"
: `${selectedCameras.length} Cameras`}
@@ -314,8 +314,8 @@ function PlusFilterGroup({
>
<Trigger asChild>
<Button size="sm" className="mx-1 capitalize" variant="secondary">
<FaList className="md:mr-[10px] text-muted-foreground" />
<div className="hidden md:block">
<FaList className="md:mr-[10px] text-secondary-foreground" />
<div className="hidden md:block text-primary-foreground">
{selectedLabels == undefined
? "All Labels"
: `${selectedLabels.length} Labels`}

126
web/src/pages/System.tsx
View File

@@ -10,6 +10,7 @@ import { LuActivity, LuHardDrive } from "react-icons/lu";
import { FaVideo } from "react-icons/fa";
import Logo from "@/components/Logo";
import useOptimisticState from "@/hooks/use-optimistic-state";
import CameraMetrics from "@/views/system/CameraMetrics";
const metrics = ["general", "storage", "cameras"] as const;
type SystemMetric = (typeof metrics)[number];
@@ -82,127 +83,14 @@ function System() {
/>
)}
{page == "storage" && <StorageMetrics setLastUpdated={setLastUpdated} />}
{page == "cameras" && (
<CameraMetrics
lastUpdated={lastUpdated}
setLastUpdated={setLastUpdated}
/>
)}
</div>
);
}
export default System;
/**
* const cameraCpuSeries = useMemo(() => {
if (!statsHistory || statsHistory.length == 0) {
return {};
}
const series: {
[cam: string]: {
[key: string]: { name: string; data: { x: object; y: string }[] };
};
} = {};
statsHistory.forEach((stats, statsIdx) => {
if (!stats) {
return;
}
const statTime = new Date(stats.service.last_updated * 1000);
Object.entries(stats.cameras).forEach(([key, camStats]) => {
if (!config?.cameras[key].enabled) {
return;
}
if (!(key in series)) {
const camName = key.replaceAll("_", " ");
series[key] = {};
series[key]["ffmpeg"] = { name: `${camName} ffmpeg`, data: [] };
series[key]["capture"] = { name: `${camName} capture`, data: [] };
series[key]["detect"] = { name: `${camName} detect`, data: [] };
}
series[key]["ffmpeg"].data.push({
x: statsIdx,
y: stats.cpu_usages[camStats.ffmpeg_pid.toString()]?.cpu ?? 0.0,
});
series[key]["capture"].data.push({
x: statsIdx,
y: stats.cpu_usages[camStats.capture_pid?.toString()]?.cpu ?? 0,
});
series[key]["detect"].data.push({
x: statsIdx,
y: stats.cpu_usages[camStats.pid.toString()].cpu,
});
});
});
return series;
}, [statsHistory]);
const cameraFpsSeries = useMemo(() => {
if (!statsHistory) {
return {};
}
const series: {
[cam: string]: {
[key: string]: { name: string; data: { x: object; y: number }[] };
};
} = {};
statsHistory.forEach((stats, statsIdx) => {
if (!stats) {
return;
}
const statTime = new Date(stats.service.last_updated * 1000);
Object.entries(stats.cameras).forEach(([key, camStats]) => {
if (!(key in series)) {
const camName = key.replaceAll("_", " ");
series[key] = {};
series[key]["det"] = { name: `${camName} detections`, data: [] };
series[key]["skip"] = {
name: `${camName} skipped detections`,
data: [],
};
}
series[key]["det"].data.push({
x: statsIdx,
y: camStats.detection_fps,
});
series[key]["skip"].data.push({
x: statsIdx,
y: camStats.skipped_fps,
});
});
});
return series;
}, [statsHistory]);
*
* <div className="bg-primary rounded-2xl flex-col">
<Heading as="h4">Cameras</Heading>
<div className="grid grid-cols-1 sm:grid-cols-2">
{config &&
Object.values(config.cameras).map((camera) => {
if (camera.enabled) {
return (
<div key={camera.name} className="grid grid-cols-2">
<ThresholdBarGraph
graphId={`${camera.name}-cpu`}
title={`${camera.name.replaceAll("_", " ")} CPU`}
unit="%"
data={Object.values(cameraCpuSeries[camera.name] || {})}
/>
<ThresholdBarGraph
graphId={`${camera.name}-fps`}
title={`${camera.name.replaceAll("_", " ")} FPS`}
unit=""
data={Object.values(cameraFpsSeries[camera.name] || {})}
/>
</div>
);
}
return null;
})}
</div>
*/