forked from Github/frigate
Storage Graphs (#10826)
* Rename graph * Use separate view for general metrics * Get storage graph formatted * Show camera storage usage * Cleanup ticks * Remove storage link * Add icons and frigate logo * Undo * Use optimistic state for metrics toggle * Use optimistic state and skeletons for loading
This commit is contained in:
Nicolas Mowen
@@ -1,245 +0,0 @@
|
||||
import { useWs } from "@/api/ws";
|
||||
import ActivityIndicator from "@/components/indicators/activity-indicator";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import Heading from "@/components/ui/heading";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipProvider,
|
||||
TooltipTrigger,
|
||||
} from "@/components/ui/tooltip";
|
||||
import { useMemo } from "react";
|
||||
import { LuAlertCircle } from "react-icons/lu";
|
||||
import useSWR from "swr";
|
||||
|
||||
type CameraStorage = {
|
||||
[key: string]: {
|
||||
bandwidth: number;
|
||||
usage: number;
|
||||
usage_percent: number;
|
||||
};
|
||||
};
|
||||
|
||||
const emptyObject = Object.freeze({});
|
||||
|
||||
function Storage() {
|
||||
const { data: storage } = useSWR<CameraStorage>("recordings/storage");
|
||||
|
||||
const {
|
||||
value: { payload: stats },
|
||||
} = useWs("stats", "");
|
||||
const { data: initialStats } = useSWR("stats");
|
||||
|
||||
const { service } = stats || initialStats || emptyObject;
|
||||
|
||||
const hasSeparateMedia = useMemo(() => {
|
||||
return (
|
||||
service &&
|
||||
service["storage"]["/media/frigate/recordings"]["total"] !=
|
||||
service["storage"]["/media/frigate/clips"]["total"]
|
||||
);
|
||||
}, [service]);
|
||||
|
||||
const getUnitSize = (MB: number) => {
|
||||
if (isNaN(MB) || MB < 0) return "Invalid number";
|
||||
if (MB < 1024) return `${MB} MiB`;
|
||||
if (MB < 1048576) return `${(MB / 1024).toFixed(2)} GiB`;
|
||||
|
||||
return `${(MB / 1048576).toFixed(2)} TiB`;
|
||||
};
|
||||
|
||||
if (!service || !storage) {
|
||||
return <ActivityIndicator />;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Heading as="h2">Storage</Heading>
|
||||
|
||||
<Heading className="my-4" as="h3">
|
||||
Overview
|
||||
</Heading>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center">
|
||||
<CardTitle>Data</CardTitle>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button size="icon" variant="ghost">
|
||||
<LuAlertCircle />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>
|
||||
Overview of total used storage and total capacity of the
|
||||
drives that hold the recordings and snapshots directories.
|
||||
</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Location</TableHead>
|
||||
<TableHead>Used</TableHead>
|
||||
<TableHead>Total</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell>
|
||||
{hasSeparateMedia ? "Recordings" : "Recordings & Snapshots"}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{getUnitSize(
|
||||
service["storage"]["/media/frigate/recordings"]["used"],
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{getUnitSize(
|
||||
service["storage"]["/media/frigate/recordings"]["total"],
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
{hasSeparateMedia && (
|
||||
<TableRow>
|
||||
<TableCell>Snapshots</TableCell>
|
||||
<TableCell>
|
||||
{getUnitSize(
|
||||
service["storage"]["/media/frigate/clips"]["used"],
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{getUnitSize(
|
||||
service["storage"]["/media/frigate/clips"]["total"],
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center">
|
||||
<CardTitle>Memory</CardTitle>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button size="icon" variant="ghost">
|
||||
<LuAlertCircle />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>Overview of used and total memory in frigate process.</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Location</TableHead>
|
||||
<TableHead>Used</TableHead>
|
||||
<TableHead>Total</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell>/dev/shm</TableCell>
|
||||
<TableCell>
|
||||
{getUnitSize(service["storage"]["/dev/shm"]["used"])}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{getUnitSize(service["storage"]["/dev/shm"]["total"])}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell>/tmp/cache</TableCell>
|
||||
<TableCell>
|
||||
{getUnitSize(service["storage"]["/tmp/cache"]["used"])}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{getUnitSize(service["storage"]["/tmp/cache"]["total"])}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center my-4">
|
||||
<Heading as="h4">Cameras</Heading>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button size="icon" variant="ghost">
|
||||
<LuAlertCircle />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>Overview of per-camera storage usage and bandwidth.</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 2xl:grid-cols-3 gap-4">
|
||||
{Object.entries(storage).map(([name, camera]) => (
|
||||
<Card key={name}>
|
||||
<div className="capitalize text-lg flex justify-between">
|
||||
<Button variant="link">
|
||||
<a className="capitalize" href={`/cameras/${name}`}>
|
||||
{name.replaceAll("_", " ")}
|
||||
</a>
|
||||
</Button>
|
||||
</div>
|
||||
<div className="p-2">
|
||||
<Table className="w-full">
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableCell>Usage</TableCell>
|
||||
<TableCell>Stream Bandwidth</TableCell>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell>
|
||||
{Math.round(camera["usage_percent"] ?? 0)}%
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{camera["bandwidth"]
|
||||
? `${getUnitSize(camera["bandwidth"])}/hr`
|
||||
: "Calculating..."}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default Storage;
|
||||
@@ -1,19 +1,15 @@
|
||||
import useSWR from "swr";
|
||||
import { FrigateStats } from "@/types/stats";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import SystemGraph from "@/components/graph/SystemGraph";
|
||||
import { useFrigateStats } from "@/api/ws";
|
||||
import { useState } from "react";
|
||||
import TimeAgo from "@/components/dynamic/TimeAgo";
|
||||
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";
|
||||
import { isDesktop, isMobile } from "react-device-detect";
|
||||
import GeneralMetrics from "@/views/system/GeneralMetrics";
|
||||
import StorageMetrics from "@/views/system/StorageMetrics";
|
||||
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";
|
||||
|
||||
const metrics = ["general", "storage", "cameras"] as const;
|
||||
type SystemMetric = (typeof metrics)[number];
|
||||
@@ -22,6 +18,7 @@ function System() {
|
||||
// stats page
|
||||
|
||||
const [page, setPage] = useState<SystemMetric>("general");
|
||||
const [pageToggle, setPageToggle] = useOptimisticState(page, setPage, 100);
|
||||
const [lastUpdated, setLastUpdated] = useState<number>(Date.now() / 1000);
|
||||
|
||||
// stats collection
|
||||
@@ -32,26 +29,32 @@ function System() {
|
||||
|
||||
return (
|
||||
<div className="size-full p-2 flex flex-col">
|
||||
<div className="w-full h-8 flex justify-between items-center">
|
||||
<div className="w-full h-11 relative flex justify-between items-center">
|
||||
{isMobile && (
|
||||
<Logo className="absolute inset-x-1/2 -translate-x-1/2 h-8" />
|
||||
)}
|
||||
<ToggleGroup
|
||||
className="*:px-3 *:py-4 *:rounded-md"
|
||||
type="single"
|
||||
size="sm"
|
||||
value={page}
|
||||
value={pageToggle}
|
||||
onValueChange={(value: SystemMetric) => {
|
||||
if (value) {
|
||||
setPage(value);
|
||||
setPageToggle(value);
|
||||
}
|
||||
}} // don't allow the severity to be unselected
|
||||
>
|
||||
{Object.values(metrics).map((item) => (
|
||||
<ToggleGroupItem
|
||||
key={item}
|
||||
className={`flex items-center justify-between gap-2 ${page == item ? "" : "text-gray-500"}`}
|
||||
className={`flex items-center justify-between gap-2 ${pageToggle == item ? "" : "*:text-gray-500"}`}
|
||||
value={item}
|
||||
aria-label={`Select ${item}`}
|
||||
>
|
||||
<div className="capitalize">{item}</div>
|
||||
{item == "general" && <LuActivity className="size-4" />}
|
||||
{item == "storage" && <LuHardDrive className="size-4" />}
|
||||
{item == "cameras" && <FaVideo className="size-4" />}
|
||||
{isDesktop && <div className="capitalize">{item}</div>}
|
||||
</ToggleGroupItem>
|
||||
))}
|
||||
</ToggleGroup>
|
||||
@@ -78,6 +81,7 @@ function System() {
|
||||
setLastUpdated={setLastUpdated}
|
||||
/>
|
||||
)}
|
||||
{page == "storage" && <StorageMetrics setLastUpdated={setLastUpdated} />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -182,13 +186,13 @@ export default System;
|
||||
if (camera.enabled) {
|
||||
return (
|
||||
<div key={camera.name} className="grid grid-cols-2">
|
||||
<SystemGraph
|
||||
<ThresholdBarGraph
|
||||
graphId={`${camera.name}-cpu`}
|
||||
title={`${camera.name.replaceAll("_", " ")} CPU`}
|
||||
unit="%"
|
||||
data={Object.values(cameraCpuSeries[camera.name] || {})}
|
||||
/>
|
||||
<SystemGraph
|
||||
<ThresholdBarGraph
|
||||
graphId={`${camera.name}-fps`}
|
||||
title={`${camera.name.replaceAll("_", " ")} FPS`}
|
||||
unit=""
|
||||
@@ -202,401 +206,3 @@ export default System;
|
||||
})}
|
||||
</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) => (
|
||||
<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>
|
||||
|
||||
{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) => (
|
||||
<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={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) => (
|
||||
<SystemGraph
|
||||
key={series.name}
|
||||
graphId={`${series.name}-mem`}
|
||||
unit="%"
|
||||
name={series.name.replaceAll("_", " ")}
|
||||
threshold={DetectorMemThreshold}
|
||||
updateTimes={updateTimes}
|
||||
data={[series]}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user