From 1de2cd5a3e36e1f385702040b724ec3a284c2640 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Fri, 3 Apr 2020 20:23:27 +0100
Subject: [PATCH] fix(ui): alt+click on group details should only toggle groups
 in current grid

---
 .../AlertGrid/AlertGroup/GroupHeader/index.js |  8 +++--
 .../Grid/AlertGrid/AlertGroup/index.js        |  9 ++++-
 .../Grid/AlertGrid/AlertGroup/index.test.js   |  1 +
 ui/src/Components/Grid/AlertGrid/Grid.js      |  1 +
 .../Components/Grid/AlertGrid/index.test.js   | 34 ++++++++++++++++---
 5 files changed, 46 insertions(+), 7 deletions(-)

diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/index.js b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/index.js
index 942f03a07..079e5e308 100644
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/index.js
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/index.js
@@ -28,10 +28,11 @@ const GroupHeader = observer(
       silenceFormStore: PropTypes.instanceOf(SilenceFormStore).isRequired,
       themedCounters: PropTypes.bool.isRequired,
       setIsMenuOpen: PropTypes.func.isRequired,
+      gridLabelValue: PropTypes.string.isRequired,
     };
 
     onCollapseClick = (event) => {
-      const { collapseStore } = this.props;
+      const { collapseStore, gridLabelValue } = this.props;
 
       // left click       => toggle current group
       // left click + alt => toggle all groups
@@ -40,7 +41,10 @@ const GroupHeader = observer(
 
       if (event.altKey === true) {
         const toggleEvent = new CustomEvent("alertGroupCollapse", {
-          detail: collapseStore.value,
+          detail: {
+            gridLabelValue: gridLabelValue,
+            value: collapseStore.value,
+          },
         });
         window.dispatchEvent(toggleEvent);
       }
diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/index.js b/ui/src/Components/Grid/AlertGrid/AlertGroup/index.js
index 1b6c564f8..1c2bc5b76 100644
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/index.js
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/index.js
@@ -56,6 +56,7 @@ const AlertGroup = observer(
       settingsStore: PropTypes.instanceOf(Settings).isRequired,
       silenceFormStore: PropTypes.instanceOf(SilenceFormStore).isRequired,
       style: PropTypes.object,
+      gridLabelValue: PropTypes.string.isRequired,
     };
 
     constructor(props) {
@@ -144,7 +145,11 @@ const AlertGroup = observer(
     }
 
     onAlertGroupCollapseEvent = (event) => {
-      this.collapse.set(event.detail);
+      const { gridLabelValue } = this.props;
+
+      if (event.detail.gridLabelValue === gridLabelValue) {
+        this.collapse.set(event.detail.value);
+      }
     };
 
     componentDidMount() {
@@ -176,6 +181,7 @@ const AlertGroup = observer(
         alertStore,
         settingsStore,
         style,
+        gridLabelValue,
       } = this.props;
 
       let footerAlertmanagers = [];
@@ -229,6 +235,7 @@ const AlertGroup = observer(
                 silenceFormStore={silenceFormStore}
                 themedCounters={themedCounters}
                 setIsMenuOpen={this.renderConfig.setIsMenuOpen}
+                gridLabelValue={gridLabelValue}
               />
               {this.collapse.value ? null : (
                 <div className="card-body px-2 py-1 components-grid-alertgrid-card">
diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/index.test.js b/ui/src/Components/Grid/AlertGrid/AlertGroup/index.test.js
index d1c30150e..9c3baa84c 100644
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/index.test.js
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/index.test.js
@@ -63,6 +63,7 @@ const MountedAlertGroup = (afterUpdate, showAlertmanagers) => {
       settingsStore={settingsStore}
       alertStore={alertStore}
       silenceFormStore={silenceFormStore}
+      gridLabelValue=""
     />
   );
 };
diff --git a/ui/src/Components/Grid/AlertGrid/Grid.js b/ui/src/Components/Grid/AlertGrid/Grid.js
index d332ce7fa..ec8368d83 100644
--- a/ui/src/Components/Grid/AlertGrid/Grid.js
+++ b/ui/src/Components/Grid/AlertGrid/Grid.js
@@ -248,6 +248,7 @@ const Grid = observer(
                       style={{
                         width: groupWidth,
                       }}
+                      gridLabelValue={grid.labelValue}
                     />
                   ))
               : []}
diff --git a/ui/src/Components/Grid/AlertGrid/index.test.js b/ui/src/Components/Grid/AlertGrid/index.test.js
index ad5a352e3..8c88d613f 100644
--- a/ui/src/Components/Grid/AlertGrid/index.test.js
+++ b/ui/src/Components/Grid/AlertGrid/index.test.js
@@ -309,11 +309,34 @@ describe("<Grid />", () => {
     }
   });
 
-  it("left click + alt on a group collapse toggle toggles all groups", () => {
-    MockGroupList(10, 3);
-    const tree = MountedGrid();
+  it("left click + alt on a group collapse toggle toggles all groups in current grid", () => {
+    MockGroupList(20, 3);
+    const groups = alertStore.data.grids[0].alertGroups;
+    alertStore.data.grids = [
+      {
+        labelName: "foo",
+        labelValue: "bar",
+        alertGroups: groups.slice(0, 10),
+        stateCount: {
+          unprocessed: 1,
+          suppressed: 2,
+          active: 3,
+        },
+      },
+      {
+        labelName: "foo",
+        labelValue: "",
+        alertGroups: groups.slice(10, 20),
+        stateCount: {
+          unprocessed: 1,
+          suppressed: 2,
+          active: 3,
+        },
+      },
+    ];
+    const tree = MountedAlertGrid();
 
-    for (let i = 0; i <= 9; i++) {
+    for (let i = 0; i <= 19; i++) {
       expect(tree.find("AlertGroup").at(i).find("Alert")).toHaveLength(3);
     }
 
@@ -328,6 +351,9 @@ describe("<Grid />", () => {
     for (let i = 0; i <= 9; i++) {
       expect(tree.find("AlertGroup").at(i).find("Alert")).toHaveLength(0);
     }
+    for (let i = 10; i <= 19; i++) {
+      expect(tree.find("AlertGroup").at(i).find("Alert")).toHaveLength(3);
+    }
   });
 
   it("doesn't crash on unmount", () => {