feat(alerting): updated rule model and UI

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

@@ -15,7 +15,6 @@ var alertQueryDef = new QueryPartDef({
     {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']
 });
@@ -25,46 +24,44 @@ export class AlertTabCtrl {
   panelCtrl: any;
   alerting: any;
   metricTargets = [{ refId: '- select query -' } ];
-  evalFuncs = [
+  transforms = [
     {
-      text: 'Static Threshold',
-      value: 'static',
+      text: 'Aggregation',
+      type: 'aggregation',
     },
     {
-      text: 'Percent Change Compared To',
-      value: 'percent_change',
-      secondParam: "query",
+      text: 'Linear Forecast',
+      type: 'forecast',
     },
     {
-      text: 'Forcast',
-      value: 'forcast',
-      secondParam: "duration",
-    }
+      text: 'Percent Change',
+      type: 'percent_change',
+    },
+    {
+      text: 'Query diff',
+      type: 'query_diff',
+    },
   ];
-  aggregators = ['avg', 'sum', 'min', 'max', 'median'];
+  aggregators = ['avg', 'sum', 'min', 'max', 'last'];
   rule: any;
-  valueQuery: any;
-  evalQuery: any;
-  secondParam: any;
+  query: any;
+  queryParams: any;
+  transformDef: any;
+  trasnformQuery: any;
 
   defaultValues = {
     frequency: 10,
-    warning: { op: '>', level: 10 },
-    critical: { op: '>', level: 20 },
-    function: 'static',
-    valueQuery: {
-      queryRefId: 'A',
+    warning: { op: '>', level: undefined },
+    critical: { op: '>', level: undefined },
+    query: {
+      refId: 'A',
       from: '5m',
       to: 'now',
-      agg: 'avg',
     },
-    evalQuery: {
-      queryRefId: 'A',
-      from: '5m',
-      to: 'now',
-      agg: 'avg',
+    transform: {
+      type: 'aggregation',
+      method: 'avg',
     },
-    evalStringParam1: '',
   };
 
   /** @ngInject */
@@ -73,53 +70,77 @@ export class AlertTabCtrl {
     this.panel = this.panelCtrl.panel;
     $scope.ctrl = this;
 
-    _.defaults(this.panel.alerting, this.defaultValues);
-    this.rule = this.panel.alerting;
+    this.metricTargets = this.panel.targets.map(val => val);
+    this.rule = this.panel.alerting = this.panel.alerting || {};
 
-    this.valueQuery = new QueryPart(this.rule.valueQuery, alertQueryDef);
-    this.evalQuery = new QueryPart(this.rule.evalQuery, alertQueryDef);
+    // set defaults
+    _.defaults(this.rule, this.defaultValues);
 
     var defaultName = (this.panelCtrl.dashboard.title + ' ' + this.panel.title + ' alert');
-    this.panel.alerting.name = this.panel.alerting.name || defaultName;
-    this.panel.alerting.description = this.panel.alerting.description || defaultName;
-
-    this.panel.targets.map(target => {
-      this.metricTargets.push(target);
-    });
-
-    this.panel.alerting.queryRef = this.panel.alerting.queryRef || this.metricTargets[0].refId;
+    this.rule.name = this.rule.name || defaultName;
+    this.rule.description = this.rule.description || defaultName;
+    this.rule.queryRef = this.panel.alerting.queryRef || this.metricTargets[0].refId;
+
+    // great temp working model
+    this.queryParams = {
+      params: [
+        this.rule.query.refId,
+        this.rule.query.from,
+        this.rule.query.to
+      ]
+    };
+
+    // init the query part components model
+    this.query = new QueryPart(this.queryParams, alertQueryDef);
     this.convertThresholdsToAlertThresholds();
-    this.evalFuncChanged();
+    this.transformDef = _.findWhere(this.transforms, {type: this.rule.transform.type});
+  }
+
+  queryUpdated() {
+    this.rule.query = {
+      refId: this.query.params[0],
+      from: this.query.params[1],
+      to: this.query.params[2],
+    };
   }
 
-  evalFuncChanged() {
-    var evalFuncDef = _.findWhere(this.evalFuncs, { value: this.rule.evalFunc });
-    console.log(evalFuncDef);
-    this.secondParam = evalFuncDef.secondParam;
+  transformChanged() {
+    // clear model
+    this.rule.transform = {type: this.rule.transform.type};
+    this.transformDef = _.findWhere(this.transforms, {type: this.rule.transform.type});
+
+    switch (this.rule.transform.type) {
+      case 'aggregation':  {
+        this.rule.transform.method = 'avg';
+        break;
+      }
+      case "forecast": {
+        this.rule.transform.timespan = '7d';
+        break;
+      }
+    }
   }
 
   convertThresholdsToAlertThresholds() {
     if (this.panel.grid
         && this.panel.grid.threshold1
-        && this.panel.alerting.warnLevel === undefined
+        && this.rule.warnLevel === undefined
        ) {
-      this.panel.alerting.warnOperator = '>';
-      this.panel.alerting.warnLevel = this.panel.grid.threshold1;
+      this.rule.warning.op = '>';
+      this.rule.warning.level = this.panel.grid.threshold1;
     }
 
     if (this.panel.grid
         && this.panel.grid.threshold2
-        && this.panel.alerting.critLevel === undefined
+        && this.rule.critical.level === undefined
        ) {
-      this.panel.alerting.critOperator = '>';
-      this.panel.alerting.critLevel = this.panel.grid.threshold2;
+      this.rule.critical.op = '>';
+      this.rule.critical.level = this.panel.grid.threshold2;
     }
   }
 
   markAsDeleted() {
-    if (this.panel.alerting) {
-      this.panel.alerting = this.defaultValues;
-    }
+    this.panel.alerting = this.defaultValues;
   }
 
   thresholdsUpdated() {

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

@@ -6,32 +6,34 @@
 
         <query-part-editor
                     class="gf-form-label query-part"
-                    part="ctrl.valueQuery"
-                    part-updated="ctrl.valueQueryUpdated()">
+                    part="ctrl.query"
+                    part-updated="ctrl.queryUpdated()">
         </query-part-editor>
 
       </div>
       <div class="gf-form">
-        <span class="gf-form-label">Evaluate Against</span>
+        <span class="gf-form-label">Transform using</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()"
+                    ng-model="ctrl.rule.transform.type"
+                    ng-options="f.type as f.text for f in ctrl.transforms"
+                    ng-change="ctrl.transformChanged()"
                     >
           </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 class="gf-form" ng-if="ctrl.transformDef.type === 'aggregation'">
+        <span class="gf-form-label">Method</span>
+        <div class="gf-form-select-wrapper">
+          <select   class="gf-form-input"
+                    ng-model="ctrl.rule.transform.method"
+                    ng-options="f for f in ctrl.aggregators">
+          </select>
+        </div>
       </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 class="gf-form" ng-if="ctrl.transformDef.type === 'forecast'">
+        <span class="gf-form-label">Timespan</span>
+        <input class="gf-form-input max-width-7" type="text" ng-model="ctrl.rule.transform.timespan" ng-change="ctrl.ruleUpdated()"></input>
       </div>
     </div>
   </div>