From 997bc0845bd238aff6bfa7c0d2bc2c72b89e2f86 Mon Sep 17 00:00:00 2001
From: Nick Mowen <nickmowen213@gmail.com>
Date: Wed, 9 Nov 2022 12:13:24 -0700
Subject: [PATCH] Move each camera to a separate card and show per process info

---
 frigate/stats.py         |  2 ++
 web/src/routes/Debug.jsx | 63 +++++++++++++++++++++++++---------------
 2 files changed, 42 insertions(+), 23 deletions(-)

diff --git a/frigate/stats.py b/frigate/stats.py
index 7605ea1bc..36a467574 100644
--- a/frigate/stats.py
+++ b/frigate/stats.py
@@ -90,6 +90,7 @@ def stats_snapshot(stats_tracking: StatsTrackingTypes) -> dict[str, Any]:
     for name, camera_stats in camera_metrics.items():
         total_detection_fps += camera_stats["detection_fps"].value
         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 = (
             camera_stats["capture_process"].pid
             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),
             "pid": pid,
             "capture_pid": cpid,
+            "ffmpeg_pid": ffmpeg_pid,
         }
 
     stats["detectors"] = {}
diff --git a/web/src/routes/Debug.jsx b/web/src/routes/Debug.jsx
index b404c61a9..1c95ccf52 100644
--- a/web/src/routes/Debug.jsx
+++ b/web/src/routes/Debug.jsx
@@ -67,29 +67,46 @@ export default function Debug() {
             </Table>
           </div>
 
-          <div data-testid="cameras" className="min-w-0 overflow-auto">
-            <Table className="w-full">
-              <Thead>
-                <Tr>
-                  <Th>camera</Th>
-                  {cameraDataKeys.map((name) => (
-                    <Th key={name}>{name.replace('_', ' ')}</Th>
-                  ))}
-                </Tr>
-              </Thead>
-              <Tbody>
-                {cameraNames.map((camera, i) => (
-                  <Tr key={i} index={i}>
-                    <Td>
-                      <Link href={`/cameras/${camera}`}>{camera.replaceAll('_', ' ')}</Link>
-                    </Td>
-                    {cameraDataKeys.map((name) => (
-                      <Td key={`${name}-${camera}`}>{cameras[camera][name]}</Td>
-                    ))}
-                  </Tr>
-                ))}
-              </Tbody>
-            </Table>
+            <Heading>
+              Cameras
+            </Heading>
+            <div data-testid="cameras" className="min-w-0 overflow-auto">
+
+              {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>
+                        <Tr>
+                          <Th>Processes</Th>
+                          <Th>Process ID</Th>
+                          <Th>Cpu Usage</Th>
+                        </Tr>
+                      </Thead>
+                      <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>
 
           <p>Debug stats update automatically every {config.mqtt.stats_interval} seconds.</p>