Merge pull request #1574 from prymitive/fix-previews

fix(ui): fix regression in silence preview

ui/src/Components/Labels/StaticLabel/index.js

@@ -6,7 +6,7 @@ import { BaseLabel } from "Components/Labels/BaseLabel";
 
 // Renders a static label element, no click actions, no hover
 const StaticLabel = observer(
-  class FilteringLabel extends BaseLabel {
+  class StaticLabel extends BaseLabel {
     render() {
       const { name, value } = this.props;
 

ui/src/Components/ManagedSilence/DeleteSilence.js

@@ -125,7 +125,9 @@ const DeleteSilenceModalContent = observer(
       this.previewState.fetch = FetchGet(alertsURI, {})
         .then((result) => result.json())
         .then((result) => {
-          this.previewState.groupsToUniqueLabels(Object.values(result.groups));
+          this.previewState.groupsToUniqueLabels(
+            result.grids.length ? result.grids[0].alertGroups : []
+          );
           this.previewState.setError(null);
         })
         .catch((err) => {

ui/src/Components/ManagedSilence/DeleteSilence.test.js

@@ -35,8 +35,6 @@ beforeEach(() => {
     ],
     clusters: { am: ["am1"] },
   };
-
-  jest.restoreAllMocks();
 });
 
 afterEach(() => {
@@ -48,15 +46,26 @@ const MockOnHide = jest.fn();
 
 const MockAPIResponse = () => {
   const response = EmptyAPIResponse();
-  response.groups = {
-    "1": MockAlertGroup(
-      { alertname: "foo" },
-      [MockAlert([], { instance: "foo" }, "suppressed")],
-      [],
-      { job: "foo" },
-      {}
-    ),
-  };
+  response.grids = [
+    {
+      labelName: "",
+      labelValue: "",
+      alertGroups: [
+        MockAlertGroup(
+          { alertname: "foo" },
+          [MockAlert([], { instance: "foo" }, "suppressed")],
+          [],
+          { job: "foo" },
+          {}
+        ),
+      ],
+      stateCount: {
+        unprocessed: 1,
+        suppressed: 2,
+        active: 3,
+      },
+    },
+  ];
   return response;
 };
 
@@ -152,6 +161,23 @@ describe("<DeleteSilenceModalContent />", () => {
     expect(fetch).toHaveBeenCalled();
   });
 
+  it("renders StaticLabel after fetch", async () => {
+    const tree = MountedDeleteSilenceModalContent();
+    await expect(tree.instance().previewState.fetch).resolves.toBeUndefined();
+    tree.update();
+    expect(tree.text()).toMatch(/Affected alerts/);
+    expect(tree.find("StaticLabel")).toHaveLength(3);
+  });
+
+  it("handles empty grid response correctly", async () => {
+    fetch.resetMocks();
+    fetch.mockResponseOnce(JSON.stringify(EmptyAPIResponse()));
+    const tree = MountedDeleteSilenceModalContent();
+    await expect(tree.instance().previewState.fetch).resolves.toBeUndefined();
+    tree.update();
+    expect(tree.text()).toMatch(/No alerts matched/);
+  });
+
   it("renders ErrorMessage on failed preview fetch", async () => {
     const consoleSpy = jest
       .spyOn(console, "trace")

ui/src/Components/SilenceModal/SilencePreview/index.js

@@ -87,7 +87,9 @@ const SilencePreview = observer(
           return result.json();
         })
         .then((result) => {
-          this.matchedAlerts.groupsToUniqueLabels(Object.values(result.groups));
+          this.matchedAlerts.groupsToUniqueLabels(
+            result.grids.length ? result.grids[0].alertGroups : []
+          );
           this.matchedAlerts.setError(null);
           this.matchedAlerts.setDone();
         })

ui/src/Components/SilenceModal/SilencePreview/index.test.js

@@ -37,25 +37,37 @@ afterEach(() => {
 
 const MockAPIResponse = () => {
   const response = EmptyAPIResponse();
-  response.groups = {
-    "1": MockAlertGroup(
-      { alertname: "foo" },
-      [MockAlert([], { instance: "foo1" }, "active")],
-      [],
-      { job: "foo" },
-      {}
-    ),
-    "2": MockAlertGroup(
-      { alertname: "bar" },
-      [
-        MockAlert([], { instance: "bar1" }, "active"),
-        MockAlert([], { instance: "bar2" }, "active"),
+
+  response.grids = [
+    {
+      labelName: "",
+      labelValue: "",
+      alertGroups: [
+        MockAlertGroup(
+          { alertname: "foo" },
+          [MockAlert([], { instance: "foo1" }, "active")],
+          [],
+          { job: "foo" },
+          {}
+        ),
+        MockAlertGroup(
+          { alertname: "bar" },
+          [
+            MockAlert([], { instance: "bar1" }, "active"),
+            MockAlert([], { instance: "bar2" }, "active"),
+          ],
+          [],
+          { job: "bar" },
+          {}
+        ),
       ],
-      [],
-      { job: "bar" },
-      {}
-    ),
-  };
+      stateCount: {
+        unprocessed: 1,
+        suppressed: 2,
+        active: 3,
+      },
+    },
+  ];
   return response;
 };
 
@@ -123,6 +135,25 @@ describe("<SilencePreview />", () => {
     expect(toDiffableHtml(tree.html())).toMatchSnapshot();
   });
 
+  it("renders StaticLabel after fetch", async () => {
+    fetch.mockResponse(JSON.stringify(MockAPIResponse()));
+
+    const tree = MountedSilencePreview();
+    await expect(tree.instance().matchedAlerts.fetch).resolves.toBeUndefined();
+    tree.update();
+    expect(tree.text()).toMatch(/Affected alerts/);
+    expect(tree.find("StaticLabel")).toHaveLength(9);
+  });
+
+  it("handles empty grid response correctly", async () => {
+    fetch.mockResponseOnce(JSON.stringify(EmptyAPIResponse()));
+
+    const tree = MountedSilencePreview();
+    await expect(tree.instance().matchedAlerts.fetch).resolves.toBeUndefined();
+    tree.update();
+    expect(tree.text()).toMatch(/No alerts matched/);
+  });
+
   it("renders FetchError on failed fetch", async () => {
     const consoleSpy = jest
       .spyOn(console, "trace")