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

c02782c0 · Torkel Ödegaard · GitHub · 6ef11872 · c02782c0 · c02782c0
Commit c02782c0 authored Mar 26, 2019 by Torkel Ödegaard Committed by GitHub Mar 26, 2019
Hide whitespace changes
Inline Side-by-side

Showing with 30 additions and 22 deletions

public/app/plugins/panel/table/column_options.html
+3 -3

public/app/plugins/panel/table/column_options.ts
+12 -12

public/app/plugins/panel/table/module.ts
+15 -7

No files found.
--- a/public/app/plugins/panel/table/column_options.html
+++ b/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>

--- a/public/app/plugins/panel/table/column_options.ts
+++ b/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',

--- a/public/app/plugins/panel/table/module.ts
+++ b/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;