Notices and status bar improvements (#24459)

* Notice and status bar improvements

Status bar problems added in the same pass got the same `Date.now()` id and overwrote each other, so usually only one showed. Messages now fall back to their text as the id. The desktop status bar shows the most severe message with a count of the rest that opens a popover listing all of them, and the mobile drawer stacks them vertically instead of placing them side by side.

Dismissing a notice hid it for good, so a detector that restarted again after a dismissal was never shown. Dismiss is replaced by acknowledge, which hides a notice until it happens again, and mute, which hides it permanently. Kinds that never repeat (config and stream checks, the update notice) can only be muted. `reopen_at_count` is removed since acknowledge covers the failed login case.

* move camera CPU warnings to notices

High ffmpeg and detect CPU warnings sat in the status bar with no way to dismiss them. They're now `ffmpeg_high_cpu` and `detect_high_cpu` notices, raised per episode by the same tracker as skipped detections. Also stop failed login attempts held from before an acknowledgement from reopening the notice.

* fix mypy and handle missing cpu stats in notices

web/src/components/StatusMessageList.tsx

@@ -0,0 +1,78 @@
+import { StatusMessage } from "@/context/statusbar-context";
+import { cn } from "@/lib/utils";
+import { ProblemSeverity } from "@/types/stats";
+import { IoIosWarning } from "react-icons/io";
+import { Link } from "react-router-dom";
+
+const SEVERITY_COLOR: Record<ProblemSeverity, string> = {
+  error: "text-danger",
+  warning: "text-orange-400",
+  info: "text-selected",
+};
+
+type StatusMessageItemProps = {
+  message: StatusMessage;
+  className?: string;
+  onNavigate?: () => void;
+};
+
+/** One status bar message, a link when it has one. */
+export function StatusMessageItem({
+  message,
+  className,
+  onNavigate,
+}: StatusMessageItemProps) {
+  const content = (
+    <div
+      className={cn(
+        "flex items-center gap-2 text-sm",
+        message.link && "cursor-pointer hover:underline",
+        className,
+      )}
+    >
+      <IoIosWarning
+        className={cn("size-5 shrink-0", SEVERITY_COLOR[message.severity])}
+      />
+      {message.text}
+    </div>
+  );
+
+  if (!message.link) {
+    return content;
+  }
+
+  return (
+    <Link to={message.link} onClick={onNavigate}>
+      {content}
+    </Link>
+  );
+}
+
+type StatusMessageListProps = {
+  messages: StatusMessage[];
+  className?: string;
+  onNavigate?: () => void;
+};
+
+/** Status bar messages stacked one per line. */
+export default function StatusMessageList({
+  messages,
+  className,
+  onNavigate,
+}: StatusMessageListProps) {
+  return (
+    <div
+      className={cn("flex flex-col gap-2", className)}
+      data-testid="status-message-list"
+    >
+      {messages.map((message, index) => (
+        // ids are unique only within a message key
+        <StatusMessageItem
+          key={`${index}:${message.id}`}
+          message={message}
+          onNavigate={onNavigate}
+        />
+      ))}
+    </div>
+  );
+}

web/src/components/Statusbar.tsx

@@ -1,20 +1,24 @@
-import { useEmbeddingsReindexProgress } from "@/api/ws";
+import { StatusMessage } from "@/context/statusbar-context";
+import { useAutoFrigateStats } from "@/hooks/use-stats";
+import useStatusMessages from "@/hooks/use-status-messages";
+import StatusMessageList, {
+  StatusMessageItem,
+} from "@/components/StatusMessageList";
 import {
-  StatusBarMessagesContext,
-  StatusMessage,
-} from "@/context/statusbar-context";
-import useStats, { useAutoFrigateStats } from "@/hooks/use-stats";
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
 import StatusBarNotices from "@/components/health/StatusBarNotices";
 import { cn } from "@/lib/utils";
 import type { ProfilesApiResponse } from "@/types/profile";
 import { getProfileColor } from "@/utils/profileColors";
 import { useIsAdmin } from "@/hooks/use-is-admin";
-import { useContext, useEffect, useMemo } from "react";
+import { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import useSWR from "swr";
 
 import { FaCheck } from "react-icons/fa";
-import { IoIosWarning } from "react-icons/io";
 import { MdCircle } from "react-icons/md";
 import { Link } from "react-router-dom";
 
@@ -22,9 +26,7 @@ export default function Statusbar() {
   const { t } = useTranslation(["views/system"]);
   const isAdmin = useIsAdmin();
 
-  const { messages, addMessage, clearMessages } = useContext(
-    StatusBarMessagesContext,
-  )!;
+  const messages = useStatusMessages();
 
   const stats = useAutoFrigateStats();
 
@@ -38,21 +40,6 @@ export default function Statusbar() {
     return parseInt(systemCpu);
   }, [stats]);
 
-  const { potentialProblems } = useStats(stats);
-
-  useEffect(() => {
-    clearMessages("stats");
-    potentialProblems.forEach((problem) => {
-      addMessage(
-        "stats",
-        problem.text,
-        problem.color,
-        undefined,
-        problem.relevantLink,
-      );
-    });
-  }, [potentialProblems, addMessage, clearMessages]);
-
   const { data: profilesData } = useSWR<ProfilesApiResponse>("profiles");
 
   const activeProfile = useMemo(() => {
@@ -68,28 +55,6 @@ export default function Statusbar() {
     };
   }, [profilesData]);
 
-  const { payload: reindexState } = useEmbeddingsReindexProgress();
-
-  useEffect(() => {
-    if (reindexState) {
-      if (reindexState.status == "indexing") {
-        clearMessages("embeddings-reindex");
-        addMessage(
-          "embeddings-reindex",
-          t("stats.reindexingEmbeddings", {
-            processed: Math.floor(
-              (reindexState.processed_objects / reindexState.total_objects) *
-                100,
-            ),
-          }),
-        );
-      }
-      if (reindexState.status === "completed") {
-        clearMessages("embeddings-reindex");
-      }
-    }
-  }, [reindexState, addMessage, clearMessages, t]);
-
   return (
     <div className="absolute bottom-0 left-0 right-0 z-10 flex h-8 w-full items-center justify-between border-t border-secondary-highlight bg-background_alt px-4 dark:text-secondary-foreground">
       <div className="flex h-full items-center gap-2">
@@ -187,42 +152,57 @@ export default function Statusbar() {
           ))}
       </div>
       <div className="no-scrollbar flex h-full max-w-[50%] items-center gap-2 overflow-x-auto">
-        {!isAdmin ? null : Object.entries(messages).length === 0 ? (
+        {!isAdmin ? null : messages.length === 0 ? (
           <Link to="/system#health" className="flex items-center gap-2 text-sm">
             <FaCheck className="size-3 text-green-500" />
             {t("stats.healthy")}
           </Link>
+        ) : messages.length === 1 ? (
+          <StatusMessageItem
+            message={messages[0]}
+            className="whitespace-nowrap"
+          />
         ) : (
-          Object.entries(messages).map(([key, messageArray]) => (
-            <div key={key} className="flex h-full items-center gap-2">
-              {messageArray.map(({ text, color, link }: StatusMessage) => {
-                const message = (
-                  <div
-                    key={text}
-                    className={`flex items-center gap-2 whitespace-nowrap text-sm ${link ? "cursor-pointer hover:underline" : ""}`}
-                  >
-                    <IoIosWarning
-                      className={`size-5 ${color || "text-danger"}`}
-                    />
-                    {text}
-                  </div>
-                );
-
-                if (link) {
-                  return (
-                    <Link key={text} to={link}>
-                      {message}
-                    </Link>
-                  );
-                } else {
-                  return message;
-                }
-              })}
-            </div>
-          ))
+          <StatusMessagesPopover messages={messages} />
         )}
         {isAdmin && <StatusBarNotices />}
       </div>
     </div>
   );
 }
+
+type StatusMessagesPopoverProps = {
+  messages: StatusMessage[];
+};
+
+/** The most severe message and a count of the rest, which open the full list. */
+function StatusMessagesPopover({ messages }: StatusMessagesPopoverProps) {
+  const { t } = useTranslation(["views/system"]);
+  const [open, setOpen] = useState(false);
+  const [first, ...rest] = messages;
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <button
+          type="button"
+          className="flex items-center gap-2 text-sm hover:underline"
+        >
+          <StatusMessageItem
+            message={{ ...first, link: undefined }}
+            className="whitespace-nowrap"
+          />
+          <span className="shrink-0 rounded-full bg-secondary px-1.5 text-xs text-secondary-foreground">
+            {t("stats.moreMessages", { count: rest.length })}
+          </span>
+        </button>
+      </PopoverTrigger>
+      <PopoverContent side="top" align="end" className="w-auto max-w-md">
+        <StatusMessageList
+          messages={messages}
+          onNavigate={() => setOpen(false)}
+        />
+      </PopoverContent>
+    </Popover>
+  );
+}

web/src/components/health/HealthProblemRow.tsx

@@ -2,7 +2,11 @@ import { Link } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { FaTriangleExclamation } from "react-icons/fa6";
 import {
+  LuBell,
+  LuBellOff,
+  LuCheck,
   LuExternalLink,
+  LuEye,
   LuInfo,
   LuSlidersHorizontal,
   LuX,
@@ -51,7 +55,13 @@ export default function HealthProblemRow({ problem }: HealthProblemRowProps) {
     problem.link ||
     problem.docLink ||
     problem.externalLink ||
-    problem.onDismiss;
+    problem.onAcknowledge ||
+    problem.onMute ||
+    problem.onUnhide;
+  const unhideLabel =
+    problem.hidden === "muted"
+      ? t("health.notices.unmute")
+      : t("health.notices.showAgain");
 
   return (
     <div
@@ -150,16 +160,46 @@ export default function HealthProblemRow({ problem }: HealthProblemRowProps) {
               </Button>
             </RowAction>
           )}
-          {problem.onDismiss && (
-            <RowAction label={t("health.notices.dismiss")}>
+          {problem.onAcknowledge && (
+            <RowAction label={t("health.notices.acknowledgeHint")}>
               <Button
                 variant="ghost"
                 size="icon"
                 className={ICON_BUTTON_CLASS}
-                aria-label={t("health.notices.dismiss")}
-                onClick={problem.onDismiss}
+                aria-label={t("health.notices.acknowledge")}
+                onClick={problem.onAcknowledge}
               >
-                <LuX className="size-3.5" />
+                <LuCheck className="size-3.5" />
+              </Button>
+            </RowAction>
+          )}
+          {problem.onMute && (
+            <RowAction label={t("health.notices.muteHint")}>
+              <Button
+                variant="ghost"
+                size="icon"
+                className={ICON_BUTTON_CLASS}
+                aria-label={t("health.notices.mute")}
+                onClick={problem.onMute}
+              >
+                <LuBellOff className="size-3.5" />
+              </Button>
+            </RowAction>
+          )}
+          {problem.onUnhide && (
+            <RowAction label={unhideLabel}>
+              <Button
+                variant="ghost"
+                size="icon"
+                className={ICON_BUTTON_CLASS}
+                aria-label={unhideLabel}
+                onClick={problem.onUnhide}
+              >
+                {problem.hidden === "muted" ? (
+                  <LuBell className="size-3.5" />
+                ) : (
+                  <LuEye className="size-3.5" />
+                )}
               </Button>
             </RowAction>
           )}

web/src/components/health/NoticeFilterButton.tsx

@@ -24,7 +24,7 @@ export default function NoticeFilterButton({
   const { t } = useTranslation(["views/system", "components/filter"]);
   const [open, setOpen] = useState(false);
   const active =
-    filter.showDismissed ||
+    filter.showHidden ||
     filter.severities.length < DEFAULT_NOTICE_FILTER.severities.length;
 
   const severityLabels: Record<HealthSeverity, string> = {
@@ -59,10 +59,10 @@ export default function NoticeFilterButton({
   const content = (
     <div className="space-y-3 p-4">
       <FilterSwitch
-        label={t("health.notices.filter.showDismissed")}
-        isChecked={filter.showDismissed}
-        onCheckedChange={(showDismissed) =>
-          onFilterChange({ ...filter, showDismissed })
+        label={t("health.notices.filter.showHidden")}
+        isChecked={filter.showHidden}
+        onCheckedChange={(showHidden) =>
+          onFilterChange({ ...filter, showHidden })
         }
       />
       <DropdownMenuSeparator />

web/src/components/health/NoticesPane.tsx

@@ -23,9 +23,9 @@ type NoticesPaneProps = {
 
 export default function NoticesPane({ filter }: NoticesPaneProps) {
   const { t } = useTranslation(["views/system", "views/settings", "common"]);
-  const { problems, dismissed, loading, clearDismissed } = useHealthProblems(
+  const { problems, hidden, loading, unhideAll } = useHealthProblems(
     t,
-    filter.showDismissed,
+    filter.showHidden,
   );
   const [confirmClear, setConfirmClear] = useState(false);
 
@@ -37,12 +37,10 @@ export default function NoticesPane({ filter }: NoticesPaneProps) {
     [problems, filter.severities],
   );
 
-  const shownDismissed = useMemo(
+  const shownHidden = useMemo(
     () =>
-      dismissed?.filter((problem) =>
-        filter.severities.includes(problem.severity),
-      ),
-    [dismissed, filter.severities],
+      hidden?.filter((problem) => filter.severities.includes(problem.severity)),
+    [hidden, filter.severities],
   );
 
   return (
@@ -70,32 +68,32 @@ export default function NoticesPane({ filter }: NoticesPaneProps) {
           </div>
         )}
       </div>
-      {filter.showDismissed && (
+      {filter.showHidden && (
         <div className="flex flex-col gap-2">
           <div className="flex items-center justify-between gap-2">
             <div className="text-sm text-muted-foreground">
-              {t("health.notices.dismissedTitle")}
+              {t("health.notices.hiddenTitle")}
             </div>
-            {dismissed && dismissed.length > 0 && (
+            {hidden && hidden.length > 0 && (
               <Button
                 variant="ghost"
                 size="sm"
                 onClick={() => setConfirmClear(true)}
               >
-                {t("health.notices.clearDismissed")}
+                {t("health.notices.showAll")}
               </Button>
             )}
           </div>
           <div className="rounded-lg bg-background_alt p-2.5 md:rounded-2xl">
-            {shownDismissed === undefined ? (
+            {shownHidden === undefined ? (
               <Skeleton className="h-10 w-full" />
-            ) : shownDismissed.length === 0 ? (
+            ) : shownHidden.length === 0 ? (
               <div className="px-1 py-2 text-sm text-muted-foreground">
-                {t("health.notices.noneDismissed")}
+                {t("health.notices.noneHidden")}
               </div>
             ) : (
               <div className="flex flex-col">
-                {shownDismissed.map((problem) => (
+                {shownHidden.map((problem) => (
                   <HealthProblemRow key={problem.id} problem={problem} />
                 ))}
               </div>
@@ -107,10 +105,10 @@ export default function NoticesPane({ filter }: NoticesPaneProps) {
         <AlertDialogContent>
           <AlertDialogHeader>
             <AlertDialogTitle>
-              {t("health.notices.clearDismissedTitle")}
+              {t("health.notices.showAllTitle")}
             </AlertDialogTitle>
             <AlertDialogDescription>
-              {t("health.notices.clearDismissedDesc")}
+              {t("health.notices.showAllDesc")}
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
@@ -119,9 +117,9 @@ export default function NoticesPane({ filter }: NoticesPaneProps) {
             </AlertDialogCancel>
             <AlertDialogAction
               className={buttonVariants({ variant: "destructive" })}
-              onClick={clearDismissed}
+              onClick={unhideAll}
             >
-              {t("health.notices.clearDismissed")}
+              {t("health.notices.showAll")}
             </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>

web/src/components/health/StatusBarNotices.tsx

@@ -2,7 +2,7 @@ import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import { useHealthProblems } from "@/hooks/use-health-problems";
 
-/** The count of undismissed Notices rows, shown before the status bar's health text. */
+/** The count of shown Notices rows, shown before the status bar's health text. */
 export default function StatusBarNotices() {
   const { t } = useTranslation(["views/system"]);
   const { problems, loading } = useHealthProblems(t);

web/src/components/navigation/Bottombar.tsx

@@ -1,30 +1,15 @@
 import NavItem from "./NavItem";
 import { IoIosWarning } from "react-icons/io";
 import { Drawer, DrawerContent, DrawerTrigger } from "../ui/drawer";
-import useSWR from "swr";
-import { FrigateStats } from "@/types/stats";
-import { useEmbeddingsReindexProgress, useFrigateStats } from "@/api/ws";
-import {
-  useContext,
-  useEffect,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import useStats from "@/hooks/use-stats";
+import { useLayoutEffect, useRef, useState } from "react";
+import useStatusMessages from "@/hooks/use-status-messages";
+import StatusMessageList from "../StatusMessageList";
 import { useIsAdmin } from "@/hooks/use-is-admin";
 import GeneralSettings from "../menu/GeneralSettings";
 import useNavigation from "@/hooks/use-navigation";
-import {
-  StatusBarMessagesContext,
-  StatusMessage,
-} from "@/context/statusbar-context";
-import { Link } from "react-router-dom";
 import { cn } from "@/lib/utils";
 import { isMobile } from "react-device-detect";
 import { isPWA } from "@/utils/isPWA";
-import { useTranslation } from "react-i18next";
 
 function Bottombar() {
   const navItems = useNavigation("secondary");
@@ -98,64 +83,12 @@ type StatusAlertNavProps = {
   large?: boolean;
 };
 function StatusAlertNav({ className, large }: StatusAlertNavProps) {
-  const { t } = useTranslation(["views/system"]);
-  const { data: initialStats } = useSWR<FrigateStats>("stats", {
-    revalidateOnFocus: false,
-  });
-  const latestStats = useFrigateStats();
-
-  const { messages, addMessage, clearMessages } = useContext(
-    StatusBarMessagesContext,
-  )!;
-
-  const stats = useMemo(() => {
-    if (latestStats) {
-      return latestStats;
-    }
-
-    return initialStats;
-  }, [initialStats, latestStats]);
-  const { potentialProblems } = useStats(stats);
-
-  useEffect(() => {
-    clearMessages("stats");
-    potentialProblems.forEach((problem) => {
-      addMessage(
-        "stats",
-        problem.text,
-        problem.color,
-        undefined,
-        problem.relevantLink,
-      );
-    });
-  }, [potentialProblems, addMessage, clearMessages]);
-
-  const { payload: reindexState } = useEmbeddingsReindexProgress();
-
-  useEffect(() => {
-    if (reindexState) {
-      if (reindexState.status == "indexing") {
-        clearMessages("embeddings-reindex");
-        addMessage(
-          "embeddings-reindex",
-          t("stats.reindexingEmbeddings", {
-            processed: Math.floor(
-              (reindexState.processed_objects / reindexState.total_objects) *
-                100,
-            ),
-          }),
-        );
-      }
-      if (reindexState.status === "completed") {
-        clearMessages("embeddings-reindex");
-      }
-    }
-  }, [reindexState, addMessage, clearMessages, t]);
+  const messages = useStatusMessages();
 
   const isAdmin = useIsAdmin();
 
   // problems link to admin-only pages
-  if (!isAdmin || !messages || Object.keys(messages).length === 0) {
+  if (!isAdmin || messages.length === 0) {
     return;
   }
 
@@ -163,6 +96,7 @@ function StatusAlertNav({ className, large }: StatusAlertNavProps) {
     <Drawer>
       <DrawerTrigger asChild>
         <div
+          data-testid="status-alert-trigger"
           className={cn(
             "flex flex-col items-center justify-center p-2",
             large && "size-12",
@@ -182,32 +116,10 @@ function StatusAlertNav({ className, large }: StatusAlertNavProps) {
           className,
         )}
       >
-        <div className="scrollbar-container flex h-auto w-full flex-col items-center gap-2 overflow-y-auto overflow-x-hidden px-2 py-4">
-          {Object.entries(messages).map(([key, messageArray]) => (
-            <div key={key} className="flex w-full items-center gap-2">
-              {messageArray.map(({ id, text, color, link }: StatusMessage) => {
-                const message = (
-                  <div key={id} className="flex items-center gap-2 text-xs">
-                    <IoIosWarning
-                      className={`size-5 ${color || "text-danger"}`}
-                    />
-                    {text}
-                  </div>
-                );
-
-                if (link) {
-                  return (
-                    <Link key={id} to={link}>
-                      {message}
-                    </Link>
-                  );
-                } else {
-                  return message;
-                }
-              })}
-            </div>
-          ))}
-        </div>
+        <StatusMessageList
+          messages={messages}
+          className="scrollbar-container w-full overflow-y-auto overflow-x-hidden px-4 py-4"
+        />
       </DrawerContent>
     </Drawer>
   );