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

PanelEdit: Fixes broken panel edit splitter logic (#59859)

Browse Source 
* Alt panel edit fix

* fix fix
This commit is contained in:
Torkel Ödegaard 2022-12-06 18:21:03 +01:00 committed by GitHub
parent bc5badbcd8
commit 18d09cd3fe
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 38 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
public/app/core/components/SplitPaneWrapper/SplitPaneWrapper.tsx
View File

@ -141,12 +141,6 @@ const getStyles = (theme: GrafanaTheme2, hasSplit: boolean) => {
`;
return {
singleLeftPane: css`
height: 100%;
position: absolute;
overflow: hidden;
width: 100%;
`,
resizerV: cx(
resizer,
css`

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

@ -241,18 +241,30 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
);
}
renderPanelAndEditor(styles: EditorStyles) {
renderPanelAndEditor(uiState: PanelEditorUIState, styles: EditorStyles) {
const { panel, dashboard, plugin, tab } = this.props;
const tabs = getPanelEditorTabs(tab, plugin);
const isOnlyPanel = tabs.length === 0;
const panelPane = this.renderPanel(styles, isOnlyPanel);
if (tabs.length === 0) {
return panelPane;
return <div className={styles.onlyPanel}>{panelPane}</div>;
}
return [
panelPane,
return (
<SplitPaneWrapper
splitOrientation="horizontal"
maxSize={-200}
paneSize={uiState.topPaneSize}
primary="first"
secondaryPaneStyle={{ minHeight: 0 }}
onDragFinished={(size) => {
if (size) {
updatePanelEditorUIState({ topPaneSize: size / window.innerHeight });
}
}}
>
{panelPane}
<div
className={styles.tabsWrapper}
aria-label={selectors.components.PanelEditor.DataPane.content}
@ -265,8 +277,9 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
tabs={tabs}
onChangeTab={this.onChangeTab}
/>
</div>,
];
</div>
</SplitPaneWrapper>
);
}
renderTemplateVariables(styles: EditorStyles) {
@ -433,25 +446,6 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
);
}
renderHorizontalSplit(uiState: PanelEditorUIState, styles: EditorStyles) {
return (
<SplitPaneWrapper
splitOrientation="horizontal"
maxSize={-200}
paneSize={uiState.topPaneSize}
primary="first"
secondaryPaneStyle={{ minHeight: 0 }}
onDragFinished={(size) => {
if (size) {
updatePanelEditorUIState({ topPaneSize: size / window.innerHeight });
}
}}
>
{this.renderPanelAndEditor(styles)}
</SplitPaneWrapper>
);
}
render() {
const { initDone, uiState, theme, sectionNav, pageNav, className, updatePanelEditorUIState } = this.props;
const styles = getStyles(theme, this.props);
@ -472,7 +466,7 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
<div className={styles.wrapper}>
<div className={styles.verticalSplitPanesWrapper}>
{!uiState.isPanelOptionsVisible ? (
this.renderHorizontalSplit(uiState, styles)
this.renderPanelAndEditor(uiState, styles)
) : (
<SplitPaneWrapper
splitOrientation="vertical"
@ -485,7 +479,7 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
}
}}
>
{this.renderHorizontalSplit(uiState, styles)}
{this.renderPanelAndEditor(uiState, styles)}
{this.renderOptionsPane()}
</SplitPaneWrapper>
)}
@ -569,6 +563,12 @@ export const getStyles = stylesFactory((theme: GrafanaTheme2, props: Props) => {
position: relative;
flex-direction: column;
`,
onlyPanel: css`
height: 100%;
position: absolute;
overflow: hidden;
width: 100%;
`,
};
});