Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2024-11-21 19:07:46 +01:00
Code Issues Projects Releases Wiki Activity

Clarify storage metrics values with a popover (#14034)

Browse Source
This commit is contained in:
Josh Hawkins 2024-09-28 08:24:14 -05:00 committed by GitHub
parent b54032bdc7
commit 7da44115d3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 60 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
web/src/components/graph/CombinedStorageGraph.tsx
View File

@ -10,7 +10,13 @@ import {
TableHeader, TableHeader,
TableRow, TableRow,
} from "@/components/ui/table"; } from "@/components/ui/table";
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover";
import { getUnitSize } from "@/utils/storageUtil"; import { getUnitSize } from "@/utils/storageUtil";
import { LuAlertCircle } from "react-icons/lu";
type CameraStorage = { type CameraStorage = {
[key: string]: { [key: string]: {
@ -50,7 +56,7 @@ export function CombinedStorageGraph({
// Add the unused percentage to the series // Add the unused percentage to the series
series.push({ series.push({
name: "Unused Free Space", name: "Unused",
data: [ data: [
((totalStorage.total - totalStorage.used) / totalStorage.total) * 100, ((totalStorage.total - totalStorage.used) / totalStorage.total) * 100,
], ],
@ -186,11 +192,34 @@ export function CombinedStorageGraph({
style={{ backgroundColor: item.color }} style={{ backgroundColor: item.color }}
></div> ></div>
{item.name.replaceAll("_", " ")} {item.name.replaceAll("_", " ")}
{item.name === "Unused" && (
<Popover>
<PopoverTrigger asChild>
<button
className="focus:outline-none"
aria-label="Unused Storage Information"
>
<LuAlertCircle
className="size-5"
aria-label="Unused Storage Information"
/>
</button>
</PopoverTrigger>
<PopoverContent className="w-80">
<div className="space-y-2">
This value may not accurately represent the free space
available to Frigate if you have other files stored on
your drive beyond Frigate's recordings. Frigate does
not track storage usage outside of its recordings.
</div>
</PopoverContent>
</Popover>
)}
</TableCell> </TableCell>
<TableCell>{getUnitSize(item.usage)}</TableCell> <TableCell>{getUnitSize(item.usage)}</TableCell>
<TableCell>{item.data[0].toFixed(2)}%</TableCell> <TableCell>{item.data[0].toFixed(2)}%</TableCell>
<TableCell> <TableCell>
{item.name === "Unused Free Space" {item.name === "Unused"
? "—" ? "—"
: `${getUnitSize(item.bandwidth)} / hour`} : `${getUnitSize(item.bandwidth)} / hour`}
</TableCell> </TableCell>

30
web/src/views/system/StorageMetrics.tsx
View File

@ -2,7 +2,13 @@ import { CombinedStorageGraph } from "@/components/graph/CombinedStorageGraph";
import { StorageGraph } from "@/components/graph/StorageGraph"; import { StorageGraph } from "@/components/graph/StorageGraph";
import { FrigateStats } from "@/types/stats"; import { FrigateStats } from "@/types/stats";
import { useMemo } from "react"; import { useMemo } from "react";
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover";
import useSWR from "swr"; import useSWR from "swr";
import { LuAlertCircle } from "react-icons/lu";
type CameraStorage = { type CameraStorage = {
[key: string]: { [key: string]: {
@ -47,7 +53,29 @@ export default function StorageMetrics({
<div className="text-sm font-medium text-muted-foreground">Overview</div> <div className="text-sm font-medium text-muted-foreground">Overview</div>
<div className="mt-4 grid grid-cols-1 gap-2 sm:grid-cols-3"> <div className="mt-4 grid grid-cols-1 gap-2 sm:grid-cols-3">
<div className="flex-col rounded-lg bg-background_alt p-2.5 md:rounded-2xl"> <div className="flex-col rounded-lg bg-background_alt p-2.5 md:rounded-2xl">
<div className="mb-5">Recordings</div> <div className="mb-5 flex flex-row items-center justify-between">
Recordings
<Popover>
<PopoverTrigger asChild>
<button
className="focus:outline-none"
aria-label="Unused Storage Information"
>
<LuAlertCircle
className="size-5"
aria-label="Unused Storage Information"
/>
</button>
</PopoverTrigger>
<PopoverContent className="w-80">
<div className="space-y-2">
This value represents the total storage used by the recordings
in Frigate's database. Frigate does not track storage usage
for all files on your disk.
</div>
</PopoverContent>
</Popover>
</div>
<StorageGraph <StorageGraph
graphId="general-recordings" graphId="general-recordings"
used={totalStorage.used} used={totalStorage.used}