LogsPanel: Remove top margin (#69847)

* LogsPanel: Remove top margin

* Fixing
This commit is contained in:
Torkel Ödegaard
2023-06-09 14:22:35 +02:00
committed by GitHub
parent 3341229bc2
commit 38863844e7

View File

@ -1,4 +1,4 @@
import { css } from '@emotion/css'; import { css, cx } from '@emotion/css';
import React, { useCallback, useMemo, useRef, useLayoutEffect, useState } from 'react'; import React, { useCallback, useMemo, useRef, useLayoutEffect, useState } from 'react';
import { import {
@ -42,7 +42,7 @@ export const LogsPanel = ({
id, id,
}: LogsPanelProps) => { }: LogsPanelProps) => {
const isAscending = sortOrder === LogsSortOrder.Ascending; const isAscending = sortOrder === LogsSortOrder.Ascending;
const style = useStyles2(getStyles(title, isAscending)); const style = useStyles2(getStyles);
const [scrollTop, setScrollTop] = useState(0); const [scrollTop, setScrollTop] = useState(0);
const logsContainerRef = useRef<HTMLDivElement>(null); const logsContainerRef = useRef<HTMLDivElement>(null);
@ -95,7 +95,7 @@ export const LogsPanel = ({
} }
const renderCommonLabels = () => ( const renderCommonLabels = () => (
<div className={style.labelContainer}> <div className={cx(style.labelContainer, isAscending && style.labelContainerAscending)}>
<span className={style.label}>Common labels:</span> <span className={style.label}>Common labels:</span>
<LogLabels labels={commonLabels ? (commonLabels.value as Labels) : { labels: '(no common labels)' }} /> <LogLabels labels={commonLabels ? (commonLabels.value as Labels) : { labels: '(no common labels)' }} />
</div> </div>
@ -127,20 +127,21 @@ export const LogsPanel = ({
); );
}; };
const getStyles = (title: string, isAscending: boolean) => (theme: GrafanaTheme2) => ({ const getStyles = (theme: GrafanaTheme2) => ({
container: css` container: css({
margin-bottom: ${theme.spacing(1.5)}; marginBottom: theme.spacing(1.5),
//We can remove this hot-fix when we fix panel menu with no title overflowing top of all panels }),
margin-top: ${theme.spacing(!title ? 2.5 : 0)}; labelContainer: css({
`, margin: theme.spacing(0, 0, 0.5, 0.5),
labelContainer: css` display: 'flex',
margin: ${isAscending ? theme.spacing(0.5, 0, 0.5, 0) : theme.spacing(0, 0, 0.5, 0.5)}; alignItems: 'center',
display: flex; }),
align-items: center; labelContainerAscending: css({
`, margin: theme.spacing(0.5, 0, 0.5, 0),
label: css` }),
margin-right: ${theme.spacing(0.5)}; label: css({
font-size: ${theme.typography.bodySmall.fontSize}; marginRight: theme.spacing(0.5),
font-weight: ${theme.typography.fontWeightMedium}; fontSize: theme.typography.bodySmall.fontSize,
`, fontWeight: theme.typography.fontWeightMedium,
}),
}); });