feat(alerting): mocking with new alert rule model

alerting_model.json

@@ -136,10 +136,32 @@
   "alert": {
     "name": "CPU usage last 5min changed by more than 20% compared to last 24hours",
     "frequency": "1m",
-    "valueExpr": "query(#A, 5m, now, avg)",
-    "evalType": "percent change",
+    "expr": "query(#A, 5m, now, avg) percentGreaterThan()",
+    "evalType": "percentscre change",
     "evalExpr": "query(#A, 1d, now, avg)",
     "critLevel": 20,
-    "warnLevel": 10,           
+    "warnLevel": 10,
+  },
+  "alert": {
+    "name": "CPU usage last 5min changed by more than 20% compared to last 24hours",
+    "frequency": "1m",
+    "valueQuery": "query(#A, 5m, now, avg) ",
+    "evalType": "simple", "// other options are: percent change, trend"
+    "evalQuery": "query(#A, 1d, now, avg)",
+    "comparison": "greater than",
+    "critLevel": 20,
+    "warnLevel": 10,
+  },
+  "alert": {
+    "name": "CPU usage last 5min changed by more than 20% compared to last 24hours",
+    "frequency": "1m",
+    "valueQuery": "query(#A, 5m, now, avg) | Evaluate Against: Static Threshold | >200 Warn | >300 Critical",
+    "valueQuery": "query(#A, 5m, now, avg) | Evaluate Against: Percent Change Compared To | query(#B, 5m, now, avg) | >200 Warn | >300 Critical",
+    "valueQuery": "query(#A, 5m, now, trend) | Evaluate Against: Forcast | 7days | >200 Warn | >300 Critical",
+    "evalType": "simple", "// other options are: percent change, trend"
+    "evalQuery": "query(#A, 1d, now, avg)",
+    "comparison": "greater than",
+    "critLevel": 20,
+    "warnLevel": 10,
   },
 }

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

@@ -1,30 +1,72 @@
-///<reference path="../../../headers/common.d.ts" />
+ ///<reference path="../../../headers/common.d.ts" />
 
 import _ from 'lodash';
 import $ from 'jquery';
 import angular from 'angular';
 
+import {
+  QueryPartDef,
+  QueryPart,
+} from 'app/core/components/query_part/query_part';
+
+var alertQueryDef = new QueryPartDef({
+  type: 'query',
+  params: [
+    {name: "queryRefId", type: 'string', options: ['#A', '#B', '#C', '#D']},
+    {name: "from", type: "string", options: ['1s', '10s', '1m', '5m', '10m', '15m', '1h']},
+    {name: "to", type: "string", options: ['now']},
+    {name: "aggregation", type: "select", options: ['sum', 'avg', 'min', 'max', 'last']},
+  ],
+  defaultParams: ['#A', '5m', 'now', 'avg']
+});
+
 export class AlertTabCtrl {
   panel: any;
   panelCtrl: any;
   alerting: any;
   metricTargets = [{ refId: '- select query -' } ];
-  evalFuncs = ['Greater Then', 'Percent Change'];
+  evalFuncs = [
+    {
+      text: 'Static Threshold',
+      value: 'static',
+    },
+    {
+      text: 'Percent Change Compared To',
+      value: 'percent_change',
+      secondParam: "query",
+    },
+    {
+      text: 'Forcast',
+      value: 'forcast',
+      secondParam: "duration",
+    }
+  ];
   aggregators = ['avg', 'sum', 'min', 'max', 'median'];
   rule: any;
+  valueQuery: any;
+  evalQuery: any;
+  secondParam: any;
 
   defaultValues = {
-    aggregator: 'avg',
     frequency: 10,
-    queryRange: 3600,
     warnOperator: '>',
     critOperator: '>',
-    queryRef: '- select query -',
-    valueExpr: 'query(#A, 5m, now, avg)',
-    evalFunc: 'Greater Then',
-    evalExpr: '',
+    evalFunc: 'static',
     critLevel: 20,
     warnLevel: 10,
+    valueQuery: {
+      queryRefId: 'A',
+      from: '5m',
+      to: 'now',
+      agg: 'avg',
+    },
+    evalQuery: {
+      queryRefId: 'A',
+      from: '5m',
+      to: 'now',
+      agg: 'avg',
+    },
+    evalStringParam1: '',
   };
 
   /** @ngInject */
@@ -36,15 +78,24 @@ export class AlertTabCtrl {
     _.defaults(this.panel.alerting, this.defaultValues);
     this.rule = this.panel.alerting;
 
+    this.valueQuery = new QueryPart(this.rule.valueQuery, alertQueryDef);
+    this.evalQuery = new QueryPart(this.rule.evalQuery, alertQueryDef);
+
     var defaultName = (this.panelCtrl.dashboard.title + ' ' + this.panel.title + ' alert');
     this.panel.alerting.name = this.panel.alerting.name || defaultName;
 
     this.panel.targets.map(target => {
       this.metricTargets.push(target);
     });
-    this.panel.alerting.queryRef = this.panel.alerting.queryRef || this.metricTargets[0].refId;
 
+    this.panel.alerting.queryRef = this.panel.alerting.queryRef || this.metricTargets[0].refId;
     this.convertThresholdsToAlertThresholds();
+    this.evalFuncChanged();
+  }
+
+  evalFuncChanged() {
+    var evalFuncDef = _.findWhere(this.evalFuncs, {value: this.rule.evalFunc});
+    this.secondParam = evalFuncDef.secondParam;
   }
 
   convertThresholdsToAlertThresholds() {

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

@@ -1,33 +1,67 @@
-<div class="editor-row">
-  <div class="gf-form-group section" >
+
+  <div class="gf-form-group" >
     <h5 class="section-heading">Alert Rule</h5>
     <div class="gf-form-inline">
       <div class="gf-form">
-        <span class="gf-form-label">Value</span>
-        <input class="gf-form-input width-15" type="text" ng-model="ctrl.rule.valueExpr" ng-change="ctrl.thresholdsUpdated()"></input>
+
+        <query-part-editor
+                    class="gf-form-label query-part"
+                    part="ctrl.valueQuery"
+                    part-updated="ctrl.valueQueryUpdated()">
+        </query-part-editor>
+
       </div>
       <div class="gf-form">
-        <div class="gf-form-select-wrapper max-width-10">
-          <select class="gf-form-input" ng-model="ctrl.rule.evalFunc" ng-options="oper as oper for oper in ctrl.evalFuncs"></select>
+        <span class="gf-form-label">Evaluate Against</span>
+        <div class="gf-form-select-wrapper">
+          <select   class="gf-form-input"
+                    ng-model="ctrl.rule.evalFunc"
+                    ng-options="f.value as f.text for f in ctrl.evalFuncs"
+                    ng-change="ctrl.evalFuncChanged()"
+                    >
+          </select>
         </div>
       </div>
+      <div class="gf-form" ng-if="ctrl.secondParam === 'query'">
+        <query-part-editor
+                    class="gf-form-label query-part"
+                    part="ctrl.evalQuery"
+                    part-updated="ctrl.evalQueryUpdated()">
+        </query-part-editor>
+      </div>
+      <div class="gf-form" ng-if="ctrl.secondParam === 'duration'">
+        <span class="gf-form-label">Duration</span>
+        <input class="gf-form-input max-width-7" type="text" ng-model="ctrl.rule.evalStringParam1" ng-change="ctrl.ruleUpdated()"></input>
+      </div>
+    </div>
+  </div>
+
+  <div class="gf-form-group" >
+    <h5 class="section-heading">Levels</h5>
+    <div class="gf-form-inline">
       <div class="gf-form">
         <span class="gf-form-label">
           <i class="icon-gf icon-gf-warn alert-icon-warn"></i>
-          Warn
+          Warn if value
         </span>
-        <input class="gf-form-input max-width-7" type="number" ng-model="ctrl.panel.alerting.warnLevel" ng-change="alertTab.thresholdsUpdated()"></input>
+        <span class="gf-form-label">
+          &gt;
+        </span>
+        <input class="gf-form-input max-width-7" type="number" ng-model="ctrl.rule.warnLevel" ng-change="alertTab.thresholdsUpdated()"></input>
       </div>
       <div class="gf-form">
         <span class="gf-form-label">
           <i class="icon-gf icon-gf-warn alert-icon-critical"></i>
-          Critcal
+          Critcal if value
         </span>
-        <input class="gf-form-input max-width-7" type="number" ng-model="ctrl.panel.alerting.warnLevel" ng-change="alertTab.thresholdsUpdated()"></input>
+        <span class="gf-form-label">
+          &gt;
+        </span>
+        <input class="gf-form-input max-width-7" type="number" ng-model="ctrl.rule.critLevel" ng-change="alertTab.thresholdsUpdated()"></input>
       </div>
     </div>
   </div>
-</div>
+
   <!--   <div class="gf&#45;form"> -->
   <!--     <span class="gf&#45;form&#45;label width&#45;12">Aggregation method</span> -->
   <!--     <div class="gf&#45;form&#45;select&#45;wrapper max&#45;width&#45;10"> -->