From 0a1717745487b13afb2dbd3f50f6e5d9a9f94910 Mon Sep 17 00:00:00 2001
From: Nick Mowen <nickmowen213@gmail.com>
Date: Tue, 29 Nov 2022 16:24:23 -0700
Subject: [PATCH] Fix endpoint and ui

---
 frigate/http.py            | 15 ++++++++-------
 frigate/storage.py         |  2 +-
 web/src/routes/Storage.jsx | 31 +++++++++++++++++++++++++++----
 3 files changed, 36 insertions(+), 12 deletions(-)

diff --git a/frigate/http.py b/frigate/http.py
index f0ac3326e..a1f9aea4e 100644
--- a/frigate/http.py
+++ b/frigate/http.py
@@ -692,11 +692,11 @@ def latest_frame(camera_name):
         return "Camera named {} not found".format(camera_name), 404
 
 
-@bp.route("/recordings/storage")
+@bp.route("/recordings/storage", methods=["GET"])
 def get_recordings_storage_usage():
-    recording_stats = stats_snapshot(current_app.stats_tracking)["service"]["storage"][
-        RECORD_DIR
-    ]
+    recording_stats = stats_snapshot(
+        current_app.frigate_config, current_app.stats_tracking
+    )["service"]["storage"][RECORD_DIR]
     total_mb = recording_stats["total"]
 
     camera_usages: dict[
@@ -704,9 +704,10 @@ def get_recordings_storage_usage():
     ] = current_app.storage_maintainer.calculate_camera_usages()
 
     for camera_name in camera_usages.keys():
-        camera_usages[camera_name]["usage_percent"] = (
-            camera_usages[camera_name]["usage"] / total_mb * 100
-        )
+        if camera_usages.get(camera_name, {}).get("usage"):
+            camera_usages[camera_name]["usage_percent"] = (
+                camera_usages.get(camera_name, {}).get("usage", 0) / total_mb
+            ) * 100
 
     return jsonify(camera_usages)
 
diff --git a/frigate/storage.py b/frigate/storage.py
index 55146047b..31d0297c6 100644
--- a/frigate/storage.py
+++ b/frigate/storage.py
@@ -73,7 +73,7 @@ class StorageMaintainer(threading.Thread):
 
             usages[camera] = {
                 "usage": camera_storage,
-                "bandwidth": self.camera_storage_stats[camera]["bandwidth"],
+                "bandwidth": self.camera_storage_stats.get(camera, {}).get("bandwidth", 0),
             }
 
         return usages
diff --git a/web/src/routes/Storage.jsx b/web/src/routes/Storage.jsx
index 2b37718a3..afb9cbe2c 100644
--- a/web/src/routes/Storage.jsx
+++ b/web/src/routes/Storage.jsx
@@ -17,20 +17,18 @@ export default function Storage() {
 
   const { service } = stats || initialStats || emptyObject;
 
-  console.log("Service is " + service);
-
   return (
     <div className="space-y-4 p-2 px-4">
       <Heading>Storage</Heading>
 
-      {!service ? (
+      {(!service || !storage) ? (
         <div>
           <ActivityIndicator />
         </div>
       ) : (
         <Fragment>
           <Heading size="lg">Overview</Heading>
-          <div data-testid="detectors" className="grid grid-cols-1 3xl:grid-cols-3 md:grid-cols-2 gap-4">
+          <div data-testid="detectors" className="grid grid-cols-1 md:grid-cols-2 gap-4">
             <div className="dark:bg-gray-800 shadow-md hover:shadow-lg rounded-lg transition-shadow">
               <div className="text-lg flex justify-between p-4">Data</div>
               <div className="p-2">
@@ -79,6 +77,31 @@ export default function Storage() {
               </div>
             </div>
           </div>
+
+          <Heading size="lg">Cameras</Heading>
+          <div data-testid="detectors" className="grid grid-cols-1 3xl:grid-cols-3 md:grid-cols-2 gap-4">
+            {Object.entries(storage).map(([name, camera]) => (
+              <div key={name} className="dark:bg-gray-800 shadow-md hover:shadow-lg rounded-lg transition-shadow">
+                <div className="text-lg flex justify-between p-4">{name}</div>
+                <div className="p-2">
+                  <Table className="w-full">
+                    <Thead>
+                      <Tr>
+                        <Th>Usage</Th>
+                        <Th>Stream Bandwidth</Th>
+                      </Tr>
+                    </Thead>
+                    <Tbody>
+                      <Tr>
+                        <Td>{Math.round(camera['usage_percent'] ?? 0)}%</Td>
+                        <Td>{camera['bandwidth']} MB/hr</Td>
+                      </Tr>
+                    </Tbody>
+                  </Table>
+                </div>
+              </div>
+            ))}
+          </div>
         </Fragment>
       )}
     </div>