diff --git a/ui/src/Components/Grid/AlertGrid/index.js b/ui/src/Components/Grid/AlertGrid/index.js index 669df534c..5fd5f07e7 100644 --- a/ui/src/Components/Grid/AlertGrid/index.js +++ b/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)} /> ", () => { ).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();