fix(ui): always show alerts if there are any

Fixes #4301

CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## v0.107
+
+### Changed
+
+- Don't show fatal error page if configured health checks are failing but
+  alertmanager is still showing alerts. A popup message with will still
+  be visible.
+
 ## v0.106
 
 ### Added

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

@@ -62,6 +62,30 @@ describe("<Grid />", () => {
     expect(tree.text()).toBe("<FatalError />");
   });
 
+  it("renders AlertGrid if there's only one upstream and it's unhealthy but there are alerts", () => {
+    alertStore.data.setUpstreams({
+      counters: { total: 1, healthy: 0, failed: 1 },
+      instances: [
+        {
+          name: "am1",
+          cluster: "am",
+          clusterMembers: ["am"],
+          uri: "http://am1",
+          publicURI: "http://am1",
+          error: "error",
+          version: "0.24.0",
+          readonly: false,
+          corsCredentials: "include",
+          headers: {},
+        },
+      ],
+      clusters: { am1: ["am1"] },
+    });
+    alertStore.info.setTotalAlerts(1);
+    const tree = ShallowGrid();
+    expect(tree.find("Memo(AlertGrid)")).toHaveLength(1);
+  });
+
   it("renders FatalError if there's only one upstream and it's unhealthy but without any error", () => {
     alertStore.data.setUpstreams({
       counters: { total: 1, healthy: 0, failed: 1 },

ui/src/Components/Grid/index.tsx

@@ -27,7 +27,8 @@ const Grid: FC<{
     alertStore.data.upstreams.counters.total === 1 &&
     alertStore.data.upstreams.counters.healthy === 0 &&
     alertStore.data.upstreams.instances[0] &&
-    alertStore.data.upstreams.instances[0].error !== "" ? (
+    alertStore.data.upstreams.instances[0].error !== "" &&
+    alertStore.info.totalAlerts === 0 ? (
     <FatalError message={alertStore.data.upstreams.instances[0].error} />
   ) : alertStore.info.version !== "unknown" &&
     alertStore.info.totalAlerts === 0 ? (