feat(singlestat): reduce max thresholds to two.

closes #3248

public/app/features/dashboard/dashboardSrv.js

@@ -234,9 +234,9 @@ function (angular, $, _, moment) {
       var i, j, k;
       var oldVersion = this.schemaVersion;
       var panelUpgrades = [];
-      this.schemaVersion = 8;
+      this.schemaVersion = 9;
 
-      if (oldVersion === 8) {
+      if (oldVersion === this.schemaVersion) {
         return;
       }
 
@@ -390,6 +390,23 @@ function (angular, $, _, moment) {
         });
       }
 
+      // schema version 9 changes
+      if (oldVersion < 9) {
+        // move aliasYAxis changes
+        panelUpgrades.push(function(panel) {
+          if (panel.type !== 'singlestat' && panel.thresholds !== "") { return; }
+
+          if (panel.thresholds) {
+            var k = panel.thresholds.split(",");
+
+            if (k.length >= 3) {
+              k.shift();
+              panel.thresholds = k.join(",");
+            }
+          }
+        });
+      }
+
       if (panelUpgrades.length === 0) {
         return;
       }

public/app/plugins/panel/singlestat/editor.html

@@ -97,10 +97,10 @@
 					<label for="panel.colorValue" class="cr1"></label>
 				</li>
 				<li class="tight-form-item">
-					Thresholds<tip>Comma seperated values</tip>
+					Thresholds<tip>Define two threshold values&lt;br /&gt; 50,80 will produce: &lt;50 = Green, 50:80 = Yellow, &gt;80 = Red</tip>
 				</li>
 				<li>
-					<input type="text" class="input-large tight-form-input" ng-model="panel.thresholds" ng-blur="render()" placeholder="0,50,80"></input>
+					<input type="text" class="input-large tight-form-input" ng-model="panel.thresholds" ng-blur="render()" placeholder="50,80"></input>
 				</li>
 				<li class="tight-form-item">
 					Colors

public/app/plugins/panel/singlestat/module.ts

@@ -54,7 +54,7 @@ function singleStatPanel($location, linkSrv, $timeout, templateSrv) {
           return valueString;
         }
 
-        var color = getColorForValue(value);
+        var color = getColorForValue(data, value);
         if (color) {
           return '<span style="color:' + color + '">'+ valueString + '</span>';
         }
@@ -62,15 +62,6 @@ function singleStatPanel($location, linkSrv, $timeout, templateSrv) {
         return valueString;
       }
 
-      function getColorForValue(value) {
-        for (var i = data.thresholds.length - 1; i >= 0 ; i--) {
-          if (value >= data.thresholds[i]) {
-            return data.colorMap[i];
-          }
-        }
-        return null;
-      }
-
       function getSpan(className, fontSize, value)  {
         value = templateSrv.replace(value);
         return '<span class="' + className + '" style="font-size:' + fontSize + '">' +
@@ -157,7 +148,7 @@ function singleStatPanel($location, linkSrv, $timeout, templateSrv) {
         var body = getBigValueHtml();
 
         if (panel.colorBackground && !isNaN(data.valueRounded)) {
-          var color = getColorForValue(data.valueRounded);
+          var color = getColorForValue(data, data.valueRounded);
           if (color) {
             $panelContainer.css('background-color', color);
             if (scope.fullscreen) {
@@ -228,4 +219,14 @@ function singleStatPanel($location, linkSrv, $timeout, templateSrv) {
   };
 }
 
-export {singleStatPanel as panel};
+function getColorForValue(data, value) {
+  for (var i = data.thresholds.length; i > 0; i--) {
+    if (value >= data.thresholds[i]) {
+      return data.colorMap[i];
+    }
+  }
+
+  return _.first(data.colorMap);
+}
+
+export {singleStatPanel as panel, getColorForValue};

public/test/specs/dashboardSrv-specs.js

@@ -141,6 +141,7 @@ define([
     describe('when creating dashboard with old schema', function() {
       var model;
       var graph;
+      var singlestat;
 
       beforeEach(function() {
         model = _dashboardSrv.create({
@@ -155,6 +156,10 @@ define([
                 {
                   type: 'graphite', legend: true, aliasYAxis: { test: 2 }, grid: { min: 1, max: 10 },
                   targets: [{refId: 'A'}, {}],
+                },
+                {
+                  type: 'singlestat', legend: true, thresholds: '10,20,30', aliasYAxis: { test: 2 }, grid: { min: 1, max: 10 },
+                  targets: [{refId: 'A'}, {}],
                 }
               ]
             }
@@ -162,6 +167,7 @@ define([
         });
 
         graph = model.rows[0].panels[0];
+        singlestat = model.rows[0].panels[1];
       });
 
       it('should have title', function() {
@@ -181,6 +187,10 @@ define([
         expect(graph.type).to.be('graph');
       });
 
+      it('single stat panel should have two thresholds', function() {
+        expect(singlestat.thresholds).to.be('20,30');
+      });
+
       it('queries without refId should get it', function() {
         expect(graph.targets[1].refId).to.be('B');
       });
@@ -204,7 +214,7 @@ define([
       });
 
       it('dashboard schema version should be set to latest', function() {
-        expect(model.schemaVersion).to.be(8);
+        expect(model.schemaVersion).to.be(9);
       });
 
     });