Fix endpoint and ui

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():
+        if camera_usages.get(camera_name, {}).get("usage"):
             camera_usages[camera_name]["usage_percent"] = (
-            camera_usages[camera_name]["usage"] / total_mb * 100
-        )
+                camera_usages.get(camera_name, {}).get("usage", 0) / total_mb
+            ) * 100
 
     return jsonify(camera_usages)
 

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

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>