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

NewPanelEditor: minor UI twekas (#24042)

Browse Source 
* Forward ref for tabs, use html props

* Inspect:  add inspect label to drawer title

* Add tooltips to sidebar pane tabs, copy changes

* Remove unused import

* Place tooltips over tabs

* Inspector: dont show transformations select if there is only one data frame

* Review
This commit is contained in:
Dominik Prokop
2020-04-29 15:41:33 +02:00
committed by GitHub
parent 4645167421
commit 7601e0bbd3
9 changed files with 51 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -84,7 +84,7 @@ export class InspectDataTab extends PureComponent<Props, State> {
}
render() {
const { isLoading } = this.props;
const { isLoading, data } = this.props;
const { dataFrameIndex, transformId, transformationOptions } = this.state;
const styles = getPanelInspectorStyles();
@@ -112,9 +112,11 @@ export class InspectDataTab extends PureComponent<Props, State> {
return (
<div className={styles.dataTabContent} aria-label={selectors.components.PanelInspector.Data.content}>
<div className={styles.toolbar}>
<Field label="Transformer" className="flex-grow-1">
<Select options={transformationOptions} value={transformId} onChange={this.onTransformationChange} />
</Field>
{data.length > 1 && (
<Field label="Transformer" className="flex-grow-1">
<Select options={transformationOptions} value={transformId} onChange={this.onTransformationChange} />
</Field>
)}
{choices.length > 1 && (
<Field label="Select result" className={cx(styles.toolbarItem, 'flex-grow-1')}>
<Select options={choices} value={dataFrameIndex} onChange={this.onSelectedFrameChanged} />

2
public/app/features/dashboard/components/Inspector/PanelInspector.tsx
View File

@@ -311,7 +311,7 @@ export class PanelInspectorUnconnected extends PureComponent<Props, State> {
return (
<Drawer
title={panel.title || 'Panel inspect'}
title={`Inspect: ${panel.title}` || 'Panel inspect'}
subtitle={this.drawerSubtitle(tabs, activeTab)}
width={drawerWidth}
onClose={this.onClose}

1
public/app/features/dashboard/components/Inspector/styles.ts
View File

@@ -17,6 +17,7 @@ export const getPanelInspectorStyles = stylesFactory(() => {
flex-grow: 0;
align-items: center;
justify-content: flex-end;
margin-bottom: ${config.theme.spacing.sm};
`,
toolbarItem: css`
margin-left: ${config.theme.spacing.md};

6
public/app/features/dashboard/components/PanelEditor/OptionsPaneContent.tsx
View File

@@ -203,6 +203,7 @@ export const TabsBarContent: React.FC<{
counter={item.value === 'overrides' ? overridesCount : undefined}
active={active.value === item.value}
onChangeTab={() => setActiveTab(item.value)}
title={item.tooltip}
/>
))}
<div className="flex-grow-1" />
@@ -225,14 +226,17 @@ const tabSelections: Array<SelectableValue<string>> = [
{
label: 'Panel',
value: 'options',
tooltip: 'Configure panel display options',
},
{
label: 'Fields',
label: 'Field',
value: 'defaults',
tooltip: 'Configure field options',
},
{
label: 'Overrides',
value: 'overrides',
tooltip: 'Configure field option overrides',
},
];

12
public/app/features/dashboard/components/PanelEditor/PanelOptionsTab.tsx
View File

@@ -48,7 +48,7 @@ export const PanelOptionsTab: FC<Props> = ({
};
// Fist common panel settings Title, description
elements.push(
<OptionsGroup title="Panel settings" id="Panel settings" key="Panel settings">
<OptionsGroup title="Settings" id="Panel settings" key="Panel settings">
<Field label="Panel title">
<Input defaultValue={panel.title} onBlur={e => onPanelConfigChange('title', e.currentTarget.value)} />
</Field>
@@ -65,7 +65,7 @@ export const PanelOptionsTab: FC<Props> = ({
);
elements.push(
<OptionsGroup title="Panel type" id="Panel type" key="Panel type" defaultToClosed onToggle={focusVisPickerInput}>
<OptionsGroup title="Visualisation" id="Panel type" key="Panel type" defaultToClosed onToggle={focusVisPickerInput}>
<VisualizationTab panel={panel} ref={visTabInputRef} />
</OptionsGroup>
);
@@ -73,7 +73,7 @@ export const PanelOptionsTab: FC<Props> = ({
// Old legacy react editor
if (plugin.editor && panel && !plugin.optionEditors) {
elements.push(
<OptionsGroup title="Display" id="legacy react editor" key="legacy react editor">
<OptionsGroup title="Options" id="legacy react editor" key="legacy react editor">
<plugin.editor data={data} options={panel.getOptions()} onOptionsChange={onPanelOptionsChanged} />
</OptionsGroup>
);
@@ -98,9 +98,7 @@ export const PanelOptionsTab: FC<Props> = ({
elements.push(
<OptionsGroup
renderTitle={isExpanded => (
<>Panel links {!isExpanded && panelLinksCount > 0 && <Counter value={panelLinksCount} />}</>
)}
renderTitle={isExpanded => <>Links {!isExpanded && panelLinksCount > 0 && <Counter value={panelLinksCount} />}</>}
id="panel links"
key="panel links"
defaultToClosed
@@ -115,7 +113,7 @@ export const PanelOptionsTab: FC<Props> = ({
);
elements.push(
<OptionsGroup title="Panel repeats" id="panel repeats" key="panel repeats" defaultToClosed>
<OptionsGroup title="Repeat options" id="panel repeats" key="panel repeats" defaultToClosed>
<Field
label="Repeat by variable"
description="Repeat this panel for each value in the selected variable.