Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2024-11-21 19:07:46 +01:00
Code Issues Projects Releases Wiki Activity

Don't fail to load when cameras stats are not available (#4877)

Browse Source
This commit is contained in:
Nicolas Mowen 2023-01-03 18:23:56 -07:00 committed by GitHub
parent ceab294840
commit 760d65b214
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 51 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
web/src/routes/System.jsx
View File

@ -203,54 +203,58 @@ export default function System() {
)} )}
<Heading size="lg">Cameras</Heading> <Heading size="lg">Cameras</Heading>
<div data-testid="cameras" className="grid grid-cols-1 3xl:grid-cols-3 md:grid-cols-2 gap-4"> {!cameras ? (
{cameraNames.map((camera) => ( <ActivityIndicator />
<div key={camera} className="dark:bg-gray-800 shadow-md hover:shadow-lg rounded-lg transition-shadow"> ) : (
<div className="capitalize text-lg flex justify-between p-4"> <div data-testid="cameras" className="grid grid-cols-1 3xl:grid-cols-3 md:grid-cols-2 gap-4">
<Link href={`/cameras/${camera}`}>{camera.replaceAll('_', ' ')}</Link> {cameraNames.map((camera) => (
<Button onClick={(e) => onHandleFfprobe(camera, e)}>ffprobe</Button> <div key={camera} 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/${camera}`}>{camera.replaceAll('_', ' ')}</Link>
<Button onClick={(e) => onHandleFfprobe(camera, e)}>ffprobe</Button>
</div>
<div className="p-2">
<Table className="w-full">
<Thead>
<Tr>
<Th>Process</Th>
<Th>P-ID</Th>
<Th>fps</Th>
<Th>Cpu %</Th>
<Th>Memory %</Th>
</Tr>
</Thead>
<Tbody>
<Tr key="capture" index="0">
<Td>Capture</Td>
<Td>{cameras[camera]['capture_pid'] || '- '}</Td>
<Td>{cameras[camera]['process_fps'] || '- '}</Td>
<Td>{cpu_usages[cameras[camera]['capture_pid']]?.['cpu'] || '- '}%</Td>
<Td>{cpu_usages[cameras[camera]['capture_pid']]?.['mem'] || '- '}%</Td>
</Tr>
<Tr key="detect" index="1">
<Td>Detect</Td>
<Td>{cameras[camera]['pid'] || '- '}</Td>
<Td>
{cameras[camera]['detection_fps']} ({cameras[camera]['skipped_fps']} skipped)
</Td>
<Td>{cpu_usages[cameras[camera]['pid']]?.['cpu'] || '- '}%</Td>
<Td>{cpu_usages[cameras[camera]['pid']]?.['mem'] || '- '}%</Td>
</Tr>
<Tr key="ffmpeg" index="2">
<Td>ffmpeg</Td>
<Td>{cameras[camera]['ffmpeg_pid'] || '- '}</Td>
<Td>{cameras[camera]['camera_fps'] || '- '}</Td>
<Td>{cpu_usages[cameras[camera]['ffmpeg_pid']]?.['cpu'] || '- '}%</Td>
<Td>{cpu_usages[cameras[camera]['ffmpeg_pid']]?.['mem'] || '- '}%</Td>
</Tr>
</Tbody>
</Table>
</div>
</div> </div>
<div className="p-2"> ))}
<Table className="w-full"> </div>
<Thead> )}
<Tr>
<Th>Process</Th>
<Th>P-ID</Th>
<Th>fps</Th>
<Th>Cpu %</Th>
<Th>Memory %</Th>
</Tr>
</Thead>
<Tbody>
<Tr key="capture" index="0">
<Td>Capture</Td>
<Td>{cameras[camera]['capture_pid'] || "- "}</Td>
<Td>{cameras[camera]['process_fps'] || "- "}</Td>
<Td>{cpu_usages[cameras[camera]['capture_pid']]?.['cpu'] || "- "}%</Td>
<Td>{cpu_usages[cameras[camera]['capture_pid']]?.['mem'] || "- "}%</Td>
</Tr>
<Tr key="detect" index="1">
<Td>Detect</Td>
<Td>{cameras[camera]['pid'] || "- "}</Td>
<Td>
{cameras[camera]['detection_fps']} ({cameras[camera]['skipped_fps']} skipped)
</Td>
<Td>{cpu_usages[cameras[camera]['pid']]?.['cpu'] || "- "}%</Td>
<Td>{cpu_usages[cameras[camera]['pid']]?.['mem'] || "- "}%</Td>
</Tr>
<Tr key="ffmpeg" index="2">
<Td>ffmpeg</Td>
<Td>{cameras[camera]['ffmpeg_pid'] || "- "}</Td>
<Td>{cameras[camera]['camera_fps'] || "- "}</Td>
<Td>{cpu_usages[cameras[camera]['ffmpeg_pid']]?.['cpu'] || "- "}%</Td>
<Td>{cpu_usages[cameras[camera]['ffmpeg_pid']]?.['mem'] || "- "}%</Td>
</Tr>
</Tbody>
</Table>
</div>
</div>
))}
</div>
<p>System stats update automatically every {config.mqtt.stats_interval} seconds.</p> <p>System stats update automatically every {config.mqtt.stats_interval} seconds.</p>
</Fragment> </Fragment>