From 154246331ce589fc1f5c3ea8bfb3d90f1d502923 Mon Sep 17 00:00:00 2001
From: jon <iam.rans0m00@gmail.com>
Date: Sun, 1 Mar 2026 16:25:29 -0600
Subject: [PATCH] feat: add storage breakdown display to metrics page

Shows recording storage split into three categories:
- Continuous (overwritable): footage eligible for rollover
- Events (aging out): recordings tied to active alerts/detections
- Protected (indefinite): recordings marked retain indefinitely
---
 web/src/views/system/StorageMetrics.tsx | 42 ++++++++++++++++++++++++-
 1 file changed, 41 insertions(+), 1 deletion(-)

diff --git a/web/src/views/system/StorageMetrics.tsx b/web/src/views/system/StorageMetrics.tsx
index 2c222d6c3..f911ad28f 100644
--- a/web/src/views/system/StorageMetrics.tsx
+++ b/web/src/views/system/StorageMetrics.tsx
@@ -9,7 +9,7 @@ import {
 } from "@/components/ui/popover";
 import useSWR from "swr";
 import { CiCircleAlert } from "react-icons/ci";
-import { FrigateConfig } from "@/types/frigateConfig";
+import { FrigateConfig, StorageBreakdown } from "@/types/frigateConfig";
 import { useFormattedTimestamp, useTimezone } from "@/hooks/use-date-utils";
 import { RecordingsSummary } from "@/types/review";
 import { useTranslation } from "react-i18next";
@@ -35,6 +35,9 @@ export default function StorageMetrics({
 }: StorageMetricsProps) {
   const { data: cameraStorage } = useSWR<CameraStorage>("recordings/storage");
   const { data: stats } = useSWR<FrigateStats>("stats");
+  const { data: storageBreakdown } = useSWR<StorageBreakdown>(
+    "recordings/storage/breakdown",
+  );
   const { data: config } = useSWR<FrigateConfig>("config", {
     revalidateOnFocus: false,
   });
@@ -128,6 +131,43 @@ export default function StorageMetrics({
             used={totalStorage.camera}
             total={totalStorage.total}
           />
+          {storageBreakdown && (
+            <div className="mt-3 space-y-1 text-xs">
+              <div className="flex justify-between text-primary-variant">
+                <span>
+                  {t(
+                    "storage.breakdown.overwritable",
+                    "Continuous (overwritable)",
+                  )}
+                </span>
+                <span>
+                  {(storageBreakdown.overwritable / 1024).toFixed(1)} GB
+                </span>
+              </div>
+              <div className="flex justify-between text-primary-variant">
+                <span>
+                  {t(
+                    "storage.breakdown.eventRetention",
+                    "Events (aging out)",
+                  )}
+                </span>
+                <span>
+                  {(storageBreakdown.event_retention / 1024).toFixed(1)} GB
+                </span>
+              </div>
+              <div className="flex justify-between text-primary-variant">
+                <span>
+                  {t(
+                    "storage.breakdown.protected",
+                    "Protected (indefinite)",
+                  )}
+                </span>
+                <span>
+                  {(storageBreakdown.protected / 1024).toFixed(1)} GB
+                </span>
+              </div>
+            </div>
+          )}
           {earliestDate && (
             <div className="mt-2 text-xs text-primary-variant">
               <span className="font-medium">