From 7da44115d34d2827cab3c6f6b0cfab383d23677b Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Sat, 28 Sep 2024 08:24:14 -0500
Subject: [PATCH] Clarify storage metrics values with a popover (#14034)

---
 .../components/graph/CombinedStorageGraph.tsx | 33 +++++++++++++++++--
 web/src/views/system/StorageMetrics.tsx       | 30 ++++++++++++++++-
 2 files changed, 60 insertions(+), 3 deletions(-)

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 }}
                   ></div>
                   {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>{getUnitSize(item.usage)}</TableCell>
                 <TableCell>{item.data[0].toFixed(2)}%</TableCell>
                 <TableCell>
-                  {item.name === "Unused Free Space"
+                  {item.name === "Unused"
                     ? "—"
                     : `${getUnitSize(item.bandwidth)} / hour`}
                 </TableCell>
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({
       <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="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
             graphId="general-recordings"
             used={totalStorage.used}