fix(ui): don't render @cluster labels if there's only one

Fixes #3994
2026-05-05 03:16:51 +00:00 · 2022-02-19 12:14:38 +00:00
parent 1b640697c4
commit ed31e2c465
7 changed files with 256 additions and 39 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,10 @@

 - Fixed regexp escaping when editing silences #3936.

+### Changed
+
+- Don't render `@cluster` labels if there's only one cluster configured #3994.
+
 ## v0.98

 ### Fixed
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/index.test.tsx
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/index.test.tsx
@@ -134,6 +134,37 @@ describe("<Alert />", () => {
  });

  it("renders @cluster label for non-shared clusters", () => {
+    alertStore.data.setUpstreams({
+      counters: { total: 2, healthy: 2, failed: 0 },
+      clusters: { default: ["default"], second: ["second"] },
+      instances: [
+        {
+          name: "default",
+          cluster: "default",
+          clusterMembers: ["default"],
+          uri: "http://localhost",
+          publicURI: "http://localhost",
+          error: "",
+          version: "0.21.0",
+          readonly: false,
+          corsCredentials: "include",
+          headers: {},
+        },
+        {
+          name: "second",
+          cluster: "second",
+          clusterMembers: ["second"],
+          uri: "http://localhost",
+          publicURI: "http://localhost",
+          error: "",
+          version: "0.21.0",
+          readonly: false,
+          corsCredentials: "include",
+          headers: {},
+        },
+      ],
+    });
+
    const alert = MockedAlert();
    const group = MockAlertGroup([], [alert], [], [], {});
    const tree = MountedAlert(alert, group, false, false);
@@ -144,6 +175,36 @@ describe("<Alert />", () => {
  });

  it("only renders one @cluster label per alertmanager cluster", () => {
+    alertStore.data.setUpstreams({
+      counters: { total: 2, healthy: 2, failed: 0 },
+      clusters: { default: ["default"], second: ["second"] },
+      instances: [
+        {
+          name: "default",
+          cluster: "default",
+          clusterMembers: ["default"],
+          uri: "http://localhost",
+          publicURI: "http://localhost",
+          error: "",
+          version: "0.21.0",
+          readonly: false,
+          corsCredentials: "include",
+          headers: {},
+        },
+        {
+          name: "HA",
+          cluster: "HA",
+          clusterMembers: ["HA"],
+          uri: "http://localhost",
+          publicURI: "http://localhost",
+          error: "",
+          version: "0.21.0",
+          readonly: false,
+          corsCredentials: "include",
+          headers: {},
+        },
+      ],
+    });
    const alert = MockedAlert();
    alert.alertmanager.push({
      fingerprint: "123",
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/index.tsx
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/index.tsx
@@ -120,16 +120,18 @@ const Alert: FC<{
          alertStore={alertStore}
        />
      ))}
-      {clusters
-        .filter((c) => group.shared.clusters.indexOf(c) < 0)
-        .map((cluster) => (
-          <FilteringLabel
-            key={cluster}
-            name={StaticLabels.AlertmanagerCluster}
-            value={cluster}
-            alertStore={alertStore}
-          />
-        ))}
+      {Object.keys(alertStore.data.upstreams.clusters).length > 1
+        ? clusters
+            .filter((c) => group.shared.clusters.indexOf(c) < 0)
+            .map((cluster) => (
+              <FilteringLabel
+                key={cluster}
+                name={StaticLabels.AlertmanagerCluster}
+                value={cluster}
+                alertStore={alertStore}
+              />
+            ))
+        : null}
      {showReceiver ? (
        <FilteringLabel
          name={StaticLabels.Receiver}
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/snapshots/index.test.tsx.snap
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/snapshots/index.test.tsx.snap
@@ -76,16 +76,6 @@ exports[`<GroupFooter /> matches snapshot 1`] = `
      </span>
    </span>
  </div>
-  <div class=\\" tooltip-trigger\\">
-    <span class=\\"components-label badge bg-default components-label-dark components-label-with-hover\\">
-      <span class=\\"components-label-name\\">
-        @cluster:
-      </span>
-      <span class=\\"components-label-value\\">
-        default
-      </span>
-    </span>
-  </div>
  <div class=\\" tooltip-trigger\\">
    <span class=\\"components-label badge bg-default components-label-dark components-label-with-hover\\">
      <span class=\\"components-label-name\\">
@@ -200,16 +190,6 @@ exports[`<GroupFooter /> mathes snapshot when silence is rendered 1`] = `
      </span>
    </span>
  </div>
-  <div class=\\" tooltip-trigger\\">
-    <span class=\\"components-label badge bg-default components-label-dark components-label-with-hover\\">
-      <span class=\\"components-label-name\\">
-        @cluster:
-      </span>
-      <span class=\\"components-label-value\\">
-        default
-      </span>
-    </span>
-  </div>
  <div class=\\" tooltip-trigger\\">
    <span class=\\"components-label badge bg-default components-label-dark components-label-with-hover\\">
      <span class=\\"components-label-name\\">
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/index.test.tsx
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/index.test.tsx
@@ -208,4 +208,70 @@ describe("<GroupFooter />", () => {
    expect(tree.find("RenderLinkAnnotation")).toHaveLength(0);
    expect(tree.find("RenderNonLinkAnnotation")).toHaveLength(0);
  });
+
+  it("renders @cluster label if there's more than one cluster", () => {
+    alertStore.data.setUpstreams({
+      counters: { total: 2, healthy: 2, failed: 0 },
+      clusters: { default: ["default"], second: ["second"] },
+      instances: [
+        {
+          name: "default",
+          cluster: "default",
+          clusterMembers: ["default"],
+          uri: "http://localhost",
+          publicURI: "http://localhost",
+          error: "",
+          version: "0.21.0",
+          readonly: false,
+          corsCredentials: "include",
+          headers: {},
+        },
+        {
+          name: "second",
+          cluster: "second",
+          clusterMembers: ["second"],
+          uri: "http://localhost",
+          publicURI: "http://localhost",
+          error: "",
+          version: "0.21.0",
+          readonly: false,
+          corsCredentials: "include",
+          headers: {},
+        },
+      ],
+    });
+    group.shared.clusters = ["default", "second"];
+    const tree = mount(
+      <GroupFooter
+        group={group}
+        afterUpdate={MockAfterUpdate}
+        alertStore={alertStore}
+        silenceFormStore={silenceFormStore}
+        showAnnotations={false}
+      />,
+      {
+        wrappingComponent: ThemeContext.Provider,
+        wrappingComponentProps: { value: MockThemeContext },
+      }
+    );
+    expect(toDiffableHtml(tree.html())).toMatch(/@cluster:/);
+  });
+
+  it("doesn't render @cluster label if there's only one cluster", () => {
+    group.shared.clusters = ["default"];
+    const tree = mount(
+      <GroupFooter
+        group={group}
+        afterUpdate={MockAfterUpdate}
+        alertStore={alertStore}
+        silenceFormStore={silenceFormStore}
+        showAnnotations={false}
+      />,
+      {
+        wrappingComponent: ThemeContext.Provider,
+        wrappingComponentProps: { value: MockThemeContext },
+      }
+    );
+    expect(toDiffableHtml(tree.html())).not.toMatch(/@cluster:/);
+  });
 });
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/index.tsx
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/index.tsx
@@ -51,14 +51,16 @@ const GroupFooter: FC<{
          alertStore={alertStore}
        />
      ))}
-      {group.shared.clusters.map((cluster) => (
-        <FilteringLabel
-          key={cluster}
-          name={StaticLabels.AlertmanagerCluster}
-          value={cluster}
-          alertStore={alertStore}
-        />
-      ))}
+      {Object.keys(alertStore.data.upstreams.clusters).length > 1
+        ? group.shared.clusters.map((cluster) => (
+            <FilteringLabel
+              key={cluster}
+              name={StaticLabels.AlertmanagerCluster}
+              value={cluster}
+              alertStore={alertStore}
+            />
+          ))
+        : null}
      {alertStore.data.receivers.length > 1 ? (
        <FilteringLabel
          name={StaticLabels.Receiver}
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/index.test.tsx
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/index.test.tsx
@@ -147,13 +147,85 @@ describe("<AlertGroup />", () => {
  });

  it("renders Alertmanager cluster labels in footer if shared", () => {
+    alertStore.data.setUpstreams({
+      counters: { total: 2, healthy: 2, failed: 0 },
+      clusters: { default: ["default"], second: ["second"] },
+      instances: [
+        {
+          name: "default",
+          cluster: "default",
+          clusterMembers: ["default"],
+          uri: "http://localhost",
+          publicURI: "http://localhost",
+          error: "",
+          version: "0.21.0",
+          readonly: false,
+          corsCredentials: "include",
+          headers: {},
+        },
+        {
+          name: "second",
+          cluster: "second",
+          clusterMembers: ["second"],
+          uri: "http://localhost",
+          publicURI: "http://localhost",
+          error: "",
+          version: "0.21.0",
+          readonly: false,
+          corsCredentials: "include",
+          headers: {},
+        },
+      ],
+    });
    MockAlerts(2, 2);
-    group.shared.clusters = ["default"];
+    group.shared.clusters = ["default", "second"];
    const tree = MountedAlertGroup(jest.fn()).find("Memo(AlertGroup)");
    expect(tree.find("Memo(GroupFooter)").html()).toMatch(/@cluster/);
  });

  it("only renders one @cluster label per cluster in the footer", () => {
+    alertStore.data.setUpstreams({
+      counters: { total: 2, healthy: 2, failed: 0 },
+      clusters: { default: ["default"], HA: ["ha1", "ha2"] },
+      instances: [
+        {
+          name: "default",
+          cluster: "default",
+          clusterMembers: ["default"],
+          uri: "http://localhost",
+          publicURI: "http://localhost",
+          error: "",
+          version: "0.21.0",
+          readonly: false,
+          corsCredentials: "include",
+          headers: {},
+        },
+        {
+          name: "ha1",
+          cluster: "HA",
+          clusterMembers: ["ha1", "ha2"],
+          uri: "http://localhost",
+          publicURI: "http://localhost",
+          error: "",
+          version: "0.21.0",
+          readonly: false,
+          corsCredentials: "include",
+          headers: {},
+        },
+        {
+          name: "ha2",
+          cluster: "HA",
+          clusterMembers: ["ha1", "ha2"],
+          uri: "http://localhost",
+          publicURI: "http://localhost",
+          error: "",
+          version: "0.21.0",
+          readonly: false,
+          corsCredentials: "include",
+          headers: {},
+        },
+      ],
+    });
    MockAlerts(2, 2);
    for (let i = 0; i < group.alerts.length; i++) {
      group.alerts[i].alertmanager.push({
@@ -198,6 +270,36 @@ describe("<AlertGroup />", () => {
  });

  it("doesn't render @cluster labels in footer when they are unique", () => {
+    alertStore.data.setUpstreams({
+      counters: { total: 2, healthy: 2, failed: 0 },
+      clusters: { default: ["default"], second: ["second"] },
+      instances: [
+        {
+          name: "default",
+          cluster: "default",
+          clusterMembers: ["default"],
+          uri: "http://localhost",
+          publicURI: "http://localhost",
+          error: "",
+          version: "0.21.0",
+          readonly: false,
+          corsCredentials: "include",
+          headers: {},
+        },
+        {
+          name: "second",
+          cluster: "second",
+          clusterMembers: ["second"],
+          uri: "http://localhost",
+          publicURI: "http://localhost",
+          error: "",
+          version: "0.21.0",
+          readonly: false,
+          corsCredentials: "include",
+          headers: {},
+        },
+      ],
+    });
    MockAlerts(5, 5);
    for (let i = 0; i < group.alerts.length; i++) {
      group.alerts[i].alertmanager[0].name = `fakeAlertmanager${i}`;