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);
});