feat(alerting): set default value for query

public/app/features/alerts/alert_def.ts

@@ -3,9 +3,9 @@
 //import _ from 'lodash';
 
 var alertStateToCssMap = {
-  "OK": "icon-gf-online alert-state-online",
-  "WARN": "icon-gf-warn alert-state-warn",
-  "CRITICAL": "icon-gf-critical alert-state-critical",
+  "OK": "icon-gf-online alert-icon-online",
+  "WARN": "icon-gf-warn alert-icon-warn",
+  "CRITICAL": "icon-gf-critical alert-icon-critical",
   "ACKNOWLEDGED": "icon-gf-alert-disabled"
 };
 

public/app/plugins/panel/graph/alert_tab_ctrl.ts

@@ -8,9 +8,10 @@ export class AlertTabCtrl {
   panel: any;
   panelCtrl: any;
   alerting: any;
+  metricTargets = [{ refId: '- select query -' } ];
 
   /** @ngInject */
-  constructor($scope) {
+  constructor($scope, private $timeout) {
     $scope.alertTab = this; //HACK ATTACK!
     this.panelCtrl = $scope.ctrl;
     this.panel = this.panelCtrl.panel;
@@ -18,18 +19,26 @@ export class AlertTabCtrl {
     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.panel.alerting.warnOperator = this.panel.alerting.warnOperator || '>';
+    this.panel.alerting.critOperator = this.panel.alerting.critOperator || '>';
+    this.panel.alerting.title = this.panel.alerting.title || this.panel.title + ' alert';
+
+    this.panel.targets.map(target => {
+      this.metricTargets.push(target);
+    });
+    this.panel.alerting.queryRef = this.panel.alerting.queryRef || this.metricTargets[0].refId;
 
     this.convertThresholdsToAlertThresholds();
   }
 
   convertThresholdsToAlertThresholds() {
     if (this.panel.grid && this.panel.grid.threshold1) {
-      this.panel.alerting.warnOperator = '<';
+      this.panel.alerting.warnOperator = '>';
       this.panel.alerting.warnLevel = this.panel.grid.threshold1;
     }
 
     if (this.panel.grid && this.panel.grid.threshold2) {
-      this.panel.alerting.critOperator = '<';
+      this.panel.alerting.critOperator = '>';
       this.panel.alerting.critLevel = this.panel.grid.threshold2;
     }
   }

public/app/plugins/panel/graph/partials/tab_alerting.html

@@ -3,17 +3,17 @@
     <h5 class="section-heading">Query</h5>
     <div class="gf-form" style="margin-bottom: 2rem">
       <span class="gf-form-label width-9">Query to watch</span>
-      <div class="gf-form-select-wrapper max-width-7">
+      <div class="gf-form-select-wrapper max-width-12">
         <select class="gf-form-input"
           ng-model="ctrl.panel.alerting.queryRef"
-          ng-options="target.refId as target.refId for target in ctrl.panel.targets"></select>
+          ng-options="target.refId as target.refId for target in alertTab.metricTargets"></select>
       </div>
     </div>
 
     <h5 class="section-heading">Thresholds</h5>
     <div class="gf-form">
       <span class="gf-form-label width-9">
-        <i class="icon-gf icon-gf-warn alert-state-warn"></i>
+        <i class="icon-gf icon-gf-warn alert-icon-warn"></i>
         Warn level
       </span>
       <div class="gf-form-select-wrapper max-width-10">
@@ -23,7 +23,7 @@
     </div>
     <div class="gf-form">
       <span class="gf-form-label width-9">
-        <i class="icon-gf icon-gf-critical alert-state-critical"></i>
+        <i class="icon-gf icon-gf-critical alert-icon-critical"></i>
         Critical level
       </span>
       <div class="gf-form-select-wrapper max-width-10">

public/sass/components/_alerts.scss

@@ -7,15 +7,15 @@
 // -------------------------
 
 
-.alert-state-online {
+.alert-icon-online {
   color: $online;
 }
 
-.alert-state-warn {
+.alert-icon-warn {
   color: $warn;
 }
 
-.alert-state-critical {
+.alert-icon-critical {
   color: $critical;
 }