diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/Silence/index.js b/ui/src/Components/Grid/AlertGrid/AlertGroup/Silence/index.js index af6273daf..8cb510938 100644 --- a/ui/src/Components/Grid/AlertGrid/AlertGroup/Silence/index.js +++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/Silence/index.js @@ -190,8 +190,8 @@ const Silence = inject("alertStore")( getAlertmanager = () => { const { alertStore, alertmanagerState } = this.props; - const alertmanager = alertStore.data.upstreams.instances.find( - am => am.name === alertmanagerState.name + const alertmanager = alertStore.data.getAlertmanagerByName( + alertmanagerState.name ); if (alertmanager) return alertmanager; diff --git a/ui/src/Components/SilenceModal/SilenceModalContent.js b/ui/src/Components/SilenceModal/SilenceModalContent.js index a975870ff..ff83d4493 100644 --- a/ui/src/Components/SilenceModal/SilenceModalContent.js +++ b/ui/src/Components/SilenceModal/SilenceModalContent.js @@ -47,6 +47,7 @@ const SilenceModalContent = observer(
{silenceFormStore.data.inProgress ? ( ) : ( diff --git a/ui/src/Components/SilenceModal/SilenceSubmitController.js b/ui/src/Components/SilenceModal/SilenceSubmitController.js index 93149add9..7a2de3f5c 100644 --- a/ui/src/Components/SilenceModal/SilenceSubmitController.js +++ b/ui/src/Components/SilenceModal/SilenceSubmitController.js @@ -8,11 +8,12 @@ import { SilenceSubmitProgress } from "./SilenceSubmitProgress"; class SilenceSubmitController extends Component { static propTypes = { + alertStore: PropTypes.object.isRequired, silenceFormStore: PropTypes.object.isRequired }; render() { - const { silenceFormStore } = this.props; + const { silenceFormStore, alertStore } = this.props; return ( @@ -23,6 +24,7 @@ class SilenceSubmitController extends Component { name={am.label} uri={am.value} payload={silenceFormStore.data.toAlertmanagerPayload} + alertStore={alertStore} /> ))}
diff --git a/ui/src/Components/SilenceModal/SilenceSubmitController.test.js b/ui/src/Components/SilenceModal/SilenceSubmitController.test.js index c8be7db3f..facc04ffc 100644 --- a/ui/src/Components/SilenceModal/SilenceSubmitController.test.js +++ b/ui/src/Components/SilenceModal/SilenceSubmitController.test.js @@ -2,21 +2,27 @@ import React from "react"; import { shallow } from "enzyme"; +import { AlertStore } from "Stores/AlertStore"; import { SilenceFormStore, MatcherValueToObject } from "Stores/SilenceFormStore"; import { SilenceSubmitController } from "./SilenceSubmitController"; +let alertStore; let silenceFormStore; beforeEach(() => { + alertStore = new AlertStore([]); silenceFormStore = new SilenceFormStore(); }); const ShallowSilenceSubmitController = () => { return shallow( - + ); }; diff --git a/ui/src/Components/SilenceModal/SilenceSubmitProgress.js b/ui/src/Components/SilenceModal/SilenceSubmitProgress.js index a19fd2fa3..103f3a32e 100644 --- a/ui/src/Components/SilenceModal/SilenceSubmitProgress.js +++ b/ui/src/Components/SilenceModal/SilenceSubmitProgress.js @@ -46,7 +46,8 @@ const SilenceSubmitProgress = observer( static propTypes = { name: PropTypes.string.isRequired, uri: PropTypes.string.isRequired, - payload: PropTypes.object.isRequired + payload: PropTypes.object.isRequired, + alertStore: PropTypes.object.isRequired }; submitState = observable( @@ -83,13 +84,22 @@ const SilenceSubmitProgress = observer( }; parseAlertmanagerResponse = response => { - const { uri } = this.props; + const { name, alertStore } = this.props; + + const alertmanager = alertStore.data.getAlertmanagerByName(name); if (response.status === "success") { - const link = ( - - ); - this.submitState.markDone(link); + if (alertmanager) { + const link = ( + + ); + this.submitState.markDone(link); + } else { + this.submitState.markDone(response.data.silenceId); + } } else if (response.status === "error") { this.submitState.markFailed(response.error); } else { diff --git a/ui/src/Components/SilenceModal/SilenceSubmitProgress.test.js b/ui/src/Components/SilenceModal/SilenceSubmitProgress.test.js index eb64be239..355e1e159 100644 --- a/ui/src/Components/SilenceModal/SilenceSubmitProgress.test.js +++ b/ui/src/Components/SilenceModal/SilenceSubmitProgress.test.js @@ -2,14 +2,34 @@ import React from "react"; import { mount } from "enzyme"; +import toDiffableHtml from "diffable-html"; + +import { AlertStore } from "Stores/AlertStore"; import { SilenceSubmitProgress } from "./SilenceSubmitProgress"; +let alertStore; + +beforeEach(() => { + alertStore = new AlertStore([]); + alertStore.data.upstreams = { + instances: [ + { + name: "mockAlertmanager", + uri: "file:///mock", + publicURI: "http://example.com", + error: "" + } + ] + }; +}); + const MountedSilenceSubmitProgress = () => { return mount( ); }; @@ -49,6 +69,21 @@ describe("", () => { expect(silenceLink.text()).toBe("123456789"); }); + it("renders returned silence ID as text if alertmanager is not found in AlertStore", async () => { + fetch.mockResponseOnce( + JSON.stringify({ status: "success", data: { silenceId: "123456789" } }) + ); + alertStore.data.upstreams.instances = []; + const tree = MountedSilenceSubmitProgress(); + await expect(tree.instance().submitState.fetch).resolves.toBe("success"); + // force re-render + tree.update(); + const silenceLink = tree.find("a"); + expect(silenceLink).toHaveLength(0); + const idDiv = tree.find("div.flex-fill").at(2); + expect(toDiffableHtml(idDiv.html())).toMatchSnapshot(); + }); + it("renders returned error message on failed fetch", async () => { fetch.mockRejectOnce(new Error("mock error message")); const tree = MountedSilenceSubmitProgress(); diff --git a/ui/src/Components/SilenceModal/__snapshots__/SilenceSubmitProgress.test.js.snap b/ui/src/Components/SilenceModal/__snapshots__/SilenceSubmitProgress.test.js.snap new file mode 100644 index 000000000..23a21fae0 --- /dev/null +++ b/ui/src/Components/SilenceModal/__snapshots__/SilenceSubmitProgress.test.js.snap @@ -0,0 +1,9 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` renders returned silence ID as text if alertmanager is not found in AlertStore 1`] = ` +" +
+ 123456789 +
+" +`; diff --git a/ui/src/Stores/AlertStore.js b/ui/src/Stores/AlertStore.js index 1380ff992..3bb9362e8 100644 --- a/ui/src/Stores/AlertStore.js +++ b/ui/src/Stores/AlertStore.js @@ -134,9 +134,12 @@ class AlertStore { counters: {}, groups: {}, silences: {}, - upstreams: { instances: [] } + upstreams: { instances: [] }, + getAlertmanagerByName(name) { + return this.upstreams.instances.find(am => am.name === name); + } }, - {}, + { getAlertmanagerByName: action }, { name: "API Response data" } );