feat: improve error handling and notification system

- add new notification store
- add new notification badge component to navbar
- add new notification dropdown
- make warning and error distiguishible in ui
- allow users to dismiss warnings/errors
- allow users to check and clear notification history

Signed-off-by: Siavash Safi <[email protected]>

Author: siavashs

ui/package-lock.json

@@ -3,13 +3,19 @@ import { mount } from "enzyme";
 import Favico from "favico.js";
 
 import { AlertStore } from "Stores/AlertStore";
+import { notificationStore } from "Stores/NotificationStore";
 import FaviconBadge from ".";
 
 let alertStore: AlertStore;
 
 beforeEach(() => {
   alertStore = new AlertStore([]);
   Favico.badge.mockClear();
+  // Clear all notifications
+  notificationStore.activeNotifications.forEach((n) =>
+    notificationStore.dismissNotification(n.id),
+  );
+  notificationStore.clearDismissed();
 });
 
 const MountedFaviconBadge = () => {
@@ -42,26 +48,31 @@ describe("<FaviconBadge />", () => {
     expect(Favico.badge).toHaveBeenCalledWith("?");
   });
 
-  it("badge is ! when there are alertmanager upstreams with errors", () => {
-    alertStore.data.setUpstreams({
-      counters: { total: 1, healthy: 1, failed: 0 },
-      clusters: { default: ["default"] },
-      instances: [
-        {
-          name: "default",
-          uri: "http://localhost",
-          publicURI: "http://example.com",
-          readonly: false,
-          headers: { foo: "bar" },
-          corsCredentials: "include",
-          error: 'Healthcheck filter "DeadMansSwitch" didn\'t match any alerts',
-          version: "0.24.0",
-          cluster: "default",
-          clusterMembers: ["default"],
-        },
-      ],
+  it("badge is ! when there are error notifications", () => {
+    // Add an error notification
+    notificationStore.addNotification({
+      type: "error",
+      title: "Test Error",
+      message: "Test error message",
+      source: "alertmanager",
+      sourceId: "test-error",
     });
+
     MountedFaviconBadge();
     expect(Favico.badge).toHaveBeenCalledWith("!");
   });
+
+  it("badge is ⚠ when there are warning notifications", () => {
+    // Add a warning notification
+    notificationStore.addNotification({
+      type: "warning",
+      title: "Test Warning",
+      message: "Test warning message",
+      source: "alertmanager",
+      sourceId: "test-warning",
+    });
+
+    MountedFaviconBadge();
+    expect(Favico.badge).toHaveBeenCalledWith("⚠");
+  });
 });

ui/src/Components/FaviconBadge/index.test.tsx

@@ -1,38 +1,44 @@
-import { useState, useEffect, FC } from "react";
+import { useEffect } from "react";
 
 import { autorun } from "mobx";
 
-import Favico from "favico.js";
-
 import type { AlertStore } from "Stores/AlertStore";
+import { notificationStore } from "Stores/NotificationStore";
+
+import Favico from "favico.js";
 
-const FaviconBadge: FC<{
-  alertStore: AlertStore;
-}> = ({ alertStore }) => {
-  const [favico] = useState(
-    new Favico({
+const FaviconBadge = ({ alertStore }: { alertStore: AlertStore }) => {
+  useEffect(() => {
+    const favico = new Favico({
       animation: "none",
-      position: "down",
-      bgColor: "#e74c3c",
-      textColor: "#fff",
-    }),
-  );
-
-  useEffect(
-    () =>
+    });
+
+    const dispose = autorun(() =>
       autorun(() => {
-        favico.badge(
-          alertStore.data.upstreamsWithErrors.length > 0
-            ? "!"
-            : alertStore.status.error === null
-              ? alertStore.info.totalAlerts
-              : "?",
-        );
+        // Priority: critical notifications > network errors > alert count
+        const criticalCount = notificationStore.errorCount;
+        const warningCount = notificationStore.warningCount;
+
+        let badge;
+        if (criticalCount > 0) {
+          badge = "!";
+        } else if (warningCount > 0) {
+          badge = "⚠";
+        } else if (alertStore.status.error !== null) {
+          badge = "?";
+        } else {
+          badge = alertStore.info.totalAlerts;
+        }
+
+        favico.badge(badge);
       }),
-    [], // eslint-disable-line react-hooks/exhaustive-deps
-  );
+    );
+
+    return dispose;
+  }, [alertStore]);
 
   return null;
 };
 
+export { FaviconBadge };
 export default FaviconBadge;

ui/src/Components/FaviconBadge/index.tsx

@@ -5,6 +5,7 @@ import { observer } from "mobx-react-lite";
 import type { AlertStore } from "Stores/AlertStore";
 import type { Settings } from "Stores/Settings";
 import type { SilenceFormStore } from "Stores/SilenceFormStore";
+import { useNotificationManager } from "Hooks/useNotificationManager";
 import AlertGrid from "./AlertGrid";
 import { FatalError } from "./FatalError";
 import { UpgradeNeeded } from "./UpgradeNeeded";
@@ -17,6 +18,9 @@ const Grid: FC<{
   silenceFormStore: SilenceFormStore;
   settingsStore: Settings;
 }> = ({ alertStore, settingsStore, silenceFormStore }) => {
+  // Initialize notification management
+  useNotificationManager(alertStore);
+
   return alertStore.info.upgradeNeeded ? (
     <UpgradeNeeded newVersion={alertStore.info.version} reloadAfter={3000} />
   ) : alertStore.info.reloadNeeded ? (

ui/src/Components/Grid/index.tsx

@@ -17,6 +17,7 @@ import { OverviewModal } from "Components/OverviewModal";
 import { MainModal } from "Components/MainModal";
 import SilenceModal from "Components/SilenceModal";
 import AppToasts from "Components/Toast/AppToasts";
+import { NotificationBadge } from "Components/NotificationBadge";
 import { ThemeContext } from "Components/Theme";
 import { Fetcher } from "Components/Fetcher";
 import { FilterInput } from "./FilterInput";
@@ -135,6 +136,7 @@ const NavBar: FC<{
           {alertStore.info.timestamp !== "" &&
           alertStore.data.upstreams.instances.length === 0 ? null : (
             <ul className="navbar-nav flex-wrap flex-shrink-1 ms-1">
+              <NotificationBadge />
               <AppToasts alertStore={alertStore} />
               <SilenceModal
                 alertStore={alertStore}