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

Fix preload

Browse Source
This commit is contained in:
Nick Mowen 2023-01-13 08:29:53 -07:00
parent 2665a05292
commit 7e0e1b696a
1 changed files with 63 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -18,6 +18,10 @@ export default function Storage() {
const { service } = stats || initialStats || emptyObject; const { service } = stats || initialStats || emptyObject;
if (!service || !storage) {
return <ActivityIndicator />;
}
let storage_usage; let storage_usage;
if ( if (
service && service &&
@ -53,85 +57,79 @@ export default function Storage() {
<div className="space-y-4 p-2 px-4"> <div className="space-y-4 p-2 px-4">
<Heading>Storage</Heading> <Heading>Storage</Heading>
{!service || !storage ? ( <Fragment>
<div> <Heading size="lg">Overview</Heading>
<ActivityIndicator /> <div data-testid="detectors" className="grid grid-cols-1 md:grid-cols-2 gap-4">
</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">Data</div>
<Fragment> <div className="p-2">
<Heading size="lg">Overview</Heading> <Table className="w-full">
<div data-testid="detectors" className="grid grid-cols-1 md:grid-cols-2 gap-4"> <Thead>
<div className="dark:bg-gray-800 shadow-md hover:shadow-lg rounded-lg transition-shadow"> <Tr>
<div className="text-lg flex justify-between p-4">Data</div> <Th>Location</Th>
<div className="p-2"> <Th>Used MB</Th>
<Table className="w-full"> <Th>Total MB</Th>
<Thead> </Tr>
<Tr> </Thead>
<Th>Location</Th> <Tbody>{storage_usage}</Tbody>
<Th>Used MB</Th> </Table>
<Th>Total MB</Th>
</Tr>
</Thead>
<Tbody>{storage_usage}</Tbody>
</Table>
</div>
</div> </div>
<div className="dark:bg-gray-800 shadow-md hover:shadow-lg rounded-lg transition-shadow"> </div>
<div className="text-lg flex justify-between p-4">Memory</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 MB</Th>
<Th>Total MB</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>
<Heading size="lg">Cameras</Heading>
<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]) => (
<div key={name} className="dark:bg-gray-800 shadow-md hover:shadow-lg rounded-lg transition-shadow">
<div className="capitalize text-lg flex justify-between p-4">
<Link href={`/cameras/${name}`}>{name.replaceAll('_', ' ')}</Link>
</div>
<div className="p-2"> <div className="p-2">
<Table className="w-full"> <Table className="w-full">
<Thead> <Thead>
<Tr> <Tr>
<Th>Location</Th> <Th>Usage</Th>
<Th>Used MB</Th> <Th>Stream Bandwidth</Th>
<Th>Total MB</Th>
</Tr> </Tr>
</Thead> </Thead>
<Tbody> <Tbody>
<Tr> <Tr>
<Td>/dev/shm</Td> <Td>{Math.round(camera['usage_percent'] ?? 0)}%</Td>
<Td>{service['storage']['/dev/shm']['used']}</Td> <Td>{camera['bandwidth'] ? camera['bandwidth'] : 'Calculating...'} MB/hr</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> </Tr>
</Tbody> </Tbody>
</Table> </Table>
</div> </div>
</div> </div>
</div> ))}
</div>
<Heading size="lg">Cameras</Heading> </Fragment>
<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]) => (
<div key={name} className="dark:bg-gray-800 shadow-md hover:shadow-lg rounded-lg transition-shadow">
<div className="capitalize text-lg flex justify-between p-4">
<Link href={`/cameras/${name}`}>{name.replaceAll('_', ' ')}</Link>
</div>
<div className="p-2">
<Table className="w-full">
<Thead>
<Tr>
<Th>Usage</Th>
<Th>Stream Bandwidth</Th>
</Tr>
</Thead>
<Tbody>
<Tr>
<Td>{Math.round(camera['usage_percent'] ?? 0)}%</Td>
<Td>{camera['bandwidth'] ? camera['bandwidth'] : 'Calculating...'} MB/hr</Td>
</Tr>
</Tbody>
</Table>
</div>
</div>
))}
</div>
</Fragment>
)}
</div> </div>
); );
} }