opensource/grafana
1
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-08-06 20:59:35 +08:00
Code Issues Packages Projects Releases Wiki Activity

Explore: Format data in Data tab in Query Inspector (#80004)

Browse Source 
* Fix betterer

* Improve formatting logic
This commit is contained in:
Haris Rozajac
2024-01-16 07:04:31 -07:00
committed by GitHub
parent e7099eabb3
commit bdbc3f351c
4 changed files with 88 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
public/app/features/inspector/InspectDataOptions.tsx
View File

@ -19,6 +19,7 @@ interface Props {
toggleDownloadForExcel: () => void;
data?: DataFrame[];
hasTransformations?: boolean;
formattedDataDescription?: string;
onOptionsChange?: (options: GetDataOptions) => void;
actions?: React.ReactNode;
}
@ -26,6 +27,7 @@ interface Props {
export const InspectDataOptions = ({
options,
actions,
formattedDataDescription,
onOptionsChange,
hasTransformations,
data,
@ -129,10 +131,13 @@ export const InspectDataOptions = ({
{onOptionsChange && (
<Field
label={t('dashboard.inspect-data.formatted-data-label', 'Formatted data')}
description={t(
'dashboard.inspect-data.formatted-data-description',
'Table data is formatted with options defined in the Field and Override tabs.'
)}
description={
formattedDataDescription ||
t(
'dashboard.inspect-data.formatted-data-description',
'Table data is formatted with options defined in the Field and Override tabs.'
)
}
>
<Switch
id="formatted-data-toggle"

18
public/app/features/inspector/InspectDataTab.tsx
View File

@ -37,6 +37,7 @@ interface Props {
panelPluginId?: string;
fieldConfig?: FieldConfigSource;
hasTransformations?: boolean;
formattedDataDescription?: string;
onOptionsChange?: (options: GetDataOptions) => void;
}
@ -176,11 +177,15 @@ export class InspectDataTab extends PureComponent<Props, State> {
const { options, panelPluginId, fieldConfig, timeZone } = this.props;
const data = this.state.transformedData;
if (!options.withFieldConfig || !panelPluginId || !fieldConfig) {
if (!options.withFieldConfig) {
return applyRawFieldOverrides(data);
}
const fieldConfigCleaned = this.cleanTableConfigFromFieldConfig(panelPluginId, fieldConfig);
let fieldConfigCleaned = fieldConfig ?? { defaults: {}, overrides: [] };
// Because we visualize this data in a table we have to remove any custom table display settings
if (panelPluginId === 'table' && fieldConfig) {
fieldConfigCleaned = this.cleanTableConfigFromFieldConfig(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.
@ -194,11 +199,7 @@ 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;
}
cleanTableConfigFromFieldConfig(fieldConfig: FieldConfigSource): FieldConfigSource {
fieldConfig = cloneDeep(fieldConfig);
// clear all table specific options
fieldConfig.defaults.custom = {};
@ -242,7 +243,7 @@ export class InspectDataTab extends PureComponent<Props, State> {
}
render() {
const { isLoading, options, data, onOptionsChange, hasTransformations } = this.props;
const { isLoading, options, data, formattedDataDescription, onOptionsChange, hasTransformations } = this.props;
const { dataFrameIndex, transformationOptions, selectedDataFrame, downloadForExcel } = this.state;
const styles = getPanelInspectorStyles();
@ -278,6 +279,7 @@ export class InspectDataTab extends PureComponent<Props, State> {
transformationOptions={transformationOptions}
selectedDataFrame={selectedDataFrame}
downloadForExcel={downloadForExcel}
formattedDataDescription={formattedDataDescription}
onOptionsChange={onOptionsChange}
onDataFrameChange={this.onDataFrameChange}
toggleDownloadForExcel={this.onToggleDownloadForExcel}