root
/
grafana
mirror of https://github.com/grafana/grafana.git
1
0
Fork 0
Code Issues Actions 243 Packages Projects Releases Wiki Activity

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

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