Move each camera to a separate card and show per process info

This commit is contained in:
Nick Mowen 2022-11-09 12:13:24 -07:00
parent 9c9220979e
commit 997bc0845b
2 changed files with 42 additions and 23 deletions

View File

@ -90,6 +90,7 @@ def stats_snapshot(stats_tracking: StatsTrackingTypes) -> dict[str, Any]:
for name, camera_stats in camera_metrics.items(): for name, camera_stats in camera_metrics.items():
total_detection_fps += camera_stats["detection_fps"].value total_detection_fps += camera_stats["detection_fps"].value
pid = camera_stats["process"].pid if camera_stats["process"] else None pid = camera_stats["process"].pid if camera_stats["process"] else None
ffmpeg_pid = camera_stats["ffmpeg_pid"].value if camera_stats["ffmpeg_pid"] else None
cpid = ( cpid = (
camera_stats["capture_process"].pid camera_stats["capture_process"].pid
if camera_stats["capture_process"] if camera_stats["capture_process"]
@ -102,6 +103,7 @@ def stats_snapshot(stats_tracking: StatsTrackingTypes) -> dict[str, Any]:
"detection_fps": round(camera_stats["detection_fps"].value, 2), "detection_fps": round(camera_stats["detection_fps"].value, 2),
"pid": pid, "pid": pid,
"capture_pid": cpid, "capture_pid": cpid,
"ffmpeg_pid": ffmpeg_pid,
} }
stats["detectors"] = {} stats["detectors"] = {}

View File

@ -67,29 +67,46 @@ export default function Debug() {
</Table> </Table>
</div> </div>
<div data-testid="cameras" className="min-w-0 overflow-auto"> <Heading>
<Table className="w-full"> Cameras
<Thead> </Heading>
<Tr> <div data-testid="cameras" className="min-w-0 overflow-auto">
<Th>camera</Th>
{cameraDataKeys.map((name) => ( {cameraNames.map((camera, i) => (
<Th key={name}>{name.replace('_', ' ')}</Th> <div className='dark:bg-gray-800 shadow-md hover:shadow-lg rounded-lg transition-shadow p-4 m-2'>
))} <div className='text-lg flex justify-between'>
</Tr> <Link href={`/cameras/${camera}`}>{camera.replaceAll('_', ' ')}</Link>
</Thead> <div className='text-sm'>
<Tbody> ffprobe
{cameraNames.map((camera, i) => ( </div>
<Tr key={i} index={i}> </div>
<Td> <div className='p-4'>
<Link href={`/cameras/${camera}`}>{camera.replaceAll('_', ' ')}</Link> <Table className='w-full'>
</Td> <Thead>
{cameraDataKeys.map((name) => ( <Tr>
<Td key={`${name}-${camera}`}>{cameras[camera][name]}</Td> <Th>Processes</Th>
))} <Th>Process ID</Th>
</Tr> <Th>Cpu Usage</Th>
))} </Tr>
</Tbody> </Thead>
</Table> <Tbody>
<Tr key='capture' index='0'>
<Td>Capture</Td>
<Td>{cameras[camera]['capture_pid']}</Td>
<Td>25%</Td>
</Tr>
<Tr key='detect' index='0'>
<Td>Detect</Td>
<Td>{cameras[camera]['pid']}</Td>
<Td>2%</Td>
</Tr>
</Tbody>
</Table>
</div>
</div>
))}
</div> </div>
<p>Debug stats update automatically every {config.mqtt.stats_interval} seconds.</p> <p>Debug stats update automatically every {config.mqtt.stats_interval} seconds.</p>