fix(tablepanel): change to using two thresholds

fixes #3878

docs/sources/reference/table_panel.md

@@ -17,7 +17,7 @@ To view table panels in action and test different configurations with sample dat
 
 The table panel has many ways to manipulate your data for optimal presentation.
 
-<img class="no-shadow" src="/img/v2/table-config.png">
+<img class="no-shadow" src="/img/v2/table-config2.png">
 
 1. `Data`: Control how your query is transformed into a table.
 2. `Table Display`: Table display options.
@@ -33,19 +33,19 @@ you want in the table. Only applicable for some transforms.
 
 ### Time series to rows
 
-<img src="/img/v2/table_ts_to_rows.png">
+<img src="/img/v2/table_ts_to_rows2.png">
 
 In the most simple mode you can turn time series to rows. This means you get a `Time`, `Metric` and a `Value` column. Where `Metric` is the name of the time series.
 
 ### Time series to columns
 
-![](/img/v2/table_ts_to_columns.png)
+![](/img/v2/table_ts_to_columns2.png)
 
 This transform allows you to take multiple time series and group them by time. Which will result in the primary column being `Time` and a column for each time series.
 
 ### Time series aggregations
 
-![](/img/v2/table_ts_to_aggregations.png)
+![](/img/v2/table_ts_to_aggregations2.png)
 This table transformation will lay out your table into rows by metric, allowing columns of `Avg`, `Min`, `Max`, `Total`, `Current` and `Count`. More than one column can be added.
 
 ### Annotations

public/app/features/dashboard/dashboardSrv.js

@@ -208,7 +208,7 @@ function (angular, $, _, moment) {
       var i, j, k;
       var oldVersion = this.schemaVersion;
       var panelUpgrades = [];
-      this.schemaVersion = 9;
+      this.schemaVersion = 10;
 
       if (oldVersion === this.schemaVersion) {
         return;
@@ -381,6 +381,22 @@ function (angular, $, _, moment) {
         });
       }
 
+      // schema version 10 changes
+      if (oldVersion < 10) {
+        // move aliasYAxis changes
+        panelUpgrades.push(function(panel) {
+          if (panel.type !== 'table') { return; }
+
+          _.each(panel.styles, function(style) {
+            if (style.thresholds && style.thresholds.length >= 3) {
+              var k = style.thresholds;
+              k.shift();
+              style.thresholds = k;
+            }
+          });
+        });
+      }
+
       if (panelUpgrades.length === 0) {
         return;
       }

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

@@ -122,7 +122,7 @@
 						Thresholds<tip>Comma seperated values</tip>
 					</li>
 					<li>
-						<input type="text" class="input-small tight-form-input" style="width: 150px" ng-model="style.thresholds" ng-blur="editor.render()" placeholder="0,50,80" array-join></input>
+						<input type="text" class="input-small tight-form-input" style="width: 150px" ng-model="style.thresholds" ng-blur="editor.render()" placeholder="50,80" array-join></input>
 					</li>
 					<li class="tight-form-item" style="width: 60px">
 						Colors

public/app/plugins/panel/table/renderer.ts

@@ -16,12 +16,12 @@ export class TableRenderer {
   getColorForValue(value, style) {
     if (!style.thresholds) { return null; }
 
-    for (var i = style.thresholds.length - 1; i >= 0 ; i--) {
-      if (value >= style.thresholds[i]) {
+    for (var i = style.thresholds.length; i > 0; i--) {
+      if (value >= style.thresholds[i - 1]) {
         return style.colors[i];
       }
     }
-    return null;
+    return _.first(style.colors);
   }
 
   defaultCellFormater(v) {

public/app/plugins/panel/table/specs/renderer_specs.ts

@@ -33,7 +33,7 @@ describe('when rendering table', () => {
           unit: 'none',
           decimals: 1,
           colorMode: 'value',
-          thresholds: [0, 50, 80],
+          thresholds: [50, 80],
           colors: ['green', 'orange', 'red']
         }
       ]
@@ -57,10 +57,20 @@ describe('when rendering table', () => {
     });
 
     it('colored cell should have style', () => {
+        var html = renderer.renderCell(2, 40);
+        expect(html).to.be('<td style="color:green">40.0</td>');
+    });
+
+    it('colored cell should have style', () => {
       var html = renderer.renderCell(2, 55);
       expect(html).to.be('<td style="color:orange">55.0</td>');
     });
 
+    it('colored cell should have style', () => {
+        var html = renderer.renderCell(2, 85);
+        expect(html).to.be('<td style="color:red">85.0</td>');
+    });
+
     it('unformated undefined should be rendered as -', () => {
       var html = renderer.renderCell(3, undefined);
       expect(html).to.be('<td></td>');

public/test/specs/dashboardSrv-specs.js

@@ -109,6 +109,7 @@ define([
       var model;
       var graph;
       var singlestat;
+      var table;
 
       beforeEach(function() {
         model = _dashboardSrv.create({
@@ -127,6 +128,10 @@ define([
                 {
                   type: 'singlestat', legend: true, thresholds: '10,20,30', aliasYAxis: { test: 2 }, grid: { min: 1, max: 10 },
                   targets: [{refId: 'A'}, {}],
+                },
+                {
+                  type: 'table', legend: true, styles: [{ thresholds: ["10", "20", "30"]}, { thresholds: ["100", "200", "300"]}],
+                  targets: [{refId: 'A'}, {}],
                 }
               ]
             }
@@ -135,6 +140,7 @@ define([
 
         graph = model.rows[0].panels[0];
         singlestat = model.rows[0].panels[1];
+        table = model.rows[0].panels[2];
       });
 
       it('should have title', function() {
@@ -180,8 +186,15 @@ define([
         expect(model.annotations.list[0].name).to.be('old');
       });
 
+      it('table panel should only have two thresholds values', function() {
+        expect(table.styles[0].thresholds[0]).to.be("20");
+        expect(table.styles[0].thresholds[1]).to.be("30");
+        expect(table.styles[1].thresholds[0]).to.be("200");
+        expect(table.styles[1].thresholds[1]).to.be("300");
+      });
+
       it('dashboard schema version should be set to latest', function() {
-        expect(model.schemaVersion).to.be(9);
+        expect(model.schemaVersion).to.be(10);
       });
 
     });