fix(ui): move FontFaceObserver hook to run on Grid instance

ui/src/Components/Grid/AlertGrid/Grid.js

@@ -6,6 +6,8 @@ import { observer } from "mobx-react";
 
 import debounce from "lodash/debounce";
 
+import FontFaceObserver from "fontfaceobserver";
+
 import MasonryInfiniteScroller from "react-masonry-infinite";
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -126,6 +128,20 @@ const Grid = observer(
     };
 
     componentDidMount() {
+      // We have font-display:swap set for font assets, this means that on initial
+      // render a fallback font might be used and later swapped for the final one
+      // (once the final font is loaded). This means that fallback font might
+      // render to a different size and the swap can result in component resize.
+      // For our grid this resize might leave gaps since everything uses fixed
+      // position, so we use font observer and trigger repack when fonts are loaded
+      for (const fontWeight of [300, 400, 600]) {
+        const font = new FontFaceObserver("Open Sans", {
+          weight: fontWeight,
+        });
+        // wait up to 30s, run no-op function on timeout
+        font.load(null, 30000).then(this.masonryRepack, () => {});
+      }
+
       window.addEventListener(
         "alertGridCollapse",
         this.onAlertGridCollapseEvent

ui/src/Components/Grid/AlertGrid/index.js

@@ -4,8 +4,6 @@ import PropTypes from "prop-types";
 import { observable, action, computed } from "mobx";
 import { observer } from "mobx-react";
 
-import FontFaceObserver from "fontfaceobserver";
-
 import debounce from "lodash/debounce";
 
 import ReactResizeDetector from "react-resize-detector";
@@ -71,20 +69,6 @@ const AlertGrid = observer(
     }, 100);
 
     componentDidMount() {
-      // We have font-display:swap set for font assets, this means that on initial
-      // render a fallback font might be used and later swapped for the final one
-      // (once the final font is loaded). This means that fallback font might
-      // render to a different size and the swap can result in component resize.
-      // For our grid this resize might leave gaps since everything uses fixed
-      // position, so we use font observer and trigger repack when fonts are loaded
-      for (const fontWeight of [300, 400, 600]) {
-        const font = new FontFaceObserver("Open Sans", {
-          weight: fontWeight,
-        });
-        // wait up to 30s, run no-op function on timeout
-        font.load(null, 30000).then(this.masonryRepack, () => {});
-      }
-
       window.addEventListener("resize", this.handleResize);
     }
 

ui/src/Components/Grid/AlertGrid/index.test.js

@@ -356,6 +356,14 @@ describe("<Grid />", () => {
     }
   });
 
+  it("doesn't throw errors after FontFaceObserver timeout", () => {
+    MockGroupList(60, 5);
+    MountedGrid();
+    // skip a minute to trigger FontFaceObserver timeout handler
+    advanceBy(60 * 1000);
+    jest.runOnlyPendingTimers();
+  });
+
   it("doesn't crash on unmount", () => {
     MockGroupList(5, 3);
     const tree = MountedGrid();
@@ -381,14 +389,6 @@ describe("<AlertGrid />", () => {
     );
   };
 
-  it("doesn't throw errors after FontFaceObserver timeout", () => {
-    MockGroupList(60, 5);
-    ShallowAlertGrid();
-    // skip a minute to trigger FontFaceObserver timeout handler
-    advanceBy(60 * 1000);
-    jest.runOnlyPendingTimers();
-  });
-
   // known breakpoints calculated from GridSize logic
   [
     { canvas: 400, columns: 1 },