diff --git a/web/src/components/graph/CombinedStorageGraph.tsx b/web/src/components/graph/CombinedStorageGraph.tsx index 1a72f8c88..ff605ac02 100644 --- a/web/src/components/graph/CombinedStorageGraph.tsx +++ b/web/src/components/graph/CombinedStorageGraph.tsx @@ -10,7 +10,13 @@ import { TableHeader, TableRow, } from "@/components/ui/table"; +import { + Popover, + PopoverContent, + PopoverTrigger, +} from "@/components/ui/popover"; import { getUnitSize } from "@/utils/storageUtil"; +import { LuAlertCircle } from "react-icons/lu"; type CameraStorage = { [key: string]: { @@ -50,7 +56,7 @@ export function CombinedStorageGraph({ // Add the unused percentage to the series series.push({ - name: "Unused Free Space", + name: "Unused", data: [ ((totalStorage.total - totalStorage.used) / totalStorage.total) * 100, ], @@ -186,11 +192,34 @@ export function CombinedStorageGraph({ style={{ backgroundColor: item.color }} > {item.name.replaceAll("_", " ")} + {item.name === "Unused" && ( + + + + + +
+ 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. +
+
+
+ )} {getUnitSize(item.usage)} {item.data[0].toFixed(2)}% - {item.name === "Unused Free Space" + {item.name === "Unused" ? "—" : `${getUnitSize(item.bandwidth)} / hour`} diff --git a/web/src/views/system/StorageMetrics.tsx b/web/src/views/system/StorageMetrics.tsx index 8bfa8b51f..746adf45a 100644 --- a/web/src/views/system/StorageMetrics.tsx +++ b/web/src/views/system/StorageMetrics.tsx @@ -2,7 +2,13 @@ import { CombinedStorageGraph } from "@/components/graph/CombinedStorageGraph"; import { StorageGraph } from "@/components/graph/StorageGraph"; import { FrigateStats } from "@/types/stats"; import { useMemo } from "react"; +import { + Popover, + PopoverContent, + PopoverTrigger, +} from "@/components/ui/popover"; import useSWR from "swr"; +import { LuAlertCircle } from "react-icons/lu"; type CameraStorage = { [key: string]: { @@ -47,7 +53,29 @@ export default function StorageMetrics({
Overview
-
Recordings
+
+ Recordings + + + + + +
+ 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. +
+
+
+