From 88e6ee2951b7a5439597fa1bec6573b8274c0689 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= Date: Fri, 3 Apr 2020 12:35:55 +0100 Subject: [PATCH] fix(ui): add extra padding to alert grid when multi-grid is enabled --- ui/src/Components/Grid/AlertGrid/Grid.js | 6 ++ ui/src/Components/Grid/AlertGrid/GridSize.js | 6 +- ui/src/Components/Grid/AlertGrid/index.js | 7 ++ .../Components/Grid/AlertGrid/index.test.js | 85 ++++++++++++++++++- 4 files changed, 100 insertions(+), 4 deletions(-) diff --git a/ui/src/Components/Grid/AlertGrid/Grid.js b/ui/src/Components/Grid/AlertGrid/Grid.js index 4b288e347..77073d3e8 100644 --- a/ui/src/Components/Grid/AlertGrid/Grid.js +++ b/ui/src/Components/Grid/AlertGrid/Grid.js @@ -33,6 +33,7 @@ const Grid = observer( gridSizesConfig: PropTypes.array.isRequired, groupWidth: PropTypes.number.isRequired, grid: APIGrid.isRequired, + outerPadding: PropTypes.number.isRequired, }; // store reference to generated masonry component so we can call it @@ -157,6 +158,7 @@ const Grid = observer( gridSizesConfig, groupWidth, grid, + outerPadding, } = this.props; return ( @@ -222,6 +224,10 @@ const Grid = observer( sizes={gridSizesConfig} loadMore={this.loadMore} hasMore={false} + style={{ + paddingLeft: `${outerPadding}px`, + paddingRight: `${outerPadding}px`, + }} > {this.gridToggle.show || grid.labelName === "" ? grid.alertGroups diff --git a/ui/src/Components/Grid/AlertGrid/GridSize.js b/ui/src/Components/Grid/AlertGrid/GridSize.js index a0f9f20b9..fd8e93a02 100644 --- a/ui/src/Components/Grid/AlertGrid/GridSize.js +++ b/ui/src/Components/Grid/AlertGrid/GridSize.js @@ -19,7 +19,9 @@ const GetColumnsCount = (canvasWidth, baseWidth) => .map((gs) => gs.columns) .pop(); -const GetGridElementWidth = (innerWidth, outerWidth, baseWidth) => - Math.floor(innerWidth / GetColumnsCount(outerWidth, baseWidth)); +const GetGridElementWidth = (innerWidth, outerWidth, outerPadding, baseWidth) => + Math.floor( + (innerWidth - outerPadding) / GetColumnsCount(outerWidth, baseWidth) + ); export { GridSizesConfig, GetColumnsCount, GetGridElementWidth }; diff --git a/ui/src/Components/Grid/AlertGrid/index.js b/ui/src/Components/Grid/AlertGrid/index.js index 308f0c4d0..9802b32e1 100644 --- a/ui/src/Components/Grid/AlertGrid/index.js +++ b/ui/src/Components/Grid/AlertGrid/index.js @@ -16,6 +16,8 @@ import { SilenceFormStore } from "Stores/SilenceFormStore"; import { Grid } from "./Grid"; import { GridSizesConfig, GetGridElementWidth } from "./GridSize"; +const GridPadding = 5; + const AlertGrid = observer( class AlertGrid extends Component { static propTypes = { @@ -48,6 +50,10 @@ const AlertGrid = observer( return GetGridElementWidth( this.canvasWidth, this.windowWidth, + props.alertStore.data.grids.filter((g) => g.labelName !== "") + .length > 0 + ? GridPadding * 2 + : 0, props.settingsStore.gridConfig.config.groupWidth ); }, @@ -105,6 +111,7 @@ const AlertGrid = observer( gridSizesConfig={this.viewport.gridSizesConfig} groupWidth={this.viewport.groupWidth} grid={grid} + outerPadding={grid.labelName !== "" ? GridPadding : 0} /> ))} diff --git a/ui/src/Components/Grid/AlertGrid/index.test.js b/ui/src/Components/Grid/AlertGrid/index.test.js index 0ed91122c..ad5a352e3 100644 --- a/ui/src/Components/Grid/AlertGrid/index.test.js +++ b/ui/src/Components/Grid/AlertGrid/index.test.js @@ -78,6 +78,7 @@ const ShallowGrid = () => { gridSizesConfig={GridSizesConfig(1024, 420)} groupWidth={420} grid={MockGrid()} + outerPadding={0} /> ); }; @@ -91,7 +92,7 @@ const MountedGrid = () => { gridSizesConfig={GridSizesConfig(1024, 420)} groupWidth={420} grid={MockGrid()} - isOnlyGrid={alertStore.data.grids.length === 1} + outerPadding={0} /> ); }; @@ -408,7 +409,7 @@ describe("", () => { let lastColumns = 1; for (let i = 100; i <= 4096; i++) { const expectedColumns = Math.max(Math.floor(i / minWidth), 1); - const columns = Math.floor(i / GetGridElementWidth(i, i, minWidth)); + const columns = Math.floor(i / GetGridElementWidth(i, i, 0, minWidth)); expect({ resolution: i, @@ -596,6 +597,86 @@ describe("", () => { expect(tree.find("AlertGroup")).toHaveLength(20); }); + it("adds extra padding to alert groups when multi-grid is enabled", () => { + MockGroupList(10, 3); + const groups = alertStore.data.grids[0].alertGroups; + alertStore.data.grids = [ + { + labelName: "foo", + labelValue: "bar", + alertGroups: groups, + stateCount: { + unprocessed: 0, + suppressed: 0, + active: 0, + }, + }, + { + labelName: "foo", + labelValue: "", + alertGroups: groups, + stateCount: { + unprocessed: 0, + suppressed: 0, + active: 0, + }, + }, + ]; + const tree = MountedAlertGrid(); + tree.instance().viewport.updateWidths(1200, 1000); + tree.update(); + expect(tree.find("Grid")).toHaveLength(2); + expect(tree.find("AlertGroup")).toHaveLength(20); + + expect(tree.find("Grid").at(0).prop("outerPadding")).toBe(5); + expect(tree.find("Grid").at(1).prop("outerPadding")).toBe(5); + expect( + tree.find("Grid").at(0).find("div").at(3).prop("style") + ).toMatchObject({ + paddingLeft: "5px", + paddingRight: "5px", + }); + + tree.find("div.components-grid-alertgrid-alertgroup").forEach((node) => { + expect(node.prop("style")).toMatchObject({ + width: 595, + }); + }); + }); + + it("doesn't add extra padding to alert groups when multi-grid is disabled", () => { + MockGroupList(10, 3); + const groups = alertStore.data.grids[0].alertGroups; + alertStore.data.grids = [ + { + labelName: "", + labelValue: "", + alertGroups: groups, + stateCount: { + unprocessed: 0, + suppressed: 0, + active: 0, + }, + }, + ]; + const tree = MountedAlertGrid(); + tree.instance().viewport.updateWidths(1200, 1000); + tree.update(); + expect(tree.find("Grid")).toHaveLength(1); + expect(tree.find("AlertGroup")).toHaveLength(10); + + expect(tree.find("Grid").at(0).prop("outerPadding")).toBe(0); + expect( + tree.find("Grid").at(0).find("div").at(1).prop("style") + ).toMatchObject({ paddingLeft: "0px", paddingRight: "0px" }); + + tree.find("div.components-grid-alertgrid-alertgroup").forEach((node) => { + expect(node.prop("style")).toMatchObject({ + width: 600, + }); + }); + }); + it("doesn't crash on unmount", () => { MockGroupList(60, 5); const tree = ShallowAlertGrid();