diff --git a/public/app/plugins/panel/logs/LogsPanel.tsx b/public/app/plugins/panel/logs/LogsPanel.tsx index e8f3dd04299..38d73afd9b7 100644 --- a/public/app/plugins/panel/logs/LogsPanel.tsx +++ b/public/app/plugins/panel/logs/LogsPanel.tsx @@ -1,5 +1,6 @@ import React from 'react'; -import { LogRows, CustomScrollbar } from '@grafana/ui'; +import { css } from '@emotion/css'; +import { LogRows, CustomScrollbar, useTheme2 } from '@grafana/ui'; import { PanelProps, Field } from '@grafana/data'; import { Options } from './types'; import { dataFrameToLogsModel, dedupLogRows } from 'app/core/logs_model'; @@ -11,7 +12,9 @@ export const LogsPanel: React.FunctionComponent = ({ data, timeZone, options: { showLabels, showTime, wrapLogMessage, sortOrder, dedupStrategy, enableLogDetails }, + title, }) => { + const theme = useTheme2(); if (!data) { return (
@@ -20,6 +23,12 @@ export const LogsPanel: React.FunctionComponent = ({ ); } + const spacing = 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)}; + `; + const newResults = data ? dataFrameToLogsModel(data.series, data.request?.intervalMs) : null; const logRows = newResults?.rows || []; const deduplicatedRows = dedupLogRows(logRows, dedupStrategy); @@ -30,19 +39,21 @@ export const LogsPanel: React.FunctionComponent = ({ return ( - +
+ +
); };