Explore: Fix 100% height of graph and table panel (#23101)

* Fix 100% height styles

* Move utility class to component styles
This commit is contained in:
Andrej Ocenas 2020-03-26 13:24:58 +01:00 committed by GitHub
parent e5f4ac8ca0
commit 4c5005e575
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -66,6 +66,7 @@ const getStyles = stylesFactory(() => {
label: logsMain; label: logsMain;
// Is needed for some transition animations to work. // Is needed for some transition animations to work.
position: relative; position: relative;
margin-top: 21px;
`, `,
button: css` button: css`
margin: 1em 4px 0 0; margin: 1em 4px 0 0;
@ -347,7 +348,15 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
} }
return ( return (
<main className={cx('m-t-2', styles.logsMain, styles.fullHeight)} style={{ width }}> <main
className={cx(
styles.logsMain,
// We need height to be 100% for tracing iframe to look good but in case of metrics mode
// it makes graph and table also full page high when they do not need to be.
mode === ExploreMode.Tracing && styles.fullHeight
)}
style={{ width }}
>
<ErrorBoundaryAlert> <ErrorBoundaryAlert>
{showStartPage && StartPage && ( {showStartPage && StartPage && (
<div className={'grafana-info-box grafana-info-box--max-lg'}> <div className={'grafana-info-box grafana-info-box--max-lg'}>