fix(ui): move silence request state off component

ui/package.json

@@ -67,7 +67,8 @@
   "jest": {
     "collectCoverageFrom": [
       "src/**/*.{js,ts,tsx}",
-      "!src/**/*.stories.{js,ts,tsx}"
+      "!src/**/*.stories.{js,ts,tsx}",
+      "!src/react-app-env.d.ts"
     ]
   },
   "devDependencies": {

ui/src/Components/SilenceModal/SilenceForm.js

@@ -16,6 +16,7 @@ import {
   SilenceFormStage,
   NewEmptyMatcher,
   MatcherValueToObject,
+  NewClusterRequest,
 } from "Stores/SilenceFormStore";
 import { Settings } from "Stores/Settings";
 import { QueryOperators } from "Common/Query";
@@ -43,6 +44,9 @@ const SilenceForm = ({
       silenceFormStore.data.verifyStarEnd();
     }
 
+    // reset cluster request state
+    silenceFormStore.data.requestsByCluster = {};
+
     if (
       silenceFormStore.data.matchers.filter(
         (m) => m.name !== "" || m.values.length
@@ -100,6 +104,12 @@ const SilenceForm = ({
   const handleSubmit = (event) => {
     event.preventDefault();
 
+    let rbc = {};
+    silenceFormStore.data.alertmanagers.forEach((am) => {
+      rbc[am.label] = NewClusterRequest(am.label, am.value);
+    });
+    silenceFormStore.data.requestsByCluster = rbc;
+
     settingsStore.silenceFormConfig.saveAuthor(silenceFormStore.data.author);
 
     if (silenceFormStore.data.isValid)

ui/src/Components/SilenceModal/SilenceSubmit/SilenceSubmitController.js

@@ -1,26 +1,79 @@
-import React, { memo } from "react";
+import React from "react";
 import PropTypes from "prop-types";
 
+import { useObserver } from "mobx-react-lite";
+
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faArrowLeft } from "@fortawesome/free-solid-svg-icons/faArrowLeft";
+import { faCheckCircle } from "@fortawesome/free-regular-svg-icons/faCheckCircle";
+import { faExclamationCircle } from "@fortawesome/free-solid-svg-icons/faExclamationCircle";
 
 import { AlertStore } from "Stores/AlertStore";
 import { SilenceFormStore } from "Stores/SilenceFormStore";
 import { SilenceSubmitProgress } from "./SilenceSubmitProgress";
 
-const SilenceSubmitController = memo(({ silenceFormStore, alertStore }) => {
-  return (
+const SilenceSubmitController = ({ silenceFormStore, alertStore }) => {
+  return useObserver(() => (
     <React.Fragment>
-      <div>
-        {silenceFormStore.data.alertmanagers.map((am) => (
-          <SilenceSubmitProgress
-            key={am.label}
-            cluster={am.label}
-            members={am.value}
-            payload={silenceFormStore.data.toAlertmanagerPayload}
-            alertStore={alertStore}
-          />
-        ))}
+      <div className="table-responsive">
+        <table className="table table-borderless">
+          <tbody>
+            {Object.values(silenceFormStore.data.requestsByCluster).map(
+              (clusterRequest) => (
+                <tr key={clusterRequest.cluster}>
+                  <td className="align-middle" style={{ width: "1%" }}>
+                    {clusterRequest.isDone ? (
+                      clusterRequest.error ? (
+                        <FontAwesomeIcon
+                          icon={faExclamationCircle}
+                          className="text-danger"
+                        />
+                      ) : (
+                        <FontAwesomeIcon
+                          icon={faCheckCircle}
+                          className="text-success"
+                        />
+                      )
+                    ) : (
+                      <SilenceSubmitProgress
+                        key={clusterRequest.cluster}
+                        cluster={clusterRequest.cluster}
+                        members={clusterRequest.members}
+                        payload={silenceFormStore.data.toAlertmanagerPayload}
+                        alertStore={alertStore}
+                        silenceFormStore={silenceFormStore}
+                      />
+                    )}
+                  </td>
+                  <td className="align-middle">{clusterRequest.cluster}</td>
+                  <td>
+                    <div
+                      className={`rounded text-center ${
+                        clusterRequest.isDone && clusterRequest.error
+                          ? "bg-light"
+                          : ""
+                      }`}
+                    >
+                      {clusterRequest.isDone ? (
+                        clusterRequest.error ? (
+                          clusterRequest.error
+                        ) : (
+                          <a
+                            href={clusterRequest.silenceLink}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                          >
+                            {clusterRequest.silenceID}
+                          </a>
+                        )
+                      ) : null}
+                    </div>
+                  </td>
+                </tr>
+              )
+            )}
+          </tbody>
+        </table>
       </div>
       <div className="d-flex flex-row-reverse">
         <button
@@ -33,8 +86,8 @@ const SilenceSubmitController = memo(({ silenceFormStore, alertStore }) => {
         </button>
       </div>
     </React.Fragment>
-  );
-});
+  ));
+};
 SilenceSubmitController.propTypes = {
   alertStore: PropTypes.instanceOf(AlertStore).isRequired,
   silenceFormStore: PropTypes.instanceOf(SilenceFormStore).isRequired,

ui/src/Components/SilenceModal/SilenceSubmit/SilenceSubmitController.test.js

@@ -3,7 +3,11 @@ import React from "react";
 import { shallow } from "enzyme";
 
 import { AlertStore } from "Stores/AlertStore";
-import { SilenceFormStore, SilenceFormStage } from "Stores/SilenceFormStore";
+import {
+  SilenceFormStore,
+  SilenceFormStage,
+  NewClusterRequest,
+} from "Stores/SilenceFormStore";
 import { SilenceSubmitController } from "./SilenceSubmitController";
 
 let alertStore;
@@ -12,31 +16,126 @@ let silenceFormStore;
 beforeEach(() => {
   alertStore = new AlertStore([]);
   silenceFormStore = new SilenceFormStore();
-});
 
-const ShallowSilenceSubmitController = () => {
-  return shallow(
-    <SilenceSubmitController
-      alertStore={alertStore}
-      silenceFormStore={silenceFormStore}
-    />
-  );
-};
+  alertStore.data.upstreams = {
+    clusters: { ha: ["am1", "am2"], single: "single" },
+    instances: [
+      {
+        name: "am1",
+        uri: "http://am1.example.com",
+        publicURI: "http://am1.example.com",
+        readonly: false,
+        headers: {},
+        corsCredentials: "include",
+        error: "",
+        version: "0.17.0",
+        cluster: "ha",
+        clusterMembers: ["am1", "am2"],
+      },
+      {
+        name: "am2",
+        uri: "http://am2.example.com",
+        publicURI: "http://am2.example.com",
+        readonly: false,
+        headers: {},
+        corsCredentials: "include",
+        error: "",
+        version: "0.17.0",
+        cluster: "ha",
+        clusterMembers: ["am1", "am2"],
+      },
+      {
+        name: "single",
+        uri: "http://single.example.com",
+        publicURI: "http://single.example.com",
+        readonly: false,
+        headers: {},
+        corsCredentials: "include",
+        error: "",
+        version: "0.17.0",
+        cluster: "ha",
+        clusterMembers: ["single"],
+      },
+    ],
+  };
+});
 
 describe("<SilenceSubmitController />", () => {
   it("renders all passed SilenceSubmitProgress", () => {
-    silenceFormStore.data.alertmanagers.push({ label: "am1", value: ["am1"] });
-    silenceFormStore.data.alertmanagers.push({
-      label: "ha",
-      value: ["am2", "am3"],
-    });
-    const tree = ShallowSilenceSubmitController();
-    expect(tree.find("div").at(0).children()).toHaveLength(2);
+    silenceFormStore.data.requestsByCluster = {
+      ha: NewClusterRequest("ha", ["am1", "am2"]),
+      single: NewClusterRequest("single", ["single"]),
+    };
+    const tree = shallow(
+      <SilenceSubmitController
+        alertStore={alertStore}
+        silenceFormStore={silenceFormStore}
+      />
+    );
+    expect(tree.find("tr")).toHaveLength(2);
+  });
+
+  it("renders spinner for pending requests", () => {
+    const single = NewClusterRequest("single", ["single"]);
+    silenceFormStore.data.requestsByCluster = { single: single };
+    const tree = shallow(
+      <SilenceSubmitController
+        alertStore={alertStore}
+        silenceFormStore={silenceFormStore}
+      />
+    );
+    expect(tree.find("tr")).toHaveLength(1);
+    expect(tree.find("td").at(0).html()).toMatch(/fa-circle-notch/);
+    expect(tree.find("td").at(1).text()).toBe("single");
+    expect(tree.find("td").at(2).text()).toBe("");
+  });
+
+  it("renders error for failed requests", () => {
+    const single = NewClusterRequest("single", ["single"]);
+    single.isDone = true;
+    single.error = "fake error";
+    silenceFormStore.data.requestsByCluster = { single: single };
+    const tree = shallow(
+      <SilenceSubmitController
+        alertStore={alertStore}
+        silenceFormStore={silenceFormStore}
+      />
+    );
+    expect(tree.find("tr")).toHaveLength(1);
+    expect(tree.find("td").at(0).html()).toMatch(/fa-exclamation-circle/);
+    expect(tree.find("td").at(1).text()).toBe("single");
+    expect(tree.find("td").at(2).text()).toBe("fake error");
+  });
+
+  it("renders silence link for completed requests", () => {
+    const single = NewClusterRequest("single", ["single"]);
+    single.isDone = true;
+    single.silenceID = "123456789";
+    single.silenceLink = "http://localhost";
+    silenceFormStore.data.requestsByCluster = { single: single };
+    const tree = shallow(
+      <SilenceSubmitController
+        alertStore={alertStore}
+        silenceFormStore={silenceFormStore}
+      />
+    );
+    expect(tree.find("tr")).toHaveLength(1);
+    expect(tree.find("td").at(0).html()).toMatch(/fa-check-circle/);
+    expect(tree.find("td").at(1).text()).toBe("single");
+    expect(tree.find("td").at(2).text()).toBe("123456789");
+    expect(
+      tree.find("td").at(2).find('a[href="http://localhost"]')
+    ).toHaveLength(1);
   });
 
   it("resets the form on 'Back' button click", () => {
     silenceFormStore.data.currentStage = SilenceFormStage.Submit;
-    const tree = ShallowSilenceSubmitController();
+    const tree = shallow(
+      <SilenceSubmitController
+        alertStore={alertStore}
+        silenceFormStore={silenceFormStore}
+      />
+    );
     const button = tree.find("button");
     button.simulate("click");
     expect(silenceFormStore.data.currentStage).toBe(SilenceFormStage.UserInput);