diff --git a/ui/src/Components/Grid/AlertGrid/Grid.js b/ui/src/Components/Grid/AlertGrid/Grid.js index 6fbf1bf6c..222ab166d 100644 --- a/ui/src/Components/Grid/AlertGrid/Grid.js +++ b/ui/src/Components/Grid/AlertGrid/Grid.js @@ -32,6 +32,7 @@ const Grid = observer( gridSizesConfig: PropTypes.array.isRequired, groupWidth: PropTypes.number.isRequired, grid: APIGrid.isRequired, + isOnlyGrid: PropTypes.bool.isRequired, }; // store reference to generated masonry component so we can call it @@ -130,7 +131,7 @@ const Grid = observer( } componentDidUpdate() { - const { grid } = this.props; + const { grid, isOnlyGrid } = this.props; this.masonryRepack(); @@ -139,6 +140,10 @@ const Grid = observer( Math.max(this.initial, grid.alertGroups.length) ); } + + if (isOnlyGrid === true) { + this.gridToggle.set(true); + } } componentWillUnmount() { @@ -156,11 +161,12 @@ const Grid = observer( gridSizesConfig, groupWidth, grid, + isOnlyGrid, } = this.props; return ( - {alertStore.data.grids.length > 1 && ( + {!isOnlyGrid && (
))} diff --git a/ui/src/Components/Grid/AlertGrid/index.test.js b/ui/src/Components/Grid/AlertGrid/index.test.js index 28c5a9512..828bf7af1 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()} + isOnlyGrid={alertStore.data.grids.length === 1} /> ); }; @@ -91,6 +92,7 @@ const MountedGrid = () => { gridSizesConfig={GridSizesConfig(1024, 420)} groupWidth={420} grid={MockGrid()} + isOnlyGrid={alertStore.data.grids.length === 1} /> ); }; @@ -262,6 +264,42 @@ describe("", () => { expect(tree.find("AlertGroup")).toHaveLength(10); }); + it("show all groups if grid is hidden but there are no other grids", () => { + 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: [], + stateCount: { + unprocessed: 1, + suppressed: 2, + active: 3, + }, + }, + ]; + const tree = MountedGrid(); + expect(tree.find("AlertGroup")).toHaveLength(10); + + tree.find("span.cursor-pointer").at(0).simulate("click"); + expect(tree.find("AlertGroup")).toHaveLength(0); + + tree.setProps({ isOnlyGrid: true }); + tree.update(); + expect(tree.find("AlertGroup")).toHaveLength(10); + }); + it("renders filter badge for grids with a value", () => { MockGroupList(1, 1); const tree = MountedGrid(); @@ -274,7 +312,7 @@ describe("", () => { active: 0, }; alertStore.data.grids = [MockGrid(), MockGrid()]; - tree.setProps({ grid: grid }); + tree.setProps({ grid: grid, isOnlyGrid: false }); expect(tree.find("h5").at(0).find("FilteringLabel")).toHaveLength(1); expect(tree.find("h5").at(0).find("FilteringLabel").text()).toBe( "foo: bar" @@ -293,7 +331,7 @@ describe("", () => { active: 0, }; alertStore.data.grids = [MockGrid(), MockGrid()]; - tree.setProps({ grid: grid }); + tree.setProps({ grid: grid, isOnlyGrid: false }); expect(tree.find("h5").at(0).find("FilteringLabel")).toHaveLength(0); });