mirror of
https://github.com/blakeblackshear/frigate.git
synced 2026-02-10 21:25:24 +03:00
Add dialog for viewing and copying vainfo
This commit is contained in:
Nicolas Mowen
parent
4cee88b24b
commit
5d9c8decee
@ -59,7 +59,7 @@ class StatsEmitter(threading.Thread):
|
||||
selected = {}
|
||||
|
||||
for k in keys:
|
||||
selected[k] = s[k]
|
||||
selected[k] = s.get(k)
|
||||
|
||||
selected_stats.append(selected)
|
||||
|
||||
@ -67,7 +67,7 @@ class StatsEmitter(threading.Thread):
|
||||
|
||||
def run(self) -> None:
|
||||
time.sleep(10)
|
||||
for counter in itertools.cycle(range(int(self.config.record.expire_interval / 10))):
|
||||
for counter in itertools.cycle(range(int(self.config.mqtt.stats_interval / 10))):
|
||||
if self.stop_event.wait(10):
|
||||
break
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Threshold } from "@/types/graph";
|
||||
import { useMemo } from "react";
|
||||
import { useCallback, useEffect, useMemo } from "react";
|
||||
import Chart from "react-apexcharts";
|
||||
|
||||
type SystemGraphProps = {
|
||||
@ -7,6 +7,7 @@ type SystemGraphProps = {
|
||||
name: string;
|
||||
unit: string;
|
||||
threshold: Threshold;
|
||||
updateTimes: number[];
|
||||
data: ApexAxisChartSeries;
|
||||
};
|
||||
export default function SystemGraph({
|
||||
@ -14,6 +15,7 @@ export default function SystemGraph({
|
||||
name,
|
||||
unit,
|
||||
threshold,
|
||||
updateTimes,
|
||||
data,
|
||||
}: SystemGraphProps) {
|
||||
const lastValue = useMemo<number>(
|
||||
@ -22,6 +24,79 @@ export default function SystemGraph({
|
||||
[data],
|
||||
);
|
||||
|
||||
const formatTime = useCallback(
|
||||
(val: unknown) => {
|
||||
console.log(
|
||||
`inside the check we have ${updateTimes.length} times and we are looking for ${val}`,
|
||||
);
|
||||
const date = new Date(updateTimes[Math.round(val as number)] * 1000);
|
||||
return `${date.getHours() > 12 ? date.getHours() - 12 : date.getHours()}:${date.getMinutes()}`;
|
||||
},
|
||||
[updateTimes],
|
||||
);
|
||||
|
||||
const options = useMemo(() => {
|
||||
return {
|
||||
chart: {
|
||||
id: graphId,
|
||||
selection: {
|
||||
enabled: false,
|
||||
},
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
zoom: {
|
||||
enabled: false,
|
||||
},
|
||||
},
|
||||
colors: [
|
||||
({ value }: { value: number }) => {
|
||||
if (value >= threshold.error) {
|
||||
return "#FA5252";
|
||||
} else if (value >= threshold.warning) {
|
||||
return "#FF9966";
|
||||
} else {
|
||||
return "#404040";
|
||||
}
|
||||
},
|
||||
],
|
||||
grid: {
|
||||
show: false,
|
||||
},
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
distributed: true,
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
tickAmount: 6,
|
||||
labels: {
|
||||
formatter: formatTime,
|
||||
},
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
axisTicks: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
show: false,
|
||||
max: lastValue * 2,
|
||||
},
|
||||
};
|
||||
}, [graphId, lastValue, threshold, formatTime]);
|
||||
|
||||
useEffect(() => {
|
||||
ApexCharts.exec(graphId, "updateOptions", options, true, true);
|
||||
}, [graphId, options]);
|
||||
|
||||
return (
|
||||
<div className="w-full flex flex-col">
|
||||
<div className="flex items-center gap-1">
|
||||
@ -31,62 +106,7 @@ export default function SystemGraph({
|
||||
{unit}
|
||||
</div>
|
||||
</div>
|
||||
<Chart
|
||||
type="bar"
|
||||
options={{
|
||||
chart: {
|
||||
id: graphId,
|
||||
selection: {
|
||||
enabled: false,
|
||||
},
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
zoom: {
|
||||
enabled: false,
|
||||
},
|
||||
},
|
||||
colors: [
|
||||
({ value }: { value: number }) => {
|
||||
if (value >= threshold.error) {
|
||||
return "#FA5252";
|
||||
} else if (value >= threshold.warning) {
|
||||
return "#FF9966";
|
||||
} else {
|
||||
return "#404040";
|
||||
}
|
||||
},
|
||||
],
|
||||
grid: {
|
||||
show: false,
|
||||
},
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
xaxis: {
|
||||
type: "datetime",
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
axisTicks: {
|
||||
show: false,
|
||||
},
|
||||
labels: {
|
||||
format: "h:mm",
|
||||
datetimeUTC: false,
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
show: false,
|
||||
max: lastValue * 2,
|
||||
},
|
||||
}}
|
||||
series={data}
|
||||
height="120"
|
||||
/>
|
||||
<Chart type="bar" options={options} series={data} height="120" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
57
web/src/components/overlay/VainfoDialog.tsx
Normal file
57
web/src/components/overlay/VainfoDialog.tsx
Normal file
@ -0,0 +1,57 @@
|
||||
import useSWR from "swr";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "../ui/dialog";
|
||||
import ActivityIndicator from "../indicators/activity-indicator";
|
||||
import { Vainfo } from "@/types/stats";
|
||||
import { Button } from "../ui/button";
|
||||
import copy from "copy-to-clipboard";
|
||||
|
||||
type VainfoDialogProps = {
|
||||
showVainfo: boolean;
|
||||
setShowVainfo: (show: boolean) => void;
|
||||
};
|
||||
export default function VainfoDialog({
|
||||
showVainfo,
|
||||
setShowVainfo,
|
||||
}: VainfoDialogProps) {
|
||||
const { data: vainfo } = useSWR<Vainfo>(showVainfo ? "vainfo" : null);
|
||||
|
||||
const onCopyVainfo = async () => {
|
||||
copy(JSON.stringify(vainfo).replace(/[\\\s]+/gi, ""));
|
||||
setShowVainfo(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={showVainfo} onOpenChange={setShowVainfo}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Vainfo Output</DialogTitle>
|
||||
</DialogHeader>
|
||||
{vainfo ? (
|
||||
<div className="mb-2 max-h-96 whitespace-pre-line overflow-y-scroll">
|
||||
<div>Return Code: {vainfo.return_code}</div>
|
||||
<br />
|
||||
<div>Process {vainfo.return_code == 0 ? "Output" : "Error"}:</div>
|
||||
<br />
|
||||
<div>{vainfo.return_code == 0 ? vainfo.stdout : vainfo.stderr}</div>
|
||||
</div>
|
||||
) : (
|
||||
<ActivityIndicator />
|
||||
)}
|
||||
<DialogFooter>
|
||||
<Button variant="secondary" onClick={() => setShowVainfo(false)}>
|
||||
Close
|
||||
</Button>
|
||||
<Button variant="select" onClick={() => onCopyVainfo()}>
|
||||
Copy
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
@ -8,263 +8,31 @@ import { FrigateConfig } from "@/types/frigateConfig";
|
||||
import {
|
||||
DetectorCpuThreshold,
|
||||
DetectorMemThreshold,
|
||||
GPUMemThreshold,
|
||||
GPUUsageThreshold,
|
||||
InferenceThreshold,
|
||||
} from "@/types/graph";
|
||||
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import VainfoDialog from "@/components/overlay/VainfoDialog";
|
||||
|
||||
const metrics = ["general", "storage", "cameras"] as const;
|
||||
type SystemMetric = (typeof metrics)[number];
|
||||
|
||||
function System() {
|
||||
const { data: config } = useSWR<FrigateConfig>("config");
|
||||
|
||||
// stats page
|
||||
|
||||
const [page, setPage] = useState<SystemMetric>("general");
|
||||
const [lastUpdated, setLastUpdated] = useState<number>(Date.now() / 1000);
|
||||
|
||||
// stats collection
|
||||
|
||||
const { data: initialStats } = useSWR<FrigateStats[]>("stats/history", {
|
||||
const { data: statsSnapshot } = useSWR<FrigateStats>("stats", {
|
||||
revalidateOnFocus: false,
|
||||
});
|
||||
const { payload: updatedStats } = useFrigateStats();
|
||||
const [statsHistory, setStatsHistory] = useState<FrigateStats[]>(
|
||||
initialStats || [],
|
||||
);
|
||||
|
||||
const lastUpdated = useMemo(() => {
|
||||
if (updatedStats) {
|
||||
return updatedStats.service.last_updated;
|
||||
}
|
||||
|
||||
if (initialStats) {
|
||||
return initialStats.at(-1)?.service?.last_updated;
|
||||
}
|
||||
|
||||
return undefined;
|
||||
}, [initialStats, updatedStats]);
|
||||
|
||||
useEffect(() => {
|
||||
if (initialStats == undefined) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (statsHistory.length < initialStats.length) {
|
||||
setStatsHistory(initialStats);
|
||||
return;
|
||||
}
|
||||
|
||||
setStatsHistory([...statsHistory, updatedStats]);
|
||||
}, [initialStats, updatedStats]);
|
||||
|
||||
// stats data pieces
|
||||
|
||||
const gpuSeries = useMemo(() => {
|
||||
if (!statsHistory) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const series: {
|
||||
[key: string]: { name: string; data: { x: object; y: string }[] };
|
||||
} = {};
|
||||
|
||||
statsHistory.forEach((stats) => {
|
||||
if (!stats) {
|
||||
return;
|
||||
}
|
||||
|
||||
const statTime = new Date(stats.service.last_updated * 1000);
|
||||
|
||||
Object.entries(stats.gpu_usages || []).forEach(([key, stats]) => {
|
||||
if (!(key in series)) {
|
||||
series[key] = { name: key, data: [] };
|
||||
}
|
||||
|
||||
series[key].data.push({ x: statTime, y: stats.gpu });
|
||||
});
|
||||
});
|
||||
return Object.keys(series).length > 0 ? Object.values(series) : [];
|
||||
}, [statsHistory]);
|
||||
const gpuMemSeries = useMemo(() => {
|
||||
if (!statsHistory) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const series: {
|
||||
[key: string]: { name: string; data: { x: object; y: string }[] };
|
||||
} = {};
|
||||
|
||||
statsHistory.forEach((stats) => {
|
||||
if (!stats) {
|
||||
return;
|
||||
}
|
||||
|
||||
const statTime = new Date(stats.service.last_updated * 1000);
|
||||
|
||||
Object.entries(stats.gpu_usages || {}).forEach(([key, stats]) => {
|
||||
if (!(key in series)) {
|
||||
series[key] = { name: key, data: [] };
|
||||
}
|
||||
|
||||
series[key].data.push({ x: statTime, y: stats.mem });
|
||||
});
|
||||
});
|
||||
return Object.values(series);
|
||||
}, [statsHistory]);
|
||||
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) => {
|
||||
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: statTime,
|
||||
y: stats.cpu_usages[camStats.ffmpeg_pid.toString()]?.cpu ?? 0.0,
|
||||
});
|
||||
series[key]["capture"].data.push({
|
||||
x: statTime,
|
||||
y: stats.cpu_usages[camStats.capture_pid?.toString()]?.cpu ?? 0,
|
||||
});
|
||||
series[key]["detect"].data.push({
|
||||
x: statTime,
|
||||
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) => {
|
||||
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: statTime,
|
||||
y: camStats.detection_fps,
|
||||
});
|
||||
series[key]["skip"].data.push({
|
||||
x: statTime,
|
||||
y: camStats.skipped_fps,
|
||||
});
|
||||
});
|
||||
});
|
||||
return series;
|
||||
}, [statsHistory]);
|
||||
const otherProcessCpuSeries = useMemo(() => {
|
||||
if (!statsHistory) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const series: {
|
||||
[key: string]: { name: string; data: { x: object; y: string }[] };
|
||||
} = {};
|
||||
|
||||
statsHistory.forEach((stats) => {
|
||||
if (!stats) {
|
||||
return;
|
||||
}
|
||||
|
||||
const statTime = new Date(stats.service.last_updated * 1000);
|
||||
|
||||
Object.entries(stats.processes).forEach(([key, procStats]) => {
|
||||
if (procStats.pid.toString() in stats.cpu_usages) {
|
||||
if (!(key in series)) {
|
||||
series[key] = { name: `${key} (${procStats.pid})`, data: [] };
|
||||
}
|
||||
|
||||
series[key].data.push({
|
||||
x: statTime,
|
||||
y: stats.cpu_usages[procStats.pid.toString()].cpu,
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
return Object.keys(series).length > 0 ? Object.values(series) : [];
|
||||
}, [statsHistory]);
|
||||
const otherProcessMemSeries = useMemo(() => {
|
||||
if (!statsHistory) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const series: {
|
||||
[key: string]: { name: string; data: { x: object; y: string }[] };
|
||||
} = {};
|
||||
|
||||
statsHistory.forEach((stats) => {
|
||||
if (!stats) {
|
||||
return;
|
||||
}
|
||||
|
||||
const statTime = new Date(stats.service.last_updated * 1000);
|
||||
|
||||
Object.entries(stats.processes).forEach(([key, procStats]) => {
|
||||
if (procStats.pid.toString() in stats.cpu_usages) {
|
||||
if (!(key in series)) {
|
||||
series[key] = { name: key, data: [] };
|
||||
}
|
||||
|
||||
series[key].data.push({
|
||||
x: statTime,
|
||||
y: stats.cpu_usages[procStats.pid.toString()].mem,
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
return Object.values(series);
|
||||
}, [statsHistory]);
|
||||
|
||||
return (
|
||||
<div className="size-full p-2">
|
||||
<div className="size-full p-2 flex flex-col">
|
||||
<div className="w-full h-8 flex justify-between items-center">
|
||||
<ToggleGroup
|
||||
className="*:px-3 *:py-4 *:rounded-2xl"
|
||||
@ -299,13 +67,18 @@ function System() {
|
||||
</div>
|
||||
<div className="mt-2 flex items-end gap-2">
|
||||
<div className="h-full font-medium content-center">System</div>
|
||||
{initialStats && (
|
||||
{statsSnapshot && (
|
||||
<div className="h-full text-muted-foreground text-sm content-center">
|
||||
{initialStats[0].service.version}
|
||||
{statsSnapshot.service.version}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{page == "general" && <GeneralMetrics />}
|
||||
{page == "general" && (
|
||||
<GeneralMetrics
|
||||
lastUpdated={lastUpdated}
|
||||
setLastUpdated={setLastUpdated}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -313,59 +86,96 @@ function System() {
|
||||
export default System;
|
||||
|
||||
/**
|
||||
* <div className="bg-primary rounded-2xl flex-col">
|
||||
* const cameraCpuSeries = useMemo(() => {
|
||||
if (!statsHistory || statsHistory.length == 0) {
|
||||
return {};
|
||||
}
|
||||
|
||||
</div>
|
||||
<div className="bg-primary rounded-2xl flex-col">
|
||||
<SystemGraph
|
||||
graphId="detector-usages"
|
||||
unit="%"
|
||||
name={""}
|
||||
threshold={InferenceThreshold}
|
||||
data={detMemSeries}
|
||||
/>
|
||||
</div>
|
||||
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]);
|
||||
*
|
||||
* <Heading as="h4">Detectors</Heading>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-3">
|
||||
<SystemGraph
|
||||
graphId="detector-inference"
|
||||
title="Inference Speed"
|
||||
unit="ms"
|
||||
data={detInferenceTimeSeries}
|
||||
/>
|
||||
<SystemGraph
|
||||
graphId="detector-usages"
|
||||
title="CPU"
|
||||
unit="%"
|
||||
data={detCpuSeries}
|
||||
/>
|
||||
<SystemGraph
|
||||
graphId="detector-usages"
|
||||
title="Memory"
|
||||
unit="%"
|
||||
data={detMemSeries}
|
||||
/>
|
||||
</div>
|
||||
{gpuSeries.length > 0 && (
|
||||
<>
|
||||
<Heading as="h4">GPUs</Heading>
|
||||
<div className="mt-2 grid grid-cols-1 sm:grid-cols-2">
|
||||
<SystemGraph
|
||||
graphId="detector-inference"
|
||||
title="GPU Usage"
|
||||
unit="%"
|
||||
data={gpuSeries}
|
||||
/>
|
||||
<SystemGraph
|
||||
graphId="detector-usages"
|
||||
title="GPU Memory"
|
||||
unit="%"
|
||||
data={gpuMemSeries}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
* <div className="bg-primary rounded-2xl flex-col">
|
||||
<Heading as="h4">Cameras</Heading>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2">
|
||||
{config &&
|
||||
@ -392,28 +202,21 @@ export default System;
|
||||
return null;
|
||||
})}
|
||||
</div>
|
||||
<Heading as="h4">Other Processes</Heading>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2">
|
||||
<SystemGraph
|
||||
graphId="process-cpu"
|
||||
title="CPU"
|
||||
unit="%"
|
||||
data={otherProcessCpuSeries}
|
||||
/>
|
||||
<SystemGraph
|
||||
graphId="process-mem"
|
||||
title="Memory"
|
||||
unit="%"
|
||||
data={otherProcessMemSeries}
|
||||
/>
|
||||
</div>
|
||||
*/
|
||||
|
||||
function GeneralMetrics() {
|
||||
type GeneralMetricsProps = {
|
||||
lastUpdated: number;
|
||||
setLastUpdated: (last: number) => void;
|
||||
};
|
||||
function GeneralMetrics({ lastUpdated, setLastUpdated }: GeneralMetricsProps) {
|
||||
// extra info
|
||||
|
||||
const [showVainfo, setShowVainfo] = useState(false);
|
||||
|
||||
// stats
|
||||
|
||||
const { data: initialStats } = useSWR<FrigateStats[]>(
|
||||
["stats/history", { keys: "cpu_usages,detectors,service" }],
|
||||
["stats/history", { keys: "cpu_usages,detectors,processes,service" }],
|
||||
{
|
||||
revalidateOnFocus: false,
|
||||
},
|
||||
@ -423,19 +226,33 @@ function GeneralMetrics() {
|
||||
const { payload: updatedStats } = useFrigateStats();
|
||||
|
||||
useEffect(() => {
|
||||
if (initialStats == undefined) {
|
||||
if (initialStats == undefined || initialStats.length == 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (statsHistory.length < initialStats.length) {
|
||||
if (statsHistory.length == 0) {
|
||||
setStatsHistory(initialStats);
|
||||
return;
|
||||
}
|
||||
|
||||
setStatsHistory([...statsHistory, updatedStats]);
|
||||
}, [initialStats, updatedStats]);
|
||||
if (!updatedStats) {
|
||||
return;
|
||||
}
|
||||
|
||||
// stats data pieces
|
||||
if (updatedStats.service.last_updated > lastUpdated) {
|
||||
setStatsHistory([...statsHistory, updatedStats]);
|
||||
setLastUpdated(Date.now() / 1000);
|
||||
}
|
||||
}, [initialStats, updatedStats, statsHistory, lastUpdated, setLastUpdated]);
|
||||
|
||||
// timestamps
|
||||
|
||||
const updateTimes = useMemo(
|
||||
() => statsHistory.map((stats) => stats.service.last_updated),
|
||||
[statsHistory],
|
||||
);
|
||||
|
||||
// detectors stats
|
||||
|
||||
const detInferenceTimeSeries = useMemo(() => {
|
||||
if (!statsHistory) {
|
||||
@ -443,78 +260,74 @@ function GeneralMetrics() {
|
||||
}
|
||||
|
||||
const series: {
|
||||
[key: string]: { name: string; data: { x: object; y: number }[] };
|
||||
[key: string]: { name: string; data: { x: number; y: number }[] };
|
||||
} = {};
|
||||
|
||||
statsHistory.forEach((stats) => {
|
||||
statsHistory.forEach((stats, statsIdx) => {
|
||||
if (!stats) {
|
||||
return;
|
||||
}
|
||||
|
||||
const statTime = new Date(stats.service.last_updated * 1000);
|
||||
|
||||
Object.entries(stats.detectors).forEach(([key, stats]) => {
|
||||
if (!(key in series)) {
|
||||
series[key] = { name: `${key} (${stats.pid})`, data: [] };
|
||||
series[key] = { name: key, data: [] };
|
||||
}
|
||||
|
||||
series[key].data.push({ x: statTime, y: stats.inference_speed });
|
||||
series[key].data.push({ x: statsIdx, y: stats.inference_speed });
|
||||
});
|
||||
});
|
||||
return Object.values(series);
|
||||
}, [statsHistory]);
|
||||
|
||||
const detCpuSeries = useMemo(() => {
|
||||
if (!statsHistory) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const series: {
|
||||
[key: string]: { name: string; data: { x: object; y: string }[] };
|
||||
[key: string]: { name: string; data: { x: number; y: string }[] };
|
||||
} = {};
|
||||
|
||||
statsHistory.forEach((stats) => {
|
||||
statsHistory.forEach((stats, statsIdx) => {
|
||||
if (!stats) {
|
||||
return;
|
||||
}
|
||||
|
||||
const statTime = new Date(stats.service.last_updated * 1000);
|
||||
|
||||
Object.entries(stats.detectors).forEach(([key, detStats]) => {
|
||||
if (!(key in series)) {
|
||||
series[key] = { name: key, data: [] };
|
||||
}
|
||||
|
||||
series[key].data.push({
|
||||
x: statTime,
|
||||
x: statsIdx,
|
||||
y: stats.cpu_usages[detStats.pid.toString()].cpu,
|
||||
});
|
||||
});
|
||||
});
|
||||
return Object.values(series);
|
||||
}, [statsHistory]);
|
||||
|
||||
const detMemSeries = useMemo(() => {
|
||||
if (!statsHistory) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const series: {
|
||||
[key: string]: { name: string; data: { x: object; y: string }[] };
|
||||
[key: string]: { name: string; data: { x: number; y: string }[] };
|
||||
} = {};
|
||||
|
||||
statsHistory.forEach((stats) => {
|
||||
statsHistory.forEach((stats, statsIdx) => {
|
||||
if (!stats) {
|
||||
return;
|
||||
}
|
||||
|
||||
const statTime = new Date(stats.service.last_updated * 1000);
|
||||
|
||||
Object.entries(stats.detectors).forEach(([key, detStats]) => {
|
||||
if (!(key in series)) {
|
||||
series[key] = { name: key, data: [] };
|
||||
}
|
||||
|
||||
series[key].data.push({
|
||||
x: statTime,
|
||||
x: statsIdx,
|
||||
y: stats.cpu_usages[detStats.pid.toString()].mem,
|
||||
});
|
||||
});
|
||||
@ -522,108 +335,270 @@ function GeneralMetrics() {
|
||||
return Object.values(series);
|
||||
}, [statsHistory]);
|
||||
|
||||
// gpu stats
|
||||
|
||||
const gpuSeries = useMemo(() => {
|
||||
if (!statsHistory) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const series: {
|
||||
[key: string]: { name: string; data: { x: number; y: string }[] };
|
||||
} = {};
|
||||
|
||||
statsHistory.forEach((stats, statsIdx) => {
|
||||
if (!stats) {
|
||||
return;
|
||||
}
|
||||
|
||||
Object.entries(stats.gpu_usages || []).forEach(([key, stats]) => {
|
||||
if (!(key in series)) {
|
||||
series[key] = { name: key, data: [] };
|
||||
}
|
||||
|
||||
series[key].data.push({ x: statsIdx, y: stats.gpu });
|
||||
});
|
||||
});
|
||||
return Object.keys(series).length > 0 ? Object.values(series) : [];
|
||||
}, [statsHistory]);
|
||||
|
||||
const gpuMemSeries = useMemo(() => {
|
||||
if (!statsHistory) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const series: {
|
||||
[key: string]: { name: string; data: { x: number; y: string }[] };
|
||||
} = {};
|
||||
|
||||
statsHistory.forEach((stats, statsIdx) => {
|
||||
if (!stats) {
|
||||
return;
|
||||
}
|
||||
|
||||
Object.entries(stats.gpu_usages || {}).forEach(([key, stats]) => {
|
||||
if (!(key in series)) {
|
||||
series[key] = { name: key, data: [] };
|
||||
}
|
||||
|
||||
series[key].data.push({ x: statsIdx, y: stats.mem });
|
||||
});
|
||||
});
|
||||
return Object.values(series);
|
||||
}, [statsHistory]);
|
||||
|
||||
// other processes stats
|
||||
|
||||
const otherProcessCpuSeries = useMemo(() => {
|
||||
if (!statsHistory) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const series: {
|
||||
[key: string]: { name: string; data: { x: number; y: string }[] };
|
||||
} = {};
|
||||
|
||||
statsHistory.forEach((stats, statsIdx) => {
|
||||
if (!stats) {
|
||||
return;
|
||||
}
|
||||
|
||||
Object.entries(stats.processes).forEach(([key, procStats]) => {
|
||||
if (procStats.pid.toString() in stats.cpu_usages) {
|
||||
if (!(key in series)) {
|
||||
series[key] = { name: key, data: [] };
|
||||
}
|
||||
|
||||
series[key].data.push({
|
||||
x: statsIdx,
|
||||
y: stats.cpu_usages[procStats.pid.toString()].cpu,
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
return Object.keys(series).length > 0 ? Object.values(series) : [];
|
||||
}, [statsHistory]);
|
||||
|
||||
const otherProcessMemSeries = useMemo(() => {
|
||||
if (!statsHistory) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const series: {
|
||||
[key: string]: { name: string; data: { x: number; y: string }[] };
|
||||
} = {};
|
||||
|
||||
statsHistory.forEach((stats, statsIdx) => {
|
||||
if (!stats) {
|
||||
return;
|
||||
}
|
||||
|
||||
Object.entries(stats.processes).forEach(([key, procStats]) => {
|
||||
if (procStats.pid.toString() in stats.cpu_usages) {
|
||||
if (!(key in series)) {
|
||||
series[key] = { name: key, data: [] };
|
||||
}
|
||||
|
||||
series[key].data.push({
|
||||
x: statsIdx,
|
||||
y: stats.cpu_usages[procStats.pid.toString()].mem,
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
return Object.values(series);
|
||||
}, [statsHistory]);
|
||||
|
||||
if (statsHistory.length == 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="size-full mt-4 flex flex-col">
|
||||
<div className="text-muted-foreground text-sm font-medium">Detectors</div>
|
||||
<div className="mt-4 grid grid-cols-1 sm:grid-cols-3 gap-2">
|
||||
<div className="p-2.5 bg-primary rounded-2xl flex-col">
|
||||
<div className="mb-5">Detector Inference Speed</div>
|
||||
{detInferenceTimeSeries.map((series) => (
|
||||
<SystemGraph
|
||||
key={series.name}
|
||||
graphId="detector-inference"
|
||||
name={series.name}
|
||||
unit="ms"
|
||||
threshold={InferenceThreshold}
|
||||
data={[series]}
|
||||
/>
|
||||
))}
|
||||
<>
|
||||
<VainfoDialog showVainfo={showVainfo} setShowVainfo={setShowVainfo} />
|
||||
|
||||
<div className="size-full mt-4 flex flex-col overflow-y-auto">
|
||||
<div className="text-muted-foreground text-sm font-medium">
|
||||
Detectors
|
||||
</div>
|
||||
<div className="p-2.5 bg-primary rounded-2xl flex-col">
|
||||
<div className="mb-5">Detector CPU Usage</div>
|
||||
{detCpuSeries.map((series) => (
|
||||
<SystemGraph
|
||||
key={series.name}
|
||||
graphId="detector-cpu-usages"
|
||||
unit="%"
|
||||
name={series.name}
|
||||
threshold={DetectorCpuThreshold}
|
||||
data={[series]}
|
||||
/>
|
||||
))}
|
||||
<div className="mt-4 grid grid-cols-1 sm:grid-cols-3 gap-2">
|
||||
<div className="p-2.5 bg-primary rounded-2xl flex-col">
|
||||
<div className="mb-5">Detector Inference Speed</div>
|
||||
{detInferenceTimeSeries.map((series) => (
|
||||
<SystemGraph
|
||||
key={series.name}
|
||||
graphId={`${series.name}-inference`}
|
||||
name={series.name}
|
||||
unit="ms"
|
||||
threshold={InferenceThreshold}
|
||||
updateTimes={updateTimes}
|
||||
data={[series]}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<div className="p-2.5 bg-primary rounded-2xl flex-col">
|
||||
<div className="mb-5">Detector CPU Usage</div>
|
||||
{detCpuSeries.map((series) => (
|
||||
<SystemGraph
|
||||
key={series.name}
|
||||
graphId={`${series.name}-cpu`}
|
||||
unit="%"
|
||||
name={series.name}
|
||||
threshold={DetectorCpuThreshold}
|
||||
updateTimes={updateTimes}
|
||||
data={[series]}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<div className="p-2.5 bg-primary rounded-2xl flex-col">
|
||||
<div className="mb-5">Detector Memory Usage</div>
|
||||
{detMemSeries.map((series) => (
|
||||
<SystemGraph
|
||||
key={series.name}
|
||||
graphId={`${series.name}-mem`}
|
||||
unit="%"
|
||||
name={series.name}
|
||||
threshold={DetectorMemThreshold}
|
||||
updateTimes={updateTimes}
|
||||
data={[series]}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-2.5 bg-primary rounded-2xl flex-col">
|
||||
<div className="mb-5">Detector Memory Usage</div>
|
||||
{detMemSeries.map((series) => (
|
||||
<SystemGraph
|
||||
key={series.name}
|
||||
graphId="detector-mem-usages"
|
||||
unit="%"
|
||||
name={series.name}
|
||||
threshold={DetectorMemThreshold}
|
||||
data={[series]}
|
||||
/>
|
||||
))}
|
||||
|
||||
{statsHistory.length > 0 && statsHistory[0].gpu_usages && (
|
||||
<>
|
||||
<div className="mt-4 flex items-center justify-between">
|
||||
<div className="text-muted-foreground text-sm font-medium">
|
||||
Detectors
|
||||
</div>
|
||||
{Object.keys(statsHistory[0].gpu_usages).filter(
|
||||
(key) =>
|
||||
key == "amd-vaapi" ||
|
||||
key == "intel-vaapi" ||
|
||||
key == "intel-qsv",
|
||||
).length > 0 && (
|
||||
<Button
|
||||
className="cursor-pointer"
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
onClick={() => setShowVainfo(true)}
|
||||
>
|
||||
Hardware Info
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
<div className=" mt-4 grid grid-cols-1 sm:grid-cols-2 gap-2">
|
||||
<div className="p-2.5 bg-primary rounded-2xl flex-col">
|
||||
<div className="mb-5">GPU Usage</div>
|
||||
{gpuSeries.map((series) => (
|
||||
<SystemGraph
|
||||
key={series.name}
|
||||
graphId={`${series.name}-gpu`}
|
||||
name={series.name}
|
||||
unit=""
|
||||
threshold={GPUUsageThreshold}
|
||||
updateTimes={updateTimes}
|
||||
data={[series]}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<div className="p-2.5 bg-primary rounded-2xl flex-col">
|
||||
<div className="mb-5">GPU Memory</div>
|
||||
{gpuMemSeries.map((series) => (
|
||||
<SystemGraph
|
||||
key={series.name}
|
||||
graphId={`${series.name}-mem`}
|
||||
unit=""
|
||||
name={series.name}
|
||||
threshold={GPUMemThreshold}
|
||||
updateTimes={updateTimes}
|
||||
data={[series]}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
<div className="mt-4 text-muted-foreground text-sm font-medium">
|
||||
Other Processes
|
||||
</div>
|
||||
<div className="mt-4 grid grid-cols-1 sm:grid-cols-2 gap-2">
|
||||
<div className="p-2.5 bg-primary rounded-2xl flex-col">
|
||||
<div className="mb-5">Process CPU Usage</div>
|
||||
{otherProcessCpuSeries.map((series) => (
|
||||
<SystemGraph
|
||||
key={series.name}
|
||||
graphId={`${series.name}-cpu`}
|
||||
name={series.name.replaceAll("_", " ")}
|
||||
unit="%"
|
||||
threshold={InferenceThreshold}
|
||||
updateTimes={updateTimes}
|
||||
data={[series]}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<div className="p-2.5 bg-primary rounded-2xl flex-col">
|
||||
<div className="mb-5">Process Memory Usage</div>
|
||||
{otherProcessMemSeries.map((series) => (
|
||||
<SystemGraph
|
||||
key={series.name}
|
||||
graphId={`${series.name}-mem`}
|
||||
unit="%"
|
||||
name={series.name.replaceAll("_", " ")}
|
||||
threshold={DetectorMemThreshold}
|
||||
updateTimes={updateTimes}
|
||||
data={[series]}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{statsHistory.length > 0 && statsHistory[0].gpu_usages && (
|
||||
<>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="text-muted-foreground text-sm font-medium">
|
||||
Detectors
|
||||
</div>
|
||||
{Object.keys(statsHistory[0].gpu_usages).filter(
|
||||
(key) =>
|
||||
key == "amd-vaapi" ||
|
||||
key == "intel-vaapi" ||
|
||||
key == "intel-qsv",
|
||||
).length > 0 && <Button>Hardware Info</Button>}
|
||||
</div>
|
||||
<div className="mt-4 grid grid-cols-1 sm:grid-cols-3 gap-2">
|
||||
<div className="p-2.5 bg-primary rounded-2xl flex-col">
|
||||
<div className="mb-5">Detector Inference Speed</div>
|
||||
{detInferenceTimeSeries.map((series) => (
|
||||
<SystemGraph
|
||||
key={series.name}
|
||||
graphId="detector-inference"
|
||||
name={series.name}
|
||||
unit="ms"
|
||||
threshold={InferenceThreshold}
|
||||
data={[series]}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="p-2.5 bg-primary rounded-2xl flex-col">
|
||||
<div className="mb-5">Detector CPU Usage</div>
|
||||
{detCpuSeries.map((series) => (
|
||||
<SystemGraph
|
||||
key={series.name}
|
||||
graphId="detector-cpu-usages"
|
||||
unit="%"
|
||||
name={series.name}
|
||||
threshold={DetectorCpuThreshold}
|
||||
data={[series]}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<div className="p-2.5 bg-primary rounded-2xl flex-col">
|
||||
<div className="mb-5">Detector Memory Usage</div>
|
||||
{detMemSeries.map((series) => (
|
||||
<SystemGraph
|
||||
key={series.name}
|
||||
graphId="detector-mem-usages"
|
||||
unit="%"
|
||||
name={series.name}
|
||||
threshold={DetectorMemThreshold}
|
||||
data={[series]}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function CameraMetrics() {
|
||||
const { data: config } = useSWR<FrigateConfig>("config");
|
||||
}
|
||||
|
||||
@ -28,6 +28,16 @@ export const DetectorMemThreshold = {
|
||||
error: 50,
|
||||
} as Threshold;
|
||||
|
||||
export const GPUUsageThreshold = {
|
||||
warning: 75,
|
||||
error: 95,
|
||||
} as Threshold;
|
||||
|
||||
export const GPUMemThreshold = {
|
||||
warning: 75,
|
||||
error: 95,
|
||||
} as Threshold;
|
||||
|
||||
export const CameraFfmpegThreshold = {
|
||||
warning: 20,
|
||||
error: 20,
|
||||
|
||||
@ -63,3 +63,9 @@ export type PotentialProblem = {
|
||||
text: string;
|
||||
color: string;
|
||||
};
|
||||
|
||||
export type Vainfo = {
|
||||
return_code: number;
|
||||
stdout: string;
|
||||
stderr: string;
|
||||
};
|
||||
|
||||
@ -12,24 +12,24 @@ export default defineConfig({
|
||||
server: {
|
||||
proxy: {
|
||||
"/api": {
|
||||
target: "http://192.168.50.106:5000",
|
||||
target: "http://localhost:5000",
|
||||
ws: true,
|
||||
},
|
||||
"/vod": {
|
||||
target: "http://192.168.50.106:5000",
|
||||
target: "http://localhost:5000",
|
||||
},
|
||||
"/clips": {
|
||||
target: "http://192.168.50.106:5000",
|
||||
target: "http://localhost:5000",
|
||||
},
|
||||
"/exports": {
|
||||
target: "http://192.168.50.106:5000",
|
||||
target: "http://localhost:5000",
|
||||
},
|
||||
"/ws": {
|
||||
target: "ws://192.168.50.106:5000",
|
||||
target: "ws://localhost:5000",
|
||||
ws: true,
|
||||
},
|
||||
"/live": {
|
||||
target: "ws://192.168.50.106:5000",
|
||||
target: "ws://localhost:5000",
|
||||
changeOrigin: true,
|
||||
ws: true,
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user