Merge pull request #970 from prymitive/break-grid-loops

fix(ui): prevent grid resize loops

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

@@ -40,19 +40,49 @@ const AlertGrid = observer(
       this.viewport = observable(
         {
           width: document.body.clientWidth,
+          widthAdjust: 0,
+          widthHistory: [],
           update(width, height) {
+            if (
+              this.widthHistory.length === 4 &&
+              this.widthHistory[0] !== this.widthHistory[1] &&
+              this.widthHistory[0] !== this.widthHistory[3]
+            ) {
+              const uniqueWidths = this.widthHistory.reduce((uniques, w) => {
+                const count = uniques[w] || 0;
+                uniques[w] = count + 1;
+                return uniques;
+              }, {});
+
+              if (
+                this.widthHistory.includes(width) &&
+                Object.keys(uniqueWidths).length === 2 &&
+                Object.values(uniqueWidths)[0] ===
+                  Object.values(uniqueWidths)[1]
+              ) {
+                this.widthAdjust = Math.min(this.widthAdjust + 20, 200);
+              } else {
+                this.widthAdjust = 0;
+              }
+            }
+
             this.width = width;
+
+            this.widthHistory.unshift(width);
+            this.widthHistory = this.widthHistory.slice(0, 4);
           },
           get gridSizesConfig() {
             return GridSizesConfig(
               this.width,
-              props.settingsStore.gridConfig.config.groupWidth
+              props.settingsStore.gridConfig.config.groupWidth +
+                this.widthAdjust
             );
           },
           get groupWidth() {
             return GetGridElementWidth(
               this.width,
-              props.settingsStore.gridConfig.config.groupWidth
+              props.settingsStore.gridConfig.config.groupWidth +
+                this.widthAdjust
             );
           }
         },
@@ -136,7 +166,10 @@ const AlertGrid = observer(
             onResize={debounce(this.viewport.update, 100)}
           />
           <MasonryInfiniteScroller
-            key={settingsStore.gridConfig.config.groupWidth}
+            key={
+              settingsStore.gridConfig.config.groupWidth +
+              this.viewport.widthAdjust
+            }
             ref={this.storeMasonryRef}
             position={false}
             pack={true}

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

@@ -252,6 +252,55 @@ describe("<AlertGrid />", () => {
     ).toBe(1000 / 2);
   });
 
+  it("viewport resize doesn't allow loops", () => {
+    settingsStore.gridConfig.config.groupWidth = 410;
+    const tree = ShallowAlertGrid();
+
+    let results = [];
+    for (var index = 0; index < 14; index++) {
+      MockGroupList(60, 5);
+      tree.instance().viewport.update(index % 2 === 0 ? 800 : 830, 500);
+      results.push(
+        tree
+          .find("AlertGroup")
+          .at(0)
+          .props().style.width
+      );
+    }
+
+    // first 4 results will switch beween 1 and 2 columns, but after than it
+    // should stabilise and return same result as the grid width
+    expect(results).toStrictEqual([
+      800,
+      415,
+      800,
+      415,
+      800,
+      830,
+      800,
+      830,
+      800,
+      830,
+      800,
+      830,
+      800,
+      830
+    ]);
+
+    // so now let's call it without any loop
+    results = [];
+    for (let width of [840, 820, 450, 450, 1200]) {
+      tree.instance().viewport.update(width, 500);
+      results.push(
+        tree
+          .find("AlertGroup")
+          .at(0)
+          .props().style.width
+      );
+    }
+    expect(results).toStrictEqual([420, 410, 450, 450, 600]);
+  });
+
   it("doesn't crash on unmount", () => {
     MockGroupList(60, 5);
     const tree = ShallowAlertGrid();