Show recording and snapshot storage separately if different sizes (#5072)

* Show recording and snapshot storage separately if different sizes

* Fix preload

* Fix compare
This commit is contained in:
Nicolas Mowen 2023-01-13 16:13:21 -07:00 committed by GitHub
parent 7fbfdb3cb8
commit dafc7edb59
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -18,15 +18,45 @@ export default function Storage() {
const { service } = stats || initialStats || emptyObject; const { service } = stats || initialStats || emptyObject;
if (!service || !storage) {
return <ActivityIndicator />;
}
let storage_usage;
if (
service &&
service['storage']['/media/frigate/recordings']['total'] != service['storage']['/media/frigate/clips']['total']
) {
storage_usage = (
<Fragment>
<Tr>
<Td>Recordings</Td>
<Td>{service['storage']['/media/frigate/recordings']['used']}</Td>
<Td>{service['storage']['/media/frigate/recordings']['total']}</Td>
</Tr>
<Tr>
<Td>Snapshots</Td>
<Td>{service['storage']['/media/frigate/clips']['used']}</Td>
<Td>{service['storage']['/media/frigate/clips']['total']}</Td>
</Tr>
</Fragment>
);
} else {
storage_usage = (
<Fragment>
<Tr>
<Td>Recordings & Snapshots</Td>
<Td>{service['storage']['/media/frigate/recordings']['used']}</Td>
<Td>{service['storage']['/media/frigate/recordings']['total']}</Td>
</Tr>
</Fragment>
);
}
return ( return (
<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) ? (
<div>
<ActivityIndicator />
</div>
) : (
<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="detectors" className="grid grid-cols-1 md:grid-cols-2 gap-4">
@ -41,13 +71,7 @@ export default function Storage() {
<Th>Total MB</Th> <Th>Total MB</Th>
</Tr> </Tr>
</Thead> </Thead>
<Tbody> <Tbody>{storage_usage}</Tbody>
<Tr>
<Td>Snapshots & Recordings</Td>
<Td>{service['storage']['/media/frigate/recordings']['used']}</Td>
<Td>{service['storage']['/media/frigate/recordings']['total']}</Td>
</Tr>
</Tbody>
</Table> </Table>
</div> </div>
</div> </div>
@ -97,7 +121,7 @@ export default function Storage() {
<Tbody> <Tbody>
<Tr> <Tr>
<Td>{Math.round(camera['usage_percent'] ?? 0)}%</Td> <Td>{Math.round(camera['usage_percent'] ?? 0)}%</Td>
<Td>{camera['bandwidth'] ? camera['bandwidth'] : "Calculating..."} MB/hr</Td> <Td>{camera['bandwidth'] ? camera['bandwidth'] : 'Calculating...'} MB/hr</Td>
</Tr> </Tr>
</Tbody> </Tbody>
</Table> </Table>
@ -106,7 +130,6 @@ export default function Storage() {
))} ))}
</div> </div>
</Fragment> </Fragment>
)}
</div> </div>
); );
} }