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

Break apart all cpu / mem graphs

Browse Source
This commit is contained in:
Nick Mowen 2024-01-24 16:53:32 -07:00 committed by Nicolas Mowen
parent ba98d491ae
commit e761adb017
1 changed files with 44 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,7 +11,7 @@ function System() {
}); });
// stats data pieces // stats data pieces
const inferenceTimeSeries = useMemo(() => { const detInferenceTimeSeries = useMemo(() => {
if (!statsHistory) { if (!statsHistory) {
return []; return [];
} }
@ -33,7 +33,7 @@ function System() {
}); });
return Object.values(series); return Object.values(series);
}, [statsHistory]); }, [statsHistory]);
const cpuMemSeries = useMemo(() => { const detCpuSeries = useMemo(() => {
if (!statsHistory) { if (!statsHistory) {
return []; return [];
} }
@ -45,22 +45,40 @@ function System() {
statsHistory.forEach((stats) => { statsHistory.forEach((stats) => {
const statTime = new Date(stats.service.last_updated * 1000); const statTime = new Date(stats.service.last_updated * 1000);
Object.entries(stats.detectors).forEach(([key, detectorStats]) => { Object.entries(stats.detectors).forEach(([key, detStats]) => {
const cpuKey = `${key}-cpu`; if (!(key in series)) {
const memKey = `${key}-mem`; series[key] = { name: key, data: [] };
if (!(cpuKey in series)) {
series[cpuKey] = { name: `${key} Cpu`, data: [] };
} }
if (!(memKey in series)) { series[key].data.push({
series[memKey] = { name: `${key} Memory`, data: [] }; x: statTime,
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: any; y: any }[] };
} = {};
statsHistory.forEach((stats) => {
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: [] };
} }
const detUsages = stats.cpu_usages[detectorStats.pid.toString()]; series[key].data.push({
x: statTime,
series[cpuKey].data.push({ x: statTime, y: detUsages.cpu }); y: stats.cpu_usages[detStats.pid.toString()].mem,
series[memKey].data.push({ x: statTime, y: detUsages.mem }); });
}); });
}); });
return Object.values(series); return Object.values(series);
@ -169,24 +187,30 @@ function System() {
<Heading as="h2">System</Heading> <Heading as="h2">System</Heading>
<Heading as="h4">Detectors</Heading> <Heading as="h4">Detectors</Heading>
<div className="grid grid-cols-1 md:grid-cols-2"> <div className="grid grid-cols-1 sm:grid-cols-3">
<SystemGraph <SystemGraph
graphId="detector-inference" graphId="detector-inference"
title="Inference Speed" title="Inference Speed"
unit="ms" unit="ms"
data={inferenceTimeSeries} data={detInferenceTimeSeries}
/> />
<SystemGraph <SystemGraph
graphId="detector-usages" graphId="detector-usages"
title="CPU / Memory" title="CPU"
unit="%" unit="%"
data={cpuMemSeries} data={detCpuSeries}
/>
<SystemGraph
graphId="detector-usages"
title="Memory"
unit="%"
data={detMemSeries}
/> />
</div> </div>
{gpuSeries.length > 0 && ( {gpuSeries.length > 0 && (
<> <>
<Heading as="h4">GPUs</Heading> <Heading as="h4">GPUs</Heading>
<div className="grid grid-cols-1 md:grid-cols-2"> <div className="grid grid-cols-1 sm:grid-cols-2">
<SystemGraph <SystemGraph
graphId="detector-inference" graphId="detector-inference"
title="GPU Usage" title="GPU Usage"
@ -203,7 +227,7 @@ function System() {
</> </>
)} )}
<Heading as="h4">Other Processes</Heading> <Heading as="h4">Other Processes</Heading>
<div className="grid grid-cols-1 md:grid-cols-2"> <div className="grid grid-cols-1 sm:grid-cols-2">
<SystemGraph <SystemGraph
graphId="process-cpu" graphId="process-cpu"
title="CPU" title="CPU"