fix(ui): only allow read-write alertmanagers when editing silence

ui/src/Components/ManagedSilence/DeleteSilence.js

@@ -111,9 +111,8 @@ const DeleteSilenceModalContent = observer(
     );
 
     getAlertmanager = () =>
-      this.props.alertStore.data.upstreams.instances
+      this.props.alertStore.data.readWriteAlertmanagers
         .filter(u => u.cluster === this.props.cluster)
-        .filter(u => u.readonly === false)
         .slice(0, 1)[0];
 
     parseAlertmanagerResponse = response => {

ui/src/Components/ManagedSilence/DeleteSilence.test.js

@@ -29,7 +29,8 @@ beforeEach(() => {
         readonly: false,
         error: "",
         version: "0.15.3",
-        headers: {}
+        headers: {},
+        clusterMembers: ["am1"]
       }
     ],
     clusters: { am: ["am1"] }

ui/src/Components/ManagedSilence/index.js

@@ -45,9 +45,8 @@ const ManagedSilence = observer(
     }
 
     getAlertmanager = () =>
-      this.props.alertStore.data.upstreams.instances
+      this.props.alertStore.data.readWriteAlertmanagers
         .filter(u => u.cluster === this.props.cluster)
-        .filter(u => u.readonly === false)
         .slice(0, 1)[0];
 
     onEditSilence = () => {

ui/src/Components/ManagedSilence/index.test.js

@@ -103,6 +103,51 @@ describe("<ManagedSilence />", () => {
     });
   });
 
+  it("getAlertmanager() returns only writable instances", () => {
+    alertStore.data.upstreams = {
+      instances: [
+        {
+          name: "am1",
+          cluster: "am",
+          clusterMembers: ["am1", "am2"],
+          uri: "http://localhost:9093",
+          publicURI: "http://example.com",
+          readonly: false,
+          error: "",
+          version: "0.15.3",
+          headers: {}
+        },
+        {
+          name: "am2",
+          cluster: "am",
+          clusterMembers: ["am1", "am2"],
+          uri: "http://localhost:9094",
+          publicURI: "http://example.com",
+          readonly: true,
+          error: "",
+          version: "0.15.3",
+          headers: {}
+        }
+      ],
+      clusters: { am: ["am1", "am2"] }
+    };
+
+    const tree = MountedManagedSilence();
+    const instance = tree.instance();
+    const am = instance.getAlertmanager();
+    expect(am).toEqual({
+      name: "am1",
+      cluster: "am",
+      clusterMembers: ["am1"],
+      uri: "http://localhost:9093",
+      publicURI: "http://example.com",
+      readonly: false,
+      error: "",
+      version: "0.15.3",
+      headers: {}
+    });
+  });
+
   it("shows Edit button on unexpired silence", () => {
     const tree = MountedManagedSilence();
     tree.instance().collapse.toggle();

ui/src/Stores/AlertStore.js

@@ -176,6 +176,17 @@ class AlertStore {
       get readOnlyAlertmanagers() {
         return this.upstreams.instances.filter(am => am.readonly === true);
       },
+      get readWriteAlertmanagers() {
+        return this.upstreams.instances
+          .filter(am => am.readonly === false)
+          .map(am =>
+            Object.assign({}, am, {
+              clusterMembers: am.clusterMembers.filter(
+                m => this.isReadOnlyAlertmanager(m) === false
+              )
+            })
+          );
+      },
       get clustersWithoutReadOnly() {
         const clusters = {};
         for (const clusterID of Object.keys(this.upstreams.clusters)) {
@@ -196,6 +207,7 @@ class AlertStore {
     },
     {
       readOnlyAlertmanagers: computed,
+      readWriteAlertmanagers: computed,
       clustersWithoutReadOnly: computed
     },
     { name: "API Response data" }