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 Live = lazy(() => import("@/pages/Live"));
|
||||||
const Events = lazy(() => import("@/pages/Events"));
|
const Events = lazy(() => import("@/pages/Events"));
|
||||||
const Export = lazy(() => import("@/pages/Export"));
|
const Export = lazy(() => import("@/pages/Export"));
|
||||||
const Storage = lazy(() => import("@/pages/Storage"));
|
|
||||||
const SubmitPlus = lazy(() => import("@/pages/SubmitPlus"));
|
const SubmitPlus = lazy(() => import("@/pages/SubmitPlus"));
|
||||||
const ConfigEditor = lazy(() => import("@/pages/ConfigEditor"));
|
const ConfigEditor = lazy(() => import("@/pages/ConfigEditor"));
|
||||||
const System = lazy(() => import("@/pages/System"));
|
const System = lazy(() => import("@/pages/System"));
|
||||||
@ -38,7 +37,6 @@ function App() {
|
|||||||
<Route path="/" element={<Live />} />
|
<Route path="/" element={<Live />} />
|
||||||
<Route path="/events" element={<Events />} />
|
<Route path="/events" element={<Events />} />
|
||||||
<Route path="/export" element={<Export />} />
|
<Route path="/export" element={<Export />} />
|
||||||
<Route path="/storage" element={<Storage />} />
|
|
||||||
<Route path="/plus" element={<SubmitPlus />} />
|
<Route path="/plus" element={<SubmitPlus />} />
|
||||||
<Route path="/system" element={<System />} />
|
<Route path="/system" element={<System />} />
|
||||||
<Route path="/settings" element={<Settings />} />
|
<Route path="/settings" element={<Settings />} />
|
||||||
|
|||||||
@ -1,5 +1,4 @@
|
|||||||
import {
|
import {
|
||||||
LuActivity,
|
|
||||||
LuGithub,
|
LuGithub,
|
||||||
LuHardDrive,
|
LuHardDrive,
|
||||||
LuLifeBuoy,
|
LuLifeBuoy,
|
||||||
@ -150,18 +149,6 @@ export default function GeneralSettings({ className }: GeneralSettings) {
|
|||||||
<span>Storage</span>
|
<span>Storage</span>
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
</Link>
|
</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">
|
<Link to="/logs">
|
||||||
<MenuItem
|
<MenuItem
|
||||||
className={
|
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