From 040425b0ebe433798e7d729ab703599873b1dd69 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82?= <1153719+mszczygiel@users.noreply.github.com> Date: Tue, 29 Oct 2019 11:09:53 +0100 Subject: [PATCH] filtering alerts by state and display count of alerts in each state (#5758) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * local storage selectedTab on targets tab was renamed Signed-off-by: Michał Szczygieł <1153719+mszczygiel@users.noreply.github.com> * added filters when displaying alerts Signed-off-by: Michał Szczygieł <1153719+mszczygiel@users.noreply.github.com> * function was simplified Signed-off-by: Michał Szczygieł <1153719+mszczygiel@users.noreply.github.com> * fixed rebase Signed-off-by: Michał Szczygieł <1153719+mszczygiel@users.noreply.github.com> * minor rename Signed-off-by: Michał Szczygieł <1153719+mszczygiel@users.noreply.github.com> * Active -> Pending Signed-off-by: Michał Szczygieł <1153719+mszczygiel@users.noreply.github.com> --- web/ui/static/js/alerts.js | 35 +++++++++++++++++++++++++++++++++++ web/ui/static/js/targets.js | 8 ++++---- web/ui/templates/alerts.html | 14 +++++++++++++- web/web.go | 26 ++++++++++++++++++++++++++ 4 files changed, 78 insertions(+), 5 deletions(-) diff --git a/web/ui/static/js/alerts.js b/web/ui/static/js/alerts.js index e6a52fc8e..e89183148 100644 --- a/web/ui/static/js/alerts.js +++ b/web/ui/static/js/alerts.js @@ -26,6 +26,41 @@ function init() { targetEl.removeClass('is-checked'); } }); + + function displayAlerts(alertState, shouldDisplay) { + $("#alertsTable > tbody > tr." + alertState).each(function(_, container) { + $(container).toggle(shouldDisplay); + }); + } + + if(localStorage.hideInactiveAlerts === "true") { + $("#inactiveAlerts").parent().removeClass("active"); + displayAlerts("alert-success", false); + } + if(localStorage.hidePendingAlerts === "true") { + $("#pendingAlerts").parent().removeClass("active"); + displayAlerts("alert-warning", false); + } + if(localStorage.hideFiringAlerts === "true") { + $("#firingAlerts").parent().removeClass("active"); + displayAlerts("alert-danger", false); + } + + $("#alertFilters :input").change(function() { + const target = $(this).attr("id"); + var shouldHide = $(this).parent().hasClass("active"); + if (target === "inactiveAlerts") { + localStorage.setItem("hideInactiveAlerts", shouldHide); + displayAlerts("alert-success", !shouldHide); + } else if (target === "pendingAlerts") { + localStorage.setItem("hidePendingAlerts", shouldHide); + displayAlerts("alert-warning", !shouldHide); + } else if (target === "firingAlerts") { + localStorage.setItem("hideFiringAlerts", shouldHide); + displayAlerts("alert-danger", !shouldHide); + } + }); + } $(init); diff --git a/web/ui/static/js/targets.js b/web/ui/static/js/targets.js index 572c17a46..1e4d6a234 100644 --- a/web/ui/static/js/targets.js +++ b/web/ui/static/js/targets.js @@ -22,10 +22,10 @@ function showUnhealthy(_, container) { function init() { if ($("#unhealthy-targets").length) { - if (!localStorage.selectedTab || localStorage.selectedTab == "all-targets") { + if (!localStorage.selectedTargetsTab || localStorage.selectedTargetsTab == "all-targets") { $("#all-targets").parent().addClass("active"); $(".table-container").each(showAll); - } else if (localStorage.selectedTab == "unhealthy-targets") { + } else if (localStorage.selectedTargetsTab == "unhealthy-targets") { $("#unhealthy-targets").parent().addClass("active"); $(".table-container").each(showUnhealthy); } @@ -57,10 +57,10 @@ function init() { if (target === "all-targets") { $(".table-container").each(showAll); - localStorage.setItem("selectedTab", "all-targets"); + localStorage.setItem("selectedTargetsTab", "all-targets"); } else if (target === "unhealthy-targets") { $(".table-container").each(showUnhealthy); - localStorage.setItem("selectedTab", "unhealthy-targets"); + localStorage.setItem("selectedTargetsTab", "unhealthy-targets"); } }); } diff --git a/web/ui/templates/alerts.html b/web/ui/templates/alerts.html index bb81d7dc6..af8ab5c52 100644 --- a/web/ui/templates/alerts.html +++ b/web/ui/templates/alerts.html @@ -6,11 +6,23 @@ {{define "content"}}

Alerts

+
+ + + +
+
- +
{{$alertStateToRowClass := .AlertStateToRowClass}} {{range .Groups}} diff --git a/web/web.go b/web/web.go index fa96e1b81..37ec4ee91 100644 --- a/web/web.go +++ b/web/web.go @@ -579,10 +579,29 @@ func (h *Handler) alerts(w http.ResponseWriter, r *http.Request) { rules.StatePending: "warning", rules.StateFiring: "danger", }, + Counts: alertCounts(groups), } h.executeTemplate(w, "alerts.html", alertStatus) } +func alertCounts(groups []*rules.Group) AlertByStateCount { + result := AlertByStateCount{} + + for _, group := range groups { + for _, alert := range group.AlertingRules() { + switch alert.State() { + case rules.StateInactive: + result.Inactive++ + case rules.StatePending: + result.Pending++ + case rules.StateFiring: + result.Firing++ + } + } + } + return result +} + func (h *Handler) consoles(w http.ResponseWriter, r *http.Request) { ctx := r.Context() name := route.Param(ctx, "filepath") @@ -997,4 +1016,11 @@ func (h *Handler) executeTemplate(w http.ResponseWriter, name string, data inter type AlertStatus struct { Groups []*rules.Group AlertStateToRowClass map[rules.AlertState]string + Counts AlertByStateCount +} + +type AlertByStateCount struct { + Inactive int32 + Pending int32 + Firing int32 }