From 63a283b4bc76a90c00f6a9f6b3c649fbfc3f29c2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 17 Aug 2016 11:00:00 +0200 Subject: [PATCH] feat(alerting): working on alert state filters for alert list --- pkg/models/alert.go | 5 +- pkg/services/alerting/result_handler.go | 2 +- pkg/services/sqlstore/alert.go | 6 +- public/app/features/alerting/alert_def.ts | 58 ++++++++++++------- .../app/features/alerting/alert_list_ctrl.ts | 35 ++++++----- .../alerting/partials/alert_list.html | 2 +- .../plugins/panel/graph/threshold_manager.ts | 21 +++---- 7 files changed, 73 insertions(+), 56 deletions(-) diff --git a/pkg/models/alert.go b/pkg/models/alert.go index 445fae51dfb..9becbafb6ce 100644 --- a/pkg/models/alert.go +++ b/pkg/models/alert.go @@ -13,12 +13,13 @@ const ( AlertStatePending AlertStateType = "pending" AlertStateExeuctionError AlertStateType = "exeuction_error" AlertStatePaused AlertStateType = "paused" - AlertStateFiring AlertStateType = "firing" + AlertStateCritical AlertStateType = "critical" + AlertStateWarning AlertStateType = "warning" AlertStateOK AlertStateType = "ok" ) func (s AlertStateType) IsValid() bool { - return s == AlertStatePending || s == AlertStateFiring || s == AlertStateOK + return s == AlertStateOK || s == AlertStatePending || s == AlertStateExeuctionError || s == AlertStatePaused || s == AlertStateCritical || s == AlertStateWarning } const ( diff --git a/pkg/services/alerting/result_handler.go b/pkg/services/alerting/result_handler.go index 6d0803451bd..af9bb7f8e7b 100644 --- a/pkg/services/alerting/result_handler.go +++ b/pkg/services/alerting/result_handler.go @@ -35,7 +35,7 @@ func (handler *DefaultResultHandler) Handle(ctx *EvalContext) { ctx.Rule.State = m.AlertStateExeuctionError exeuctionError = ctx.Error.Error() } else if ctx.Firing { - ctx.Rule.State = m.AlertStateFiring + ctx.Rule.State = m.AlertStateType(ctx.Rule.Severity) } else { ctx.Rule.State = m.AlertStateOK } diff --git a/pkg/services/sqlstore/alert.go b/pkg/services/sqlstore/alert.go index 1b80366663d..38975c9e2e9 100644 --- a/pkg/services/sqlstore/alert.go +++ b/pkg/services/sqlstore/alert.go @@ -3,7 +3,6 @@ package sqlstore import ( "bytes" "fmt" - "strings" "time" "github.com/go-xorm/xorm" @@ -76,18 +75,19 @@ func HandleAlertsQuery(query *m.GetAlertsQuery) error { params = append(params, query.PanelId) } - if len(query.State) > 0 { + if len(query.State) > 0 && query.State[0] != "ALL" { sql.WriteString(` AND (`) for i, v := range query.State { if i > 0 { sql.WriteString(" OR ") } sql.WriteString("state = ? ") - params = append(params, strings.ToUpper(v)) + params = append(params, v) } sql.WriteString(")") } + sqlog.Error(sql.String(), "params", params) alerts := make([]*m.Alert, 0) if err := x.Sql(sql.String(), params...).Find(&alerts); err != nil { return err diff --git a/public/app/features/alerting/alert_def.ts b/public/app/features/alerting/alert_def.ts index 5584d874425..58d50ebd908 100644 --- a/public/app/features/alerting/alert_def.ts +++ b/public/app/features/alerting/alert_def.ts @@ -46,28 +46,44 @@ var severityLevels = { 'warning': {text: 'WARNING', iconClass: 'icon-gf icon-gf-warning', stateClass: 'alert-state-warning'}, }; -function getStateDisplayModel(state, severity) { - var model = { - text: 'OK', - iconClass: 'icon-gf icon-gf-online', - stateClass: 'alert-state-ok' - }; - - if (state === 'firing') { - model.text = severityLevels[severity].text; - model.iconClass = severityLevels[severity].iconClass; - model.stateClass = severityLevels[severity].stateClass; - } else if (state === 'pending') { - model.text = "PENDING"; - model.iconClass = "fa fa-question"; - model.stateClass = "alert-state-pending"; - } else if (state === 'paused') { - model.text = "PAUSED"; - model.iconClass = "fa fa-pause"; - model.stateClass = "alert-state-paused"; +function getStateDisplayModel(state) { + switch (state) { + case 'ok': { + return { + text: 'OK', + iconClass: 'icon-gf icon-gf-online', + stateClass: 'alert-state-ok' + }; + } + case 'critical': { + return { + text: 'CRITICAL', + iconClass: 'icon-gf icon-gf-critical', + stateClass: 'alert-state-critical' + }; + } + case 'warning': { + return { + text: 'WARNING', + iconClass: 'icon-gf icon-gf-warning', + stateClass: 'alert-state-warning' + }; + } + case 'pending': { + return { + text: 'PENDING', + iconClass: "fa fa-question", + stateClass: 'alert-state-warning' + }; + } + case 'paused': { + return { + text: 'paused', + iconClass: "fa fa-pause", + stateClass: 'alert-state-paused' + }; + } } - - return model; } export default { diff --git a/public/app/features/alerting/alert_list_ctrl.ts b/public/app/features/alerting/alert_list_ctrl.ts index 6948242c729..ebae20e1ebf 100644 --- a/public/app/features/alerting/alert_list_ctrl.ts +++ b/public/app/features/alerting/alert_list_ctrl.ts @@ -9,35 +9,34 @@ import alertDef from './alert_def'; export class AlertListCtrl { alerts: any; + stateFilters = [ + {text: 'All', value: null}, + {text: 'OK', value: 'ok'}, + {text: 'Pending', value: 'pending'}, + {text: 'Warning', value: 'warning'}, + {text: 'Critical', value: 'critical'}, + {text: 'Execution Error', value: 'execution_error'}, + ]; + filters = { - state: 'OK' + state: 'ALL' }; /** @ngInject */ - constructor(private backendSrv, private $route) { - _.each($route.current.params.state, state => { - this.filters[state.toLowerCase()] = true; - }); - + constructor(private backendSrv, private $location) { + var params = $location.search(); + this.filters.state = params.state || null; this.loadAlerts(); } - updateFilter() { - var stats = []; - this.$route.current.params.state = stats; - this.$route.updateParams(); + filtersChanged() { + this.$location.search(this.filters); } loadAlerts() { - var stats = []; - - var params = { - state: stats - }; - - this.backendSrv.get('/api/alerts', params).then(result => { + this.backendSrv.get('/api/alerts', this.filters).then(result => { this.alerts = _.map(result, alert => { - alert.stateModel = alertDef.getStateDisplayModel(alert.state, alert.severity); + alert.stateModel = alertDef.getStateDisplayModel(alert.state); alert.newStateDateAgo = moment(alert.newStateDate).fromNow().replace(" ago", ""); return alert; }); diff --git a/public/app/features/alerting/partials/alert_list.html b/public/app/features/alerting/partials/alert_list.html index 6c4ed3f709b..d5915d6fa22 100644 --- a/public/app/features/alerting/partials/alert_list.html +++ b/public/app/features/alerting/partials/alert_list.html @@ -11,7 +11,7 @@
-
diff --git a/public/app/plugins/panel/graph/threshold_manager.ts b/public/app/plugins/panel/graph/threshold_manager.ts index 7db224af684..069f5f38292 100644 --- a/public/app/plugins/panel/graph/threshold_manager.ts +++ b/public/app/plugins/panel/graph/threshold_manager.ts @@ -201,35 +201,36 @@ export class ThresholdManager { } } + var fillColor, lineColor; switch (threshold.colorMode) { case 'critical': { - threshold.fillColor = 'rgba(234, 112, 112, 0.12)'; - threshold.lineColor = 'rgba(237, 46, 24, 0.60)'; + fillColor = 'rgba(234, 112, 112, 0.12)'; + lineColor = 'rgba(237, 46, 24, 0.60)'; break; } case 'warning': { - threshold.fillColor = 'rgba(235, 138, 14, 0.12)'; - threshold.lineColor = 'rgba(247, 149, 32, 0.60)'; + fillColor = 'rgba(235, 138, 14, 0.12)'; + lineColor = 'rgba(247, 149, 32, 0.60)'; break; } case 'ok': { - threshold.fillColor = 'rgba(11, 237, 50, 0.090)'; - threshold.lineColor = 'rgba(6,163,69, 0.60)'; + fillColor = 'rgba(11, 237, 50, 0.090)'; + lineColor = 'rgba(6,163,69, 0.60)'; break; } case 'custom': { - threshold.fillColor = threshold.fillColor; - threshold.lineColor = threshold.lineColor; + fillColor = threshold.fillColor; + lineColor = threshold.lineColor; break; } } // fill if (threshold.fill) { - options.grid.markings.push({yaxis: {from: threshold.value, to: limit}, color: threshold.fillColor}); + options.grid.markings.push({yaxis: {from: threshold.value, to: limit}, color: fillColor}); } if (threshold.line) { - options.grid.markings.push({yaxis: {from: threshold.value, to: threshold.value}, color: threshold.lineColor}); + options.grid.markings.push({yaxis: {from: threshold.value, to: threshold.value}, color: lineColor}); } } }