Explore: Fix height on horizontal drawer and query inspector (#47832)

* Move tab height and horizontal drawer height to themable variables so they can be referred to. Add a default height to tabbed container so it can set an explicit height. Add overflow: scroll to inspector content

* Use height variable that changes on resize

* Use css to set height
This commit is contained in:
Kristina 2022-04-25 07:48:55 -05:00 committed by GitHub
parent 9829195829
commit b30d9f2732
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 23 additions and 8 deletions

View File

@ -39,6 +39,12 @@ export interface ThemeComponents {
sidemenu: {
width: number;
};
menuTabs: {
height: number;
};
horizontalDrawer: {
defaultHeight: number;
};
}
export function createComponents(colors: ThemeColors, shadows: ThemeShadows): ThemeComponents {
@ -82,5 +88,11 @@ export function createComponents(colors: ThemeColors, shadows: ThemeShadows): Th
sidemenu: {
width: 48,
},
menuTabs: {
height: 41,
},
horizontalDrawer: {
defaultHeight: 400,
},
};
}

View File

@ -28,7 +28,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme2) => {
tabContent: css`
padding: ${theme.spacing(2)};
background-color: ${theme.colors.background.primary};
height: 100%;
height: calc(100% - ${theme.components.menuTabs.height}px);
`,
close: css`
position: absolute;

View File

@ -23,7 +23,7 @@ const getTabsBarStyles = stylesFactory((theme: GrafanaTheme2, hideBorder = false
tabs: css`
position: relative;
display: flex;
height: 41px;
height: ${theme.components.menuTabs.height}px;
`,
};
});

View File

@ -9,9 +9,9 @@ import { stylesFactory, useTheme2 } from '@grafana/ui';
// Types
const drawerSlide = keyframes`
const drawerSlide = (theme: GrafanaTheme2) => keyframes`
0% {
transform: translateY(400px);
transform: translateY(${theme.components.horizontalDrawer.defaultHeight}px);
}
100% {
@ -32,7 +32,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme2) => {
`,
drawerActive: css`
opacity: 1;
animation: 0.5s ease-out ${drawerSlide};
animation: 0.5s ease-out ${drawerSlide(theme)};
`,
rzHandle: css`
background: ${theme.colors.secondary.main};
@ -66,7 +66,7 @@ export function ExploreDrawer(props: Props) {
return (
<Resizable
className={cx(styles.container, styles.drawerActive)}
defaultSize={{ width: drawerWidth, height: '400px' }}
defaultSize={{ width: drawerWidth, height: `${theme.components.horizontalDrawer.defaultHeight}px` }}
handleClasses={{ top: styles.rzHandle }}
enable={{
top: true,

View File

@ -73,7 +73,7 @@ export function ExploreQueryInspector(props: Props) {
tabs.push(errorTab);
}
return (
<ExploreDrawer width={width} onResize={() => {}}>
<ExploreDrawer width={width}>
<TabbedContainer tabs={tabs} onClose={onClose} closeIconTooltip="Close query inspector" />
</ExploreDrawer>
);

View File

@ -1,6 +1,7 @@
// Libraries
import React, { useEffect, useState } from 'react';
import { connect, ConnectedProps } from 'react-redux';
import { useTheme2 } from '@grafana/ui';
// Types
import { ExploreItemState, StoreState } from 'app/types';
@ -54,7 +55,8 @@ interface OwnProps {
export type Props = ConnectedProps<typeof connector> & OwnProps;
export function RichHistoryContainer(props: Props) {
const [height, setHeight] = useState(400);
const theme = useTheme2();
const [height, setHeight] = useState(theme.components.horizontalDrawer.defaultHeight);
const {
richHistory,

View File

@ -26,6 +26,7 @@ export const getPanelInspectorStyles = stylesFactory(() => {
content: css`
flex-grow: 1;
height: 100%;
overflow: scroll;
`,
editor: css`
font-family: monospace;