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/e2e/fixtures/mock-data/config.ts

@@ -19,7 +19,7 @@ export type DeepPartial<T> = {
   [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
 };
 
-function deepMerge<T extends Record<string, unknown>>(
+export function deepMerge<T extends Record<string, unknown>>(
   base: T,
   overrides?: DeepPartial<T>,
 ): T {

web/e2e/fixtures/mock-data/stats.ts

@@ -2,7 +2,7 @@
  * FrigateStats factory for E2E tests.
  */
 
-import type { DeepPartial } from "./config";
+import { deepMerge, type DeepPartial } from "./config";
 
 function cameraStats(_name: string) {
   return {
@@ -72,5 +72,5 @@ export function statsFactory(
   overrides?: DeepPartial<typeof BASE_STATS>,
 ): typeof BASE_STATS {
   if (!overrides) return BASE_STATS;
-  return { ...BASE_STATS, ...overrides } as typeof BASE_STATS;
+  return deepMerge(BASE_STATS, overrides) as typeof BASE_STATS;
 }

web/e2e/helpers/api-mocker.ts

@@ -48,6 +48,8 @@ export interface ApiMockOverrides {
     available?: { key: string; presets: Record<string, string> }[];
   };
   users?: { username: string; role: string }[];
+  notices?: unknown[];
+  noticeStats?: unknown[];
 }
 
 export class ApiMocker {
@@ -201,6 +203,15 @@ export class ApiMocker {
       }),
     );
 
+    // Notices. The stats route is registered after the list route so it wins
+    // for /api/notices/stats; the list glob does not match a sub-path anyway.
+    await this.page.route("**/api/notices", (route) =>
+      route.fulfill({ json: overrides?.notices ?? [] }),
+    );
+    await this.page.route("**/api/notices/stats", (route) =>
+      route.fulfill({ json: overrides?.noticeStats ?? [] }),
+    );
+
     // Users. GET lists them; POST/PUT (create, password) just succeed, so
     // tests assert on the intercepted request body instead of a response.
     await this.page.route("**/api/users**", (route) =>

web/e2e/specs/navigation.spec.ts

@@ -130,8 +130,8 @@ test.describe("Navigation — settings menu (desktop) @critical", () => {
 
   const TARGETS = [
     { label: "Settings", url: /\/settings/ },
-    { label: "System metrics", url: /\/system/ },
-    { label: "System logs", url: /\/logs/ },
+    { label: "Health and Metrics", url: /\/system/ },
+    { label: "Logs", url: /\/logs/ },
     { label: "Configuration Editor", url: /\/config/ },
   ];
 
@@ -142,7 +142,7 @@ test.describe("Navigation — settings menu (desktop) @critical", () => {
         .locator("aside .mb-8 div[class*='cursor-pointer']")
         .first();
       await gear.click();
-      await frigateApp.page.getByLabel(target.label).click();
+      await frigateApp.page.getByLabel(target.label, { exact: true }).click();
       await expect(frigateApp.page).toHaveURL(target.url);
     });
   }

web/e2e/specs/system-health.spec.ts

@@ -0,0 +1,169 @@
+/**
+ * Health tab tests -- MEDIUM tier.
+ *
+ * Default tab, notice list rendering, dismiss, empty state, update notice.
+ */
+
+import { test, expect } from "../fixtures/frigate-test";
+
+const NOW = Math.floor(Date.now() / 1000);
+
+const STATE_NOTICE = {
+  id: "ffmpeg_crash_loop:front_door",
+  kind: "ffmpeg_crash_loop",
+  mode: "state",
+  severity: "error",
+  category: "camera",
+  scope: "front_door",
+  params: { restarts: 6 },
+  first_seen: NOW - 600,
+  last_seen: NOW,
+  count: 1,
+  dismissed_at: null,
+};
+
+const EVENT_NOTICE = {
+  id: "detector_stuck",
+  kind: "detector_stuck",
+  mode: "event",
+  severity: "warning",
+  category: "detector",
+  scope: null,
+  params: { detector: "ov" },
+  first_seen: NOW - 7200,
+  last_seen: NOW - 60,
+  count: 3,
+  dismissed_at: null,
+};
+
+test.describe("System — Health tab @medium", () => {
+  test("Health is the default tab and lists notices by severity", async ({
+    frigateApp,
+  }) => {
+    await frigateApp.installDefaults({
+      notices: [STATE_NOTICE, EVENT_NOTICE],
+      noticeStats: [
+        {
+          kind: "ffmpeg_crash_loop",
+          occurrences: 14,
+          dismissals: 0,
+          first_seen: NOW - 86400 * 20,
+          last_seen: NOW,
+        },
+      ],
+    });
+    await frigateApp.goto("/system");
+
+    await expect(frigateApp.page.getByLabel("Select health")).toHaveAttribute(
+      "data-state",
+      "on",
+      { timeout: 15_000 },
+    );
+
+    const rows = frigateApp.page.locator("[data-testid^='health-problem-']");
+    await expect(rows).toHaveCount(2);
+    await expect(rows.nth(0)).toHaveAttribute("data-severity", "error");
+    await expect(rows.nth(0)).toContainText("ffmpeg has crashed 6 times");
+    await expect(rows.nth(0)).toContainText("14 times since");
+    // the default fixture's cpu detector is slow (75.5 ms); PR 2 merges live
+    // problems into this list, PR 1 does not, so no extra row here
+    await expect(
+      rows.nth(0).getByRole("button", { name: "Dismiss" }),
+    ).toHaveCount(0);
+    await expect(rows.nth(1)).toContainText("Detector ov was restarted");
+    await expect(rows.nth(1)).toContainText("3 times");
+    await expect(
+      rows.nth(1).getByRole("button", { name: "Dismiss" }),
+    ).toBeVisible();
+  });
+
+  test("dismiss posts and removes the row", async ({ frigateApp }) => {
+    await frigateApp.installDefaults({ notices: [EVENT_NOTICE] });
+
+    // the list shrinks after the dismiss so the refetch shows the row gone
+    let dismissed = false;
+    await frigateApp.page.route("**/api/notices", (route) =>
+      route.fulfill({ json: dismissed ? [] : [EVENT_NOTICE] }),
+    );
+    await frigateApp.page.route(
+      "**/api/notices/detector_stuck/dismiss",
+      (route) => {
+        dismissed = true;
+        return route.fulfill({ json: { success: true } });
+      },
+    );
+
+    await frigateApp.goto("/system#health");
+    const request = frigateApp.page.waitForRequest(
+      (req) =>
+        req.url().includes("/api/notices/detector_stuck/dismiss") &&
+        req.method() === "POST",
+    );
+    await frigateApp.page.getByRole("button", { name: "Dismiss" }).click();
+    await request;
+
+    await expect(
+      frigateApp.page.locator("[data-testid^='health-problem-']"),
+    ).toHaveCount(0, { timeout: 5_000 });
+    await expect(frigateApp.page.getByText("No notices")).toBeVisible();
+  });
+
+  test("empty state with no notices", async ({ frigateApp }) => {
+    await frigateApp.installDefaults();
+    await frigateApp.goto("/system#health");
+
+    await expect(frigateApp.page.getByText("No notices")).toBeVisible({
+      timeout: 15_000,
+    });
+  });
+
+  test("update notice renders as info with a release link", async ({
+    frigateApp,
+  }) => {
+    await frigateApp.installDefaults({
+      notices: [
+        {
+          id: "update_available",
+          kind: "update_available",
+          mode: "state",
+          severity: "info",
+          category: "system",
+          scope: null,
+          params: { version: "0.19.0" },
+          first_seen: NOW - 3600,
+          last_seen: NOW,
+          count: 1,
+          dismissed_at: null,
+        },
+      ],
+    });
+    await frigateApp.goto("/system#health");
+
+    const row = frigateApp.page.getByTestId(
+      "health-problem-notice:update_available",
+    );
+    await expect(row).toBeVisible({ timeout: 15_000 });
+    await expect(row).toHaveAttribute("data-severity", "info");
+    await expect(row).toContainText("Frigate 0.19.0 is available");
+    await expect(row.getByRole("link", { name: "Open link" })).toHaveAttribute(
+      "href",
+      "https://github.com/blakeblackshear/frigate/releases/tag/v0.19.0",
+    );
+    await expect(row.getByRole("button", { name: "Dismiss" })).toHaveCount(0);
+  });
+});
+
+test.describe("System — Health tab mobile @medium @mobile", () => {
+  test.skip(({ frigateApp }) => !frigateApp.isMobile, "Mobile-only");
+
+  test("notices render at mobile viewport", async ({ frigateApp }) => {
+    await frigateApp.installDefaults({ notices: [STATE_NOTICE] });
+    await frigateApp.goto("/system#health");
+
+    await expect(
+      frigateApp.page.getByTestId(
+        "health-problem-notice:ffmpeg_crash_loop:front_door",
+      ),
+    ).toBeVisible({ timeout: 15_000 });
+  });
+});