diff --git a/public/app/features/alerts/alert_def.ts b/public/app/features/alerts/alert_def.ts index 382d4dc43b7..a51716f19dc 100644 --- a/public/app/features/alerts/alert_def.ts +++ b/public/app/features/alerts/alert_def.ts @@ -3,11 +3,10 @@ //import _ from 'lodash'; var alertStateToCssMap = { - "OK": "icon-gf-online", - "WARN": "icon-gf-warn", - "CRITICAL": "icon-gf-critical", + "OK": "icon-gf-online alert-state-online", + "WARN": "icon-gf-warn alert-state-warn", + "CRITICAL": "icon-gf-critical alert-state-critical", "ACKNOWLEDGED": "icon-gf-alert-disabled" - }; function getCssForState(alertState) { diff --git a/public/app/plugins/panel/graph/alert_tab_ctrl.ts b/public/app/plugins/panel/graph/alert_tab_ctrl.ts index 0db461a9b3b..3d788da0bff 100644 --- a/public/app/plugins/panel/graph/alert_tab_ctrl.ts +++ b/public/app/plugins/panel/graph/alert_tab_ctrl.ts @@ -11,11 +11,13 @@ export class AlertTabCtrl { /** @ngInject */ constructor($scope) { - $scope.alertTab = this; + $scope.alertTab = this; //HACK ATTACK! this.panelCtrl = $scope.ctrl; this.panel = this.panelCtrl.panel; - this.alerting = this.alerting || {}; - + this.panel.alerting = this.panel.alerting || {}; + this.panel.alerting.aggregator = this.panel.alerting.aggregator || 'avg'; + this.panel.alerting.interval = this.panel.alerting.interval || '60s'; + this.panel.alerting.queryRange = this.panel.alerting.queryRange || '10m'; this.convertThresholdsToAlertThresholds(); } @@ -29,6 +31,31 @@ export class AlertTabCtrl { this.panel.alerting.critLevel = '< ' + this.panel.grid.threshold2; } } + + thresholdsUpdated() { + if (this.panel.alerting.warnLevel) { + var threshold = this.panel.alerting.warnLevel + .replace(' ', '') + .replace('>', '') + .replace('<', '') + .replace('>=', '') + .replace('<=', ''); + + this.panel.grid.threshold1 = parseInt(threshold); + } + + if (this.panel.alerting.critLevel) { + var threshold = this.panel.alerting.critLevel + .replace(' ', '') + .replace('>', '') + .replace('<', '') + .replace('>=', '') + .replace('<=', ''); + + this.panel.grid.threshold2 = parseInt(threshold); + } + this.panelCtrl.render(); + } } /** @ngInject */ diff --git a/public/app/plugins/panel/graph/partials/tab_alerting.html b/public/app/plugins/panel/graph/partials/tab_alerting.html index d5cb725c9cb..3d9e0040940 100644 --- a/public/app/plugins/panel/graph/partials/tab_alerting.html +++ b/public/app/plugins/panel/graph/partials/tab_alerting.html @@ -1,13 +1,10 @@
-
- -
-
+
Query
-
- Query to watch -
-
@@ -15,12 +12,18 @@
Thresholds
- Warn level - + + + Warn level + +
- Critical level - + + + Critical level + +
@@ -28,10 +31,10 @@
Aggregation settings
Aggregation method -
- + ng-options="oper as oper for oper in ['avg', 'sum', 'min', 'max', 'median']">
@@ -51,14 +54,14 @@
Alert info
Alert name - +
- Alert description + Alert description
- +
diff --git a/public/sass/components/_alerts.scss b/public/sass/components/_alerts.scss index 3e6a8bbef91..4d2762e0561 100644 --- a/public/sass/components/_alerts.scss +++ b/public/sass/components/_alerts.scss @@ -6,6 +6,22 @@ // Base styles // ------------------------- + +.alert-state-online { + //background-image: url('/img/online.svg'); + color: $online; +} + +.alert-state-warn { + //background-image: url('/img/warn-tiny.svg'); + color: $warn; +} + +.alert-state-critical { + //background-image: url('/img/critical.svg'); + color: $critical; +} + .alert { padding: 8px 35px 13px 14px; margin-bottom: $line-height-base;