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