Logs: Fix height of logs component when used with topnav (#60669)

fix height for topNav
This commit is contained in:
Sven Grossmann 2022-12-22 14:43:02 +01:00 committed by GitHub
parent 22ad487c4b
commit 01c4783c0b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -1,10 +1,11 @@
import { css } from '@emotion/css'; import { css } from '@emotion/css';
import { isEqual } from 'lodash'; import { isEqual } from 'lodash';
import React, { memo, useState, useEffect, useRef } from 'react'; import React, { memo, useEffect, useRef, useState } from 'react';
import { LogsSortOrder, AbsoluteTimeRange, TimeZone, DataQuery, GrafanaTheme2 } from '@grafana/data'; import { AbsoluteTimeRange, DataQuery, GrafanaTheme2, LogsSortOrder, TimeZone } from '@grafana/data';
import { reportInteraction } from '@grafana/runtime'; import { reportInteraction } from '@grafana/runtime';
import { Button, Icon, Spinner, useTheme2 } from '@grafana/ui'; import { Button, Icon, Spinner, useTheme2 } from '@grafana/ui';
import { TOP_BAR_LEVEL_HEIGHT } from 'app/core/components/AppChrome/types';
import { LogsNavigationPages } from './LogsNavigationPages'; import { LogsNavigationPages } from './LogsNavigationPages';
@ -188,9 +189,12 @@ function LogsNavigation({
export default memo(LogsNavigation); export default memo(LogsNavigation);
const getStyles = (theme: GrafanaTheme2, oldestLogsFirst: boolean, loading: boolean) => { const getStyles = (theme: GrafanaTheme2, oldestLogsFirst: boolean, loading: boolean) => {
const navContainerHeight = theme.flags.topnav
? `calc(100vh - 2*${theme.spacing(2)} - 2*${TOP_BAR_LEVEL_HEIGHT}px)`
: '95vh';
return { return {
navContainer: css` navContainer: css`
max-height: 95vh; max-height: ${navContainerHeight};
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: ${oldestLogsFirst ? 'flex-start' : 'space-between'}; justify-content: ${oldestLogsFirst ? 'flex-start' : 'space-between'};