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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

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 {
@ -42,7 +42,7 @@ export const LogsPanel = ({
id,
}: LogsPanelProps) => {
const isAscending = sortOrder === LogsSortOrder.Ascending;
const style = useStyles2(getStyles(title, isAscending));
const style = useStyles2(getStyles);
const [scrollTop, setScrollTop] = useState(0);
const logsContainerRef = useRef<HTMLDivElement>(null);
@ -95,7 +95,7 @@ export const LogsPanel = ({
}
const renderCommonLabels = () => (
<div className={style.labelContainer}>
<div className={cx(style.labelContainer, isAscending && style.labelContainerAscending)}>
<span className={style.label}>Common labels:</span>
<LogLabels labels={commonLabels ? (commonLabels.value as Labels) : { labels: '(no common labels)' }} />
</div>
@ -127,20 +127,21 @@ export const LogsPanel = ({
);
};
const getStyles = (title: string, isAscending: boolean) => (theme: GrafanaTheme2) => ({
container: css`
margin-bottom: ${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: ${isAscending ? theme.spacing(0.5, 0, 0.5, 0) : theme.spacing(0, 0, 0.5, 0.5)};
display: flex;
align-items: center;
`,
label: css`
margin-right: ${theme.spacing(0.5)};
font-size: ${theme.typography.bodySmall.fontSize};
font-weight: ${theme.typography.fontWeightMedium};
`,
const getStyles = (theme: GrafanaTheme2) => ({
container: css({
marginBottom: theme.spacing(1.5),
}),
labelContainer: css({
margin: theme.spacing(0, 0, 0.5, 0.5),
display: 'flex',
alignItems: 'center',
}),
labelContainerAscending: css({
margin: theme.spacing(0.5, 0, 0.5, 0),
}),
label: css({
marginRight: theme.spacing(0.5),
fontSize: theme.typography.bodySmall.fontSize,
fontWeight: theme.typography.fontWeightMedium,
}),
});