fix(ui): shared silences is now a list

API changed, so UI needs to follow

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

@@ -49,22 +49,24 @@ const Alert = observer(
         BorderClassMap[alert.state] || "border-warning"
       ];
 
-      let silences = {};
-      for (let am of alert.alertmanager) {
+      const silences = {};
+      for (const am of alert.alertmanager) {
         if (!silences[am.cluster]) {
           silences[am.cluster] = {
             alertmanager: am,
-            silences: []
+            silences: [
+              ...new Set(
+                am.silencedBy.filter(
+                  silenceID =>
+                    !(
+                      group.shared.silences[am.cluster] &&
+                      group.shared.silences[am.cluster].includes(silenceID)
+                    )
+                )
+              )
+            ]
           };
         }
-        for (let silenceID of am.silencedBy) {
-          if (
-            !silences[am.cluster].silences.includes(silenceID) &&
-            !(group.shared.silences[am.cluster] === silenceID)
-          ) {
-            silences[am.cluster].silences.push(silenceID);
-          }
-        }
       }
 
       return (

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

@@ -105,7 +105,7 @@ describe("<Alert />", () => {
   it("renders a silence if alert is silenced", () => {
     const alert = MockedAlert();
     alert.alertmanager[0].silencedBy = ["silence123456789"];
-    const group = MockAlertGroup({}, [alert], [], {}, {});
+    const group = MockAlertGroup({}, [alert], [], {}, { default: [] });
     const tree = MountedAlert(alert, group, false, false);
     const silence = tree.find("Silence");
     expect(silence).toHaveLength(1);
@@ -143,6 +143,21 @@ describe("<Alert />", () => {
     expect(silence.html()).toMatch(/silence123456789/);
   });
 
+  it("doesn't render shared silences", () => {
+    const alert = MockedAlert();
+    alert.alertmanager[0].silencedBy = ["silence123456789"];
+    const group = MockAlertGroup(
+      {},
+      [alert],
+      [],
+      {},
+      { default: ["silence123456789"] }
+    );
+    const tree = MountedAlert(alert, group, false, false);
+    const silence = tree.find("Silence");
+    expect(silence).toHaveLength(0);
+  });
+
   it("uses BorderClassMap.active when @state=active", () => {
     const alert = MockedAlert();
     alert.state = "active";

ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/index.js

@@ -67,20 +67,23 @@ const GroupFooter = observer(
           {Object.keys(group.shared.silences).length === 0 ? null : (
             <div className="components-grid-alertgrid-alertgroup-shared-silence rounded-0 border-left-1 border-right-0 border-top-0 border-bottom-0 border-success ">
               {Object.entries(group.shared.silences).map(
-                ([cluster, silenceID]) => (
-                  <Silence
-                    key={silenceID}
-                    silenceFormStore={silenceFormStore}
-                    alertmanagerState={
-                      group.alerts.map(
-                        a =>
-                          a.alertmanager.filter(am => am.cluster === cluster)[0]
-                      )[0]
-                    }
-                    silenceID={silenceID}
-                    afterUpdate={afterUpdate}
-                  />
-                )
+                ([cluster, silences]) =>
+                  silences.map(silenceID => (
+                    <Silence
+                      key={`${cluster}/${silenceID}`}
+                      silenceFormStore={silenceFormStore}
+                      alertmanagerState={
+                        group.alerts.map(
+                          a =>
+                            a.alertmanager.filter(
+                              am => am.cluster === cluster
+                            )[0]
+                        )[0]
+                      }
+                      silenceID={silenceID}
+                      afterUpdate={afterUpdate}
+                    />
+                  ))
               )}
             </div>
           )}

ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/index.test.js

@@ -80,7 +80,7 @@ describe("<GroupFooter />", () => {
     for (const id of Object.keys(group.alerts)) {
       group.alerts[id].alertmanager[0].silencedBy = ["123456789"];
     }
-    group.shared.silences = { default: "123456789" };
+    group.shared.silences = { default: ["123456789"] };
     const tree = MountedGroupFooter().find("GroupFooter");
     expect(tree.find("Silence")).toHaveLength(1);
   });
@@ -89,7 +89,7 @@ describe("<GroupFooter />", () => {
     for (const id of Object.keys(group.alerts)) {
       group.alerts[id].alertmanager[0].silencedBy = ["123456789"];
     }
-    group.shared.silences = { default: "123456789" };
+    group.shared.silences = { default: ["123456789"] };
 
     alertStore.data.silences = {
       default: {

ui/src/Models/API.js

@@ -45,7 +45,7 @@ const APIGroup = PropTypes.exact({
   shared: PropTypes.exact({
     annotations: PropTypes.arrayOf(Annotation).isRequired,
     labels: PropTypes.object.isRequired,
-    silences: PropTypes.object.isRequired
+    silences: PropTypes.objectOf(PropTypes.arrayOf(PropTypes.string)).isRequired
   }).isRequired
 });