PanelInspect: Clean table display settings from field config (#71226)

* Does not work, hmm..

* now it works

* fixing and refactoring

* remove unused import
This commit is contained in:
Torkel Ödegaard 2023-07-10 16:27:03 +02:00 committed by GitHub
parent 4b3050e02e
commit 9f2baaf5c3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 33 additions and 5 deletions

View File

@ -30,7 +30,8 @@ export const usePanelLatestData = (
querySubscription.current = panel
.getQueryRunner()
.getData(options)
// We apply field config later
.getData({ withTransforms: options.withTransforms, withFieldConfig: false })
.subscribe({
next: (data) => {
if (checkSchema) {
@ -58,7 +59,7 @@ export const usePanelLatestData = (
* Otherwise, passing different references to the same object might cause troubles.
*/
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [panel, options.withFieldConfig, options.withTransforms]);
}, [panel, options.withTransforms]);
return {
data: latestData,

View File

@ -1,4 +1,5 @@
import { css } from '@emotion/css';
import { cloneDeep } from 'lodash';
import React, { PureComponent } from 'react';
import AutoSizer from 'react-virtualized-auto-sizer';
@ -9,6 +10,7 @@ import {
CSVConfig,
DataFrame,
DataTransformerID,
FieldConfigSource,
SelectableValue,
TimeZone,
transformDataFrame,
@ -170,12 +172,14 @@ export class InspectDataTab extends PureComponent<Props, State> {
return applyRawFieldOverrides(data);
}
// We need to apply field config even though it was already applied in the PanelQueryRunner.
// That's because transformers create new fields and data frames, so i.e. display processor is no longer there
const fieldConfig = this.cleanTableConfigFromFieldConfig(panel.type, panel.fieldConfig);
// We need to apply field config as it's not done by PanelQueryRunner (even when withFieldConfig is true).
// It's because transformers create new fields and data frames, and we need to clean field config of any table settings.
return applyFieldOverrides({
data,
theme: config.theme2,
fieldConfig: panel.fieldConfig,
fieldConfig,
timeZone,
replaceVariables: (value: string) => {
return value;
@ -183,6 +187,29 @@ export class InspectDataTab extends PureComponent<Props, State> {
});
}
// Because we visualize this data in a table we have to remove any custom table display settings
cleanTableConfigFromFieldConfig(panelPluginId: string, fieldConfig: FieldConfigSource): FieldConfigSource {
if (panelPluginId !== 'table') {
return fieldConfig;
}
fieldConfig = cloneDeep(fieldConfig);
// clear all table specific options
fieldConfig.defaults.custom = {};
// clear all table override properties
for (const override of fieldConfig.overrides) {
for (const prop of override.properties) {
if (prop.id.startsWith('custom.')) {
const index = override.properties.indexOf(prop);
override.properties.slice(index, 1);
}
}
}
return fieldConfig;
}
render() {
const { isLoading, options, data, panel, onOptionsChange, app } = this.props;
const { dataFrameIndex, transformId, transformationOptions, selectedDataFrame, downloadForExcel } = this.state;