feat(alerting): start on new ui

.floo

@@ -1,4 +1,3 @@
 {
-  "url": "https://floobits.com/raintank/grafana"
-}
-
+    "url": "https://floobits.com/raintank/grafana"
+}

alerting_model.json

@@ -0,0 +1,145 @@
+{
+  "alert": {
+    "name": "Majority servers down",
+    "frequency": 60,
+    "notify": ["group1", "group2"],
+    "expressions": [
+        {
+          "left": [
+            {
+              "type": "query",
+              "refId": "A",
+              "timeRange": {"from": "5m", "to": "now-1m"},
+            },
+            {
+              "type": "function",
+              "name": "max"
+            }
+          ],
+          "operator": ">",
+          "right": [
+            {
+              "type": "constant",
+              "value": 100
+            }
+          ],
+          "level": 2,
+        }
+    ]
+  },
+
+  "alert": {
+    "name": "Majority servers down take2",
+    "frequency": 60,
+    "notify": ["group1", "group2"],
+    "expressions": [
+        {
+          "left": [
+            {
+              "type": "query",
+              "refId": "A",
+              "timeRange": {"from": "5m", "to": "now-1m"},
+            },
+            {
+              "type": "function",
+              "name": "max"
+            }
+          ],
+          "operator": ">",
+          "right": [
+            {
+              "type": "query",
+              "refId": "A",
+              "timeRange": {"from": "now-1d-5m", "to": "now-1d"},
+            },
+            {
+              "type": "function",
+              "name": "max"
+            }
+          ],
+          "level": 2,
+        }
+    ]
+  },
+  "alert": {
+    "name": "CPU usage last 5min above 90%",
+    "frequency": 60,
+    "expressions": [
+      {
+        "expr": "query(#A, 5m, now, avg)",
+        "operator": ">",
+        "critLevel": 90,
+      }
+    ]
+  },
+  "alert": {
+    "name": "Series count above 10",
+    "frequency": "1m",
+    "expressions": [
+      {
+        "expr": "query(#A, 5m, now, avg) | countSeries()",
+        "operator": ">",
+        "critLevel": 10,
+      }
+    ]
+  },
+  "alert": {
+    "name": "Disk Free Zero in 3 days",
+    "frequency": "1d",
+    "expressions": [
+      {
+        "expr": "query(#A, 1d, now, trend(3d))",
+        "operator": ">",
+        "critLevel": 0,
+      }
+    ]
+  },
+  "alert": {
+    "name": "Server requests is zero for more than 10min",
+    "frequency": "1d",
+    "expressions": [
+      {
+        "expr": "query(#A, 10m, now, sum)",
+        "operator": "=",
+        "critLevel": 0,
+      }
+    ]
+  },
+  "alert": {
+    "name": "Timeouts should not be more than 0.1% of requests",
+    "frequency": "1d",
+    "expressions": [
+      {
+        "expr": "query(#A, 10m, now, sum) | subtract | query(#B, 10m, now, sum)",
+        "operator": ">",
+        "critLevel": 0,
+      }
+    ]
+  },
+  "alert": {
+    "name": "CPU usage last 5min changed by more than 20% compared to last 24hours",
+    "frequency": "1m",
+    "value": "query(#A, 5m, now, avg)",
+    "operator": "percent change",
+    "threshold": "query(#A, 1d, now, avg)",
+  },
+
+  "alert": {
+    "name": "CPU higher than 90%",
+    "frequency": "1m",
+    "valueExpr": "query(#A, 5m, now, avg)",
+    "evalType": "greater than",
+    "critLevel": 20,
+    "warnLevel": 10,
+  },
+
+  "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",
+    "evalExpr": "query(#A, 1d, now, avg)",
+    "critLevel": 20,
+    "warnLevel": 10,           
+  },
+}

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

@@ -9,8 +9,9 @@ export class AlertTabCtrl {
   panelCtrl: any;
   alerting: any;
   metricTargets = [{ refId: '- select query -' } ];
-  operators = ['>', '<', '<=', '>='];
+  evalFuncs = ['Greater Then', 'Percent Change'];
   aggregators = ['avg', 'sum', 'min', 'max', 'median'];
+  rule: any;
 
   defaultValues = {
     aggregator: 'avg',
@@ -18,16 +19,22 @@ export class AlertTabCtrl {
     queryRange: 3600,
     warnOperator: '>',
     critOperator: '>',
-    queryRef: '- select query -'
+    queryRef: '- select query -',
+    valueExpr: 'query(#A, 5m, now, avg)',
+    evalFunc: 'Greater Then',
+    evalExpr: '',
+    critLevel: 20,
+    warnLevel: 10,
   };
 
   /** @ngInject */
   constructor($scope, private $timeout) {
-    $scope.alertTab = this; //HACK ATTACK!
     this.panelCtrl = $scope.ctrl;
     this.panel = this.panelCtrl.panel;
+    $scope.ctrl = this;
 
     _.defaults(this.panel.alerting, this.defaultValues);
+    this.rule = this.panel.alerting;
 
     var defaultName = (this.panelCtrl.dashboard.title + ' ' + this.panel.title + ' alert');
     this.panel.alerting.name = this.panel.alerting.name || defaultName;

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

@@ -1,61 +1,55 @@
 <div class="editor-row">
   <div class="gf-form-group section" >
-    <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-12">
-        <select class="gf-form-input"
-          ng-model="ctrl.panel.alerting.queryRef"
-          ng-options="target.refId as target.refId for target in alertTab.metricTargets"></select>
+    <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>
       </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-icon-warn"></i>
-        Warn level
-      </span>
-      <div class="gf-form-select-wrapper max-width-10">
-				<select class="gf-form-input" ng-model="ctrl.panel.alerting.warnOperator" ng-options="oper as oper for oper in alertTab.operators"></select>
+      <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>
+        </div>
       </div>
-      <input class="gf-form-input max-width-7" type="number" ng-model="ctrl.panel.alerting.warnLevel" ng-change="alertTab.thresholdsUpdated()"></input>
-    </div>
-    <div class="gf-form">
-      <span class="gf-form-label width-9">
-        <i class="icon-gf icon-gf-critical alert-icon-critical"></i>
-        Critical level
-      </span>
-      <div class="gf-form-select-wrapper max-width-10">
-        <select class="gf-form-input" ng-model="ctrl.panel.alerting.critOperator" ng-options="oper as oper for oper in alertTab.operators"></select>
+      <div class="gf-form">
+        <span class="gf-form-label">
+          <i class="icon-gf icon-gf-warn alert-icon-warn"></i>
+          Warn
+        </span>
+        <input class="gf-form-input max-width-7" type="number" ng-model="ctrl.panel.alerting.warnLevel" ng-change="alertTab.thresholdsUpdated()"></input>
       </div>
-      <input class="gf-form-input max-width-7" type="number" ng-model="ctrl.panel.alerting.critLevel" ng-change="alertTab.thresholdsUpdated()"></input>
-    </div>
-  </div>
-
-  <div class="gf-form-group section">
-    <h5 class="section-heading">Aggregation settings</h5>
-    <div class="gf-form">
-      <span class="gf-form-label width-12">Aggregation method</span>
-      <div class="gf-form-select-wrapper max-width-10">
-        <select class="gf-form-input"
-          ng-model="ctrl.panel.alerting.aggregator"
-          ng-options="oper as oper for oper in alertTab.aggregators"></select>
+      <div class="gf-form">
+        <span class="gf-form-label">
+          <i class="icon-gf icon-gf-warn alert-icon-critical"></i>
+          Critcal
+        </span>
+        <input class="gf-form-input max-width-7" type="number" ng-model="ctrl.panel.alerting.warnLevel" ng-change="alertTab.thresholdsUpdated()"></input>
       </div>
     </div>
-
-    <div class="gf-form">
-      <span class="gf-form-label width-12">Query range  (seconds)</span>
-      <input class="gf-form-input max-width-10" type="number"
-        ng-model="ctrl.panel.alerting.queryRange" placeholder="3600"></input>
-    </div>
-
-    <div class="gf-form">
-      <span class="gf-form-label width-12">Frequency (seconds)</span>
-      <input class="gf-form-input max-width-10" type="number"
-        ng-model="ctrl.panel.alerting.frequency" placeholder="60"></input>
-    </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"> -->
+  <!--       <select class="gf&#45;form&#45;input" -->
+  <!--         ng&#45;model="ctrl.panel.alerting.aggregator" -->
+  <!--         ng&#45;options="oper as oper for oper in alertTab.aggregators"></select> -->
+  <!--     </div> -->
+  <!--   </div> -->
+  <!--  -->
+  <!--   <div class="gf&#45;form"> -->
+  <!--     <span class="gf&#45;form&#45;label width&#45;12">Query range  (seconds)</span> -->
+  <!--     <input class="gf&#45;form&#45;input max&#45;width&#45;10" type="number" -->
+  <!--       ng&#45;model="ctrl.panel.alerting.queryRange" placeholder="3600"></input> -->
+  <!--   </div> -->
+  <!--  -->
+  <!--   <div class="gf&#45;form"> -->
+  <!--     <span class="gf&#45;form&#45;label width&#45;12">Frequency (seconds)</span> -->
+  <!--     <input class="gf&#45;form&#45;input max&#45;width&#45;10" type="number" -->
+  <!--       ng&#45;model="ctrl.panel.alerting.frequency" placeholder="60"></input> -->
+  <!--   </div> -->
+  <!-- </div> -->
+<div>
   <div class="gf-form-group section">
     <h5 class="section-heading">Alert info</h5>
     <div class="gf-form">