administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-03 09:45:22 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Add chart for gpu stats

Browse Source
This commit is contained in:
Nick Mowen 2022-09-24 18:51:59 -06:00
parent cc150147d1
commit 1b35af4c0d
1 changed files with 34 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -21,9 +21,17 @@ export default function System() {
} = useWs('stats'); } = useWs('stats');
const { data: initialStats } = useSWR('stats'); const { data: initialStats } = useSWR('stats');
const { cpu_usages, detectors, service = {}, detection_fps: _, ...cameras } = stats || initialStats || emptyObject; const {
cpu_usages,
gpu_usages,
detectors,
service = {},
detection_fps: _,
...cameras
} = stats || initialStats || emptyObject;
const detectorNames = Object.keys(detectors || emptyObject); const detectorNames = Object.keys(detectors || emptyObject);
const gpuNames = Object.keys(gpu_usages || emptyObject);
const cameraNames = Object.keys(cameras || emptyObject); const cameraNames = Object.keys(cameras || emptyObject);
const handleCopyConfig = useCallback(() => { const handleCopyConfig = useCallback(() => {
@ -125,6 +133,31 @@ export default function System() {
))} ))}
</div> </div>
<Heading size="lg">GPUs</Heading>
<div data-testid="gpus" className="grid grid-cols-1 3xl:grid-cols-3 md:grid-cols-2 gap-4 p-2 px-4">
{gpuNames.map((gpu) => (
<div
key={gpu}
className="dark:bg-gray-800 shadow-md hover:shadow-lg rounded-lg transition-shadow p-4 m-2"
>
<Table className="w-full">
<Thead>
<Tr>
<Th>Gpu %</Th>
<Th>Memory %</Th>
</Tr>
</Thead>
<Tbody>
<Tr>
<Td>{gpu_usages[gpu]['gpu']}</Td>
<Td>{gpu_usages[gpu]['memory']}</Td>
</Tr>
</Tbody>
</Table>
</div>
))}
</div>
<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"> <div data-testid="cameras" className="grid grid-cols-1 3xl:grid-cols-3 md:grid-cols-2 gap-4">
{cameraNames.map((camera) => ( {cameraNames.map((camera) => (