Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2025-03-09 00:16:54 +01:00
Code Issues Projects Releases Wiki Activity

Add camera bandwidth back in storage metrics (#13436)

Browse Source
This commit is contained in:
Josh Hawkins 2024-08-30 08:11:54 -05:00 committed by GitHub
parent cf7718132a
commit 4ec136cab0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 15 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
web/src/components/graph/StorageGraph.tsx
View File

@ -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;

7
web/src/utils/storageUtil.ts Normal file
View File

@ -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`;
};

8
web/src/views/system/StorageMetrics.tsx
View File

@ -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}