From 2bb0f2ffb09f63275a409f7592821876b88d62b6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Sun, 2 Sep 2018 17:49:43 +0100
Subject: [PATCH] fix(ui): fix the logic for deciding when to show
 @alertmanager labels in the footer, add a test

---
 .../Grid/AlertGrid/AlertGroup/index.js        | 13 +++++++++---
 .../Grid/AlertGrid/AlertGroup/index.test.js   | 21 +++++++++++++++++++
 2 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/index.js b/ui/src/Components/Grid/AlertGrid/AlertGroup/index.js
index 815ddf9d5..a85aed849 100644
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/index.js
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/index.js
@@ -32,6 +32,15 @@ LoadButton.propTypes = {
   action: PropTypes.func.isRequired
 };
 
+const AllAlertsAreUsingSameAlertmanagers = alerts => {
+  const usedAMs = alerts.map(alert =>
+    alert.alertmanager.map(am => am.name).sort()
+  );
+  return usedAMs.every(
+    listOfAMs => JSON.stringify(listOfAMs) === JSON.stringify(usedAMs[0])
+  );
+};
+
 const AlertGroup = observer(
   class AlertGroup extends Component {
     static propTypes = {
@@ -137,9 +146,7 @@ const AlertGroup = observer(
         // alertmanagers (and there's > 1 alert to show, there's no footer for 1)
         showAlertmanagersInFooter =
           group.alerts.length > 1 &&
-          Object.values(group.alertmanagerCount).every(
-            elem => elem === Object.values(group.alertmanagerCount)[0]
-          );
+          AllAlertsAreUsingSameAlertmanagers(group.alerts);
         if (showAlertmanagersInFooter) {
           footerAlertmanagers = group.alerts[0].alertmanager.map(am => am.name);
         }
diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/index.test.js b/ui/src/Components/Grid/AlertGrid/AlertGroup/index.test.js
index 9c71d5cac..3739ac412 100644
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/index.test.js
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/index.test.js
@@ -65,6 +65,27 @@ describe("<AlertGroup />", () => {
     expect(tree.find("GroupFooter").html()).toMatch(/@alertmanager: default/);
   });
 
+  it("doesn't render alertmanager 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}`;
+    }
+    group.alertmanagerCount = {
+      fakeAlertmanager0: 1,
+      fakeAlertmanager1: 1,
+      fakeAlertmanager2: 1,
+      fakeAlertmanager3: 1,
+      fakeAlertmanager4: 1
+    };
+    const tree = MountedAlertGroup(jest.fn(), true);
+
+    const alerts = tree.find("ul.list-group");
+    expect(alerts.html()).toMatch(/@alertmanager:/);
+
+    const footer = tree.find("GroupFooter");
+    expect(footer.html()).not.toMatch(/@alertmanager:/);
+  });
+
   it("only renders titlebar when collapsed", () => {
     MockAlerts(10);
     const tree = MountedAlertGroup(jest.fn(), false);