mirror of
https://github.com/blakeblackshear/frigate.git
synced 2026-02-11 05:35:25 +03:00
Remove storage link
This commit is contained in:
Nicolas Mowen
parent
71276ffb1d
commit
972aee6a55
@ -11,7 +11,6 @@ import { Suspense, lazy } from "react";
|
||||
const Live = lazy(() => import("@/pages/Live"));
|
||||
const Events = lazy(() => import("@/pages/Events"));
|
||||
const Export = lazy(() => import("@/pages/Export"));
|
||||
const Storage = lazy(() => import("@/pages/Storage"));
|
||||
const SubmitPlus = lazy(() => import("@/pages/SubmitPlus"));
|
||||
const ConfigEditor = lazy(() => import("@/pages/ConfigEditor"));
|
||||
const System = lazy(() => import("@/pages/System"));
|
||||
@ -38,7 +37,6 @@ function App() {
|
||||
<Route path="/" element={<Live />} />
|
||||
<Route path="/events" element={<Events />} />
|
||||
<Route path="/export" element={<Export />} />
|
||||
<Route path="/storage" element={<Storage />} />
|
||||
<Route path="/plus" element={<SubmitPlus />} />
|
||||
<Route path="/system" element={<System />} />
|
||||
<Route path="/settings" element={<Settings />} />
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import {
|
||||
LuActivity,
|
||||
LuGithub,
|
||||
LuHardDrive,
|
||||
LuLifeBuoy,
|
||||
@ -150,18 +149,6 @@ export default function GeneralSettings({ className }: GeneralSettings) {
|
||||
<span>Storage</span>
|
||||
</MenuItem>
|
||||
</Link>
|
||||
<Link to="/system">
|
||||
<MenuItem
|
||||
className={
|
||||
isDesktop
|
||||
? "cursor-pointer"
|
||||
: "p-2 flex items-center text-sm"
|
||||
}
|
||||
>
|
||||
<LuActivity className="mr-2 size-4" />
|
||||
<span>System metrics</span>
|
||||
</MenuItem>
|
||||
</Link>
|
||||
<Link to="/logs">
|
||||
<MenuItem
|
||||
className={
|
||||
|
||||
@ -1,245 +0,0 @@
|
||||
import { useWs } from "@/api/ws";
|
||||
import ActivityIndicator from "@/components/indicators/activity-indicator";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import Heading from "@/components/ui/heading";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipProvider,
|
||||
TooltipTrigger,
|
||||
} from "@/components/ui/tooltip";
|
||||
import { useMemo } from "react";
|
||||
import { LuAlertCircle } from "react-icons/lu";
|
||||
import useSWR from "swr";
|
||||
|
||||
type CameraStorage = {
|
||||
[key: string]: {
|
||||
bandwidth: number;
|
||||
usage: number;
|
||||
usage_percent: number;
|
||||
};
|
||||
};
|
||||
|
||||
const emptyObject = Object.freeze({});
|
||||
|
||||
function Storage() {
|
||||
const { data: storage } = useSWR<CameraStorage>("recordings/storage");
|
||||
|
||||
const {
|
||||
value: { payload: stats },
|
||||
} = useWs("stats", "");
|
||||
const { data: initialStats } = useSWR("stats");
|
||||
|
||||
const { service } = stats || initialStats || emptyObject;
|
||||
|
||||
const hasSeparateMedia = useMemo(() => {
|
||||
return (
|
||||
service &&
|
||||
service["storage"]["/media/frigate/recordings"]["total"] !=
|
||||
service["storage"]["/media/frigate/clips"]["total"]
|
||||
);
|
||||
}, [service]);
|
||||
|
||||
const getUnitSize = (MB: number) => {
|
||||
if (isNaN(MB) || MB < 0) return "Invalid number";
|
||||
if (MB < 1024) return `${MB} MiB`;
|
||||
if (MB < 1048576) return `${(MB / 1024).toFixed(2)} GiB`;
|
||||
|
||||
return `${(MB / 1048576).toFixed(2)} TiB`;
|
||||
};
|
||||
|
||||
if (!service || !storage) {
|
||||
return <ActivityIndicator />;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Heading as="h2">Storage</Heading>
|
||||
|
||||
<Heading className="my-4" as="h3">
|
||||
Overview
|
||||
</Heading>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center">
|
||||
<CardTitle>Data</CardTitle>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button size="icon" variant="ghost">
|
||||
<LuAlertCircle />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>
|
||||
Overview of total used storage and total capacity of the
|
||||
drives that hold the recordings and snapshots directories.
|
||||
</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Location</TableHead>
|
||||
<TableHead>Used</TableHead>
|
||||
<TableHead>Total</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell>
|
||||
{hasSeparateMedia ? "Recordings" : "Recordings & Snapshots"}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{getUnitSize(
|
||||
service["storage"]["/media/frigate/recordings"]["used"],
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{getUnitSize(
|
||||
service["storage"]["/media/frigate/recordings"]["total"],
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
{hasSeparateMedia && (
|
||||
<TableRow>
|
||||
<TableCell>Snapshots</TableCell>
|
||||
<TableCell>
|
||||
{getUnitSize(
|
||||
service["storage"]["/media/frigate/clips"]["used"],
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{getUnitSize(
|
||||
service["storage"]["/media/frigate/clips"]["total"],
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center">
|
||||
<CardTitle>Memory</CardTitle>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button size="icon" variant="ghost">
|
||||
<LuAlertCircle />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>Overview of used and total memory in frigate process.</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Location</TableHead>
|
||||
<TableHead>Used</TableHead>
|
||||
<TableHead>Total</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell>/dev/shm</TableCell>
|
||||
<TableCell>
|
||||
{getUnitSize(service["storage"]["/dev/shm"]["used"])}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{getUnitSize(service["storage"]["/dev/shm"]["total"])}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell>/tmp/cache</TableCell>
|
||||
<TableCell>
|
||||
{getUnitSize(service["storage"]["/tmp/cache"]["used"])}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{getUnitSize(service["storage"]["/tmp/cache"]["total"])}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center my-4">
|
||||
<Heading as="h4">Cameras</Heading>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button size="icon" variant="ghost">
|
||||
<LuAlertCircle />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>Overview of per-camera storage usage and bandwidth.</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 2xl:grid-cols-3 gap-4">
|
||||
{Object.entries(storage).map(([name, camera]) => (
|
||||
<Card key={name}>
|
||||
<div className="capitalize text-lg flex justify-between">
|
||||
<Button variant="link">
|
||||
<a className="capitalize" href={`/cameras/${name}`}>
|
||||
{name.replaceAll("_", " ")}
|
||||
</a>
|
||||
</Button>
|
||||
</div>
|
||||
<div className="p-2">
|
||||
<Table className="w-full">
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableCell>Usage</TableCell>
|
||||
<TableCell>Stream Bandwidth</TableCell>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell>
|
||||
{Math.round(camera["usage_percent"] ?? 0)}%
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{camera["bandwidth"]
|
||||
? `${getUnitSize(camera["bandwidth"])}/hr`
|
||||
: "Calculating..."}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default Storage;
|
||||
Loading…
Reference in New Issue
Block a user