From 721b4f8be48bf4dcbb2d80046f493da23dcd3670 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= Date: Tue, 27 Jun 2017 19:35:57 -0700 Subject: [PATCH] Update silence form to work with multiple Alertmanager instances --- assets/static/silence.js | 110 +++++++++++++++++-------------- assets/templates/alertgroup.html | 6 ++ assets/templates/index.html | 2 +- assets/templates/silence.html | 30 +++++++++ bindata_assetfs.go | 8 +-- views.go | 7 -- 6 files changed, 103 insertions(+), 60 deletions(-) diff --git a/assets/static/silence.js b/assets/static/silence.js index daf034a84..4be72ee98 100644 --- a/assets/static/silence.js +++ b/assets/static/silence.js @@ -27,7 +27,7 @@ var Silence = (function() { if ($("#endsAt").data("DateTimePicker")) { payload.endsAt = $("#endsAt").data("DateTimePicker").date(); } - $.each($("#newSilenceForm .selectpicker"), function(i, elem) { + $.each($("#newSilenceForm select.silence-label-picker"), function(i, elem) { var labelKey = $(elem).data("label-key"); var values = $(elem).selectpicker("val"); if (values && values.length > 0) { @@ -74,8 +74,12 @@ var Silence = (function() { $("#silence-end-description").html(endsAtDesc); }; + var silenceFormAlertmanagerURL = function() { + return $("#newSilenceForm .silence-alertmanager-picker").selectpicker("val"); + }; + var silenceFormJSONRender = function() { - var d = "curl " + $("#silenceModal").data("silence-api") + + var d = "curl $AlertmanagerURI" + "\n -X POST --data " + JSON.stringify(silenceFormData(), undefined, 2); $("#silenceJSONBlob").html(d); @@ -127,6 +131,47 @@ var Silence = (function() { silenceFormCalculateDuration(); }; + var sendSilencePOST = function(url, payload) { + $.ajax({ + type: "POST", + url: url, + data: JSON.stringify(payload), + error: function(xhr, textStatus, errorThrown) { + // default to whatever error text we can get + var err = xhr.responseText || errorThrown || textStatus; + if (xhr.responseText) { + // if we have a reponse text try to decode it as JSON + // it should be error from Alertmanager (it we were able to connect) + try { + var j = JSON.parse(xhr.responseText); + if (j.error !== undefined) { + err = j.error; + } + } catch (error) { + // can't parse json, do nothing + } + } + + var errContent = Templates.Render("silenceFormError", {error: err}); + $("#newSilenceAlert").html(errContent).removeClass("hidden"); + }, + 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", { + 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"); + } + }, + dataType: "json" + }); + }; + // modal form for creating new silences var setupSilenceForm = function() { var modal = $("#silenceModal"); @@ -151,6 +196,7 @@ var Silence = (function() { success: function(data) { var modal = $("#silenceModal"); var labels = {}; + var alertmanagers = {}; $.each(data.groups, function(i, group) { $.each(group.alerts, function(j, alert) { $.each(alert.labels, function(labelKey, labelVal) { @@ -166,21 +212,24 @@ var Silence = (function() { }; } }); + $.each(alert.alertmanager, function(i, alertmanager){ + alertmanagers[alertmanager.name] = alertmanager; + }); }); }); modal.find(".modal-body").html( - Templates.Render("silenceForm", {labels: labels}) + Templates.Render("silenceForm", { + labels: labels, + alertmanagers: alertmanagers, + selectedAlertmanagers: elem.data("alertmanagers").split(",") + }) ); - $.each($(".selectpicker"), function(i, elem) { + $.each($(".silence-alertmanager-picker"), function(i, elem) { + $(elem).selectpicker(); + }); + $.each($(".silence-label-picker"), function(i, elem) { $(elem).selectpicker({ - iconBase: "fa", - tickIcon: "fa-check", - width: "fit", - selectAllText: "", - deselectAllText: "", noneSelectedText: "" + $(this).data("label-key") + ": ", - multipleSeparator: " ", - selectedTextFormat: "count > 1", countSelectedText: function (numSelected) { return "" + $(elem).data("label-key") + ": " + numSelected + " values selected"; @@ -244,43 +293,8 @@ var Silence = (function() { return false; } - var url = modal.data("silence-api"); - $.ajax({ - type: "POST", - url: url, - data: JSON.stringify(payload), - error: function(xhr, textStatus, errorThrown) { - // default to whatever error text we can get - var err = xhr.responseText || errorThrown || textStatus; - if (xhr.responseText) { - // if we have a reponse text try to decode it as JSON - // it should be error from Alertmanager (it we were able to connect) - try { - var j = JSON.parse(xhr.responseText); - if (j.error !== undefined) { - err = j.error; - } - } catch (error) { - // can't parse json, do nothing - } - } - - var errContent = Templates.Render("silenceFormError", {error: err}); - $("#newSilenceAlert").html(errContent).removeClass("hidden"); - }, - success: function(data) { - if (data.status == "success") { - $("#newSilenceAlert").addClass("hidden"); - $("#newSilenceForm").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"); - } - }, - dataType: "json" + $.each(silenceFormAlertmanagerURL(), function(i, uri){ + sendSilencePOST(uri, payload); }); event.preventDefault(); diff --git a/assets/templates/alertgroup.html b/assets/templates/alertgroup.html index c745d593b..b12360f9e 100644 --- a/assets/templates/alertgroup.html +++ b/assets/templates/alertgroup.html @@ -79,12 +79,18 @@ <%= Templates.Render('buttonLabel', {elem: 'span', attrs: attrs, label: {key: '@state', value: alert.state, text: '@state: ' + alert.state}}) %> <% if (alert.silencedBy.length == 0) { %> <% var labels = [] %> + <% var alertmanagers = [] %> <% _.each(Alerts.SortMapByKey(alert.labels), function(label) { %> <% labels.push(label.key + '=' + label.value) %> <% }) %> + <% _.each(alert.alertmanager, function(alertmanager){ %> + <% alertmanagers.push(alertmanager.name) %> + <% }) %> + <% alertmanagers.sort() %> diff --git a/assets/templates/index.html b/assets/templates/index.html index f7bf5a742..dd40fa345 100644 --- a/assets/templates/index.html +++ b/assets/templates/index.html @@ -162,7 +162,7 @@ -