Implement camera stats graphs (#10831)

* Implement camera graphs

* Cleanup naming

* Cleanup rendering

* Cleanup spacing

* Fix audio name

* theme updates to match design corretly

* Mobile color fixes

* Mobile color fixes

web/src/views/events/RecordingView.tsx

@@ -257,7 +257,7 @@ export function RecordingView({
           onClick={() => navigate(-1)}
         >
           <IoMdArrowRoundBack className="size-5" size="small" />
-          {isDesktop && "Back"}
+          {isDesktop && <div className="text-primary-foreground">Back</div>}
         </Button>
         <div className="flex items-center justify-end gap-2">
           <MobileCameraDrawer

web/src/views/live/LiveBirdseyeView.tsx

@@ -133,7 +133,7 @@ export default function LiveBirdseyeView() {
               onClick={() => navigate(-1)}
             >
               <IoMdArrowBack className="size-5" />
-              {isDesktop && "Back"}
+              {isDesktop && <div className="text-primary-foreground">Back</div>}
             </Button>
           ) : (
             <div />

web/src/views/live/LiveCameraView.tsx

@@ -228,7 +228,9 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
                 onClick={() => navigate(-1)}
               >
                 <IoMdArrowRoundBack className="size-5" />
-                {isDesktop && "Back"}
+                {isDesktop && (
+                  <div className="text-primary-foreground">Back</div>
+                )}
               </Button>
               <Button
                 className="flex items-center gap-2.5 rounded-lg"
@@ -248,7 +250,9 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
                 }}
               >
                 <LuHistory className="size-5" />
-                {isDesktop && "History"}
+                {isDesktop && (
+                  <div className="text-primary-foreground">History</div>
+                )}
               </Button>
             </div>
           ) : (

web/src/views/live/LiveDashboardView.tsx

@@ -139,7 +139,7 @@ export default function LiveDashboardView({
               className={`p-1 ${
                 layout == "grid"
                   ? "bg-blue-900 focus:bg-blue-900 bg-opacity-60 focus:bg-opacity-60"
-                  : "bg-muted"
+                  : "bg-secondary"
               }`}
               size="xs"
               onClick={() => setLayout("grid")}
@@ -150,7 +150,7 @@ export default function LiveDashboardView({
               className={`p-1 ${
                 layout == "list"
                   ? "bg-blue-900 focus:bg-blue-900 bg-opacity-60 focus:bg-opacity-60"
-                  : "bg-muted"
+                  : "bg-secondary"
               }`}
               size="xs"
               onClick={() => setLayout("list")}

web/src/views/system/CameraMetrics.tsx

@@ -0,0 +1,203 @@
+import { useFrigateStats } from "@/api/ws";
+import { CameraLineGraph } from "@/components/graph/SystemGraph";
+import { Skeleton } from "@/components/ui/skeleton";
+import { FrigateConfig } from "@/types/frigateConfig";
+import { FrigateStats } from "@/types/stats";
+import { useEffect, useMemo, useState } from "react";
+import useSWR from "swr";
+
+type CameraMetricsProps = {
+  lastUpdated: number;
+  setLastUpdated: (last: number) => void;
+};
+export default function CameraMetrics({
+  lastUpdated,
+  setLastUpdated,
+}: CameraMetricsProps) {
+  const { data: config } = useSWR<FrigateConfig>("config");
+
+  // stats
+
+  const { data: initialStats } = useSWR<FrigateStats[]>(
+    ["stats/history", { keys: "cpu_usages,cameras,service" }],
+    {
+      revalidateOnFocus: false,
+    },
+  );
+
+  const [statsHistory, setStatsHistory] = useState<FrigateStats[]>([]);
+  const { payload: updatedStats } = useFrigateStats();
+
+  useEffect(() => {
+    if (initialStats == undefined || initialStats.length == 0) {
+      return;
+    }
+
+    if (statsHistory.length == 0) {
+      setStatsHistory(initialStats);
+      return;
+    }
+
+    if (!updatedStats) {
+      return;
+    }
+
+    if (updatedStats.service.last_updated > lastUpdated) {
+      setStatsHistory([...statsHistory, updatedStats]);
+      setLastUpdated(Date.now() / 1000);
+    }
+  }, [initialStats, updatedStats, statsHistory, lastUpdated, setLastUpdated]);
+
+  // timestamps
+
+  const updateTimes = useMemo(
+    () => statsHistory.map((stats) => stats.service.last_updated),
+    [statsHistory],
+  );
+
+  // stats data
+
+  const cameraCpuSeries = useMemo(() => {
+    if (!statsHistory || statsHistory.length == 0) {
+      return {};
+    }
+
+    const series: {
+      [cam: string]: {
+        [key: string]: { name: string; data: { x: number; y: string }[] };
+      };
+    } = {};
+
+    statsHistory.forEach((stats, statsIdx) => {
+      if (!stats) {
+        return;
+      }
+
+      Object.entries(stats.cameras).forEach(([key, camStats]) => {
+        if (!config?.cameras[key].enabled) {
+          return;
+        }
+
+        if (!(key in series)) {
+          const camName = key.replaceAll("_", " ");
+          series[key] = {};
+          series[key]["ffmpeg"] = { name: `${camName} ffmpeg`, data: [] };
+          series[key]["capture"] = { name: `${camName} capture`, data: [] };
+          series[key]["detect"] = { name: `${camName} detect`, data: [] };
+        }
+
+        series[key]["ffmpeg"].data.push({
+          x: statsIdx,
+          y: stats.cpu_usages[camStats.ffmpeg_pid.toString()]?.cpu ?? 0.0,
+        });
+        series[key]["capture"].data.push({
+          x: statsIdx,
+          y: stats.cpu_usages[camStats.capture_pid?.toString()]?.cpu ?? 0,
+        });
+        series[key]["detect"].data.push({
+          x: statsIdx,
+          y: stats.cpu_usages[camStats.pid.toString()].cpu,
+        });
+      });
+    });
+    return series;
+  }, [config, statsHistory]);
+
+  const cameraFpsSeries = useMemo(() => {
+    if (!statsHistory) {
+      return {};
+    }
+
+    const series: {
+      [cam: string]: {
+        [key: string]: { name: string; data: { x: number; y: number }[] };
+      };
+    } = {};
+
+    statsHistory.forEach((stats, statsIdx) => {
+      if (!stats) {
+        return;
+      }
+
+      Object.entries(stats.cameras).forEach(([key, camStats]) => {
+        if (!(key in series)) {
+          const camName = key.replaceAll("_", " ");
+          series[key] = {};
+          series[key]["det"] = {
+            name: `${camName} detections per second`,
+            data: [],
+          };
+          series[key]["skip"] = {
+            name: `${camName} skipped detections per second`,
+            data: [],
+          };
+        }
+
+        series[key]["det"].data.push({
+          x: statsIdx,
+          y: camStats.detection_fps,
+        });
+        series[key]["skip"].data.push({
+          x: statsIdx,
+          y: camStats.skipped_fps,
+        });
+      });
+    });
+    return series;
+  }, [statsHistory]);
+
+  return (
+    <div className="size-full mt-4 flex flex-col overflow-y-auto">
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        {config &&
+          Object.values(config.cameras).map((camera) => {
+            if (camera.enabled) {
+              return (
+                <div className="w-full flex flex-col">
+                  <div className="mb-6 capitalize">
+                    {camera.name.replaceAll("_", " ")}
+                  </div>
+                  <div key={camera.name} className="grid sm:grid-cols-2 gap-2">
+                    {Object.keys(cameraCpuSeries).includes(camera.name) ? (
+                      <div className="p-2.5 bg-secondary dark:bg-primary rounded-2xl flex-col">
+                        <div className="mb-5">CPU</div>
+                        <CameraLineGraph
+                          graphId={`${camera.name}-cpu`}
+                          unit="%"
+                          dataLabels={["ffmpeg", "capture", "detect"]}
+                          updateTimes={updateTimes}
+                          data={Object.values(
+                            cameraCpuSeries[camera.name] || {},
+                          )}
+                        />
+                      </div>
+                    ) : (
+                      <Skeleton className="size-full aspect-video" />
+                    )}
+                    {Object.keys(cameraFpsSeries).includes(camera.name) ? (
+                      <div className="p-2.5 bg-secondary dark:bg-primary rounded-2xl flex-col">
+                        <div className="mb-5">DPS</div>
+                        <CameraLineGraph
+                          graphId={`${camera.name}-dps`}
+                          unit=" DPS"
+                          dataLabels={["detect", "skipped"]}
+                          updateTimes={updateTimes}
+                          data={Object.values(
+                            cameraFpsSeries[camera.name] || {},
+                          )}
+                        />
+                      </div>
+                    ) : (
+                      <Skeleton className="size-full aspect-video" />
+                    )}
+                  </div>
+                </div>
+              );
+            }
+
+            return null;
+          })}
+      </div>
+    </div>
+  );
+}

web/src/views/system/GeneralMetrics.tsx

@@ -61,6 +61,16 @@ export default function GeneralMetrics({
     }
   }, [initialStats, updatedStats, statsHistory, lastUpdated, setLastUpdated]);
 
+  const canGetGpuInfo = useMemo(
+    () =>
+      statsHistory.length > 0 &&
+      Object.keys(statsHistory[0]?.gpu_usages ?? {}).filter(
+        (key) =>
+          key == "amd-vaapi" || key == "intel-vaapi" || key == "intel-qsv",
+      ).length > 0,
+    [statsHistory],
+  );
+
   // timestamps
 
   const updateTimes = useMemo(
@@ -274,8 +284,8 @@ export default function GeneralMetrics({
           Detectors
         </div>
         <div className="w-full mt-4 grid grid-cols-1 sm:grid-cols-3 gap-2">
-          {detInferenceTimeSeries.length != 0 ? (
-            <div className="p-2.5 bg-primary rounded-2xl flex-col">
+          {statsHistory.length != 0 ? (
+            <div className="p-2.5 bg-secondary dark:bg-primary rounded-2xl flex-col">
               <div className="mb-5">Detector Inference Speed</div>
               {detInferenceTimeSeries.map((series) => (
                 <ThresholdBarGraph
@@ -293,7 +303,7 @@ export default function GeneralMetrics({
             <Skeleton className="w-full aspect-video" />
           )}
           {statsHistory.length != 0 ? (
-            <div className="p-2.5 bg-primary rounded-2xl flex-col">
+            <div className="p-2.5 bg-secondary dark:bg-primary rounded-2xl flex-col">
               <div className="mb-5">Detector CPU Usage</div>
               {detCpuSeries.map((series) => (
                 <ThresholdBarGraph
@@ -311,7 +321,7 @@ export default function GeneralMetrics({
             <Skeleton className="w-full aspect-video" />
           )}
           {statsHistory.length != 0 ? (
-            <div className="p-2.5 bg-primary rounded-2xl flex-col">
+            <div className="p-2.5 bg-secondary dark:bg-primary rounded-2xl flex-col">
               <div className="mb-5">Detector Memory Usage</div>
               {detMemSeries.map((series) => (
                 <ThresholdBarGraph
@@ -336,26 +346,20 @@ export default function GeneralMetrics({
               <div className="text-muted-foreground text-sm font-medium">
                 GPUs
               </div>
-              {statsHistory.length > 0 &&
-                Object.keys(statsHistory[0].gpu_usages ?? {}).filter(
-                  (key) =>
-                    key == "amd-vaapi" ||
-                    key == "intel-vaapi" ||
-                    key == "intel-qsv",
-                ).length > 0 && (
-                  <Button
-                    className="cursor-pointer"
-                    variant="secondary"
-                    size="sm"
-                    onClick={() => setShowVainfo(true)}
-                  >
-                    Hardware Info
-                  </Button>
-                )}
+              {canGetGpuInfo && (
+                <Button
+                  className="cursor-pointer"
+                  variant="secondary"
+                  size="sm"
+                  onClick={() => setShowVainfo(true)}
+                >
+                  Hardware Info
+                </Button>
+              )}
             </div>
             <div className=" mt-4 grid grid-cols-1 sm:grid-cols-2 gap-2">
               {statsHistory.length != 0 ? (
-                <div className="p-2.5 bg-primary rounded-2xl flex-col">
+                <div className="p-2.5 bg-secondary dark:bg-primary rounded-2xl flex-col">
                   <div className="mb-5">GPU Usage</div>
                   {gpuSeries.map((series) => (
                     <ThresholdBarGraph
@@ -373,7 +377,7 @@ export default function GeneralMetrics({
                 <Skeleton className="w-full aspect-video" />
               )}
               {statsHistory.length != 0 ? (
-                <div className="p-2.5 bg-primary rounded-2xl flex-col">
+                <div className="p-2.5 bg-secondary dark:bg-primary rounded-2xl flex-col">
                   <div className="mb-5">GPU Memory</div>
                   {gpuMemSeries.map((series) => (
                     <ThresholdBarGraph
@@ -399,7 +403,7 @@ export default function GeneralMetrics({
         </div>
         <div className="mt-4 grid grid-cols-1 sm:grid-cols-2 gap-2">
           {statsHistory.length != 0 ? (
-            <div className="p-2.5 bg-primary rounded-2xl flex-col">
+            <div className="p-2.5 bg-secondary dark:bg-primary rounded-2xl flex-col">
               <div className="mb-5">Process CPU Usage</div>
               {otherProcessCpuSeries.map((series) => (
                 <ThresholdBarGraph
@@ -417,7 +421,7 @@ export default function GeneralMetrics({
             <Skeleton className="w-full aspect-tall" />
           )}
           {statsHistory.length != 0 ? (
-            <div className="p-2.5 bg-primary rounded-2xl flex-col">
+            <div className="p-2.5 bg-secondary dark:bg-primary rounded-2xl flex-col">
               <div className="mb-5">Process Memory Usage</div>
               {otherProcessMemSeries.map((series) => (
                 <ThresholdBarGraph

web/src/views/system/StorageMetrics.tsx

@@ -47,7 +47,7 @@ export default function StorageMetrics({
         General Storage
       </div>
       <div className="mt-4 grid grid-cols-1 sm:grid-cols-3 gap-2">
-        <div className="p-2.5 bg-primary rounded-2xl flex-col">
+        <div className="p-2.5 bg-secondary dark:bg-primary rounded-2xl flex-col">
           <div className="mb-5">Recordings</div>
           <StorageGraph
             graphId="general-recordings"
@@ -55,7 +55,7 @@ export default function StorageMetrics({
             total={totalStorage.total}
           />
         </div>
-        <div className="p-2.5 bg-primary rounded-2xl flex-col">
+        <div className="p-2.5 bg-secondary dark:bg-primary rounded-2xl flex-col">
           <div className="mb-5">/tmp/cache</div>
           <StorageGraph
             graphId="general-cache"
@@ -63,7 +63,7 @@ export default function StorageMetrics({
             total={stats.service.storage["/tmp/cache"]["total"]}
           />
         </div>
-        <div className="p-2.5 bg-primary rounded-2xl flex-col">
+        <div className="p-2.5 bg-secondary dark:bg-primary rounded-2xl flex-col">
           <div className="mb-5">/dev/shm</div>
           <StorageGraph
             graphId="general-shared-memory"
@@ -77,7 +77,7 @@ export default function StorageMetrics({
       </div>
       <div className="mt-4 grid grid-cols-1 sm:grid-cols-3 gap-2">
         {Object.keys(cameraStorage).map((camera) => (
-          <div className="p-2.5 bg-primary rounded-2xl flex-col">
+          <div className="p-2.5 bg-secondary dark:bg-primary rounded-2xl flex-col">
             <div className="mb-5 capitalize">{camera.replaceAll("_", " ")}</div>
             <StorageGraph
               graphId={`${camera}-storage`}