fix(ui): render correct link after adding new silence to Alertmanager

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;

ui/src/Components/SilenceModal/SilenceModalContent.js

@@ -47,6 +47,7 @@ const SilenceModalContent = observer(
               <div className="modal-body">
                 {silenceFormStore.data.inProgress ? (
                   <SilenceSubmitController
+                    alertStore={alertStore}
                     silenceFormStore={silenceFormStore}
                   />
                 ) : (

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 (
       <React.Fragment>
@@ -23,6 +24,7 @@ class SilenceSubmitController extends Component {
               name={am.label}
               uri={am.value}
               payload={silenceFormStore.data.toAlertmanagerPayload}
+              alertStore={alertStore}
             />
           ))}
         </div>

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(
-    <SilenceSubmitController silenceFormStore={silenceFormStore} />
+    <SilenceSubmitController
+      alertStore={alertStore}
+      silenceFormStore={silenceFormStore}
+    />
   );
 };
 

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 = (
-          <SilenceLink uri={uri} silenceId={response.data.silenceId} />
-        );
-        this.submitState.markDone(link);
+        if (alertmanager) {
+          const link = (
+            <SilenceLink
+              uri={alertmanager.uri}
+              silenceId={response.data.silenceId}
+            />
+          );
+          this.submitState.markDone(link);
+        } else {
+          this.submitState.markDone(response.data.silenceId);
+        }
       } else if (response.status === "error") {
         this.submitState.markFailed(response.error);
       } else {

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(
     <SilenceSubmitProgress
       name="mockAlertmanager"
       uri="http://localhost/mock"
       payload={{ foo: "bar" }}
+      alertStore={alertStore}
     />
   );
 };
@@ -49,6 +69,21 @@ describe("<SilenceSubmitProgress />", () => {
     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();

ui/src/Components/SilenceModal/__snapshots__/SilenceSubmitProgress.test.js.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<SilenceSubmitProgress /> renders returned silence ID as text if alertmanager is not found in AlertStore 1`] = `
+"
+<div class=\\"p-2 flex-fill\\">
+  123456789
+</div>
+"
+`;

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