mirror of
https://github.com/blakeblackshear/frigate.git
synced 2026-02-11 05:35:25 +03:00
Use separate view for general metrics
This commit is contained in:
Nicolas Mowen
parent
09f2f01319
commit
b93031649f
@ -124,3 +124,7 @@ export function ThresholdBarGraph({
|
|||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function StorageGraph() {
|
||||||
|
|
||||||
|
}
|
||||||
|
|||||||
@ -1,20 +1,10 @@
|
|||||||
import useSWR from "swr";
|
import useSWR from "swr";
|
||||||
import { FrigateStats } from "@/types/stats";
|
import { FrigateStats } from "@/types/stats";
|
||||||
import { useEffect, useMemo, useState } from "react";
|
import { useState } from "react";
|
||||||
import { useFrigateStats } from "@/api/ws";
|
|
||||||
import TimeAgo from "@/components/dynamic/TimeAgo";
|
import TimeAgo from "@/components/dynamic/TimeAgo";
|
||||||
import {
|
|
||||||
DetectorCpuThreshold,
|
|
||||||
DetectorMemThreshold,
|
|
||||||
GPUMemThreshold,
|
|
||||||
GPUUsageThreshold,
|
|
||||||
InferenceThreshold,
|
|
||||||
} from "@/types/graph";
|
|
||||||
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
|
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
|
||||||
import { Button } from "@/components/ui/button";
|
|
||||||
import VainfoDialog from "@/components/overlay/VainfoDialog";
|
|
||||||
import { isDesktop } from "react-device-detect";
|
import { isDesktop } from "react-device-detect";
|
||||||
import { ThresholdBarGraph } from "@/components/graph/SystemGraph";
|
import GeneralMetrics from "@/views/system/GeneralMetrics";
|
||||||
|
|
||||||
const metrics = ["general", "storage", "cameras"] as const;
|
const metrics = ["general", "storage", "cameras"] as const;
|
||||||
type SystemMetric = (typeof metrics)[number];
|
type SystemMetric = (typeof metrics)[number];
|
||||||
@ -204,401 +194,3 @@ export default System;
|
|||||||
})}
|
})}
|
||||||
</div>
|
</div>
|
||||||
*/
|
*/
|
||||||
|
|
||||||
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,gpu_usages,processes,service" },
|
|
||||||
],
|
|
||||||
{
|
|
||||||
revalidateOnFocus: false,
|
|
||||||
},
|
|
||||||
);
|
|
||||||
|
|
||||||
const [statsHistory, setStatsHistory] = useState<FrigateStats[]>([]);
|
|
||||||
const { payload: updatedStats } = useFrigateStats();
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (initialStats == undefined || initialStats.length == 0) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (statsHistory.length == 0) {
|
|
||||||
setStatsHistory(initialStats);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!updatedStats) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
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) {
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
|
|
||||||
const series: {
|
|
||||||
[key: string]: { name: string; data: { x: number; y: number }[] };
|
|
||||||
} = {};
|
|
||||||
|
|
||||||
statsHistory.forEach((stats, statsIdx) => {
|
|
||||||
if (!stats) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
Object.entries(stats.detectors).forEach(([key, stats]) => {
|
|
||||||
if (!(key in series)) {
|
|
||||||
series[key] = { name: key, data: [] };
|
|
||||||
}
|
|
||||||
|
|
||||||
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: number; y: string }[] };
|
|
||||||
} = {};
|
|
||||||
|
|
||||||
statsHistory.forEach((stats, statsIdx) => {
|
|
||||||
if (!stats) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
Object.entries(stats.detectors).forEach(([key, detStats]) => {
|
|
||||||
if (!(key in series)) {
|
|
||||||
series[key] = { name: key, data: [] };
|
|
||||||
}
|
|
||||||
|
|
||||||
series[key].data.push({
|
|
||||||
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: number; y: string }[] };
|
|
||||||
} = {};
|
|
||||||
|
|
||||||
statsHistory.forEach((stats, statsIdx) => {
|
|
||||||
if (!stats) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
Object.entries(stats.detectors).forEach(([key, detStats]) => {
|
|
||||||
if (!(key in series)) {
|
|
||||||
series[key] = { name: key, data: [] };
|
|
||||||
}
|
|
||||||
|
|
||||||
series[key].data.push({
|
|
||||||
x: statsIdx,
|
|
||||||
y: stats.cpu_usages[detStats.pid.toString()].mem,
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
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 (
|
|
||||||
<>
|
|
||||||
<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="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) => (
|
|
||||||
<ThresholdBarGraph
|
|
||||||
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) => (
|
|
||||||
<ThresholdBarGraph
|
|
||||||
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) => (
|
|
||||||
<ThresholdBarGraph
|
|
||||||
key={series.name}
|
|
||||||
graphId={`${series.name}-mem`}
|
|
||||||
unit="%"
|
|
||||||
name={series.name}
|
|
||||||
threshold={DetectorMemThreshold}
|
|
||||||
updateTimes={updateTimes}
|
|
||||||
data={[series]}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{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">
|
|
||||||
GPUs
|
|
||||||
</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) => (
|
|
||||||
<ThresholdBarGraph
|
|
||||||
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) => (
|
|
||||||
<ThresholdBarGraph
|
|
||||||
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) => (
|
|
||||||
<ThresholdBarGraph
|
|
||||||
key={series.name}
|
|
||||||
graphId={`${series.name}-cpu`}
|
|
||||||
name={series.name.replaceAll("_", " ")}
|
|
||||||
unit="%"
|
|
||||||
threshold={DetectorCpuThreshold}
|
|
||||||
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) => (
|
|
||||||
<ThresholdBarGraph
|
|
||||||
key={series.name}
|
|
||||||
graphId={`${series.name}-mem`}
|
|
||||||
unit="%"
|
|
||||||
name={series.name.replaceAll("_", " ")}
|
|
||||||
threshold={DetectorMemThreshold}
|
|
||||||
updateTimes={updateTimes}
|
|
||||||
data={[series]}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|||||||
415
web/src/views/system/GeneralMetrics.tsx
Normal file
415
web/src/views/system/GeneralMetrics.tsx
Normal file
@ -0,0 +1,415 @@
|
|||||||
|
import useSWR from "swr";
|
||||||
|
import { FrigateStats } from "@/types/stats";
|
||||||
|
import { useEffect, useMemo, useState } from "react";
|
||||||
|
import { useFrigateStats } from "@/api/ws";
|
||||||
|
import {
|
||||||
|
DetectorCpuThreshold,
|
||||||
|
DetectorMemThreshold,
|
||||||
|
GPUMemThreshold,
|
||||||
|
GPUUsageThreshold,
|
||||||
|
InferenceThreshold,
|
||||||
|
} from "@/types/graph";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import VainfoDialog from "@/components/overlay/VainfoDialog";
|
||||||
|
import { ThresholdBarGraph } from "@/components/graph/SystemGraph";
|
||||||
|
|
||||||
|
type GeneralMetricsProps = {
|
||||||
|
lastUpdated: number;
|
||||||
|
setLastUpdated: (last: number) => void;
|
||||||
|
};
|
||||||
|
export default function GeneralMetrics({
|
||||||
|
lastUpdated,
|
||||||
|
setLastUpdated,
|
||||||
|
}: GeneralMetricsProps) {
|
||||||
|
// extra info
|
||||||
|
|
||||||
|
const [showVainfo, setShowVainfo] = useState(false);
|
||||||
|
|
||||||
|
// stats
|
||||||
|
|
||||||
|
const { data: initialStats } = useSWR<FrigateStats[]>(
|
||||||
|
[
|
||||||
|
"stats/history",
|
||||||
|
{ keys: "cpu_usages,detectors,gpu_usages,processes,service" },
|
||||||
|
],
|
||||||
|
{
|
||||||
|
revalidateOnFocus: false,
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
const [statsHistory, setStatsHistory] = useState<FrigateStats[]>([]);
|
||||||
|
const { payload: updatedStats } = useFrigateStats();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (initialStats == undefined || initialStats.length == 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (statsHistory.length == 0) {
|
||||||
|
setStatsHistory(initialStats);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!updatedStats) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
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) {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
|
||||||
|
const series: {
|
||||||
|
[key: string]: { name: string; data: { x: number; y: number }[] };
|
||||||
|
} = {};
|
||||||
|
|
||||||
|
statsHistory.forEach((stats, statsIdx) => {
|
||||||
|
if (!stats) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
Object.entries(stats.detectors).forEach(([key, stats]) => {
|
||||||
|
if (!(key in series)) {
|
||||||
|
series[key] = { name: key, data: [] };
|
||||||
|
}
|
||||||
|
|
||||||
|
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: number; y: string }[] };
|
||||||
|
} = {};
|
||||||
|
|
||||||
|
statsHistory.forEach((stats, statsIdx) => {
|
||||||
|
if (!stats) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
Object.entries(stats.detectors).forEach(([key, detStats]) => {
|
||||||
|
if (!(key in series)) {
|
||||||
|
series[key] = { name: key, data: [] };
|
||||||
|
}
|
||||||
|
|
||||||
|
series[key].data.push({
|
||||||
|
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: number; y: string }[] };
|
||||||
|
} = {};
|
||||||
|
|
||||||
|
statsHistory.forEach((stats, statsIdx) => {
|
||||||
|
if (!stats) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
Object.entries(stats.detectors).forEach(([key, detStats]) => {
|
||||||
|
if (!(key in series)) {
|
||||||
|
series[key] = { name: key, data: [] };
|
||||||
|
}
|
||||||
|
|
||||||
|
series[key].data.push({
|
||||||
|
x: statsIdx,
|
||||||
|
y: stats.cpu_usages[detStats.pid.toString()].mem,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
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 (
|
||||||
|
<>
|
||||||
|
<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="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) => (
|
||||||
|
<ThresholdBarGraph
|
||||||
|
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) => (
|
||||||
|
<ThresholdBarGraph
|
||||||
|
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) => (
|
||||||
|
<ThresholdBarGraph
|
||||||
|
key={series.name}
|
||||||
|
graphId={`${series.name}-mem`}
|
||||||
|
unit="%"
|
||||||
|
name={series.name}
|
||||||
|
threshold={DetectorMemThreshold}
|
||||||
|
updateTimes={updateTimes}
|
||||||
|
data={[series]}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{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">
|
||||||
|
GPUs
|
||||||
|
</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) => (
|
||||||
|
<ThresholdBarGraph
|
||||||
|
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) => (
|
||||||
|
<ThresholdBarGraph
|
||||||
|
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) => (
|
||||||
|
<ThresholdBarGraph
|
||||||
|
key={series.name}
|
||||||
|
graphId={`${series.name}-cpu`}
|
||||||
|
name={series.name.replaceAll("_", " ")}
|
||||||
|
unit="%"
|
||||||
|
threshold={DetectorCpuThreshold}
|
||||||
|
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) => (
|
||||||
|
<ThresholdBarGraph
|
||||||
|
key={series.name}
|
||||||
|
graphId={`${series.name}-mem`}
|
||||||
|
unit="%"
|
||||||
|
name={series.name.replaceAll("_", " ")}
|
||||||
|
threshold={DetectorMemThreshold}
|
||||||
|
updateTimes={updateTimes}
|
||||||
|
data={[series]}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user