Handle silence request result for multiple Alertmanager instances in the UI

Silence result UI will now show all selected upstreams and provide individual results for each

Makefile

@@ -3,7 +3,7 @@ VERSION := $(shell git describe --tags --always --dirty='-dev')
 
 # Alertmanager instance used when running locally, points to mock data
 MOCK_PATH         := $(CURDIR)/mock/0.7.1
-ALERTMANAGER_URIS := mock:file://$(MOCK_PATH)
+ALERTMANAGER_URIS := "docker:http://localhost:9093 am-0.7.1:file://$(CURDIR)/mock/0.7.1"
 # Listen port when running locally
 PORT := 8080
 

assets/static/silence.js

@@ -132,9 +132,10 @@ var Silence = (function() {
     };
 
     var sendSilencePOST = function(url, payload) {
+        var elem = $(".silence-post-result[data-uri='" + url + "']");
         $.ajax({
             type: "POST",
-            url: url,
+            url: url + "/api/v1/silences",
             data: JSON.stringify(payload),
             error: function(xhr, textStatus, errorThrown) {
                 // default to whatever error text we can get
@@ -153,19 +154,18 @@ var Silence = (function() {
                 }
 
                 var errContent = Templates.Render("silenceFormError", {error: err});
-                $("#newSilenceAlert").html(errContent).removeClass("hidden");
+                $(elem).html(errContent);
             },
             success: function(data) {
                 // FIXME this is per instance now, so needs to be handled differently
                 if (data.status == "success") {
-                    $("#newSilenceAlert").addClass("hidden");
-                    $("#newSilenceForm").html(Templates.Render("silenceFormSuccess", {
+                    $(elem).html(Templates.Render("silenceFormSuccess", {
                         silenceID: data.data.silenceId
                     }));
                 } else {
                     var err = "Invalid response from Alertmanager API: " + JSON.stringify(data);
                     var errContent = Templates.Render("silenceFormError", {error: err});
-                    $("#newSilenceAlert").html(errContent).removeClass("hidden");
+                    $(elem).html(errContent);
                 }
             },
             dataType: "json"
@@ -292,8 +292,20 @@ var Silence = (function() {
                             $("#newSilenceAlert").html(errContent).removeClass("hidden");
                             return false;
                         }
+                        $("#newSilenceAlert").addClass("hidden");
 
-                        $.each(silenceFormAlertmanagerURL(), function(i, uri){
+                        var selectedAMURIs = silenceFormAlertmanagerURL();
+                        var selectedAMs = [];
+                        $.each(alertmanagers, function(i, am) {
+                            if ($.inArray(am.uri, selectedAMURIs) >= 0) {
+                                selectedAMs.push(am);
+                            }
+                        });
+                        modal.find(".modal-body").html(
+                            Templates.Render("silenceFormResults", {alertmanagers: selectedAMs})
+                        );
+
+                        $.each(selectedAMURIs, function(i, uri){
                             sendSilencePOST(uri, payload);
                         });
 

assets/static/templates.js

@@ -24,6 +24,7 @@ var Templates = (function() {
 
             // modal popup with silence form
             silenceForm: "#silence-form",
+            silenceFormResults: "#silence-form-results",
             silenceFormSuccess: "#silence-form-success",
             silenceFormError: "#silence-form-error",
             silenceFormFatal: "#silence-form-fatal",

assets/templates/silence.html

@@ -221,12 +221,36 @@
 </form>
 </script>
 
+<script type="application/json" id="silence-form-results">
+<table class="table">
+  <% _.each(alertmanagers, function(alertmanager) { %>
+    <tr>
+      <td>
+        <span class="label label-list label-primary">
+          <%- alertmanager.name %>
+        </span>
+      </td>
+      <td class="silence-post-result" data-uri="<%- alertmanager.uri %>">
+        <div class="text-center text-muted">
+          <i class="fa fa-refresh fa-spin"></i>
+        </div>
+      </td>
+    </tr>
+  <% }) %>
+</table>
+</script>
+
 <script type="application/json" id="silence-form-success">
-<div class="silence-result-icon text-center text-success">
+<p class="text-success">
   <i class="fa fa-check-circle"></i>
-</div>
-<p class="text-center">
-  Silence ID: <span class="text-success"><%- silenceID %></span>
+  <%- silenceID %>
+</p>
+</script>
+
+<script type="application/json" id="silence-form-error">
+<p class="text-danger">
+  <i class="fa fa-exclamation-circle"></i>
+  <%- error %>
 </p>
 </script>
 
@@ -242,11 +266,6 @@
 </p>
 </script>
 
-<script type="application/json" id="silence-form-error">
-<i class="fa fa-exclamation-circle"></i>
-<%- error %>
-</script>
-
 <script type="application/json" id="silence-form-loading">
 <div class="silence-result-icon text-center text-muted">
   <i class="fa fa-refresh fa-spin"></i>