feat(ui): toggle all grids with alt+click

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

@@ -93,13 +93,42 @@ const Grid = observer(
           toggle() {
             this.show = !this.show;
           },
+          set(value) {
+            this.show = value;
+          },
         },
         {
           toggle: action.bound,
+          set: action.bound,
         }
       );
     }
 
+    onCollapseClick = (event) => {
+      // left click       => toggle current grid
+      // left click + alt => toggle all grids
+
+      this.gridToggle.toggle();
+
+      if (event.altKey === true) {
+        const toggleEvent = new CustomEvent("alertGridCollapse", {
+          detail: this.gridToggle.show,
+        });
+        window.dispatchEvent(toggleEvent);
+      }
+    };
+
+    onAlertGridCollapseEvent = (event) => {
+      this.gridToggle.set(event.detail);
+    };
+
+    componentDidMount() {
+      window.addEventListener(
+        "alertGridCollapse",
+        this.onAlertGridCollapseEvent
+      );
+    }
+
     componentDidUpdate() {
       const { grid } = this.props;
 
@@ -112,6 +141,13 @@ const Grid = observer(
       }
     }
 
+    componentWillUnmount() {
+      window.removeEventListener(
+        "alertGridCollapse",
+        this.onAlertGridCollapseEvent
+      );
+    }
+
     render() {
       const {
         alertStore,
@@ -164,9 +200,9 @@ const Grid = observer(
               </span>
               <span
                 className="flex-shrink-0 flex-grow-0 text-muted cursor-pointer badge px-0 components-label ml-2 mr-0"
-                onClick={this.gridToggle.toggle}
+                onClick={this.onCollapseClick}
               >
-                <TooltipWrapper title="Click to toggle this grid details">
+                <TooltipWrapper title="Click to toggle this grid details or Alt+Click to toggle all grids">
                   <FontAwesomeIcon
                     icon={this.gridToggle.show ? faChevronDown : faChevronUp}
                   />

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

@@ -36,6 +36,16 @@ afterEach(() => {
   clear();
 });
 
+const MountedAlertGrid = () => {
+  return mount(
+    <AlertGrid
+      alertStore={alertStore}
+      settingsStore={settingsStore}
+      silenceFormStore={silenceFormStore}
+    />
+  );
+};
+
 const ShallowAlertGrid = () => {
   return shallow(
     <AlertGrid
@@ -225,11 +235,21 @@ describe("<Grid />", () => {
         labelName: "foo",
         labelValue: "bar",
         alertGroups: groups,
+        stateCount: {
+          unprocessed: 1,
+          suppressed: 2,
+          active: 3,
+        },
       },
       {
         labelName: "foo",
         labelValue: "",
         alertGroups: [],
+        stateCount: {
+          unprocessed: 1,
+          suppressed: 2,
+          active: 3,
+        },
       },
     ];
     const tree = MountedGrid();
@@ -320,6 +340,12 @@ describe("<Grid />", () => {
       expect(tree.find("AlertGroup").at(i).find("Alert")).toHaveLength(0);
     }
   });
+
+  it("doesn't crash on unmount", () => {
+    MockGroupList(5, 3);
+    const tree = MountedGrid();
+    tree.unmount();
+  });
 });
 
 describe("<AlertGrid />", () => {
@@ -507,6 +533,81 @@ describe("<AlertGrid />", () => {
     ]);
   });
 
+  it("alt+click on a grid toggle toggles all grid groups", () => {
+    MockGroupList(10, 3);
+    const groups = alertStore.data.grids[0].alertGroups;
+    alertStore.data.grids = [
+      {
+        labelName: "foo",
+        labelValue: "bar",
+        alertGroups: groups,
+        stateCount: {
+          unprocessed: 1,
+          suppressed: 2,
+          active: 3,
+        },
+      },
+      {
+        labelName: "foo",
+        labelValue: "",
+        alertGroups: groups,
+        stateCount: {
+          unprocessed: 1,
+          suppressed: 2,
+          active: 3,
+        },
+      },
+    ];
+    const tree = MountedAlertGrid();
+    expect(tree.find("Grid")).toHaveLength(2);
+    expect(tree.find("AlertGroup")).toHaveLength(20);
+
+    // toggle all grids to hide all groups
+    tree
+      .find("Grid")
+      .at(0)
+      .find("span.cursor-pointer")
+      .at(0)
+      .simulate("click", { altKey: true });
+    expect(tree.find("AlertGroup")).toHaveLength(0);
+
+    // show first grid
+    tree
+      .find("Grid")
+      .at(0)
+      .find("span.cursor-pointer")
+      .at(0)
+      .simulate("click", { altKey: false });
+    expect(tree.find("AlertGroup")).toHaveLength(10);
+
+    // show all grids
+    tree
+      .find("Grid")
+      .at(1)
+      .find("span.cursor-pointer")
+      .at(0)
+      .simulate("click", { altKey: true });
+    expect(tree.find("AlertGroup")).toHaveLength(20);
+
+    // hide all grids
+    tree
+      .find("Grid")
+      .at(0)
+      .find("span.cursor-pointer")
+      .at(0)
+      .simulate("click", { altKey: true });
+    expect(tree.find("AlertGroup")).toHaveLength(0);
+
+    // show all grids
+    tree
+      .find("Grid")
+      .at(1)
+      .find("span.cursor-pointer")
+      .at(0)
+      .simulate("click", { altKey: true });
+    expect(tree.find("AlertGroup")).toHaveLength(20);
+  });
+
   it("doesn't crash on unmount", () => {
     MockGroupList(60, 5);
     const tree = ShallowAlertGrid();