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.
 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.
 1. `Data`: Control how your query is transformed into a table.
 2. `Table Display`: Table display options.
 2. `Table Display`: Table display options.
@@ -33,19 +33,19 @@ you want in the table. Only applicable for some transforms.
 
 
 ### Time series to rows
 ### 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.
 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
 ### 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.
 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
 ### 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.
 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
 ### Annotations

public/app/features/dashboard/dashboardSrv.js

@@ -208,7 +208,7 @@ function (angular, $, _, moment) {
       var i, j, k;
       var i, j, k;
       var oldVersion = this.schemaVersion;
       var oldVersion = this.schemaVersion;
       var panelUpgrades = [];
       var panelUpgrades = [];
-      this.schemaVersion = 9;
+      this.schemaVersion = 10;
 
 
       if (oldVersion === this.schemaVersion) {
       if (oldVersion === this.schemaVersion) {
         return;
         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) {
       if (panelUpgrades.length === 0) {
         return;
         return;
       }
       }

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

@@ -122,7 +122,7 @@
 						Thresholds<tip>Comma seperated values</tip>
 						Thresholds<tip>Comma seperated values</tip>
 					</li>
 					</li>
 					<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>
 					<li class="tight-form-item" style="width: 60px">
 					<li class="tight-form-item" style="width: 60px">
 						Colors
 						Colors

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

@@ -16,12 +16,12 @@ export class TableRenderer {
   getColorForValue(value, style) {
   getColorForValue(value, style) {
     if (!style.thresholds) { return null; }
     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 style.colors[i];
       }
       }
     }
     }
-    return null;
+    return _.first(style.colors);
   }
   }
 
 
   defaultCellFormater(v) {
   defaultCellFormater(v) {

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

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

public/test/specs/dashboardSrv-specs.js

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