chris/frigate
1
0
Fork 0
forked from Github/frigate
Code Pull Requests Packages Activity

Use new UI (#8983)

Browse Source 
* fixup build

* swap frontends
This commit is contained in:
Blake Blackshear
2023-12-16 16:20:59 +00:00
parent a2c6f45454
commit bdebb99b5a
286 changed files with 20010 additions and 20007 deletions
Download Patch File Download Diff File Expand all files Collapse all files

245
web/src/pages/Storage.tsx Normal file
View File

@@ -0,0 +1,245 @@
import { useWs } from "@/api/ws";
import ActivityIndicator from "@/components/ui/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;