feat(alerting): added validation that checks valid data source and checks for…

feat(alerting): added validation that checks valid data source and checks for template variables in graphite query, #5841

pkg/services/sqlstore/alert.go

@@ -87,7 +87,6 @@ func HandleAlertsQuery(query *m.GetAlertsQuery) error {
 		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

public/app/features/alerting/alert_tab_ctrl.ts

@@ -4,6 +4,7 @@ import _ from 'lodash';
 import {ThresholdMapper} from './threshold_mapper';
 import {QueryPart} from 'app/core/components/query_part/query_part';
 import alertDef from './alert_def';
+import config from 'app/core/config';
 
 export class AlertTabCtrl {
   panel: any;
@@ -19,9 +20,17 @@ export class AlertTabCtrl {
   addNotificationSegment;
   notifications;
   alertNotifications;
+  error: string;
 
   /** @ngInject */
-  constructor(private $scope, private $timeout, private backendSrv, private dashboardSrv, private uiSegmentSrv, private $q) {
+  constructor(private $scope,
+              private $timeout,
+              private backendSrv,
+              private dashboardSrv,
+              private uiSegmentSrv,
+              private $q,
+              private datasourceSrv,
+              private templateSrv) {
     this.panelCtrl = $scope.ctrl;
     this.panel = this.panelCtrl.panel;
     this.$scope.ctrl = this;
@@ -35,6 +44,7 @@ export class AlertTabCtrl {
     this.addNotificationSegment = this.uiSegmentSrv.newPlusButton();
 
     this.initModel();
+    this.validateModel();
 
     // set panel alert edit mode
     this.$scope.$on("$destroy", () => {
@@ -144,6 +154,47 @@ export class AlertTabCtrl {
     };
   }
 
+  validateModel() {
+    let firstTarget;
+    var fixed = false;
+    let foundTarget = null;
+
+    for (var condition of this.alert.conditions) {
+      if (condition.type !== 'query') {
+        continue;
+      }
+
+      for (var target of this.panel.targets) {
+        if (!firstTarget) {
+          firstTarget = target;
+        }
+        if (condition.query.params[0] === target.refId) {
+          foundTarget = target;
+          break;
+        }
+      }
+
+      if (!foundTarget) {
+        if (firstTarget) {
+          condition.query.params[0] = firstTarget.refId;
+          foundTarget = firstTarget;
+          fixed = true;
+        } else {
+          this.error = "Could not find any metric queries";
+        }
+      }
+
+      var datasourceName = foundTarget.datasource || this.panel.datasource;
+      this.datasourceSrv.get(datasourceName).then(ds => {
+        if (ds.meta.id !== 'graphite') {
+          this.error = 'Currently the alerting backend only supports Graphite queries';
+        } else if (this.templateSrv.variableExists(foundTarget.target)) {
+          this.error = 'Template variables are not supported in alert queries';
+        }
+      });
+    }
+  }
+
   buildConditionModel(source) {
     var cm: any = {source: source, type: source.type};
 
@@ -187,7 +238,7 @@ export class AlertTabCtrl {
   addCondition(type) {
     var condition = this.buildDefaultCondition();
     // add to persited model
-    this.panelCtrl.conditions.push(condition);
+    this.alert.conditions.push(condition);
     // add to view model
     this.conditionModels.push(this.buildConditionModel(condition));
   }
@@ -198,7 +249,7 @@ export class AlertTabCtrl {
   }
 
   delete() {
-    this.panel.alert = {enabled: false};
+    this.alert = this.panel.alert = {enabled: false};
     this.panel.thresholds = [];
     this.conditionModels = [];
     this.panelCtrl.render();

public/app/features/alerting/partials/alert_tab.html

@@ -20,6 +20,10 @@
 
 	<div class="edit-tab-content">
 		<div ng-if="ctrl.subTabIndex === 0">
+			<div class="alert alert-error m-b-2" ng-show="ctrl.error">
+				<i class="fa fa-warning"></i> {{ctrl.error}}
+			</div>
+
 			<div class="gf-form-group">
 				<h5 class="section-heading">Alert Config</h5>
 				<div class="gf-form">

public/sass/components/_alerts.scss

@@ -9,7 +9,7 @@
 
 
 .alert {
-  padding: 8px 35px 13px 14px;
+  padding: 0.5rem 2rem 0.5rem 1rem;
   margin-bottom: $line-height-base;
   text-shadow: 0 1px 0 rgba(255,255,255,.5);
   background-color: $state-warning-bg;

public/sass/components/_panel_graph.scss

@@ -392,10 +392,10 @@
     z-index: 0;
     position: relative;
 
-    &--crit {
+    &--critical {
       background-color: rgba(237, 46, 24, 0.60);
     }
-    &--warn {
+    &--warning {
       background-color: rgba(247, 149, 32, 0.60);
     }
   }