Add camera bandwidth back in storage metrics (#13436)

web/src/components/graph/StorageGraph.tsx

@@ -1,14 +1,7 @@
 import { useTheme } from "@/context/theme-provider";
 import { useEffect, useMemo } from "react";
 import Chart from "react-apexcharts";
-
+import { getUnitSize } from "@/utils/storageUtil";
-const getUnitSize = (MB: number) => {
-  if (MB === null || isNaN(MB) || MB < 0) return "Invalid number";
-  if (MB < 1024) return `${MB.toFixed(2)} MiB`;
-  if (MB < 1048576) return `${(MB / 1024).toFixed(2)} GiB`;
-
-  return `${(MB / 1048576).toFixed(2)} TiB`;
-};
 
 type StorageGraphProps = {
   graphId: string;

web/src/utils/storageUtil.ts

@@ -0,0 +1,7 @@
+export const getUnitSize = (MB: number) => {
+  if (MB === null || isNaN(MB) || MB < 0) return "Invalid number";
+  if (MB < 1024) return `${MB.toFixed(2)} MiB`;
+  if (MB < 1048576) return `${(MB / 1024).toFixed(2)} GiB`;
+
+  return `${(MB / 1048576).toFixed(2)} TiB`;
+};

web/src/views/system/StorageMetrics.tsx

@@ -1,5 +1,6 @@
 import { StorageGraph } from "@/components/graph/StorageGraph";
 import { FrigateStats } from "@/types/stats";
+import { getUnitSize } from "@/utils/storageUtil";
 import { useMemo } from "react";
 import useSWR from "swr";
 
@@ -76,7 +77,12 @@ export default function StorageMetrics({
       <div className="mt-4 grid grid-cols-1 gap-2 sm:grid-cols-3">
         {Object.keys(cameraStorage).map((camera) => (
           <div className="flex-col rounded-lg bg-background_alt p-2.5 md:rounded-2xl">
-            <div className="mb-5 capitalize">{camera.replaceAll("_", " ")}</div>
+            <div className="mb-5 flex flex-row items-center justify-between">
+              <div className="capitalize">{camera.replaceAll("_", " ")}</div>
+              <div className="text-xs text-muted-foreground">
+                {getUnitSize(cameraStorage[camera].bandwidth)} / hour
+              </div>
+            </div>
             <StorageGraph
               graphId={`${camera}-storage`}
               used={cameraStorage[camera].usage}