Add basic storage info

This commit is contained in:
Nick Mowen 2022-11-29 13:50:28 -07:00
parent e26f65dff1
commit 8a80116e8c
2 changed files with 75 additions and 9 deletions

View File

@ -71,7 +71,10 @@ class StorageMaintainer(threading.Thread):
.scalar() .scalar()
) )
usages[camera] = {"usage": camera_storage} usages[camera] = {
"usage": camera_storage,
"bandwidth": self.camera_storage_stats[camera]["bandwidth"],
}
return usages return usages

View File

@ -1,21 +1,84 @@
import { h, Fragment } from 'preact'; import { h, Fragment } from 'preact';
import ActivityIndicator from '../components/ActivityIndicator'; import ActivityIndicator from '../components/ActivityIndicator';
import Button from '../components/Button';
import Heading from '../components/Heading'; import Heading from '../components/Heading';
import Link from '../components/Link'; import { useWs } from '../api/ws';
import { useMqtt } from '../api/mqtt';
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 { useCallback } from 'preact/hooks';
const emptyObject = Object.freeze({});
export default function Storage() { export default function Storage() {
const { data: storage } = useSWR('recordings/storage'); const { data: storage } = useSWR('recordings/storage');
const {
value: { payload: stats },
} = useWs('stats');
const { data: initialStats } = useSWR('stats');
const { service = {} } = stats || initialStats || emptyObject;
return ( return (
<div className="space-y-4 p-2 px-4"> <div className="space-y-4 p-2 px-4">
<Heading> <Heading>Storage</Heading>
Storage
</Heading> {!service ? (
<div>
<ActivityIndicator />
</div>
) : (
<Fragment>
<Heading size="lg">Overview</Heading>
<div data-testid="detectors" className="grid grid-cols-1 3xl:grid-cols-3 md:grid-cols-2 gap-4">
<div className="dark:bg-gray-800 shadow-md hover:shadow-lg rounded-lg transition-shadow">
<div className="text-lg flex justify-between p-4">Data</div>
<div className="p-2">
<Table className="w-full">
<Thead>
<Tr>
<Th>Location</Th>
<Th>Used</Th>
<Th>Total</Th>
</Tr>
</Thead>
<Tbody>
<Tr>
<Td>Recordings</Td>
<Td>{service['storage']['/media/frigate/recordings']['used']}</Td>
<Td>{service['storage']['/media/frigate/recordings']['total']}</Td>
</Tr>
</Tbody>
</Table>
</div>
</div>
<div className="dark:bg-gray-800 shadow-md hover:shadow-lg rounded-lg transition-shadow">
<div className="text-lg flex justify-between p-4">Memory</div>
<div className="p-2">
<Table className="w-full">
<Thead>
<Tr>
<Th>Location</Th>
<Th>Used</Th>
<Th>Total</Th>
</Tr>
</Thead>
<Tbody>
<Tr>
<Td>/dev/shm</Td>
<Td>{service['storage']['/dev/shm']['used']}</Td>
<Td>{service['storage']['/dev/shm']['total']}</Td>
</Tr>
<Tr>
<Td>/tmp/cache</Td>
<Td>{service['storage']['/tmp/cache']['used']}</Td>
<Td>{service['storage']['/tmp/cache']['total']}</Td>
</Tr>
</Tbody>
</Table>
</div>
</div>
</div>
</Fragment>
)}
</div> </div>
); );
} }