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>
<Heading>
Cameras
</Heading>
<div data-testid="cameras" className="min-w-0 overflow-auto"> <div data-testid="cameras" className="min-w-0 overflow-auto">
<Table className="w-full">
{cameraNames.map((camera, i) => (
<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'>
<Link href={`/cameras/${camera}`}>{camera.replaceAll('_', ' ')}</Link>
<div className='text-sm'>
ffprobe
</div>
</div>
<div className='p-4'>
<Table className='w-full'>
<Thead> <Thead>
<Tr> <Tr>
<Th>camera</Th> <Th>Processes</Th>
{cameraDataKeys.map((name) => ( <Th>Process ID</Th>
<Th key={name}>{name.replace('_', ' ')}</Th> <Th>Cpu Usage</Th>
))}
</Tr> </Tr>
</Thead> </Thead>
<Tbody> <Tbody>
{cameraNames.map((camera, i) => ( <Tr key='capture' index='0'>
<Tr key={i} index={i}> <Td>Capture</Td>
<Td> <Td>{cameras[camera]['capture_pid']}</Td>
<Link href={`/cameras/${camera}`}>{camera.replaceAll('_', ' ')}</Link> <Td>25%</Td>
</Td> </Tr>
{cameraDataKeys.map((name) => ( <Tr key='detect' index='0'>
<Td key={`${name}-${camera}`}>{cameras[camera][name]}</Td> <Td>Detect</Td>
))} <Td>{cameras[camera]['pid']}</Td>
<Td>2%</Td>
</Tr> </Tr>
))}
</Tbody> </Tbody>
</Table> </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>