diff --git a/ui/src/Components/Labels/StaticLabel/index.js b/ui/src/Components/Labels/StaticLabel/index.js index 76ee9aab4..0439991f6 100644 --- a/ui/src/Components/Labels/StaticLabel/index.js +++ b/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; diff --git a/ui/src/Components/ManagedSilence/DeleteSilence.js b/ui/src/Components/ManagedSilence/DeleteSilence.js index 892c4e3a1..93027530a 100644 --- a/ui/src/Components/ManagedSilence/DeleteSilence.js +++ b/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) => { diff --git a/ui/src/Components/ManagedSilence/DeleteSilence.test.js b/ui/src/Components/ManagedSilence/DeleteSilence.test.js index 63165bc04..0abb0c978 100644 --- a/ui/src/Components/ManagedSilence/DeleteSilence.test.js +++ b/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("", () => { 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") diff --git a/ui/src/Components/SilenceModal/SilencePreview/index.js b/ui/src/Components/SilenceModal/SilencePreview/index.js index 9be49f5bc..878c95329 100644 --- a/ui/src/Components/SilenceModal/SilencePreview/index.js +++ b/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(); }) diff --git a/ui/src/Components/SilenceModal/SilencePreview/index.test.js b/ui/src/Components/SilenceModal/SilencePreview/index.test.js index 574e7d52c..86d9dff9f 100644 --- a/ui/src/Components/SilenceModal/SilencePreview/index.test.js +++ b/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("", () => { 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")