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 { return {
singleLeftPane: css`
height: 100%;
position: absolute;
overflow: hidden;
width: 100%;
`,
resizerV: cx( resizerV: cx(
resizer, resizer,
css` css`

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

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