fix(ui): correctly check if @cluster label should be rendered

ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/index.js

@@ -38,7 +38,15 @@ const Alert = ({
   ];
 
   const silences = {};
+  let clusters = [];
+  let isInhibited = false;
   for (const am of alert.alertmanager) {
+    if (!clusters.includes(am.cluster)) {
+      clusters.push(am.cluster);
+    }
+    if (am.inhibitedBy.length > 0) {
+      isInhibited = true;
+    }
     if (!silences[am.cluster]) {
       silences[am.cluster] = {
         alertmanager: am,
@@ -79,9 +87,7 @@ const Alert = ({
         silenceFormStore={silenceFormStore}
         setIsMenuOpen={setIsMenuOpen}
       />
-      {alert.alertmanager
-        .map((am) => am.inhibitedBy.length)
-        .reduce((sum, x) => sum + x) > 0 ? (
+      {isInhibited ? (
         <TooltipWrapper title="This alert is inhibited by other alerts">
           <span className="badge badge-light components-label">
             <FontAwesomeIcon className="text-success" icon={faVolumeMute} />
@@ -97,21 +103,14 @@ const Alert = ({
         />
       ))}
       {showAlertmanagers
-        ? alert.alertmanager
-            .map((am) => am.cluster)
-            .reduce(
-              (unique, item) =>
-                unique.includes(item) ? unique : [...unique, item],
-              []
-            )
-            .map((cluster) => (
-              <FilteringLabel
-                key={cluster}
-                name={StaticLabels.AlertmanagerCluster}
-                value={cluster}
-                alertStore={alertStore}
-              />
-            ))
+        ? clusters.map((cluster) => (
+            <FilteringLabel
+              key={cluster}
+              name={StaticLabels.AlertmanagerCluster}
+              value={cluster}
+              alertStore={alertStore}
+            />
+          ))
         : null}
       {showReceiver ? (
         <FilteringLabel

ui/src/Components/Grid/AlertGrid/AlertGroup/index.js

@@ -137,13 +137,11 @@ const AlertGroup = ({
       group.alerts.length > 1 &&
       AllAlertsAreUsingSameAlertmanagers(group.alerts);
     if (showAlertmanagersInFooter) {
-      footerAlertmanagers = group.alerts[0].alertmanager
-        .map((am) => am.cluster)
-        .reduce(
-          (unique, item) =>
-            unique.includes(item) ? unique : [...unique, item],
-          []
-        );
+      for (const am of group.alerts[0].alertmanager) {
+        if (!footerAlertmanagers.includes(am.cluster)) {
+          footerAlertmanagers.push(am.cluster);
+        }
+      }
     }
   }
 

ui/src/Components/Grid/AlertGrid/AlertGroup/index.test.js

@@ -156,7 +156,18 @@ describe("<AlertGroup />", () => {
     expect(labels.at(2).text()).toBe("@receiver: by-name");
   });
 
-  it("doesn't render alertmanager labels in footer when they are unique", () => {
+  it("doesn't render @cluster labels with empty alertmanager array", () => {
+    MockAlerts(2);
+    for (let i = 0; i < group.alerts.length; i++) {
+      group.alerts[i].alertmanager = [];
+    }
+    const tree = MountedAlertGroup(jest.fn(), true).find("AlertGroup");
+    const labels = tree.find("GroupFooter").find("FilteringLabel");
+    expect(labels).toHaveLength(1);
+    expect(labels.at(0).text()).toBe("@receiver: by-name");
+  });
+
+  it("doesn't render @cluster labels in footer when they are unique", () => {
     MockAlerts(5);
     for (let i = 0; i < group.alerts.length; i++) {
       group.alerts[i].alertmanager[0].name = `fakeAlertmanager${i}`;