From f25b329909d58a75c55071ed06e70fb489d8f669 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Thu, 4 Apr 2024 09:14:30 -0600
Subject: [PATCH] Show camera storage usage

---
 web/src/components/graph/SystemGraph.tsx | 17 +++----
 web/src/pages/System.tsx                 |  7 +--
 web/src/views/system/StorageMetrics.tsx  | 57 +++++++++++++++++++-----
 3 files changed, 55 insertions(+), 26 deletions(-)

diff --git a/web/src/components/graph/SystemGraph.tsx b/web/src/components/graph/SystemGraph.tsx
index 36f90ce71..492f51187 100644
--- a/web/src/components/graph/SystemGraph.tsx
+++ b/web/src/components/graph/SystemGraph.tsx
@@ -137,14 +137,8 @@ type StorageGraphProps = {
   graphId: string;
   used: number;
   total: number;
-  data: ApexAxisChartSeries;
 };
-export function StorageGraph({
-  graphId,
-  used,
-  total,
-  data,
-}: StorageGraphProps) {
+export function StorageGraph({ graphId, used, total }: StorageGraphProps) {
   const { theme, systemTheme } = useTheme();
 
   const options = useMemo(() => {
@@ -225,7 +219,14 @@ export function StorageGraph({
         </div>
       </div>
       <div className="h-5 rounded-md overflow-hidden">
-        <Chart type="bar" options={options} series={data} height="100%" />
+        <Chart
+          type="bar"
+          options={options}
+          series={[
+            { data: [{ x: "storage", y: Math.round((used / total) * 100) }] },
+          ]}
+          height="100%"
+        />
       </div>
     </div>
   );
diff --git a/web/src/pages/System.tsx b/web/src/pages/System.tsx
index af81543be..f2748ab43 100644
--- a/web/src/pages/System.tsx
+++ b/web/src/pages/System.tsx
@@ -71,12 +71,7 @@ function System() {
           setLastUpdated={setLastUpdated}
         />
       )}
-      {page == "storage" && (
-        <StorageMetrics
-          lastUpdated={lastUpdated}
-          setLastUpdated={setLastUpdated}
-        />
-      )}
+      {page == "storage" && <StorageMetrics setLastUpdated={setLastUpdated} />}
     </div>
   );
 }
diff --git a/web/src/views/system/StorageMetrics.tsx b/web/src/views/system/StorageMetrics.tsx
index d428aba4f..d275e72fe 100644
--- a/web/src/views/system/StorageMetrics.tsx
+++ b/web/src/views/system/StorageMetrics.tsx
@@ -1,4 +1,5 @@
 import { StorageGraph } from "@/components/graph/SystemGraph";
+import { FrigateStats } from "@/types/stats";
 import { useMemo } from "react";
 import useSWR from "swr";
 
@@ -11,30 +12,32 @@ type CameraStorage = {
 };
 
 type StorageMetricsProps = {
-  lastUpdated: number;
   setLastUpdated: (last: number) => void;
 };
 export default function StorageMetrics({
-  lastUpdated,
   setLastUpdated,
 }: StorageMetricsProps) {
-  const { data: storage } = useSWR<CameraStorage>("recordings/storage");
+  const { data: cameraStorage } = useSWR<CameraStorage>("recordings/storage");
+  const { data: stats } = useSWR<FrigateStats>("stats");
 
   const totalStorage = useMemo(() => {
-    if (!storage) {
+    if (!cameraStorage || !stats) {
       return undefined;
     }
 
     const totalStorage = {
-      total: 0,
+      used: 0,
+      total: stats.service.storage["/media/frigate/recordings"]["total"],
     };
 
-    Object.values(storage).forEach((cam) => (totalStorage.total += cam.usage));
-
+    Object.values(cameraStorage).forEach(
+      (cam) => (totalStorage.used += cam.usage),
+    );
+    setLastUpdated(Date.now() / 1000);
     return totalStorage;
-  }, [storage]);
+  }, [cameraStorage, stats, setLastUpdated]);
 
-  if (!totalStorage) {
+  if (!cameraStorage || !stats || !totalStorage) {
     return;
   }
 
@@ -48,11 +51,41 @@ export default function StorageMetrics({
           <div className="mb-5">Recordings</div>
           <StorageGraph
             graphId="general-recordings"
-            used={1000000}
-            total={5000000}
-            data={[{ name: "Recordings", data: [{ x: "Recordings", y: 25 }] }]}
+            used={totalStorage.used}
+            total={totalStorage.total}
           />
         </div>
+        <div className="p-2.5 bg-primary rounded-2xl flex-col">
+          <div className="mb-5">/tmp/cache</div>
+          <StorageGraph
+            graphId="general-cache"
+            used={stats.service.storage["/tmp/cache"]["used"]}
+            total={stats.service.storage["/tmp/cache"]["total"]}
+          />
+        </div>
+        <div className="p-2.5 bg-primary rounded-2xl flex-col">
+          <div className="mb-5">/dev/shm</div>
+          <StorageGraph
+            graphId="general-shared-memory"
+            used={stats.service.storage["/dev/shm"]["used"]}
+            total={stats.service.storage["/dev/shm"]["total"]}
+          />
+        </div>
+      </div>
+      <div className="mt-4 text-muted-foreground text-sm font-medium">
+        Camera Storage
+      </div>
+      <div className="mt-4 grid grid-cols-1 sm:grid-cols-3 gap-2">
+        {Object.keys(cameraStorage).map((camera) => (
+          <div className="p-2.5 bg-primary rounded-2xl flex-col">
+            <div className="mb-5 capitalize">{camera.replaceAll("_", " ")}</div>
+            <StorageGraph
+              graphId={`${camera}-storage`}
+              used={cameraStorage[camera].usage}
+              total={totalStorage.used}
+            />
+          </div>
+        ))}
       </div>
     </div>
   );