From bdcdbe7c9dbaadb0266d62387aac71cdd750f9ab Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Wed, 6 May 2026 11:43:59 -0500
Subject: [PATCH] show empty card on camera metrics page when no cameras are
 defined

---
 web/src/views/system/CameraMetrics.tsx | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/web/src/views/system/CameraMetrics.tsx b/web/src/views/system/CameraMetrics.tsx
index 4e524a743..77d01aa3f 100644
--- a/web/src/views/system/CameraMetrics.tsx
+++ b/web/src/views/system/CameraMetrics.tsx
@@ -2,6 +2,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 { EmptyCard } from "@/components/card/EmptyCard";
 import { Skeleton } from "@/components/ui/skeleton";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { FrigateStats } from "@/types/stats";
@@ -13,6 +14,7 @@ import {
   useMemo,
   useState,
 } from "react";
+import { BsFillCameraVideoOffFill } from "react-icons/bs";
 import { MdInfo } from "react-icons/md";
 import {
   Tooltip,
@@ -173,7 +175,7 @@ export default function CameraMetrics({
       }
 
       Object.entries(stats.cameras).forEach(([key, camStats]) => {
-        if (!config?.cameras[key].enabled) {
+        if (!camStats || !config?.cameras[key]?.enabled) {
           return;
         }
 
@@ -228,6 +230,10 @@ export default function CameraMetrics({
       }
 
       Object.entries(stats.cameras).forEach(([key, camStats]) => {
+        if (!camStats) {
+          return;
+        }
+
         if (!(key in series)) {
           const camName = getCameraName(key);
           series[key] = {};
@@ -274,6 +280,17 @@ export default function CameraMetrics({
     }
   }, [showCameraInfoDialog]);
 
+  if (config && Object.keys(config.cameras).length === 0) {
+    return (
+      <div className="flex size-full items-center justify-center">
+        <EmptyCard
+          icon={<BsFillCameraVideoOffFill className="size-8" />}
+          title={t("cameras.noCameras.title")}
+        />
+      </div>
+    );
+  }
+
   return (
     <div className="scrollbar-container mt-4 flex size-full flex-col gap-3 overflow-y-auto">
       <div className="text-sm font-medium text-muted-foreground">