From 84aa7149a664fe5a6a059d09c5618416d56c842d Mon Sep 17 00:00:00 2001
From: Nick Mowen <nickmowen213@gmail.com>
Date: Wed, 9 Nov 2022 14:47:13 -0700
Subject: [PATCH] Add fps to camera metrics

---
 frigate/stats.py         |   4 +-
 web/src/routes/Debug.jsx | 137 ++++++++++++++++++++-------------------
 2 files changed, 73 insertions(+), 68 deletions(-)

diff --git a/frigate/stats.py b/frigate/stats.py
index 99f37aea2..d4899bb6d 100644
--- a/frigate/stats.py
+++ b/frigate/stats.py
@@ -91,7 +91,9 @@ 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
+        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"]
diff --git a/web/src/routes/Debug.jsx b/web/src/routes/Debug.jsx
index c20f63fbe..8d95b0cd4 100644
--- a/web/src/routes/Debug.jsx
+++ b/web/src/routes/Debug.jsx
@@ -57,78 +57,81 @@ export default function Debug() {
         </div>
       ) : (
         <Fragment>
+          <Heading>Detectors</Heading>
           <div data-testid="detectors" className="min-w-0 overflow-auto">
-            <Table className="w-full">
-              <Thead>
-                <Tr>
-                  <Th>detector</Th>
-                  {detectorDataKeys.map((name) => (
-                    <Th key={name}>{name.replace('_', ' ')}</Th>
-                  ))}
-                </Tr>
-              </Thead>
-              <Tbody>
-                {detectorNames.map((detector, i) => (
-                  <Tr key={i} index={i}>
-                    <Td>{detector}</Td>
-                    {detectorDataKeys.map((name) => (
-                      <Td key={`${name}-${detector}`}>{detectors[detector][name]}</Td>
+            {detectorNames.map((name) => (
+              <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">{name}</div>
+                <Table className="w-full">
+                  <Thead>
+                    <Tr>
+                      {detectorDataKeys.map((name) => (
+                        <Th key={name}>{name.replace('_', ' ')}</Th>
+                      ))}
+                    </Tr>
+                  </Thead>
+                  <Tbody>
+                    {detectorNames.map((detector, i) => (
+                      <Tr key={i} index={i}>
+                        {detectorDataKeys.map((name) => (
+                          <Td key={`${name}-${detector}`}>{detectors[detector][name]}</Td>
+                        ))}
+                      </Tr>
                     ))}
-                  </Tr>
-                ))}
-              </Tbody>
-            </Table>
+                  </Tbody>
+                </Table>
+              </div>
+            ))}
           </div>
 
-            <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>
-                    <Button onClick={(e) => onCopyFfprobe(camera, e)}>
-                      copy ffprobe
-                    </Button>
-                  </div>
-                  <div className='p-4'>
-                    <Table className='w-full'>
-                      <Thead>
-                        <Tr>
-                          <Th>Processes</Th>
-                          <Th>Process ID</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>{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>{cpu_usages[cameras[camera]['pid']]['cpu']}%</Td>
-                          <Td>{cpu_usages[cameras[camera]['pid']]['cpu']}%</Td>
-                        </Tr>
-                        <Tr key='ffmpeg' index='2'>
-                          <Td>ffmpeg</Td>
-                          <Td>{cameras[camera]['ffmpeg_pid']}</Td>
-                          <Td>{cpu_usages[cameras[camera]['ffmpeg_pid']]['cpu']}%</Td>
-                          <Td>{cpu_usages[cameras[camera]['ffmpeg_pid']]['cpu']}%</Td>
-                        </Tr>
-                      </Tbody>
-                    </Table>
-
-                  </div>
+          <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>
+                  <Button onClick={(e) => onCopyFfprobe(camera, e)}>copy ffprobe</Button>
                 </div>
-              ))}
-
+                <div className="p-4">
+                  <Table className="w-full">
+                    <Thead>
+                      <Tr>
+                        <Th>Processes</Th>
+                        <Th>Process 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']]['cpu']}%</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']]['cpu']}%</Td>
+                      </Tr>
+                    </Tbody>
+                  </Table>
+                </div>
+              </div>
+            ))}
           </div>
 
           <p>Debug stats update automatically every {config.mqtt.stats_interval} seconds.</p>