Fix endpoint and ui

This commit is contained in:
Nick Mowen 2022-11-29 16:24:23 -07:00
parent 8afe174e9f
commit 0a17177454
3 changed files with 36 additions and 12 deletions

View File

@ -692,11 +692,11 @@ def latest_frame(camera_name):
return "Camera named {} not found".format(camera_name), 404 return "Camera named {} not found".format(camera_name), 404
@bp.route("/recordings/storage") @bp.route("/recordings/storage", methods=["GET"])
def get_recordings_storage_usage(): def get_recordings_storage_usage():
recording_stats = stats_snapshot(current_app.stats_tracking)["service"]["storage"][ recording_stats = stats_snapshot(
RECORD_DIR current_app.frigate_config, current_app.stats_tracking
] )["service"]["storage"][RECORD_DIR]
total_mb = recording_stats["total"] total_mb = recording_stats["total"]
camera_usages: dict[ camera_usages: dict[
@ -704,9 +704,10 @@ def get_recordings_storage_usage():
] = current_app.storage_maintainer.calculate_camera_usages() ] = current_app.storage_maintainer.calculate_camera_usages()
for camera_name in camera_usages.keys(): for camera_name in camera_usages.keys():
if camera_usages.get(camera_name, {}).get("usage"):
camera_usages[camera_name]["usage_percent"] = ( camera_usages[camera_name]["usage_percent"] = (
camera_usages[camera_name]["usage"] / total_mb * 100 camera_usages.get(camera_name, {}).get("usage", 0) / total_mb
) ) * 100
return jsonify(camera_usages) return jsonify(camera_usages)

View File

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

View File

@ -17,20 +17,18 @@ export default function Storage() {
const { service } = stats || initialStats || emptyObject; const { service } = stats || initialStats || emptyObject;
console.log("Service is " + service);
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 ? ( {(!service || !storage) ? (
<div> <div>
<ActivityIndicator /> <ActivityIndicator />
</div> </div>
) : ( ) : (
<Fragment> <Fragment>
<Heading size="lg">Overview</Heading> <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 data-testid="detectors" 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="text-lg flex justify-between p-4">Data</div> <div className="text-lg flex justify-between p-4">Data</div>
<div className="p-2"> <div className="p-2">
@ -79,6 +77,31 @@ export default function Storage() {
</div> </div>
</div> </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="text-lg flex justify-between p-4">{name}</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']} MB/hr</Td>
</Tr>
</Tbody>
</Table>
</div>
</div>
))}
</div>
</Fragment> </Fragment>
)} )}
</div> </div>