IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

PanelInspector: hides unsupported data display options for Panel type (#24918)

Browse Source
This commit is contained in:
Hugo Häggmark 2020-05-20 14:15:06 +02:00 committed by GitHub
parent 460847f3ed
commit 0b5d818771
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 47 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
public/app/features/dashboard/components/Inspector/InspectDataTab.tsx
View File

@ -110,8 +110,53 @@ export class InspectDataTab extends PureComponent<Props, State> {
});
}
renderDataOptions = () => {
const { options, onOptionsChange, panel } = this.props;
const { transformId } = this.state;
const styles = getPanelInspectorStyles();
const panelTransformations = panel.getTransformations();
const showPanelTransformationsOption =
panelTransformations && panelTransformations.length > 0 && (transformId as any) !== 'join by time';
const showFieldConfigsOption = !panel.plugin?.fieldConfigRegistry.isEmpty();
const showDataOptions = showPanelTransformationsOption || showFieldConfigsOption;
if (!showDataOptions) {
return null;
}
return (
<div className={cx(styles.options, styles.dataDisplayOptions)}>
<QueryOperationRow title={'Data display options'} isOpen={false}>
{showPanelTransformationsOption && (
<div className="gf-form-inline">
<Switch
tooltip="Data shown in the table will be transformed using transformations defined in the panel"
label="Apply panel transformations"
labelClass="width-12"
checked={!!options.withTransforms}
onChange={() => onOptionsChange({ ...options, withTransforms: !options.withTransforms })}
/>
</div>
)}
{showFieldConfigsOption && (
<div className="gf-form-inline">
<Switch
tooltip="Data shown in the table will have panel field configuration applied, for example units or display name"
label="Apply field configuration"
labelClass="width-12"
checked={!!options.withFieldConfig}
onChange={() => onOptionsChange({ ...options, withFieldConfig: !options.withFieldConfig })}
/>
</div>
)}
</QueryOperationRow>
</div>
);
};
render() {
const { isLoading, data, options, onOptionsChange } = this.props;
const { isLoading, data } = this.props;
const { dataFrameIndex, transformId, transformationOptions } = this.state;
const styles = getPanelInspectorStyles();
@ -136,8 +181,6 @@ export class InspectDataTab extends PureComponent<Props, State> {
};
});
const panelTransformations = this.props.panel.getTransformations();
return (
<div className={styles.dataTabContent} aria-label={selectors.components.PanelInspector.Data.content}>
<div className={styles.actionsWrapper}>
@ -169,31 +212,7 @@ export class InspectDataTab extends PureComponent<Props, State> {
</Field>
)}
</div>
<div className={cx(styles.options, styles.dataDisplayOptions)}>
<QueryOperationRow title={'Data display options'} isOpen={false}>
{panelTransformations && panelTransformations.length > 0 && (transformId as any) !== 'join by time' && (
<div className="gf-form-inline">
<Switch
tooltip="Data shown in the table will be transformed using transformations defined in the panel"
label="Apply panel transformations"
labelClass="width-12"
checked={!!options.withTransforms}
onChange={() => onOptionsChange({ ...options, withTransforms: !options.withTransforms })}
/>
</div>
)}
<div className="gf-form-inline">
<Switch
tooltip="Data shown in the table will have panel field configuration applied, for example units or display name"
label="Apply field configuration"
labelClass="width-12"
checked={!!options.withFieldConfig}
onChange={() => onOptionsChange({ ...options, withFieldConfig: !options.withFieldConfig })}
/>
</div>
</QueryOperationRow>
</div>
{this.renderDataOptions()}
</div>
<div className={styles.options}>