administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-07 19:55:26 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Add storage

Browse Source
This commit is contained in:
Nick Mowen 2023-12-12 12:56:18 -07:00
parent 021c0adff6
commit 578e6ee645
1 changed files with 60 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
web-new/src/pages/Storage.tsx
View File

@ -65,7 +65,9 @@ function Storage() {
<> <>
<Heading as="h2">Storage</Heading> <Heading as="h2">Storage</Heading>
<Heading as="h3">Overview</Heading> <Heading className="my-4" as="h3">
Overview
</Heading>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4"> <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<Card> <Card>
<CardHeader> <CardHeader>
@ -79,7 +81,10 @@ function Storage() {
</Button> </Button>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent> <TooltipContent>
<p>Overview of total used storage and total capacity of the drives that hold the recordings and snapshots directories.</p> <p>
Overview of total used storage and total capacity of the
drives that hold the recordings and snapshots directories.
</p>
</TooltipContent> </TooltipContent>
</Tooltip> </Tooltip>
</TooltipProvider> </TooltipProvider>
@ -181,6 +186,58 @@ function Storage() {
</CardContent> </CardContent>
</Card> </Card>
</div> </div>
<div className="flex bg-center snap-center text-center 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>
</> </>
); );
} }