administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-11 05:35:25 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Cleanup rendering

Browse Source
This commit is contained in:
Nicolas Mowen 2024-04-04 13:02:49 -06:00
parent e5b9e7e5cd
commit 84064ea1c1
2 changed files with 54 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,6 @@
import { useFrigateStats } from "@/api/ws"; import { useFrigateStats } from "@/api/ws";
import { CameraLineGraph } from "@/components/graph/SystemGraph"; import { CameraLineGraph } from "@/components/graph/SystemGraph";
import { Skeleton } from "@/components/ui/skeleton";
import { FrigateConfig } from "@/types/frigateConfig"; import { FrigateConfig } from "@/types/frigateConfig";
import { FrigateStats } from "@/types/stats"; import { FrigateStats } from "@/types/stats";
import { useEffect, useMemo, useState } from "react"; import { useEffect, useMemo, useState } from "react";
@ -148,36 +149,44 @@ export default function CameraMetrics({
return ( return (
<div className="size-full mt-4 flex flex-col overflow-y-auto"> <div className="size-full mt-4 flex flex-col overflow-y-auto">
<div className="mb-5">Cameras</div> <div className="mb-5">Cameras</div>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-2"> <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
{config && {config &&
Object.values(config.cameras).map((camera) => { Object.values(config.cameras).map((camera) => {
if (camera.enabled) { if (camera.enabled) {
return ( return (
<div key={camera.name} className="grid grid-cols-2 gap-2"> <div key={camera.name} className="grid sm:grid-cols-2 gap-2">
<div className="p-2.5 bg-primary rounded-2xl flex-col"> {Object.keys(cameraCpuSeries).includes(camera.name) ? (
<div className="mb-5 capitalize"> <div className="p-2.5 bg-primary rounded-2xl flex-col">
{camera.name.replaceAll("_", " ")} CPU <div className="mb-5 capitalize">
{camera.name.replaceAll("_", " ")} CPU
</div>
<CameraLineGraph
graphId={`${camera.name}-cpu`}
unit="%"
dataLabels={["ffmpeg", "capture", "detect"]}
updateTimes={updateTimes}
data={Object.values(cameraCpuSeries[camera.name] || {})}
/>
</div> </div>
<CameraLineGraph ) : (
graphId={`${camera.name}-cpu`} <Skeleton className="size-full aspect-video" />
unit="%" )}
dataLabels={["ffmpeg", "capture", "detect"]} {Object.keys(cameraFpsSeries).includes(camera.name) ? (
updateTimes={updateTimes} <div className="p-2.5 bg-primary rounded-2xl flex-col">
data={Object.values(cameraCpuSeries[camera.name] || {})} <div className="mb-5 capitalize">
/> {camera.name.replaceAll("_", " ")} DPS
</div> </div>
<div className="p-2.5 bg-primary rounded-2xl flex-col"> <CameraLineGraph
<div className="mb-5 capitalize"> graphId={`${camera.name}-dps`}
{camera.name.replaceAll("_", " ")} DPS unit=" DPS"
dataLabels={["detect", "skipped"]}
updateTimes={updateTimes}
data={Object.values(cameraFpsSeries[camera.name] || {})}
/>
</div> </div>
<CameraLineGraph ) : (
graphId={`${camera.name}-dps`} <Skeleton className="size-full aspect-video" />
unit=" DPS" )}
dataLabels={["detect", "skipped"]}
updateTimes={updateTimes}
data={Object.values(cameraFpsSeries[camera.name] || {})}
/>
</div>
</div> </div>
); );
} }

38
web/src/views/system/GeneralMetrics.tsx
View File

@ -61,6 +61,16 @@ export default function GeneralMetrics({
} }
}, [initialStats, updatedStats, statsHistory, lastUpdated, setLastUpdated]); }, [initialStats, updatedStats, statsHistory, lastUpdated, setLastUpdated]);
const canGetGpuInfo = useMemo(
() =>
statsHistory.length > 0 &&
Object.keys(statsHistory[0]?.gpu_usages ?? {}).filter(
(key) =>
key == "amd-vaapi" || key == "intel-vaapi" || key == "intel-qsv",
).length > 0,
[statsHistory],
);
// timestamps // timestamps
const updateTimes = useMemo( const updateTimes = useMemo(
@ -274,7 +284,7 @@ export default function GeneralMetrics({
Detectors Detectors
</div> </div>
<div className="w-full mt-4 grid grid-cols-1 sm:grid-cols-3 gap-2"> <div className="w-full mt-4 grid grid-cols-1 sm:grid-cols-3 gap-2">
{detInferenceTimeSeries.length != 0 ? ( {statsHistory.length != 0 ? (
<div className="p-2.5 bg-primary rounded-2xl flex-col"> <div className="p-2.5 bg-primary rounded-2xl flex-col">
<div className="mb-5">Detector Inference Speed</div> <div className="mb-5">Detector Inference Speed</div>
{detInferenceTimeSeries.map((series) => ( {detInferenceTimeSeries.map((series) => (
@ -336,22 +346,16 @@ export default function GeneralMetrics({
<div className="text-muted-foreground text-sm font-medium"> <div className="text-muted-foreground text-sm font-medium">
GPUs GPUs
</div> </div>
{statsHistory.length > 0 && {canGetGpuInfo && (
Object.keys(statsHistory[0].gpu_usages ?? {}).filter( <Button
(key) => className="cursor-pointer"
key == "amd-vaapi" || variant="secondary"
key == "intel-vaapi" || size="sm"
key == "intel-qsv", onClick={() => setShowVainfo(true)}
).length > 0 && ( >
<Button Hardware Info
className="cursor-pointer" </Button>
variant="secondary" )}
size="sm"
onClick={() => setShowVainfo(true)}
>
Hardware Info
</Button>
)}
</div> </div>
<div className=" mt-4 grid grid-cols-1 sm:grid-cols-2 gap-2"> <div className=" mt-4 grid grid-cols-1 sm:grid-cols-2 gap-2">
{statsHistory.length != 0 ? ( {statsHistory.length != 0 ? (