mirror of
https://github.com/blakeblackshear/frigate.git
synced 2024-11-21 19:07:46 +01:00
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
GitHub
parent
46e3157c7f
commit
42559fa55d
@ -16,7 +16,8 @@ from frigate.types import StatsTrackingTypes
|
|||||||
logger = logging.getLogger(__name__)
|
logger = logging.getLogger(__name__)
|
||||||
|
|
||||||
|
|
||||||
MAX_STATS_POINTS = 120
|
MAX_STATS_POINTS = 80
|
||||||
|
FREQUENCY_STATS_POINTS = 15
|
||||||
|
|
||||||
|
|
||||||
class StatsEmitter(threading.Thread):
|
class StatsEmitter(threading.Thread):
|
||||||
@ -70,9 +71,9 @@ class StatsEmitter(threading.Thread):
|
|||||||
def run(self) -> None:
|
def run(self) -> None:
|
||||||
time.sleep(10)
|
time.sleep(10)
|
||||||
for counter in itertools.cycle(
|
for counter in itertools.cycle(
|
||||||
range(int(self.config.mqtt.stats_interval / 10))
|
range(int(self.config.mqtt.stats_interval / FREQUENCY_STATS_POINTS))
|
||||||
):
|
):
|
||||||
if self.stop_event.wait(10):
|
if self.stop_event.wait(FREQUENCY_STATS_POINTS):
|
||||||
break
|
break
|
||||||
|
|
||||||
logger.debug("Starting stats collection")
|
logger.debug("Starting stats collection")
|
||||||
|
|||||||
@ -11,7 +11,6 @@ import { Suspense, lazy } from "react";
|
|||||||
const Live = lazy(() => import("@/pages/Live"));
|
const Live = lazy(() => import("@/pages/Live"));
|
||||||
const Events = lazy(() => import("@/pages/Events"));
|
const Events = lazy(() => import("@/pages/Events"));
|
||||||
const Export = lazy(() => import("@/pages/Export"));
|
const Export = lazy(() => import("@/pages/Export"));
|
||||||
const Storage = lazy(() => import("@/pages/Storage"));
|
|
||||||
const SubmitPlus = lazy(() => import("@/pages/SubmitPlus"));
|
const SubmitPlus = lazy(() => import("@/pages/SubmitPlus"));
|
||||||
const ConfigEditor = lazy(() => import("@/pages/ConfigEditor"));
|
const ConfigEditor = lazy(() => import("@/pages/ConfigEditor"));
|
||||||
const System = lazy(() => import("@/pages/System"));
|
const System = lazy(() => import("@/pages/System"));
|
||||||
@ -38,7 +37,6 @@ function App() {
|
|||||||
<Route path="/" element={<Live />} />
|
<Route path="/" element={<Live />} />
|
||||||
<Route path="/events" element={<Events />} />
|
<Route path="/events" element={<Events />} />
|
||||||
<Route path="/export" element={<Export />} />
|
<Route path="/export" element={<Export />} />
|
||||||
<Route path="/storage" element={<Storage />} />
|
|
||||||
<Route path="/plus" element={<SubmitPlus />} />
|
<Route path="/plus" element={<SubmitPlus />} />
|
||||||
<Route path="/system" element={<System />} />
|
<Route path="/system" element={<System />} />
|
||||||
<Route path="/settings" element={<Settings />} />
|
<Route path="/settings" element={<Settings />} />
|
||||||
|
|||||||
@ -5,7 +5,7 @@ import { useCallback, useEffect, useMemo } from "react";
|
|||||||
import Chart from "react-apexcharts";
|
import Chart from "react-apexcharts";
|
||||||
import useSWR from "swr";
|
import useSWR from "swr";
|
||||||
|
|
||||||
type SystemGraphProps = {
|
type ThresholdBarGraphProps = {
|
||||||
graphId: string;
|
graphId: string;
|
||||||
name: string;
|
name: string;
|
||||||
unit: string;
|
unit: string;
|
||||||
@ -13,14 +13,14 @@ type SystemGraphProps = {
|
|||||||
updateTimes: number[];
|
updateTimes: number[];
|
||||||
data: ApexAxisChartSeries;
|
data: ApexAxisChartSeries;
|
||||||
};
|
};
|
||||||
export default function SystemGraph({
|
export function ThresholdBarGraph({
|
||||||
graphId,
|
graphId,
|
||||||
name,
|
name,
|
||||||
unit,
|
unit,
|
||||||
threshold,
|
threshold,
|
||||||
updateTimes,
|
updateTimes,
|
||||||
data,
|
data,
|
||||||
}: SystemGraphProps) {
|
}: ThresholdBarGraphProps) {
|
||||||
const { data: config } = useSWR<FrigateConfig>("config", {
|
const { data: config } = useSWR<FrigateConfig>("config", {
|
||||||
revalidateOnFocus: false,
|
revalidateOnFocus: false,
|
||||||
});
|
});
|
||||||
@ -87,8 +87,12 @@ export default function SystemGraph({
|
|||||||
tooltip: {
|
tooltip: {
|
||||||
theme: systemTheme || theme,
|
theme: systemTheme || theme,
|
||||||
},
|
},
|
||||||
|
markers: {
|
||||||
|
size: 0,
|
||||||
|
},
|
||||||
xaxis: {
|
xaxis: {
|
||||||
tickAmount: 6,
|
tickAmount: 4,
|
||||||
|
tickPlacement: "on",
|
||||||
labels: {
|
labels: {
|
||||||
formatter: formatTime,
|
formatter: formatTime,
|
||||||
},
|
},
|
||||||
@ -104,7 +108,7 @@ export default function SystemGraph({
|
|||||||
min: 0,
|
min: 0,
|
||||||
max: threshold.warning + 10,
|
max: threshold.warning + 10,
|
||||||
},
|
},
|
||||||
};
|
} as ApexCharts.ApexOptions;
|
||||||
}, [graphId, threshold, systemTheme, theme, formatTime]);
|
}, [graphId, threshold, systemTheme, theme, formatTime]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@ -124,3 +128,110 @@ export default function SystemGraph({
|
|||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
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`;
|
||||||
|
};
|
||||||
|
|
||||||
|
type StorageGraphProps = {
|
||||||
|
graphId: string;
|
||||||
|
used: number;
|
||||||
|
total: number;
|
||||||
|
};
|
||||||
|
export function StorageGraph({ graphId, used, total }: StorageGraphProps) {
|
||||||
|
const { theme, systemTheme } = useTheme();
|
||||||
|
|
||||||
|
const options = useMemo(() => {
|
||||||
|
return {
|
||||||
|
chart: {
|
||||||
|
id: graphId,
|
||||||
|
background: (systemTheme || theme) == "dark" ? "#404040" : "#E5E5E5",
|
||||||
|
selection: {
|
||||||
|
enabled: false,
|
||||||
|
},
|
||||||
|
toolbar: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
zoom: {
|
||||||
|
enabled: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
show: false,
|
||||||
|
padding: {
|
||||||
|
bottom: -40,
|
||||||
|
top: -60,
|
||||||
|
left: -20,
|
||||||
|
right: 0,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
dataLabels: {
|
||||||
|
enabled: false,
|
||||||
|
},
|
||||||
|
plotOptions: {
|
||||||
|
bar: {
|
||||||
|
horizontal: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
theme: systemTheme || theme,
|
||||||
|
},
|
||||||
|
xaxis: {
|
||||||
|
axisBorder: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisTicks: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
labels: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
yaxis: {
|
||||||
|
show: false,
|
||||||
|
min: 0,
|
||||||
|
max: 100,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}, [graphId, systemTheme, theme]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
ApexCharts.exec(graphId, "updateOptions", options, true, true);
|
||||||
|
}, [graphId, options]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="w-full flex flex-col gap-2.5">
|
||||||
|
<div className="w-full flex justify-between items-center gap-1">
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
<div className="text-xs text-primary-foreground">
|
||||||
|
{getUnitSize(used)}
|
||||||
|
</div>
|
||||||
|
<div className="text-xs text-primary-foreground">/</div>
|
||||||
|
<div className="text-xs text-muted-foreground">
|
||||||
|
{getUnitSize(total)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-xs text-primary-foreground">
|
||||||
|
{Math.round((used / total) * 100)}%
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="h-5 rounded-md overflow-hidden">
|
||||||
|
<Chart
|
||||||
|
type="bar"
|
||||||
|
options={options}
|
||||||
|
series={[
|
||||||
|
{ data: [{ x: "storage", y: Math.round((used / total) * 100) }] },
|
||||||
|
]}
|
||||||
|
height="100%"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|||||||
@ -1,7 +1,6 @@
|
|||||||
import {
|
import {
|
||||||
LuActivity,
|
LuActivity,
|
||||||
LuGithub,
|
LuGithub,
|
||||||
LuHardDrive,
|
|
||||||
LuLifeBuoy,
|
LuLifeBuoy,
|
||||||
LuList,
|
LuList,
|
||||||
LuMoon,
|
LuMoon,
|
||||||
@ -138,18 +137,6 @@ export default function GeneralSettings({ className }: GeneralSettings) {
|
|||||||
<DropdownMenuLabel>System</DropdownMenuLabel>
|
<DropdownMenuLabel>System</DropdownMenuLabel>
|
||||||
<DropdownMenuSeparator />
|
<DropdownMenuSeparator />
|
||||||
<DropdownMenuGroup className={isDesktop ? "" : "flex flex-col"}>
|
<DropdownMenuGroup className={isDesktop ? "" : "flex flex-col"}>
|
||||||
<Link to="/storage">
|
|
||||||
<MenuItem
|
|
||||||
className={
|
|
||||||
isDesktop
|
|
||||||
? "cursor-pointer"
|
|
||||||
: "p-2 flex items-center text-sm"
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<LuHardDrive className="mr-2 size-4" />
|
|
||||||
<span>Storage</span>
|
|
||||||
</MenuItem>
|
|
||||||
</Link>
|
|
||||||
<Link to="/system">
|
<Link to="/system">
|
||||||
<MenuItem
|
<MenuItem
|
||||||
className={
|
className={
|
||||||
|
|||||||
@ -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 useSWR from "swr";
|
||||||
import { FrigateStats } from "@/types/stats";
|
import { FrigateStats } from "@/types/stats";
|
||||||
import { useEffect, useMemo, useState } from "react";
|
import { useState } from "react";
|
||||||
import SystemGraph from "@/components/graph/SystemGraph";
|
|
||||||
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 { isDesktop, isMobile } from "react-device-detect";
|
||||||
import VainfoDialog from "@/components/overlay/VainfoDialog";
|
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;
|
const metrics = ["general", "storage", "cameras"] as const;
|
||||||
type SystemMetric = (typeof metrics)[number];
|
type SystemMetric = (typeof metrics)[number];
|
||||||
@ -22,6 +18,7 @@ function System() {
|
|||||||
// stats page
|
// stats page
|
||||||
|
|
||||||
const [page, setPage] = useState<SystemMetric>("general");
|
const [page, setPage] = useState<SystemMetric>("general");
|
||||||
|
const [pageToggle, setPageToggle] = useOptimisticState(page, setPage, 100);
|
||||||
const [lastUpdated, setLastUpdated] = useState<number>(Date.now() / 1000);
|
const [lastUpdated, setLastUpdated] = useState<number>(Date.now() / 1000);
|
||||||
|
|
||||||
// stats collection
|
// stats collection
|
||||||
@ -32,26 +29,32 @@ function System() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="size-full p-2 flex flex-col">
|
<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
|
<ToggleGroup
|
||||||
className="*:px-3 *:py-4 *:rounded-md"
|
className="*:px-3 *:py-4 *:rounded-md"
|
||||||
type="single"
|
type="single"
|
||||||
size="sm"
|
size="sm"
|
||||||
value={page}
|
value={pageToggle}
|
||||||
onValueChange={(value: SystemMetric) => {
|
onValueChange={(value: SystemMetric) => {
|
||||||
if (value) {
|
if (value) {
|
||||||
setPage(value);
|
setPageToggle(value);
|
||||||
}
|
}
|
||||||
}} // don't allow the severity to be unselected
|
}} // don't allow the severity to be unselected
|
||||||
>
|
>
|
||||||
{Object.values(metrics).map((item) => (
|
{Object.values(metrics).map((item) => (
|
||||||
<ToggleGroupItem
|
<ToggleGroupItem
|
||||||
key={item}
|
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}
|
value={item}
|
||||||
aria-label={`Select ${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>
|
</ToggleGroupItem>
|
||||||
))}
|
))}
|
||||||
</ToggleGroup>
|
</ToggleGroup>
|
||||||
@ -78,6 +81,7 @@ function System() {
|
|||||||
setLastUpdated={setLastUpdated}
|
setLastUpdated={setLastUpdated}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
{page == "storage" && <StorageMetrics setLastUpdated={setLastUpdated} />}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@ -182,13 +186,13 @@ export default System;
|
|||||||
if (camera.enabled) {
|
if (camera.enabled) {
|
||||||
return (
|
return (
|
||||||
<div key={camera.name} className="grid grid-cols-2">
|
<div key={camera.name} className="grid grid-cols-2">
|
||||||
<SystemGraph
|
<ThresholdBarGraph
|
||||||
graphId={`${camera.name}-cpu`}
|
graphId={`${camera.name}-cpu`}
|
||||||
title={`${camera.name.replaceAll("_", " ")} CPU`}
|
title={`${camera.name.replaceAll("_", " ")} CPU`}
|
||||||
unit="%"
|
unit="%"
|
||||||
data={Object.values(cameraCpuSeries[camera.name] || {})}
|
data={Object.values(cameraCpuSeries[camera.name] || {})}
|
||||||
/>
|
/>
|
||||||
<SystemGraph
|
<ThresholdBarGraph
|
||||||
graphId={`${camera.name}-fps`}
|
graphId={`${camera.name}-fps`}
|
||||||
title={`${camera.name.replaceAll("_", " ")} FPS`}
|
title={`${camera.name.replaceAll("_", " ")} FPS`}
|
||||||
unit=""
|
unit=""
|
||||||
@ -202,401 +206,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) => (
|
|
||||||
<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>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|||||||
441
web/src/views/system/GeneralMetrics.tsx
Normal file
441
web/src/views/system/GeneralMetrics.tsx
Normal file
@ -0,0 +1,441 @@
|
|||||||
|
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";
|
||||||
|
import { Skeleton } from "@/components/ui/skeleton";
|
||||||
|
|
||||||
|
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]);
|
||||||
|
|
||||||
|
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="w-full mt-4 grid grid-cols-1 sm:grid-cols-3 gap-2">
|
||||||
|
{detInferenceTimeSeries.length != 0 ? (
|
||||||
|
<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>
|
||||||
|
) : (
|
||||||
|
<Skeleton className="w-full aspect-video" />
|
||||||
|
)}
|
||||||
|
{statsHistory.length != 0 ? (
|
||||||
|
<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>
|
||||||
|
) : (
|
||||||
|
<Skeleton className="w-full aspect-video" />
|
||||||
|
)}
|
||||||
|
{statsHistory.length != 0 ? (
|
||||||
|
<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>
|
||||||
|
) : (
|
||||||
|
<Skeleton className="w-full aspect-video" />
|
||||||
|
)}
|
||||||
|
</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>
|
||||||
|
{statsHistory.length > 0 &&
|
||||||
|
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">
|
||||||
|
{statsHistory.length != 0 ? (
|
||||||
|
<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>
|
||||||
|
) : (
|
||||||
|
<Skeleton className="w-full aspect-video" />
|
||||||
|
)}
|
||||||
|
{statsHistory.length != 0 ? (
|
||||||
|
<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>
|
||||||
|
) : (
|
||||||
|
<Skeleton className="w-full aspect-video" />
|
||||||
|
)}
|
||||||
|
</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">
|
||||||
|
{statsHistory.length != 0 ? (
|
||||||
|
<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>
|
||||||
|
) : (
|
||||||
|
<Skeleton className="w-full aspect-tall" />
|
||||||
|
)}
|
||||||
|
{statsHistory.length != 0 ? (
|
||||||
|
<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>
|
||||||
|
) : (
|
||||||
|
<Skeleton className="w-full aspect-tall" />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
92
web/src/views/system/StorageMetrics.tsx
Normal file
92
web/src/views/system/StorageMetrics.tsx
Normal file
@ -0,0 +1,92 @@
|
|||||||
|
import { StorageGraph } from "@/components/graph/SystemGraph";
|
||||||
|
import { FrigateStats } from "@/types/stats";
|
||||||
|
import { useMemo } from "react";
|
||||||
|
import useSWR from "swr";
|
||||||
|
|
||||||
|
type CameraStorage = {
|
||||||
|
[key: string]: {
|
||||||
|
bandwidth: number;
|
||||||
|
usage: number;
|
||||||
|
usage_percent: number;
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
type StorageMetricsProps = {
|
||||||
|
setLastUpdated: (last: number) => void;
|
||||||
|
};
|
||||||
|
export default function StorageMetrics({
|
||||||
|
setLastUpdated,
|
||||||
|
}: StorageMetricsProps) {
|
||||||
|
const { data: cameraStorage } = useSWR<CameraStorage>("recordings/storage");
|
||||||
|
const { data: stats } = useSWR<FrigateStats>("stats");
|
||||||
|
|
||||||
|
const totalStorage = useMemo(() => {
|
||||||
|
if (!cameraStorage || !stats) {
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
const totalStorage = {
|
||||||
|
used: 0,
|
||||||
|
total: stats.service.storage["/media/frigate/recordings"]["total"],
|
||||||
|
};
|
||||||
|
|
||||||
|
Object.values(cameraStorage).forEach(
|
||||||
|
(cam) => (totalStorage.used += cam.usage),
|
||||||
|
);
|
||||||
|
setLastUpdated(Date.now() / 1000);
|
||||||
|
return totalStorage;
|
||||||
|
}, [cameraStorage, stats, setLastUpdated]);
|
||||||
|
|
||||||
|
if (!cameraStorage || !stats || !totalStorage) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="size-full mt-4 flex flex-col overflow-y-auto">
|
||||||
|
<div className="text-muted-foreground text-sm font-medium">
|
||||||
|
General Storage
|
||||||
|
</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">Recordings</div>
|
||||||
|
<StorageGraph
|
||||||
|
graphId="general-recordings"
|
||||||
|
used={totalStorage.used}
|
||||||
|
total={totalStorage.total}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="p-2.5 bg-primary rounded-2xl flex-col">
|
||||||
|
<div className="mb-5">/tmp/cache</div>
|
||||||
|
<StorageGraph
|
||||||
|
graphId="general-cache"
|
||||||
|
used={stats.service.storage["/tmp/cache"]["used"]}
|
||||||
|
total={stats.service.storage["/tmp/cache"]["total"]}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="p-2.5 bg-primary rounded-2xl flex-col">
|
||||||
|
<div className="mb-5">/dev/shm</div>
|
||||||
|
<StorageGraph
|
||||||
|
graphId="general-shared-memory"
|
||||||
|
used={stats.service.storage["/dev/shm"]["used"]}
|
||||||
|
total={stats.service.storage["/dev/shm"]["total"]}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="mt-4 text-muted-foreground text-sm font-medium">
|
||||||
|
Camera Storage
|
||||||
|
</div>
|
||||||
|
<div className="mt-4 grid grid-cols-1 sm:grid-cols-3 gap-2">
|
||||||
|
{Object.keys(cameraStorage).map((camera) => (
|
||||||
|
<div className="p-2.5 bg-primary rounded-2xl flex-col">
|
||||||
|
<div className="mb-5 capitalize">{camera.replaceAll("_", " ")}</div>
|
||||||
|
<StorageGraph
|
||||||
|
graphId={`${camera}-storage`}
|
||||||
|
used={cameraStorage[camera].usage}
|
||||||
|
total={totalStorage.used}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user