fix(ui): reset lazy loader limit if group count changes

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

@@ -94,19 +94,22 @@ const AlertGrid = observer(
       10
     );
 
-    // how many alert groups to render
-    // FIXME reset on filter change
     initial = 50;
     groupsToRender = observable(
       {
-        value: this.initial
+        value: this.initial,
+        setValue(value) {
+          this.value = value;
+        }
+      },
+      {
+        setValue: action.bound
       },
-      {},
       { name: "Groups to render" }
     );
     // how many groups add to render count when user scrolls to the bottom
     loadMoreStep = 30;
-    //
+
     loadMore = action(() => {
       const { alertStore } = this.props;
 
@@ -134,6 +137,16 @@ const AlertGrid = observer(
       window.addEventListener("resize", this.handleResize);
     }
 
+    componentDidUpdate() {
+      const { alertStore } = this.props;
+
+      if (this.groupsToRender.value > alertStore.data.groups.length) {
+        this.groupsToRender.setValue(
+          Math.max(this.initial, alertStore.data.groups.length)
+        );
+      }
+    }
+
     componentWillUnmount() {
       window.removeEventListener("resize", this.handleResize);
     }

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

@@ -104,6 +104,27 @@ describe("<AlertGrid />", () => {
     expect(alertGroups).toHaveLength(80);
   });
 
+  it("resets groupsToRender.value back to 50 if current value is > alertStore.data.groups.length", () => {
+    MockGroupList(100, 5);
+    const tree = ShallowAlertGrid();
+    expect(tree.find("AlertGroup")).toHaveLength(50);
+    expect(tree.instance().groupsToRender.value).toBe(50);
+
+    tree.instance().loadMore();
+    expect(tree.find("AlertGroup")).toHaveLength(80);
+    expect(tree.instance().groupsToRender.value).toBe(80);
+
+    MockGroupList(10, 5);
+    tree.instance().componentDidUpdate();
+    expect(tree.find("AlertGroup")).toHaveLength(10);
+    expect(tree.instance().groupsToRender.value).toBe(50);
+
+    MockGroupList(100, 5);
+    tree.instance().componentDidUpdate();
+    expect(tree.find("AlertGroup")).toHaveLength(50);
+    expect(tree.instance().groupsToRender.value).toBe(50);
+  });
+
   it("calling masonryRepack() calls forcePack() on Masonry instance`", () => {
     const tree = ShallowAlertGrid();
     const instance = tree.instance();