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

PanelEditor: Fixes issue minor UI issue with editing non data panels (#36463)

Browse Source
This commit is contained in:
Torkel Ödegaard 2021-07-06 18:01:13 +02:00 committed by GitHub
parent b49b7faeee
commit 17707d886a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 14 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx
View File

@ -1,7 +1,7 @@
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import { connect, ConnectedProps } from 'react-redux'; import { connect, ConnectedProps } from 'react-redux';
import AutoSizer from 'react-virtualized-auto-sizer'; import AutoSizer from 'react-virtualized-auto-sizer';
import { css, cx } from '@emotion/css'; import { css } from '@emotion/css';
import { Subscription } from 'rxjs'; import { Subscription } from 'rxjs';
import { FieldConfigSource, GrafanaTheme } from '@grafana/data'; import { FieldConfigSource, GrafanaTheme } from '@grafana/data';
@ -218,12 +218,11 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
updatePanelEditorUIState({ isPanelOptionsVisible: !uiState.isPanelOptionsVisible }); updatePanelEditorUIState({ isPanelOptionsVisible: !uiState.isPanelOptionsVisible });
}; };
renderPanel = (styles: EditorStyles) => { renderPanel(styles: EditorStyles, noTabsBelow: boolean) {
const { dashboard, panel, uiState, plugin, tab, tableViewEnabled } = this.props; const { dashboard, panel, uiState, tableViewEnabled } = this.props;
const tabs = getPanelEditorTabs(tab, plugin);
return ( return (
<div className={cx(styles.mainPaneWrapper, tabs.length === 0 && styles.mainPaneWrapperNoTabs)} key="panel"> <div className={styles.mainPaneWrapper} key="panel">
{this.renderPanelToolbar(styles)} {this.renderPanelToolbar(styles)}
<div className={styles.panelWrapper}> <div className={styles.panelWrapper}>
<AutoSizer> <AutoSizer>
@ -232,6 +231,11 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
return null; return null;
} }
// If no tabs limit height so panel does not extend to edge
if (noTabsBelow) {
height -= config.theme2.spacing.gridSize * 2;
}
if (tableViewEnabled) { if (tableViewEnabled) {
return <PanelEditorTableView width={width} height={height} panel={panel} dashboard={dashboard} />; return <PanelEditorTableView width={width} height={height} panel={panel} dashboard={dashboard} />;
} }
@ -256,7 +260,7 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
</div> </div>
</div> </div>
); );
}; }
renderPanelAndEditor(styles: EditorStyles) { renderPanelAndEditor(styles: EditorStyles) {
const { panel, dashboard, plugin, tab } = this.props; const { panel, dashboard, plugin, tab } = this.props;
@ -264,7 +268,7 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
if (tabs.length > 0) { if (tabs.length > 0) {
return [ return [
this.renderPanel(styles), this.renderPanel(styles, false),
<div <div
className={styles.tabsWrapper} className={styles.tabsWrapper}
aria-label={selectors.components.PanelEditor.DataPane.content} aria-label={selectors.components.PanelEditor.DataPane.content}
@ -274,7 +278,8 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
</div>, </div>,
]; ];
} }
return this.renderPanel(styles);
return this.renderPanel(styles, true);
} }
renderTemplateVariables(styles: EditorStyles) { renderTemplateVariables(styles: EditorStyles) {
@ -494,9 +499,6 @@ export const getStyles = stylesFactory((theme: GrafanaTheme, props: Props) => {
width: 100%; width: 100%;
padding-right: ${uiState.isPanelOptionsVisible ? 0 : paneSpacing}; padding-right: ${uiState.isPanelOptionsVisible ? 0 : paneSpacing};
`, `,
mainPaneWrapperNoTabs: css`
padding-bottom: ${paneSpacing};
`,
variablesWrapper: css` variablesWrapper: css`
label: variablesWrapper; label: variablesWrapper;
display: flex; display: flex;
@ -527,6 +529,7 @@ export const getStyles = stylesFactory((theme: GrafanaTheme, props: Props) => {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
position: relative;
`, `,
}; };
}); });