fix(ui): add extra padding to alert grid when multi-grid is enabled

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

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

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}
             />
           ))}
         </React.Fragment>

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("<AlertGrid />", () => {
     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("<AlertGrid />", () => {
     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();