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")