feat(ui): change badge if there's alertmanager error

Fixes #3987

CHANGELOG.md

@@ -9,6 +9,7 @@
 ### Changed
 
 - Don't render `@cluster` labels if there's only one cluster configured #3994.
+- Show `!` on favicon badge if there's any alertmanager upstream with errors #3987.
 
 ## v0.98
 

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

@@ -41,4 +41,27 @@ describe("<FaviconBadge />", () => {
     expect(Favico.badge).toHaveBeenCalledTimes(1);
     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.21.0",
+          cluster: "default",
+          clusterMembers: ["default"],
+        },
+      ],
+    });
+    MountedFaviconBadge();
+    expect(Favico.badge).toHaveBeenCalledWith("!");
+  });
 });

ui/src/Components/FaviconBadge/index.tsx

@@ -22,7 +22,11 @@ const FaviconBadge: FC<{
     () =>
       autorun(() => {
         favico.badge(
-          alertStore.status.error === null ? alertStore.info.totalAlerts : "?"
+          alertStore.data.upstreamsWithErrors.length > 0
+            ? "!"
+            : alertStore.status.error === null
+            ? alertStore.info.totalAlerts
+            : "?"
         );
       }),
     [] // eslint-disable-line react-hooks/exhaustive-deps