administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-05 02:35:22 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Include storage in tooltips

Browse Source
This commit is contained in:
Nick Mowen 2023-05-02 21:37:49 -06:00
parent 64fd3be50f
commit 24a1b1d50f
1 changed files with 36 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
web/src/routes/Storage.jsx
View File

@ -5,6 +5,8 @@ import { useWs } from '../api/ws';
import useSWR from 'swr'; import useSWR from 'swr';
import { Table, Tbody, Thead, Tr, Th, Td } from '../components/Table'; import { Table, Tbody, Thead, Tr, Th, Td } from '../components/Table';
import Link from '../components/Link'; import Link from '../components/Link';
import Button from '../components/Button';
import { About } from '../icons/About';
const emptyObject = Object.freeze({}); const emptyObject = Object.freeze({});
@ -66,9 +68,19 @@ export default function Storage() {
<Fragment> <Fragment>
<Heading size="lg">Overview</Heading> <Heading size="lg">Overview</Heading>
<div data-testid="detectors" className="grid grid-cols-1 md:grid-cols-2 gap-4"> <div data-testid="overview-types" className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="dark:bg-gray-800 shadow-md hover:shadow-lg rounded-lg transition-shadow"> <div className="dark:bg-gray-800 shadow-md hover:shadow-lg rounded-lg transition-shadow">
<div className="flex justify-start">
<div className="text-lg flex justify-between p-4">Data</div> <div className="text-lg flex justify-between p-4">Data</div>
<Button
className="rounded-full"
type="text"
color="gray"
aria-label="Overview of total used storage and total capacity of the drives that hold the recordings and snapshots directories."
>
<About className="w-5" />
</Button>
</div>
<div className="p-2"> <div className="p-2">
<Table className="w-full"> <Table className="w-full">
<Thead> <Thead>
@ -83,7 +95,17 @@ export default function Storage() {
</div> </div>
</div> </div>
<div className="dark:bg-gray-800 shadow-md hover:shadow-lg rounded-lg transition-shadow"> <div className="dark:bg-gray-800 shadow-md hover:shadow-lg rounded-lg transition-shadow">
<div className="flex justify-start">
<div className="text-lg flex justify-between p-4">Memory</div> <div className="text-lg flex justify-between p-4">Memory</div>
<Button
className="rounded-full"
type="text"
color="gray"
aria-label="Overview of used and total memory in frigate process."
>
<About className="w-5" />
</Button>
</div>
<div className="p-2"> <div className="p-2">
<Table className="w-full"> <Table className="w-full">
<Thead> <Thead>
@ -110,7 +132,17 @@ export default function Storage() {
</div> </div>
</div> </div>
<div className="flex justify-start">
<Heading size="lg">Cameras</Heading> <Heading size="lg">Cameras</Heading>
<Button
className="rounded-full"
type="text"
color="gray"
aria-label="Overview of per-camera storage usage and bandwidth."
>
<About className="w-5" />
</Button>
</div>
<div data-testid="detectors" className="grid grid-cols-1 3xl:grid-cols-3 md:grid-cols-2 gap-4"> <div data-testid="detectors" className="grid grid-cols-1 3xl:grid-cols-3 md:grid-cols-2 gap-4">
{Object.entries(storage).map(([name, camera]) => ( {Object.entries(storage).map(([name, camera]) => (
<div key={name} className="dark:bg-gray-800 shadow-md hover:shadow-lg rounded-lg transition-shadow"> <div key={name} className="dark:bg-gray-800 shadow-md hover:shadow-lg rounded-lg transition-shadow">