From 4ec136cab01742290f15ac57aa06bcbfc7980540 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Fri, 30 Aug 2024 08:11:54 -0500
Subject: [PATCH] Add camera bandwidth back in storage metrics (#13436)

---
 web/src/components/graph/StorageGraph.tsx | 9 +--------
 web/src/utils/storageUtil.ts              | 7 +++++++
 web/src/views/system/StorageMetrics.tsx   | 8 +++++++-
 3 files changed, 15 insertions(+), 9 deletions(-)
 create mode 100644 web/src/utils/storageUtil.ts

diff --git a/web/src/components/graph/StorageGraph.tsx b/web/src/components/graph/StorageGraph.tsx
index 3f9bdbf31..a02127398 100644
--- a/web/src/components/graph/StorageGraph.tsx
+++ b/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";
-
-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`;
-};
+import { getUnitSize } from "@/utils/storageUtil";
 
 type StorageGraphProps = {
   graphId: string;
diff --git a/web/src/utils/storageUtil.ts b/web/src/utils/storageUtil.ts
new file mode 100644
index 000000000..b9aef0095
--- /dev/null
+++ b/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`;
+};
diff --git a/web/src/views/system/StorageMetrics.tsx b/web/src/views/system/StorageMetrics.tsx
index c6e6af86b..8db327f1d 100644
--- a/web/src/views/system/StorageMetrics.tsx
+++ b/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}