feat(alerting): add color to alert state icons

public/app/features/alerts/alert_def.ts

@@ -3,11 +3,10 @@
 //import _ from 'lodash';
 
 var alertStateToCssMap = {
-  "OK": "icon-gf-online",
+  "OK": "icon-gf-online alert-state-online",
-  "WARN": "icon-gf-warn",
+  "WARN": "icon-gf-warn alert-state-warn",
-  "CRITICAL": "icon-gf-critical",
+  "CRITICAL": "icon-gf-critical alert-state-critical",
   "ACKNOWLEDGED": "icon-gf-alert-disabled"
-
 };
 
 function getCssForState(alertState) {

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

@@ -11,11 +11,13 @@ export class AlertTabCtrl {
 
   /** @ngInject */
   constructor($scope) {
-    $scope.alertTab = this;
+    $scope.alertTab = this; //HACK ATTACK!
     this.panelCtrl = $scope.ctrl;
     this.panel = this.panelCtrl.panel;
-    this.alerting = this.alerting || {};
+    this.panel.alerting = this.panel.alerting || {};
-
+    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.convertThresholdsToAlertThresholds();
   }
@@ -29,6 +31,31 @@ export class AlertTabCtrl {
       this.panel.alerting.critLevel = '< ' + this.panel.grid.threshold2;
     }
   }
+
+  thresholdsUpdated() {
+    if (this.panel.alerting.warnLevel) {
+      var threshold = this.panel.alerting.warnLevel
+        .replace(' ', '')
+        .replace('>', '')
+        .replace('<', '')
+        .replace('>=', '')
+        .replace('<=', '');
+
+      this.panel.grid.threshold1 = parseInt(threshold);
+    }
+
+    if (this.panel.alerting.critLevel) {
+      var threshold = this.panel.alerting.critLevel
+        .replace(' ', '')
+        .replace('>', '')
+        .replace('<', '')
+        .replace('>=', '')
+        .replace('<=', '');
+
+      this.panel.grid.threshold2 = parseInt(threshold);
+    }
+    this.panelCtrl.render();
+  }
 }
 
 /** @ngInject */

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

@@ -1,13 +1,10 @@
 <div class="editor-row">
-  <div class="gf-form-group section">
+  <div class="gf-form-group section" >
-
-  </div>
-  <div class="gf-form-group section">
     <h5 class="section-heading">Query</h5>
-    <div class="gf-form">
+    <div class="gf-form" style="margin-bottom: 2rem">
-      <span class="gf-form-label">Query to watch</span>
+      <span class="gf-form-label width-9">Query to watch</span>
-      <div class="gf-form-select-wrapper">
+      <div class="gf-form-select-wrapper max-width-7">
-        <select class="gf-form-input gf-size-auto"
+        <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>
       </div>
@@ -15,12 +12,18 @@
 
     <h5 class="section-heading">Thresholds</h5>
     <div class="gf-form">
-      <span class="gf-form-label width-7">Warn level</span>
+      <span class="gf-form-label width-9">
-      <input class="gf-form-input max-width-7" type="text" ng-model="ctrl.panel.alerting.warnLevel"></input>
+        <i class="icon-gf icon-gf-warn alert-state-warn"></i>
+        Warn level
+      </span>
+      <input class="gf-form-input max-width-7" type="text" ng-model="ctrl.panel.alerting.warnLevel" ng-change="alertTab.thresholdsUpdated()"></input>
     </div>
     <div class="gf-form">
-      <span class="gf-form-label width-7">Critical level</span>
+      <span class="gf-form-label width-9">
-      <input class="gf-form-input max-width-7" type="text" ng-model="ctrl.panel.alerting.critLevel"></input>
+        <i class="icon-gf icon-gf-critical alert-state-critical"></i>
+        Critical level
+      </span>
+      <input class="gf-form-input max-width-7" type="text" ng-model="ctrl.panel.alerting.critLevel" ng-change="alertTab.thresholdsUpdated()"></input>
     </div>
   </div>
 
@@ -28,10 +31,10 @@
     <h5 class="section-heading">Aggregation settings</h5>
     <div class="gf-form">
       <span class="gf-form-label width-10">Aggregation method</span>
-      <div class="gf-form-select-wrapper">
+      <div class="gf-form-select-wrapper max-width-10">
-        <select class="gf-form-input max-width-10"
+        <select class="gf-form-input"
           ng-model="ctrl.panel.alerting.aggregator"
-          ng-options="oper as oper for oper in ['avg', 'sum']"></select>
+          ng-options="oper as oper for oper in ['avg', 'sum', 'min', 'max', 'median']"></select>
       </div>
     </div>
 
@@ -51,14 +54,14 @@
     <h5 class="section-heading">Alert info</h5>
     <div class="gf-form">
       <span class="gf-form-label width-10">Alert name</span>
-      <input type="text" class="gf-form-input max-width-26" ng-model="ctrl.panel.alerting.title">
+      <input type="text" class="gf-form-input width-18" ng-model="ctrl.panel.alerting.title">
     </div>
     <div class="gf-form-inline">
       <div class="gf-form">
-        <span class="gf-form-label width-10">Alert description</span>
+        <span class="gf-form-label width-10" style="margin-top: -73px;">Alert description</span>
       </div>
       <div class="gf-form">
-        <textarea rows="4" ng-model="ctrl.panel.alerting.description" class="gf-form-input max-width-26"></textarea>
+        <textarea rows="5" ng-model="ctrl.panel.alerting.description" class="gf-form-input width-18"></textarea>
       </div>
     </div>
   </div>

public/sass/components/_alerts.scss

@@ -6,6 +6,22 @@
 // Base styles
 // -------------------------
 
+
+.alert-state-online {
+  //background-image: url('/img/online.svg');
+  color: $online;
+}
+
+.alert-state-warn {
+  //background-image: url('/img/warn-tiny.svg');
+  color: $warn;
+}
+
+.alert-state-critical {
+  //background-image: url('/img/critical.svg');
+  color: $critical;
+}
+
 .alert {
   padding: 8px 35px 13px 14px;
   margin-bottom: $line-height-base;