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

Explore: Fixes explore page height and margin issues (#59865)

Browse Source
This commit is contained in:
Torkel Ödegaard 2022-12-13 08:22:33 +01:00 committed by GitHub
parent ef46761b9a
commit ac19b920f1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 28 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/app/features/explore/ExplorePaneContainer.tsx
View File

@ -37,7 +37,7 @@ const getStyles = (theme: GrafanaTheme2) => {
display: flex; display: flex;
flex: 1 1 auto; flex: 1 1 auto;
flex-direction: column; flex-direction: column;
overflow: scroll; overflow: hidden;
min-width: 600px; min-width: 600px;
& + & { & + & {
border-left: 1px dotted ${theme.colors.border.medium}; border-left: 1px dotted ${theme.colors.border.medium};

57
public/app/features/explore/Wrapper.tsx
View File

@ -26,10 +26,8 @@ const styles = {
width: 100%; width: 100%;
flex-grow: 1; flex-grow: 1;
min-height: 0; min-height: 0;
`,
exploreWrapper: css`
display: flex;
height: 100%; height: 100%;
position: relative;
`, `,
}; };
@ -135,35 +133,34 @@ function Wrapper(props: GrafanaRouteComponentProps<{}, ExploreQueryParams>) {
return ( return (
<div className={styles.pageScrollbarWrapper}> <div className={styles.pageScrollbarWrapper}>
<ExploreActions exploreIdLeft={ExploreId.left} exploreIdRight={ExploreId.right} /> <ExploreActions exploreIdLeft={ExploreId.left} exploreIdRight={ExploreId.right} />
<div className={styles.exploreWrapper}>
<SplitPaneWrapper <SplitPaneWrapper
splitOrientation="vertical" splitOrientation="vertical"
paneSize={widthCalc} paneSize={widthCalc}
minSize={minWidth} minSize={minWidth}
maxSize={minWidth * -1} maxSize={minWidth * -1}
primary="second" primary="second"
splitVisible={hasSplit} splitVisible={hasSplit}
paneStyle={{ overflow: 'auto', display: 'flex', flexDirection: 'column', overflowY: 'scroll' }} paneStyle={{ overflow: 'auto', display: 'flex', flexDirection: 'column', overflowY: 'scroll' }}
onDragFinished={(size) => { onDragFinished={(size) => {
if (size) { if (size) {
updateSplitSize(size); updateSplitSize(size);
} }
}} }}
> >
<ErrorBoundaryAlert style="page">
<ExplorePaneContainer exploreId={ExploreId.left} urlQuery={queryParams.left} eventBus={eventBus.current} />
</ErrorBoundaryAlert>
{hasSplit && (
<ErrorBoundaryAlert style="page"> <ErrorBoundaryAlert style="page">
<ExplorePaneContainer exploreId={ExploreId.left} urlQuery={queryParams.left} eventBus={eventBus.current} /> <ExplorePaneContainer
exploreId={ExploreId.right}
urlQuery={queryParams.right}
eventBus={eventBus.current}
/>
</ErrorBoundaryAlert> </ErrorBoundaryAlert>
{hasSplit && ( )}
<ErrorBoundaryAlert style="page"> </SplitPaneWrapper>
<ExplorePaneContainer
exploreId={ExploreId.right}
urlQuery={queryParams.right}
eventBus={eventBus.current}
/>
</ErrorBoundaryAlert>
)}
</SplitPaneWrapper>
</div>
</div> </div>
); );
} }