Merge pull request #1589 from prymitive/multi-grid-collapse

fix(ui): alt+click on group details should only toggle groups in current grid

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);
       }

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">

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

@@ -63,6 +63,7 @@ const MountedAlertGroup = (afterUpdate, showAlertmanagers) => {
       settingsStore={settingsStore}
       alertStore={alertStore}
       silenceFormStore={silenceFormStore}
+      gridLabelValue=""
     />
   );
 };

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

@@ -248,6 +248,7 @@ const Grid = observer(
                       style={{
                         width: groupWidth,
                       }}
+                      gridLabelValue={grid.labelValue}
                     />
                   ))
               : []}

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", () => {