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
2024-11-21 19:07:46 +01:00 · 2024-04-04 14:55:04 -06:00 · 2024-04-04 14:55:04 -06:00 · fb7cfe5471
commit fb7cfe5471
parent 466a9104e5
22 changed files with 430 additions and 292 deletions
--- a/frigate/app.py
+++ b/frigate/app.py
@ -499,7 +499,7 @@ class FrigateApp:
            )
            audio_process.daemon = True
            audio_process.start()
-            self.processes["audioDetector"] = audio_process.pid or 0
+            self.processes["audio_detector"] = audio_process.pid or 0
            logger.info(f"Audio process started: {audio_process.pid}")

    def start_timeline_processor(self) -> None:
--- a/web/src/components/filter/CameraGroupSelector.tsx
+++ b/web/src/components/filter/CameraGroupSelector.tsx
@ -87,7 +87,7 @@ export function CameraGroupSelector({ className }: CameraGroupSelectorProps) {
            className={
              group == "default"
                ? "text-selected bg-blue-900 focus:bg-blue-900 bg-opacity-60 focus:bg-opacity-60"
-                : "text-muted-foreground bg-secondary focus:text-muted-foreground focus:bg-secondary"
+                : "text-secondary-foreground bg-secondary focus:text-secondary-foreground focus:bg-secondary"
            }
            size="xs"
            onClick={() => (group ? setGroup("default", true) : null)}
@ -109,7 +109,7 @@ export function CameraGroupSelector({ className }: CameraGroupSelectorProps) {
                className={
                  group == name
                    ? "text-selected bg-blue-900 focus:bg-blue-900 bg-opacity-60 focus:bg-opacity-60"
-                    : "text-muted-foreground bg-secondary"
+                    : "text-secondary-foreground bg-secondary"
                }
                size="xs"
                onClick={() => setGroup(name, group != "default")}
--- a/web/src/components/filter/ReviewActionGroup.tsx
+++ b/web/src/components/filter/ReviewActionGroup.tsx
@ -35,7 +35,7 @@ export default function ReviewActionGroup({
  }, [selectedReviews, setSelectedReviews, pullLatestData]);

  return (
-    <div className="absolute inset-x-2 inset-y-0 md:left-auto md:right-2 p-2 flex gap-2 justify-between items-center bg-background">
+    <div className="absolute inset-x-2 inset-y-0 md:left-auto py-2 flex gap-2 justify-between items-center bg-background">
      <div className="mx-1 flex justify-center items-center text-sm text-muted-foreground">
        <div className="p-1">{`${selectedReviews.length} selected`}</div>
        <div className="p-1">{"|"}</div>
@ -58,7 +58,7 @@ export default function ReviewActionGroup({
            }}
          >
            <FaCompactDisc />
-            {isDesktop && "Export"}
+            {isDesktop && <div className="text-primary-foreground">Export</div>}
          </Button>
        )}
        <Button
@ -68,7 +68,9 @@ export default function ReviewActionGroup({
          onClick={onMarkAsReviewed}
        >
          <FaCircleCheck />
-          {isDesktop && "Mark as reviewed"}
+          {isDesktop && (
+            <div className="text-primary-foreground">Mark as reviewed</div>
+          )}
        </Button>
        <Button
          className="p-2 flex items-center gap-1"
@ -77,7 +79,7 @@ export default function ReviewActionGroup({
          onClick={onDelete}
        >
          <HiTrash />
-          {isDesktop && "Delete"}
+          {isDesktop && <div className="text-primary-foreground">Delete</div>}
        </Button>
      </div>
    </div>
--- a/web/src/components/filter/ReviewFilterGroup.tsx
+++ b/web/src/components/filter/ReviewFilterGroup.tsx
@ -223,8 +223,8 @@ function CamerasFilterButton({
      variant="secondary"
      size="sm"
    >
-      <FaVideo className="text-muted-foreground" />
-      <div className="hidden md:block">
+      <FaVideo className="text-secondary-foreground" />
+      <div className="hidden md:block text-primary-foreground">
        {selectedCameras == undefined
          ? "All Cameras"
          : `${selectedCameras.length} Cameras`}
@ -368,7 +368,7 @@ function ShowReviewFilter({
  );
  return (
    <>
-      <div className="hidden h-9 md:flex p-2 justify-start items-center text-sm bg-secondary hover:bg-secondary/80 text-secondary-foreground rounded-md cursor-pointer">
+      <div className="hidden h-9 md:flex p-2 justify-start items-center text-sm bg-secondary hover:bg-secondary/80 text-primary-foreground rounded-md cursor-pointer">
        <Switch
          id="reviewed"
          checked={showReviewedSwitch == 1}
@ -412,8 +412,8 @@ function CalendarFilterButton({

  const trigger = (
    <Button size="sm" className="flex items-center gap-2" variant="secondary">
-      <FaCalendarAlt className="text-muted-foreground" />
-      <div className="hidden md:block">
+      <FaCalendarAlt className="text-secondary-foreground" />
+      <div className="hidden md:block text-primary-foreground">
        {day == undefined ? "Last 24 Hours" : selectedDate}
      </div>
    </Button>
@ -473,8 +473,8 @@ function GeneralFilterButton({

  const trigger = (
    <Button size="sm" className="flex items-center gap-2" variant="secondary">
-      <FaFilter className="text-muted-foreground" />
-      <div className="hidden md:block">Filter</div>
+      <FaFilter className="text-secondary-foreground" />
+      <div className="hidden md:block text-primary-foreground">Filter</div>
    </Button>
  );
  const content = (
@ -546,7 +546,7 @@ export function GeneralFilterContent({
      <div className="h-auto overflow-y-auto overflow-x-hidden">
        <div className="flex justify-between items-center my-2.5">
          <Label
-            className="mx-2 text-secondary-foreground cursor-pointer"
+            className="mx-2 text-primary-foreground cursor-pointer"
            htmlFor="allLabels"
          >
            All Labels
@ -653,7 +653,7 @@ function ShowMotionOnlyButton({
          onCheckedChange={setMotionOnlyButton}
        />
        <Label
-          className="mx-2 text-secondary-foreground cursor-pointer"
+          className="mx-2 text-primary-foreground cursor-pointer"
          htmlFor="collapse-motion"
        >
          Motion only
--- a/web/src/components/graph/SystemGraph.tsx
+++ b/web/src/components/graph/SystemGraph.tsx
@ -3,6 +3,7 @@ import { FrigateConfig } from "@/types/frigateConfig";
 import { Threshold } from "@/types/graph";
 import { useCallback, useEffect, useMemo } from "react";
 import Chart from "react-apexcharts";
+import { MdCircle } from "react-icons/md";
 import useSWR from "swr";

 type ThresholdBarGraphProps = {
@ -35,6 +36,10 @@ export function ThresholdBarGraph({

  const formatTime = useCallback(
    (val: unknown) => {
+      if (val == 0) {
+        return;
+      }
+
      const date = new Date(updateTimes[Math.round(val as number)] * 1000);
      return date.toLocaleTimeString([], {
        hour12: config?.ui.time_format != "24hour",
@ -94,6 +99,7 @@ export function ThresholdBarGraph({
        tickAmount: 4,
        tickPlacement: "on",
        labels: {
+          offsetX: -30,
          formatter: formatTime,
        },
        axisBorder: {
@ -181,7 +187,7 @@ export function StorageGraph({ graphId, used, total }: StorageGraphProps) {
        },
      },
      tooltip: {
-        theme: systemTheme || theme,
+        show: false,
      },
      xaxis: {
        axisBorder: {
@ -199,7 +205,7 @@ export function StorageGraph({ graphId, used, total }: StorageGraphProps) {
        min: 0,
        max: 100,
      },
-    };
+    } as ApexCharts.ApexOptions;
  }, [graphId, systemTheme, theme]);

  useEffect(() => {
@ -235,3 +241,135 @@ export function StorageGraph({ graphId, used, total }: StorageGraphProps) {
    </div>
  );
 }
+
+const GRAPH_COLORS = ["#5C7CFA", "#ED5CFA", "#FAD75C"];
+
+type CameraLineGraphProps = {
+  graphId: string;
+  unit: string;
+  dataLabels: string[];
+  updateTimes: number[];
+  data: ApexAxisChartSeries;
+};
+export function CameraLineGraph({
+  graphId,
+  unit,
+  dataLabels,
+  updateTimes,
+  data,
+}: CameraLineGraphProps) {
+  const { data: config } = useSWR<FrigateConfig>("config", {
+    revalidateOnFocus: false,
+  });
+
+  const lastValues = useMemo<number[] | undefined>(() => {
+    if (!dataLabels || !data || data.length == 0) {
+      return undefined;
+    }
+
+    return dataLabels.map(
+      (_, labelIdx) =>
+        // @ts-expect-error y is valid
+        data[labelIdx].data[data[labelIdx].data.length - 1]?.y ?? 0,
+    ) as number[];
+  }, [data, dataLabels]);
+
+  const { theme, systemTheme } = useTheme();
+
+  const formatTime = useCallback(
+    (val: unknown) => {
+      if (val == 0) {
+        return;
+      }
+
+      const date = new Date(updateTimes[Math.round(val as number)] * 1000);
+      return date.toLocaleTimeString([], {
+        hour12: config?.ui.time_format != "24hour",
+        hour: "2-digit",
+        minute: "2-digit",
+      });
+    },
+    [config, updateTimes],
+  );
+
+  const options = useMemo(() => {
+    return {
+      chart: {
+        id: graphId,
+        selection: {
+          enabled: false,
+        },
+        toolbar: {
+          show: false,
+        },
+        zoom: {
+          enabled: false,
+        },
+      },
+      colors: GRAPH_COLORS,
+      grid: {
+        show: false,
+      },
+      legend: {
+        show: false,
+      },
+      dataLabels: {
+        enabled: false,
+      },
+      stroke: {
+        width: 1,
+      },
+      tooltip: {
+        theme: systemTheme || theme,
+      },
+      markers: {
+        size: 0,
+      },
+      xaxis: {
+        tickAmount: 4,
+        tickPlacement: "between",
+        labels: {
+          offsetX: -30,
+          formatter: formatTime,
+        },
+        axisBorder: {
+          show: false,
+        },
+        axisTicks: {
+          show: false,
+        },
+      },
+      yaxis: {
+        show: false,
+        min: 0,
+      },
+    } as ApexCharts.ApexOptions;
+  }, [graphId, systemTheme, theme, formatTime]);
+
+  useEffect(() => {
+    ApexCharts.exec(graphId, "updateOptions", options, true, true);
+  }, [graphId, options]);
+
+  return (
+    <div className="w-full flex flex-col">
+      {lastValues && (
+        <div className="flex items-center gap-2.5">
+          {dataLabels.map((label, labelIdx) => (
+            <div key={label} className="flex items-center gap-1">
+              <MdCircle
+                className="size-2"
+                style={{ color: GRAPH_COLORS[labelIdx] }}
+              />
+              <div className="text-xs text-muted-foreground">{label}</div>
+              <div className="text-xs text-primary-foreground">
+                {lastValues[labelIdx]}
+                {unit}
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+      <Chart type="line" options={options} series={data} height="120" />
+    </div>
+  );
+}
--- a/web/src/components/graph/TimelineGraph.tsx
+++ b/web/src/components/graph/TimelineGraph.tsx
@ -1,101 +0,0 @@
-import { GraphData } from "@/types/graph";
-import Chart from "react-apexcharts";
-
-type TimelineGraphProps = {
-  id: string;
-  data: GraphData[];
-  start: number;
-  end: number;
-  objects: number[];
-};
-
-/**
- * A graph meant to be overlaid on top of a timeline
- */
-export default function TimelineGraph({
-  id,
-  data,
-  start,
-  end,
-  objects,
-}: TimelineGraphProps) {
-  return (
-    <Chart
-      type="bar"
-      options={{
-        colors: [
-          ({ dataPointIndex }: { dataPointIndex: number }) => {
-            if (objects.includes(dataPointIndex)) {
-              return "#06b6d4";
-            } else {
-              return "#991b1b";
-            }
-          },
-        ],
-        chart: {
-          id: id,
-          selection: {
-            enabled: false,
-          },
-          toolbar: {
-            show: false,
-          },
-          zoom: {
-            enabled: false,
-          },
-        },
-        dataLabels: { enabled: false },
-        grid: {
-          show: false,
-          padding: {
-            bottom: 2,
-            top: -12,
-            left: -20,
-            right: 0,
-          },
-        },
-        legend: {
-          show: false,
-          position: "top",
-        },
-        plotOptions: {
-          bar: {
-            columnWidth: "100%",
-            barHeight: "100%",
-            hideZeroBarsWhenGrouped: true,
-          },
-        },
-        stroke: {
-          width: 0,
-        },
-        tooltip: {
-          enabled: false,
-        },
-        xaxis: {
-          type: "datetime",
-          axisBorder: {
-            show: false,
-          },
-          axisTicks: {
-            show: false,
-          },
-          labels: {
-            show: false,
-          },
-          min: start,
-          max: end,
-        },
-        yaxis: {
-          axisBorder: {
-            show: false,
-          },
-          labels: {
-            show: false,
-          },
-        },
-      }}
-      series={data}
-      height="100%"
-    />
-  );
-}
--- a/web/src/components/icons/LiveIcons.tsx
+++ b/web/src/components/icons/LiveIcons.tsx
@ -32,10 +32,10 @@ export function LiveListIcon({ layout }: LiveIconProps) {
  return (
    <div className="size-full flex flex-col gap-0.5 rounded-md overflow-hidden">
      <div
-        className={`size-full ${layout == "list" ? "bg-selected" : "bg-muted-foreground"}`}
+        className={`size-full ${layout == "list" ? "bg-selected" : "bg-secondary-foreground"}`}
      />
      <div
-        className={`size-full ${layout == "list" ? "bg-selected" : "bg-muted-foreground"}`}
+        className={`size-full ${layout == "list" ? "bg-selected" : "bg-secondary-foreground"}`}
      />
    </div>
  );
--- a/web/src/components/navigation/NavItem.tsx
+++ b/web/src/components/navigation/NavItem.tsx
@ -12,11 +12,11 @@ import { TooltipPortal } from "@radix-ui/react-tooltip";
 const variants = {
  primary: {
    active: "font-bold text-white bg-selected",
-    inactive: "text-muted-foreground bg-secondary",
+    inactive: "text-secondary-foreground bg-secondary",
  },
  secondary: {
    active: "font-bold text-selected",
-    inactive: "text-muted-foreground",
+    inactive: "text-secondary-foreground",
  },
 };

--- a/web/src/components/overlay/ExportDialog.tsx
+++ b/web/src/components/overlay/ExportDialog.tsx
@ -122,8 +122,8 @@ export default function ExportDialog({
              setMode("select");
            }}
          >
-            <FaArrowDown className="p-1 fill-secondary bg-muted-foreground rounded-md" />
-            {isDesktop && "Export"}
+            <FaArrowDown className="p-1 fill-secondary bg-secondary-foreground rounded-md" />
+            {isDesktop && <div className="text-primary-foreground">Export</div>}
          </Button>
        </Trigger>
        <Content
--- a/web/src/components/overlay/MobileCameraDrawer.tsx
+++ b/web/src/components/overlay/MobileCameraDrawer.tsx
@ -24,7 +24,7 @@ export default function MobileCameraDrawer({
    <Drawer open={cameraDrawer} onOpenChange={setCameraDrawer}>
      <DrawerTrigger asChild>
        <Button className="rounded-lg capitalize" size="sm" variant="secondary">
-          <FaVideo className="text-muted-foreground" />
+          <FaVideo className="text-secondary-foreground" />
        </Button>
      </DrawerTrigger>
      <DrawerContent className="max-h-[75dvh] px-4 mx-1 rounded-t-2xl overflow-hidden">
--- a/web/src/components/overlay/MobileReviewSettingsDrawer.tsx
+++ b/web/src/components/overlay/MobileReviewSettingsDrawer.tsx
@ -137,7 +137,7 @@ export default function MobileReviewSettingsDrawer({
            className="w-full flex justify-center items-center gap-2"
            onClick={() => setDrawerMode("export")}
          >
-            <FaArrowDown className="p-1 fill-secondary bg-muted-foreground rounded-md" />
+            <FaArrowDown className="p-1 fill-secondary bg-secondary-foreground rounded-md" />
            Export
          </Button>
        )}
@ -146,7 +146,7 @@ export default function MobileReviewSettingsDrawer({
            className="w-full flex justify-center items-center gap-2"
            onClick={() => setDrawerMode("calendar")}
          >
-            <FaCalendarAlt className="fill-muted-foreground" />
+            <FaCalendarAlt className="fill-secondary-foreground" />
            Calendar
          </Button>
        )}
@ -155,7 +155,7 @@ export default function MobileReviewSettingsDrawer({
            className="w-full flex justify-center items-center gap-2"
            onClick={() => setDrawerMode("filter")}
          >
-            <FaFilter className="fill-muted-foreground" />
+            <FaFilter className="fill-secondary-foreground" />
            Filter
          </Button>
        )}
@ -282,7 +282,7 @@ export default function MobileReviewSettingsDrawer({
            variant="secondary"
            onClick={() => setDrawerMode("select")}
          >
-            <FaCog className="text-muted-foreground" />
+            <FaCog className="text-secondary-foreground" />
          </Button>
        </DrawerTrigger>
        <DrawerContent className="max-h-[80dvh] overflow-hidden flex flex-col items-center gap-2 px-4 pb-4 mx-1 rounded-t-2xl">
--- a/web/src/components/overlay/MobileTimelineDrawer.tsx
+++ b/web/src/components/overlay/MobileTimelineDrawer.tsx
@ -23,7 +23,7 @@ export default function MobileTimelineDrawer({
    <Drawer open={drawer} onOpenChange={setDrawer}>
      <DrawerTrigger asChild>
        <Button className="rounded-lg capitalize" size="sm" variant="secondary">
-          <FaFlag className="text-muted-foreground" />
+          <FaFlag className="text-secondary-foreground" />
        </Button>
      </DrawerTrigger>
      <DrawerContent className="max-h-[75dvh] overflow-hidden flex flex-col items-center gap-2 px-4 pb-4 mx-1 rounded-t-2xl">
--- a/web/src/pages/SubmitPlus.tsx
+++ b/web/src/pages/SubmitPlus.tsx
@ -237,8 +237,8 @@ function PlusFilterGroup({
      >
        <Trigger asChild>
          <Button size="sm" className="mx-1 capitalize" variant="secondary">
-            <FaVideo className="md:mr-[10px] text-muted-foreground" />
-            <div className="hidden md:block">
+            <FaVideo className="md:mr-[10px] text-secondary-foreground" />
+            <div className="hidden md:block text-primary-foreground">
              {selectedCameras == undefined
                ? "All Cameras"
                : `${selectedCameras.length} Cameras`}
@ -314,8 +314,8 @@ function PlusFilterGroup({
      >
        <Trigger asChild>
          <Button size="sm" className="mx-1 capitalize" variant="secondary">
-            <FaList className="md:mr-[10px] text-muted-foreground" />
-            <div className="hidden md:block">
+            <FaList className="md:mr-[10px] text-secondary-foreground" />
+            <div className="hidden md:block text-primary-foreground">
              {selectedLabels == undefined
                ? "All Labels"
                : `${selectedLabels.length} Labels`}
--- a/web/src/pages/System.tsx
+++ b/web/src/pages/System.tsx
@ -10,6 +10,7 @@ import { LuActivity, LuHardDrive } from "react-icons/lu";
 import { FaVideo } from "react-icons/fa";
 import Logo from "@/components/Logo";
 import useOptimisticState from "@/hooks/use-optimistic-state";
+import CameraMetrics from "@/views/system/CameraMetrics";

 const metrics = ["general", "storage", "cameras"] as const;
 type SystemMetric = (typeof metrics)[number];
@ -82,127 +83,14 @@ function System() {
        />
      )}
      {page == "storage" && <StorageMetrics setLastUpdated={setLastUpdated} />}
+      {page == "cameras" && (
+        <CameraMetrics
+          lastUpdated={lastUpdated}
+          setLastUpdated={setLastUpdated}
+        />
+      )}
    </div>
  );
 }

 export default System;
-
-/**
- * const cameraCpuSeries = useMemo(() => {
-    if (!statsHistory || statsHistory.length == 0) {
-      return {};
-    }
-
-    const series: {
-      [cam: string]: {
-        [key: string]: { name: string; data: { x: object; y: string }[] };
-      };
-    } = {};
-
-    statsHistory.forEach((stats, statsIdx) => {
-      if (!stats) {
-        return;
-      }
-
-      const statTime = new Date(stats.service.last_updated * 1000);
-
-      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;
-  }, [statsHistory]);
-  const cameraFpsSeries = useMemo(() => {
-    if (!statsHistory) {
-      return {};
-    }
-
-    const series: {
-      [cam: string]: {
-        [key: string]: { name: string; data: { x: object; y: number }[] };
-      };
-    } = {};
-
-    statsHistory.forEach((stats, statsIdx) => {
-      if (!stats) {
-        return;
-      }
-
-      const statTime = new Date(stats.service.last_updated * 1000);
-
-      Object.entries(stats.cameras).forEach(([key, camStats]) => {
-        if (!(key in series)) {
-          const camName = key.replaceAll("_", " ");
-          series[key] = {};
-          series[key]["det"] = { name: `${camName} detections`, data: [] };
-          series[key]["skip"] = {
-            name: `${camName} skipped detections`,
-            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]);
- *
- *  <div className="bg-primary rounded-2xl flex-col">
-      <Heading as="h4">Cameras</Heading>
-      <div className="grid grid-cols-1 sm:grid-cols-2">
-        {config &&
-          Object.values(config.cameras).map((camera) => {
-            if (camera.enabled) {
-              return (
-                <div key={camera.name} className="grid grid-cols-2">
-                  <ThresholdBarGraph
-                    graphId={`${camera.name}-cpu`}
-                    title={`${camera.name.replaceAll("_", " ")} CPU`}
-                    unit="%"
-                    data={Object.values(cameraCpuSeries[camera.name] || {})}
-                  />
-                  <ThresholdBarGraph
-                    graphId={`${camera.name}-fps`}
-                    title={`${camera.name.replaceAll("_", " ")} FPS`}
-                    unit=""
-                    data={Object.values(cameraFpsSeries[camera.name] || {})}
-                  />
-                </div>
-              );
-            }
-
-            return null;
-          })}
-      </div>
- */
--- a/web/src/views/events/RecordingView.tsx
+++ b/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
--- a/web/src/views/live/LiveBirdseyeView.tsx
+++ b/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 />
--- a/web/src/views/live/LiveCameraView.tsx
+++ b/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>
          ) : (
--- a/web/src/views/live/LiveDashboardView.tsx
+++ b/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")}
--- a/web/src/views/system/CameraMetrics.tsx
+++ b/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>
+  );
+}
--- a/web/src/views/system/GeneralMetrics.tsx
+++ b/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
--- a/web/src/views/system/StorageMetrics.tsx
+++ b/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`}
--- a/web/themes/theme-default.css
+++ b/web/themes/theme-default.css
@ -27,8 +27,8 @@
    --secondary: hsl(0, 0%, 96%);
    --secondary: 0 0% 96%;

-    --secondary-foreground: hsl(0, 0%, 32%);
-    --secondary-foreground: 0 0% 32%;
+    --secondary-foreground: hsl(0, 0%, 83%);
+    --secondary-foreground: 0 0% 83%;

    --secondary-highlight: hsl(0, 0%, 94%);
    --secondary-highlight: 0 0% 94%;
@ -112,8 +112,8 @@
    --secondary: hsl(0, 0%, 15%);
    --secondary: 0 0% 15%;

-    --secondary-foreground: hsl(0, 0%, 83%);
-    --secondary-foreground: 0 0% 83%;
+    --secondary-foreground: hsl(0, 0%, 32%);
+    --secondary-foreground: 0 0% 32%;

    --secondary-highlight: hsl(0, 0%, 25%);
    --secondary-highlight: 0 0% 25%;