Add a notice registry and System Health tab (#24178)

* add a notice registry and System Health tab

Problems Frigate detects on its own (ffmpeg crash loops, stuck detectors, failed model downloads, recordings deleted before their retention period) only ever existed as log lines. This adds a `NoticeRegistry` in the main process backed by two tables, an `update_notice` IPC topic so producers in other processes can reach it through the dispatcher, an admin-only API and websocket topic, and a Health tab that lists them. Kinds declare their own mode, severity, and category in one place: state notices are resolved by their producer, event notices are dismissed by the user.

* treat a prerelease as behind its final release

* fix notices clearing early

* rename menu items and update docs

* don't resolve the update notice on a failed version lookup

web/src/components/health/HealthProblemRow.tsx

@@ -0,0 +1,88 @@
+import { Link } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { FaTriangleExclamation } from "react-icons/fa6";
+import {
+  LuExternalLink,
+  LuInfo,
+  LuSlidersHorizontal,
+  LuX,
+} from "react-icons/lu";
+import { Button } from "@/components/ui/button";
+import { CameraNameLabel } from "@/components/camera/FriendlyNameLabel";
+import type { HealthProblem } from "@/types/health";
+
+type HealthProblemRowProps = {
+  problem: HealthProblem;
+};
+
+export default function HealthProblemRow({ problem }: HealthProblemRowProps) {
+  const { t } = useTranslation(["views/system"]);
+
+  return (
+    <div
+      className="flex items-start gap-2 border-b border-border px-1 py-2 text-sm last:border-b-0"
+      data-testid={`health-problem-${problem.id}`}
+      data-severity={problem.severity}
+    >
+      <div className="mt-0.5 flex shrink-0">
+        {problem.severity === "error" && <LuX className="size-4 text-danger" />}
+        {problem.severity === "warning" && (
+          <FaTriangleExclamation className="size-4 text-yellow-500" />
+        )}
+        {problem.severity === "info" && (
+          <LuInfo className="size-4 text-selected" />
+        )}
+      </div>
+      {problem.scope && (
+        <span className="rounded-md bg-secondary px-1.5 py-0.5 text-xs text-secondary-foreground smart-capitalize">
+          {problem.scopeIsCamera ? (
+            <CameraNameLabel camera={problem.scope} />
+          ) : (
+            problem.scope
+          )}
+        </span>
+      )}
+      <div className="min-w-0 flex-1">
+        <div>{problem.text}</div>
+        {problem.meta && (
+          <div className="mt-0.5 text-xs text-muted-foreground">
+            {problem.meta}
+          </div>
+        )}
+      </div>
+      <div className="flex shrink-0 items-center gap-2 text-muted-foreground">
+        {problem.onDismiss && (
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-6 px-2"
+            onClick={problem.onDismiss}
+            aria-label={t("health.notices.dismiss")}
+          >
+            {t("health.notices.dismiss")}
+          </Button>
+        )}
+        {problem.link && (
+          <Link
+            to={problem.link}
+            aria-label={t("health.notices.openSettings")}
+            className="hover:text-primary"
+          >
+            <LuSlidersHorizontal className="size-4" />
+          </Link>
+        )}
+        {problem.externalLink && (
+          <a
+            href={problem.externalLink}
+            target="_blank"
+            rel="noreferrer"
+            aria-label={t("health.notices.openLink")}
+            className="hover:text-primary"
+          >
+            <LuExternalLink className="size-4" />
+          </a>
+        )}
+      </div>
+    </div>
+  );
+}

web/src/components/health/NoticesPane.tsx

@@ -0,0 +1,125 @@
+import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { FaCircleCheck } from "react-icons/fa6";
+import useSWR from "swr";
+import HealthProblemRow from "@/components/health/HealthProblemRow";
+import { Skeleton } from "@/components/ui/skeleton";
+import { useNotices } from "@/hooks/use-notices";
+import { useDateLocale } from "@/hooks/use-date-locale";
+import { useTimezone } from "@/hooks/use-date-utils";
+import { formatUnixTimestampToDateTime } from "@/utils/dateUtil";
+import { releaseUrl } from "@/utils/versionUtil";
+import type { FrigateConfig } from "@/types/frigateConfig";
+import type { HealthProblem } from "@/types/health";
+import type { Notice, NoticeKind, NoticeStats } from "@/types/notice";
+
+const SETTINGS_LINK_BY_KIND: Partial<
+  Record<NoticeKind, (scope: string | null) => string>
+> = {
+  ffmpeg_crash_loop: (scope) => `/settings?page=cameraFfmpeg&camera=${scope}`,
+  retention_unmet: () => "/system#storage",
+  detector_stuck: () => "/system#general",
+};
+
+const EXTERNAL_LINK_BY_KIND: Partial<
+  Record<NoticeKind, (params: Notice["params"]) => string | undefined>
+> = {
+  update_available: (params) =>
+    typeof params.version === "string" ? releaseUrl(params.version) : undefined,
+};
+
+function useNoticeProblems(
+  notices: Notice[] | undefined,
+  statsByKind: Partial<Record<NoticeKind, NoticeStats>>,
+  dismiss: (id: string) => Promise<void>,
+): HealthProblem[] {
+  const { t } = useTranslation(["views/system"]);
+  const { data: config } = useSWR<FrigateConfig>("config");
+  const timezone = useTimezone(config);
+  const locale = useDateLocale();
+
+  return useMemo(() => {
+    if (!notices) {
+      return [];
+    }
+
+    const formatTime = (timestamp: number, date_format: string) =>
+      formatUnixTimestampToDateTime(timestamp, {
+        timezone,
+        date_format,
+        locale,
+      });
+
+    return notices.map((notice) => {
+      const stats = statsByKind[notice.kind];
+      const seen = formatTime(notice.first_seen, "MMM d, h:mm a");
+      let meta: string;
+
+      if (notice.mode === "event") {
+        meta = t("health.notices.firstSeen", {
+          time: seen,
+          times: notice.count,
+        });
+      } else if (stats && stats.occurrences > 1) {
+        meta = t("health.notices.sinceWithCount", {
+          time: seen,
+          times: stats.occurrences,
+          firstSeen: formatTime(stats.first_seen, "MMM d"),
+        });
+      } else {
+        meta = t("health.notices.since", { time: seen });
+      }
+
+      const link = SETTINGS_LINK_BY_KIND[notice.kind];
+      const external = EXTERNAL_LINK_BY_KIND[notice.kind];
+
+      return {
+        id: `notice:${notice.id}`,
+        severity: notice.severity,
+        scope: notice.scope ?? undefined,
+        scopeIsCamera: notice.category === "camera",
+        // replace keeps backend params out of i18next's own option names
+        text: t(`health.notices.kinds.${notice.kind}`, {
+          replace: notice.params,
+        }),
+        meta,
+        link: link ? link(notice.scope) : undefined,
+        externalLink: external ? external(notice.params) : undefined,
+        onDismiss:
+          notice.mode === "event" ? () => dismiss(notice.id) : undefined,
+      };
+    });
+  }, [notices, statsByKind, dismiss, t, timezone, locale]);
+}
+
+export default function NoticesPane() {
+  const { t } = useTranslation(["views/system"]);
+  const { notices, statsByKind, dismiss } = useNotices();
+  const problems = useNoticeProblems(notices, statsByKind, dismiss);
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div>
+        <div className="text-md font-medium text-primary-variant">
+          {t("health.notices.title")}
+        </div>
+      </div>
+      <div className="rounded-lg bg-background_alt p-2.5 md:rounded-2xl">
+        {notices === undefined ? (
+          <Skeleton className="h-24 w-full" />
+        ) : problems.length === 0 ? (
+          <div className="flex items-center gap-2 px-1 py-2 text-sm">
+            <FaCircleCheck className="size-4 text-success" />
+            <span>{t("health.notices.empty")}</span>
+          </div>
+        ) : (
+          <div className="flex flex-col">
+            {problems.map((problem) => (
+              <HealthProblemRow key={problem.id} problem={problem} />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

web/src/components/menu/GeneralSettings.tsx

@@ -326,7 +326,7 @@ export default function GeneralSettings({
                 <DropdownMenuLabel>{t("menu.system")}</DropdownMenuLabel>
                 <DropdownMenuSeparator />
                 <DropdownMenuGroup className={isDesktop ? "" : "flex flex-col"}>
-                  <Link to="/system#general">
+                  <Link to="/system">
                     <MenuItem
                       className={
                         isDesktop

web/src/hooks/use-notices.ts

@@ -0,0 +1,54 @@
+import { useCallback, useMemo } from "react";
+import axios from "axios";
+import useSWR from "swr";
+import { useWs } from "@/api/ws";
+import type { Notice, NoticeStats } from "@/types/notice";
+
+/**
+ * Active notices: a REST snapshot, replaced by every `notices` websocket
+ * payload after that. Stats are fetched separately and only change on
+ * dismiss or a new occurrence, so they revalidate after each dismiss.
+ */
+export function useNotices() {
+  const { data: initial, mutate } = useSWR<Notice[]>("notices", {
+    revalidateOnFocus: false,
+  });
+  const { data: stats, mutate: mutateStats } = useSWR<NoticeStats[]>(
+    "notices/stats",
+    { revalidateOnFocus: false },
+  );
+  const {
+    value: { payload },
+  } = useWs("notices", "");
+
+  const live = useMemo(
+    () =>
+      payload && typeof payload === "string"
+        ? (JSON.parse(payload) as Notice[])
+        : undefined,
+    [payload],
+  );
+
+  // once a websocket frame has arrived it is the source of truth; a dismiss
+  // still shows up because the registry publishes a new frame after it
+  const notices = live ?? initial;
+
+  const statsByKind = useMemo(() => {
+    const byKind: Partial<Record<Notice["kind"], NoticeStats>> = {};
+    (stats ?? []).forEach((entry) => {
+      byKind[entry.kind] = entry;
+    });
+    return byKind;
+  }, [stats]);
+
+  const dismiss = useCallback(
+    async (id: string) => {
+      await axios.post(`notices/${id}/dismiss`);
+      mutate();
+      mutateStats();
+    },
+    [mutate, mutateStats],
+  );
+
+  return { notices, statsByKind, dismiss };
+}

web/src/pages/System.tsx

@@ -6,7 +6,12 @@ import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
 import { isDesktop, isMobile } from "react-device-detect";
 import GeneralMetrics from "@/views/system/GeneralMetrics";
 import StorageMetrics from "@/views/system/StorageMetrics";
-import { LuActivity, LuHardDrive, LuSearchCode } from "react-icons/lu";
+import {
+  LuActivity,
+  LuHardDrive,
+  LuHeartPulse,
+  LuSearchCode,
+} from "react-icons/lu";
 import { FaVideo } from "react-icons/fa";
 import Logo from "@/components/Logo";
 import useOptimisticState from "@/hooks/use-optimistic-state";
@@ -15,9 +20,16 @@ import { useHashState } from "@/hooks/use-overlay-state";
 import { Toaster } from "@/components/ui/sonner";
 import { FrigateConfig } from "@/types/frigateConfig";
 import EnrichmentMetrics from "@/views/system/EnrichmentMetrics";
+import HealthMetrics from "@/views/system/HealthMetrics";
 import { useTranslation } from "react-i18next";
 
-const allMetrics = ["general", "enrichments", "storage", "cameras"] as const;
+const allMetrics = [
+  "health",
+  "general",
+  "enrichments",
+  "storage",
+  "cameras",
+] as const;
 type SystemMetric = (typeof allMetrics)[number];
 
 function System() {
@@ -44,8 +56,9 @@ function System() {
   // stats page
 
   const [page, setPage] = useHashState<SystemMetric>();
+  // useHashState yields "" with no hash, which ?? would not catch
   const [pageToggle, setPageToggle] = useOptimisticState(
-    page ?? "general",
+    page || "health",
     setPage,
     100,
   );
@@ -56,9 +69,7 @@ function System() {
   // Track which tabs have been visited so we can keep them mounted after first visit.
   // Using a ref updated during render avoids extra render cycles from state/effects.
   const visitedTabsRef = useRef(new Set<string>());
-  if (page) {
-    visitedTabsRef.current.add(page);
-  }
+  visitedTabsRef.current.add(pageToggle);
   const visitedTabs = visitedTabsRef.current;
 
   useEffect(() => {
@@ -98,6 +109,7 @@ function System() {
               value={item}
               aria-label={`Select ${item}`}
             >
+              {item == "health" && <LuHeartPulse className="size-4" />}
               {item == "general" && <LuActivity className="size-4" />}
               {item == "enrichments" && <LuSearchCode className="size-4" />}
               {item == "storage" && <LuHardDrive className="size-4" />}
@@ -126,6 +138,11 @@ function System() {
           </div>
         )}
       </div>
+      {visitedTabs.has("health") && (
+        <div className={pageToggle == "health" ? "contents" : "hidden"}>
+          <HealthMetrics />
+        </div>
+      )}
       {visitedTabs.has("general") && (
         <div className={page == "general" ? "contents" : "hidden"}>
           <GeneralMetrics

web/src/types/health.ts

@@ -0,0 +1,27 @@
+import type { ReactNode } from "react";
+
+export type HealthSeverity = "error" | "warning" | "info";
+
+/**
+ * One row in the Health tab's Notices list. Every source (registry notices
+ * now, live stats, config checks, and stream checks in PR 2) maps into this
+ * shape so the row component never needs to know where a problem came from.
+ */
+export type HealthProblem = {
+  id: string;
+  severity: HealthSeverity;
+  /** camera name or other scope shown as a chip before the text */
+  scope?: string;
+  /** whether scope is a camera name, so the chip can use the friendly name */
+  scopeIsCamera?: boolean;
+  text: string;
+  /** muted line under the text, for example when it was first seen */
+  meta?: ReactNode;
+  /** in-app route for a settings icon link */
+  link?: string;
+  /** docs path for an external link, rendered in PR 2 */
+  docLink?: string;
+  /** absolute URL rendered as an external link (the update notice's release page) */
+  externalLink?: string;
+  onDismiss?: () => void;
+};

web/src/types/notice.ts

@@ -0,0 +1,36 @@
+export type NoticeMode = "state" | "event";
+export type NoticeSeverity = "error" | "warning" | "info";
+export type NoticeCategory =
+  | "camera"
+  | "detector"
+  | "storage"
+  | "model"
+  | "system";
+export type NoticeKind =
+  | "ffmpeg_crash_loop"
+  | "detector_stuck"
+  | "model_download_failed"
+  | "retention_unmet"
+  | "update_available";
+
+export type Notice = {
+  id: string;
+  kind: NoticeKind;
+  mode: NoticeMode;
+  severity: NoticeSeverity;
+  category: NoticeCategory;
+  scope: string | null;
+  params: Record<string, string | number | boolean>;
+  first_seen: number;
+  last_seen: number;
+  count: number;
+  dismissed_at: number | null;
+};
+
+export type NoticeStats = {
+  kind: NoticeKind;
+  occurrences: number;
+  dismissals: number;
+  first_seen: number;
+  last_seen: number;
+};

web/src/utils/versionUtil.ts

@@ -0,0 +1,4 @@
+/** GitHub release page for a Frigate version such as "0.19.0". */
+export function releaseUrl(version: string): string {
+  return `https://github.com/blakeblackshear/frigate/releases/tag/v${version}`;
+}

web/src/views/system/HealthMetrics.tsx

@@ -0,0 +1,9 @@
+import NoticesPane from "@/components/health/NoticesPane";
+
+export default function HealthMetrics() {
+  return (
+    <div className="scrollbar-container mt-4 flex size-full flex-col gap-4 overflow-y-auto">
+      <NoticesPane />
+    </div>
+  );
+}