Closes #70, Fixes #50, Grid thresholds feature

src/app/components/require.config.js

@@ -22,6 +22,7 @@ require.config({
     datepicker:               '../vendor/angular/datepicker',
     bindonce:                 '../vendor/angular/bindonce',
     crypto:                   '../vendor/crypto.min',
+    spectrum:                 '../vendor/spectrum',
 
     underscore:               'components/underscore.extended',
     'underscore-src':         '../vendor/underscore',
@@ -50,6 +51,10 @@ require.config({
       exports: '_'
     },
 
+    spectrum: {
+      deps: ['jquery']
+    },
+
     crypto: {
       exports: 'Crypto'
     },

src/app/directives/addPanel.js

@@ -32,4 +32,5 @@ function (angular, app, _) {
         }
       };
     });
+
 });
\ No newline at end of file

src/app/directives/all.js

@@ -9,5 +9,6 @@ define([
   './tip',
   './confirmClick',
   './configModal',
+  './spectrumPicker',
   './grafanaGraph'
 ], function () {});
\ No newline at end of file

src/app/directives/grafanaGraph.js

@@ -64,6 +64,8 @@ function (angular, $, kbn, moment, _) {
             return;
           }
 
+          var panel = scope.panel;
+
           _.each(_.keys(scope.hiddenSeries), function(seriesAlias) {
             var dataSeries = _.find(data, function(series) {
               return series.info.alias === seriesAlias;
@@ -77,40 +79,40 @@ function (angular, $, kbn, moment, _) {
           // Set barwidth based on specified interval
           var barwidth = kbn.interval_to_ms(scope.interval);
 
-          var stack = scope.panel.stack ? true : null;
+          var stack = panel.stack ? true : null;
 
           // Populate element
           var options = {
             legend: { show: false },
             series: {
-              stackpercent: scope.panel.stack ? scope.panel.percentage : false,
-              stack: scope.panel.percentage ? null : stack,
+              stackpercent: panel.stack ? panel.percentage : false,
+              stack: panel.percentage ? null : stack,
               lines:  {
-                show: scope.panel.lines,
+                show: panel.lines,
                 zero: false,
-                fill: scope.panel.fill === 0 ? false : scope.panel.fill/10,
-                lineWidth: scope.panel.linewidth,
-                steps: scope.panel.steppedLine
+                fill: panel.fill === 0 ? false : panel.fill/10,
+                lineWidth: panel.linewidth,
+                steps: panel.steppedLine
               },
               bars:   {
-                show: scope.panel.bars,
+                show: panel.bars,
                 fill: 1,
                 barWidth: barwidth/1.5,
                 zero: false,
                 lineWidth: 0
               },
               points: {
-                show: scope.panel.points,
+                show: panel.points,
                 fill: 1,
                 fillColor: false,
-                radius: scope.panel.pointradius
+                radius: panel.pointradius
               },
               shadowSize: 1
             },
             yaxes: [],
             xaxis: {
               timezone: dashboard.current.timezone,
-              show: scope.panel['x-axis'],
+              show: panel['x-axis'],
               mode: "time",
               min: _.isUndefined(scope.range.from) ? null : scope.range.from.getTime(),
               max: _.isUndefined(scope.range.to) ? null : scope.range.to.getTime(),
@@ -130,10 +132,27 @@ function (angular, $, kbn, moment, _) {
             }
           };
 
+          if (panel.grid.threshold1) {
+            var limit1 = panel.grid.thresholdLine ? panel.grid.threshold1 : (panel.grid.threshold2 || null);
+            options.grid.markings = [];
+            options.grid.markings.push({
+              yaxis: { from: panel.grid.threshold1, to: limit1 },
+              color: panel.grid.threshold1Color
+            });
+
+            if (panel.grid.threshold2) {
+              var limit2 = panel.grid.thresholdLine ? panel.grid.threshold2 : null;
+              options.grid.markings.push({
+                yaxis: { from: panel.grid.threshold2, to: limit2 },
+                color: panel.grid.threshold2Color
+              });
+            }
+          }
+
           addAnnotations(options);
 
           for (var i = 0; i < data.length; i++) {
-            var _d = data[i].getFlotPairs(scope.panel.nullPointMode);
+            var _d = data[i].getFlotPairs(panel.nullPointMode);
             data[i].data = _d;
           }
 

src/app/directives/spectrumPicker.js

+define([
+  'angular',
+  'spectrum'
+],
+function (angular) {
+  'use strict';
+
+  angular
+    .module('kibana.directives')
+    .directive('spectrumPicker', function() {
+      return {
+        restrict: 'E',
+        require: 'ngModel',
+        scope: false,
+        replace: true,
+        template: "<span><input class='input-small' /></span>",
+        link: function(scope, element, attrs, ngModel) {
+          var input = element.find('input');
+          var options = angular.extend({
+            showAlpha: true,
+            showButtons: false,
+            color: ngModel.$viewValue,
+            change: function(color) {
+              scope.$apply(function() {
+                ngModel.$setViewValue(color.toRgbString());
+              });
+            }
+          }, scope.$eval(attrs.options));
+
+          ngModel.$render = function() {
+            input.spectrum('set', ngModel.$viewValue || '');
+          };
+
+          input.spectrum(options);
+        }
+      };
+    });
+});
\ No newline at end of file

src/app/panels/graphite/axisEditor.html

@@ -46,6 +46,29 @@
   </div>
 
   <div class="section">
+    <h5>Grid thresholds</h5>
+    <div class="editor-option">
+      <label class="small">Level1</label>
+      <input type="number" class="input-small" ng-model="panel.grid.threshold1" ng-change="render()" ng-model-onblur />
+    </div>
+    <div class="editor-option">
+      <label class="small">Color</label>
+      <spectrum-picker ng-model="panel.grid.threshold1Color" ng-change="render()" ></spectrum-picker>
+    </div>
+    <div class="editor-option">
+      <label class="small">Level2</label>
+      <input type="number" class="input-small" ng-model="panel.grid.threshold2" ng-change="render()" ng-model-onblur />
+    </div>
+    <div class="editor-option">
+      <label class="small">Color</label>
+      <spectrum-picker ng-model="panel.grid.threshold2Color" ng-change="render()" ></spectrum-picker>
+    </div>
+    <div class="editor-option">
+      <label class="small">Line mode</label><input type="checkbox" ng-model="panel.grid.thresholdLine" ng-checked="panel.grid.thresholdLine" ng-change="render();">
+    </div>
+  </div>
+
+  <div class="section">
     <h5>Legend</h5>
     <div class="editor-option">
       <label class="small">Show Legend</label><input type="checkbox" ng-model="panel.legend.show" ng-checked="panel.legend.show" ng-change="render();">

src/app/panels/graphite/module.js

@@ -109,7 +109,11 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
        */
       grid          : {
         max: null,
-        min: 0
+        min: 0,
+        threshold1: null,
+        threshold2: null,
+        threshold1Color: 'rgba(216, 200, 27, 0.27)',
+        threshold2Color: 'rgba(234, 112, 112, 0.22)'
       },
 
       annotate      : {

src/index.html

@@ -9,6 +9,7 @@
     <title>Grafana</title>
     <link rel="stylesheet" href="css/bootstrap.dark.min.css" title="Light">
     <link rel="stylesheet" href="css/timepicker.css">
+    <link rel="stylesheet" href="css/spectrum.css">
     <link rel="stylesheet" href="css/animate.min.css">
     <link rel="stylesheet" href="css/normalize.min.css">
     <!-- load the root require context -->

src/vendor/bootstrap/less/grafana.less

@@ -402,4 +402,29 @@ input[type=text].func-param {
   border: 1px solid #1f1f1f;
   border-top: 1px solid #666666;
   border-left: 1px solid #666666;
-}
\ No newline at end of file
+}
+
+
+// SPECTRUM CSS overrides
+
+.sp-replacer {
+  background: inherit;
+  border: none;
+  color: inherit;
+}
+
+.sp-replacer:hover, .sp-replacer.sp-active {
+  border-color: inherit;
+  color: inherit;
+}
+
+.sp-container {
+  border-radius: 0;
+  background-color: @heroUnitBackground;
+  border: none;
+  padding: 0;
+}
+
+.sp-palette-container, .sp-picker-container {
+  border: none;
+}