Fix: TablePanel column color style now works even after removeing styles, fixes #16162 (#16227)

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

@@ -124,13 +124,13 @@
     <div class="gf-form">
       <label class="gf-form-label width-8">Colors</label>
       <span class="gf-form-label">
-        <color-picker color="style.colors[0]" onChange="editor.onColorChange($index, 0)"></color-picker>
+        <color-picker color="style.colors[0]" onChange="editor.onColorChange(style, 0)"></color-picker>
       </span>
       <span class="gf-form-label">
-        <color-picker color="style.colors[1]" onChange="editor.onColorChange($index, 1)"></color-picker>
+        <color-picker color="style.colors[1]" onChange="editor.onColorChange(style, 1)"></color-picker>
       </span>
       <span class="gf-form-label">
-        <color-picker color="style.colors[2]" onChange="editor.onColorChange($index, 2)"></color-picker>
+        <color-picker color="style.colors[2]" onChange="editor.onColorChange(style, 2)"></color-picker>
       </span>
       <div class="gf-form-label">
         <a class="pointer" ng-click="editor.invertColorOrder($index)">Invert</a>

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

@@ -16,7 +16,7 @@ export class ColumnOptionsCtrl {
   mappingTypes: any;
 
   /** @ngInject */
-  constructor($scope) {
+  constructor($scope: any) {
     $scope.editor = this;
 
     this.activeStyleIndex = 0;
@@ -61,7 +61,7 @@ export class ColumnOptionsCtrl {
     this.panelCtrl.render();
   }
 
-  setUnitFormat(column, subItem) {
+  setUnitFormat(column: any, subItem: any) {
     column.unit = subItem.value;
     this.panelCtrl.render();
   }
@@ -96,11 +96,11 @@ export class ColumnOptionsCtrl {
     this.activeStyleIndex = indexToInsert;
   }
 
-  removeColumnStyle(style) {
+  removeColumnStyle(style: any) {
     this.panel.styles = _.without(this.panel.styles, style);
   }
 
-  invertColorOrder(index) {
+  invertColorOrder(index: number) {
     const ref = this.panel.styles[index].colors;
     const copy = ref[0];
     ref[0] = ref[2];
@@ -108,14 +108,14 @@ export class ColumnOptionsCtrl {
     this.panelCtrl.render();
   }
 
-  onColorChange(styleIndex, colorIndex) {
+  onColorChange(style: any, colorIndex: number) {
-    return newColor => {
+    return (newColor: string) => {
-      this.panel.styles[styleIndex].colors[colorIndex] = newColor;
+      style.colors[colorIndex] = newColor;
       this.render();
     };
   }
 
-  addValueMap(style) {
+  addValueMap(style: any) {
     if (!style.valueMaps) {
       style.valueMaps = [];
     }
@@ -123,12 +123,12 @@ export class ColumnOptionsCtrl {
     this.panelCtrl.render();
   }
 
-  removeValueMap(style, index) {
+  removeValueMap(style: any, index: number) {
     style.valueMaps.splice(index, 1);
     this.panelCtrl.render();
   }
 
-  addRangeMap(style) {
+  addRangeMap(style: any) {
     if (!style.rangeMaps) {
       style.rangeMaps = [];
     }
@@ -136,14 +136,14 @@ export class ColumnOptionsCtrl {
     this.panelCtrl.render();
   }
 
-  removeRangeMap(style, index) {
+  removeRangeMap(style: any, index: number) {
     style.rangeMaps.splice(index, 1);
     this.panelCtrl.render();
   }
 }
 
 /** @ngInject */
-export function columnOptionsTab($q, uiSegmentSrv) {
+export function columnOptionsTab($q: any, uiSegmentSrv: any) {
   'use strict';
   return {
     restrict: 'E',

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

@@ -7,6 +7,7 @@ import { tablePanelEditor } from './editor';
 import { columnOptionsTab } from './column_options';
 import { TableRenderer } from './renderer';
 import { isTableData } from '@grafana/ui';
+import { TemplateSrv } from 'app/features/templating/template_srv';
 
 class TablePanelCtrl extends MetricsPanelCtrl {
   static templateUrl = 'module.html';
@@ -46,7 +47,14 @@ class TablePanelCtrl extends MetricsPanelCtrl {
   };
 
   /** @ngInject */
-  constructor($scope, $injector, templateSrv, private annotationsSrv, private $sanitize, private variableSrv) {
+  constructor(
+    $scope: any,
+    $injector: any,
+    templateSrv: TemplateSrv,
+    private annotationsSrv: any,
+    private $sanitize: any,
+    private variableSrv: any
+  ) {
     super($scope, $injector);
 
     this.pageIndex = 0;
@@ -72,11 +80,11 @@ class TablePanelCtrl extends MetricsPanelCtrl {
     this.addEditorTab('Column Styles', columnOptionsTab, 3);
   }
 
-  onInitPanelActions(actions) {
+  onInitPanelActions(actions: any[]) {
     actions.push({ text: 'Export CSV', click: 'ctrl.exportCsv()' });
   }
 
-  issueQueries(datasource) {
+  issueQueries(datasource: any) {
     this.pageIndex = 0;
 
     if (this.panel.transform === 'annotations') {
@@ -94,12 +102,12 @@ class TablePanelCtrl extends MetricsPanelCtrl {
     return super.issueQueries(datasource);
   }
 
-  onDataError(err) {
+  onDataError(err: any) {
     this.dataRaw = [];
     this.render();
   }
 
-  onDataReceived(dataList) {
+  onDataReceived(dataList: any) {
     this.dataRaw = dataList;
     this.pageIndex = 0;
 
@@ -137,7 +145,7 @@ class TablePanelCtrl extends MetricsPanelCtrl {
     return super.render(this.table);
   }
 
-  toggleColumnSort(col, colIndex) {
+  toggleColumnSort(col: any, colIndex: any) {
     // remove sort flag from current column
     if (this.table.columns[this.panel.sort.col]) {
       this.table.columns[this.panel.sort.col].sort = false;
@@ -167,7 +175,7 @@ class TablePanelCtrl extends MetricsPanelCtrl {
     });
   }
 
-  link(scope, elem, attrs, ctrl: TablePanelCtrl) {
+  link(scope: any, elem: JQuery, attrs: any, ctrl: TablePanelCtrl) {
     let data;
     const panel = ctrl.panel;
     let pageCount = 0;