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}

ui/src/Components/NavBar/index.tsx

@@ -0,0 +1,163 @@
+import { mount } from "enzyme";
+
+import { NotificationContent } from "./NotificationContent";
+
+describe("<NotificationContent />", () => {
+  const mockTimestamp = new Date("2023-01-01T12:00:00Z");
+
+  it("renders with basic props", () => {
+    const wrapper = mount(
+      <NotificationContent
+        title="Test Title"
+        message="Test message"
+        timestamp={mockTimestamp}
+      />,
+    );
+
+    expect(wrapper.find("h6").html()).toContain("Test Title");
+    expect(wrapper.find("small").html()).toContain("Test message");
+    expect(wrapper.find("DateFromNow")).toHaveLength(1);
+  });
+
+  it("renders HTML content in title and message", () => {
+    const wrapper = mount(
+      <NotificationContent
+        title='Cluster <code class="bg-secondary text-white px-1 rounded">test</code> is unreachable'
+        message='Instance <code class="bg-secondary text-white px-1 rounded">am1</code> failing'
+        timestamp={mockTimestamp}
+      />,
+    );
+
+    const titleHtml = wrapper.find("h6").html();
+    const messageHtml = wrapper.find("small").html();
+
+    expect(titleHtml).toContain(
+      '<code class="bg-secondary text-white px-1 rounded">test</code>',
+    );
+    expect(messageHtml).toContain(
+      '<code class="bg-secondary text-white px-1 rounded">am1</code>',
+    );
+  });
+
+  it("uses default occurrenceCount of 1 when not provided", () => {
+    const wrapper = mount(
+      <NotificationContent
+        title="Test Title"
+        message="Test message"
+        timestamp={mockTimestamp}
+      />,
+    );
+
+    // Should not show occurrence count badge for default count of 1
+    expect(wrapper.find(".badge")).toHaveLength(0);
+  });
+
+  it("does not show occurrence count badge when count is 1", () => {
+    const wrapper = mount(
+      <NotificationContent
+        title="Test Title"
+        message="Test message"
+        timestamp={mockTimestamp}
+        occurrenceCount={1}
+      />,
+    );
+
+    expect(wrapper.find(".badge")).toHaveLength(0);
+  });
+
+  it("shows occurrence count badge when count is greater than 1", () => {
+    const wrapper = mount(
+      <NotificationContent
+        title="Test Title"
+        message="Test message"
+        timestamp={mockTimestamp}
+        occurrenceCount={3}
+      />,
+    );
+
+    const badge = wrapper.find(".badge");
+    expect(badge).toHaveLength(1);
+    expect(badge.text()).toBe("3x");
+    expect(badge.hasClass("bg-secondary")).toBe(true);
+    expect(badge.hasClass("text-white")).toBe(true);
+  });
+
+  it("formats timestamp correctly using DateFromNow", () => {
+    const wrapper = mount(
+      <NotificationContent
+        title="Test Title"
+        message="Test message"
+        timestamp={mockTimestamp}
+      />,
+    );
+
+    const dateFromNow = wrapper.find("DateFromNow");
+    expect(dateFromNow.prop("timestamp")).toBe(mockTimestamp.toISOString());
+  });
+
+  it("applies correct CSS classes", () => {
+    const wrapper = mount(
+      <NotificationContent
+        title="Test Title"
+        message="Test message"
+        timestamp={mockTimestamp}
+        occurrenceCount={2}
+      />,
+    );
+
+    // Check main container has flex-grow-1 class
+    expect(wrapper.find("div").first().hasClass("flex-grow-1")).toBe(true);
+
+    // Check header structure
+    expect(wrapper.find(".d-flex.align-items-center")).toHaveLength(1);
+    expect(wrapper.find("h6.alert-heading.mb-1.flex-grow-1")).toHaveLength(1);
+
+    // Check message styling
+    expect(wrapper.find("small.mb-1.d-block")).toHaveLength(1);
+
+    // Check timestamp styling
+    expect(wrapper.find(".text-white-50")).toHaveLength(1);
+
+    // Check occurrence count badge
+    expect(wrapper.find(".badge.bg-secondary.ms-2.text-white")).toHaveLength(1);
+  });
+
+  it("handles different occurrence count values", () => {
+    // Test with count of 5
+    const wrapper = mount(
+      <NotificationContent
+        title="Test Title"
+        message="Test message"
+        timestamp={mockTimestamp}
+        occurrenceCount={5}
+      />,
+    );
+
+    expect(wrapper.find(".badge").text()).toBe("5x");
+  });
+
+  it("matches snapshot with default occurrenceCount", () => {
+    const wrapper = mount(
+      <NotificationContent
+        title="Test notification title"
+        message="Test notification message"
+        timestamp={mockTimestamp}
+      />,
+    );
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("matches snapshot with custom occurrenceCount", () => {
+    const wrapper = mount(
+      <NotificationContent
+        title="Test notification title"
+        message="Test notification message"
+        timestamp={mockTimestamp}
+        occurrenceCount={3}
+      />,
+    );
+
+    expect(wrapper).toMatchSnapshot();
+  });
+});