fix(ui): disable silence menu actions when all alertmanagers are read-only

ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/AlertMenu.js

@@ -44,6 +44,9 @@ const MenuContent = onClickOutside(
     alertStore,
     silenceFormStore
   }) => {
+    const isReadOnly =
+      Object.keys(alertStore.data.clustersWithoutReadOnly).length === 0;
+
     return (
       <FetchPauser alertStore={alertStore}>
         <div
@@ -68,8 +71,10 @@ const MenuContent = onClickOutside(
           ))}
           <div className="dropdown-divider" />
           <div
-            className="dropdown-item cursor-pointer"
+            className={`dropdown-item cursor-pointer ${isReadOnly &&
+              "disabled"}`}
             onClick={() =>
+              isReadOnly ||
               onSilenceClick(alertStore, silenceFormStore, group, alert)
             }
           >

ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/AlertMenu.test.js

@@ -17,6 +17,23 @@ beforeEach(() => {
   silenceFormStore = new SilenceFormStore();
   alert = MockAlert([], { foo: "bar" }, "active");
   group = MockAlertGroup({ alertname: "Fake Alert" }, [alert], [], {}, {});
+
+  alertStore.data.upstreams = {
+    clusters: { default: ["am1"] },
+    instances: [
+      {
+        name: "am1",
+        uri: "http://localhost:8080",
+        publicURI: "http://example.com",
+        readonly: false,
+        headers: {},
+        error: "",
+        version: "0.15.0",
+        cluster: "default",
+        clusterMembers: ["am1"]
+      }
+    ]
+  };
 });
 
 const MockAfterClick = jest.fn();
@@ -82,6 +99,15 @@ describe("<MenuContent />", () => {
     expect(silenceFormStore.toggle.visible).toBe(true);
   });
 
+  it("'Silence' menu entry is disabled when all Alertmanager instances are read-only", () => {
+    alertStore.data.upstreams.instances[0].readonly = true;
+    const tree = MountedMenuContent(group);
+    const button = tree.find(".dropdown-item").at(1);
+    expect(button.hasClass("disabled")).toBe(true);
+    button.simulate("click");
+    expect(silenceFormStore.toggle.visible).toBe(false);
+  });
+
   it("source link points at alert source", () => {
     const tree = MountedMenuContent(group);
     const link = tree.find("a.dropdown-item[href='localhost/prometheus']");

ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/GroupMenu.js

@@ -56,6 +56,9 @@ const MenuContent = onClickOutside(
     ].join("");
     const groupLink = `${baseURL}?${FormatAlertsQ(groupFilters)}`;
 
+    const isReadOnly =
+      Object.keys(alertStore.data.clustersWithoutReadOnly).length === 0;
+
     return (
       <FetchPauser alertStore={alertStore}>
         <div
@@ -74,8 +77,11 @@ const MenuContent = onClickOutside(
             <FontAwesomeIcon icon={faShareSquare} /> Copy link to this group
           </div>
           <div
-            className="dropdown-item cursor-pointer"
-            onClick={() => onSilenceClick(alertStore, silenceFormStore, group)}
+            className={`dropdown-item cursor-pointer ${isReadOnly &&
+              "disabled"}`}
+            onClick={() =>
+              isReadOnly || onSilenceClick(alertStore, silenceFormStore, group)
+            }
           >
             <FontAwesomeIcon icon={faBellSlash} /> Silence this group
           </div>

ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/GroupMenu.test.js

@@ -15,6 +15,23 @@ let silenceFormStore;
 beforeEach(() => {
   alertStore = new AlertStore([]);
   silenceFormStore = new SilenceFormStore();
+
+  alertStore.data.upstreams = {
+    clusters: { default: ["am1"] },
+    instances: [
+      {
+        name: "am1",
+        uri: "http://localhost:8080",
+        publicURI: "http://example.com",
+        readonly: false,
+        headers: {},
+        error: "",
+        version: "0.15.0",
+        cluster: "default",
+        clusterMembers: ["am1"]
+      }
+    ]
+  };
 });
 
 const MockAfterClick = jest.fn();
@@ -91,4 +108,15 @@ describe("<MenuContent />", () => {
     button.simulate("click");
     expect(silenceFormStore.toggle.visible).toBe(true);
   });
+
+  it("'Silence' menu entry is disabled when all Alertmanager instances are read-only", () => {
+    alertStore.data.upstreams.instances[0].readonly = true;
+
+    const group = MockAlertGroup({ alertname: "Fake Alert" }, [], [], {}, {});
+    const tree = MountedMenuContent(group);
+    const button = tree.find(".dropdown-item").at(1);
+    expect(button.hasClass("disabled")).toBe(true);
+    button.simulate("click");
+    expect(silenceFormStore.toggle.visible).toBe(false);
+  });
 });