Camera connection quality indicator (#21297)

* add camera connection quality metrics and indicator

* formatting

* move stall calcs to watchdog

* clean up

* change watchdog to 1s and separately track time for ffmpeg retry_interval

* implement status caching to reduce message volume

web/public/locales/en/views/system.json

@@ -151,6 +151,17 @@
       "cameraDetectionsPerSecond": "{{camName}} detections per second",
       "cameraSkippedDetectionsPerSecond": "{{camName}} skipped detections per second"
     },
+    "connectionQuality": {
+      "title": "Connection Quality",
+      "excellent": "Excellent",
+      "fair": "Fair",
+      "poor": "Poor",
+      "unusable": "Unusable",
+      "fps": "FPS",
+      "expectedFps": "Expected FPS",
+      "reconnectsLastHour": "Reconnects (last hour)",
+      "stallsLastHour": "Stalls (last hour)"
+    },
     "toast": {
       "success": {
         "copyToClipboard": "Copied probe data to clipboard."

web/src/components/camera/ConnectionQualityIndicator.tsx

@@ -0,0 +1,76 @@
+import { useTranslation } from "react-i18next";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+
+type ConnectionQualityIndicatorProps = {
+  quality: "excellent" | "fair" | "poor" | "unusable";
+  expectedFps: number;
+  reconnects: number;
+  stalls: number;
+};
+
+export function ConnectionQualityIndicator({
+  quality,
+  expectedFps,
+  reconnects,
+  stalls,
+}: ConnectionQualityIndicatorProps) {
+  const { t } = useTranslation(["views/system"]);
+
+  const getColorClass = (quality: string): string => {
+    switch (quality) {
+      case "excellent":
+        return "bg-success";
+      case "fair":
+        return "bg-yellow-500";
+      case "poor":
+        return "bg-orange-500";
+      case "unusable":
+        return "bg-destructive";
+      default:
+        return "bg-gray-500";
+    }
+  };
+
+  const qualityLabel = t(`cameras.connectionQuality.${quality}`);
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <div
+          className={cn(
+            "inline-block size-3 cursor-pointer rounded-full",
+            getColorClass(quality),
+          )}
+        />
+      </TooltipTrigger>
+      <TooltipContent className="max-w-xs">
+        <div className="space-y-2">
+          <div className="font-semibold">
+            {t("cameras.connectionQuality.title")}
+          </div>
+          <div className="text-sm">
+            <div className="capitalize">{qualityLabel}</div>
+            <div className="mt-2 space-y-1 text-xs">
+              <div>
+                {t("cameras.connectionQuality.expectedFps")}:{" "}
+                {expectedFps.toFixed(1)} {t("cameras.connectionQuality.fps")}
+              </div>
+              <div>
+                {t("cameras.connectionQuality.reconnectsLastHour")}:{" "}
+                {reconnects}
+              </div>
+              <div>
+                {t("cameras.connectionQuality.stallsLastHour")}: {stalls}
+              </div>
+            </div>
+          </div>
+        </div>
+      </TooltipContent>
+    </Tooltip>
+  );
+}

web/src/types/stats.ts

@@ -24,6 +24,10 @@ export type CameraStats = {
   pid: number;
   process_fps: number;
   skipped_fps: number;
+  connection_quality: "excellent" | "fair" | "poor" | "unusable";
+  expected_fps: number;
+  reconnects_last_hour: number;
+  stalls_last_hour: number;
 };
 
 export type CpuStats = {

web/src/views/system/CameraMetrics.tsx

@@ -1,6 +1,7 @@
 import { useFrigateStats } from "@/api/ws";
 import { CameraLineGraph } from "@/components/graph/LineGraph";
 import CameraInfoDialog from "@/components/overlay/CameraInfoDialog";
+import { ConnectionQualityIndicator } from "@/components/camera/ConnectionQualityIndicator";
 import { Skeleton } from "@/components/ui/skeleton";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { FrigateStats } from "@/types/stats";
@@ -282,8 +283,37 @@ export default function CameraMetrics({
                   )}
                   <div className="flex w-full flex-col gap-3">
                     <div className="flex flex-row items-center justify-between">
-                      <div className="text-sm font-medium text-muted-foreground smart-capitalize">
-                        <CameraNameLabel camera={camera} />
+                      <div className="flex items-center gap-2">
+                        <div className="text-sm font-medium text-muted-foreground smart-capitalize">
+                          <CameraNameLabel camera={camera} />
+                        </div>
+                        {statsHistory.length > 0 &&
+                          statsHistory[statsHistory.length - 1]?.cameras[
+                            camera.name
+                          ] && (
+                            <ConnectionQualityIndicator
+                              quality={
+                                statsHistory[statsHistory.length - 1]?.cameras[
+                                  camera.name
+                                ]?.connection_quality
+                              }
+                              expectedFps={
+                                statsHistory[statsHistory.length - 1]?.cameras[
+                                  camera.name
+                                ]?.expected_fps || 0
+                              }
+                              reconnects={
+                                statsHistory[statsHistory.length - 1]?.cameras[
+                                  camera.name
+                                ]?.reconnects_last_hour || 0
+                              }
+                              stalls={
+                                statsHistory[statsHistory.length - 1]?.cameras[
+                                  camera.name
+                                ]?.stalls_last_hour || 0
+                              }
+                            />
+                          )}
                       </div>
                       <Tooltip>
                         <TooltipTrigger>