Logs panel: Add paddings so first and last lines can be copied (#35410)

* Logs panel: Add paddings so all lines can be copied

* Update public/app/plugins/panel/logs/LogsPanel.tsx

Co-authored-by: Giordano Ricci <me@giordanoricci.com>

Co-authored-by: Giordano Ricci <me@giordanoricci.com>
This commit is contained in:
Ivana Huckova 2021-06-09 18:08:08 +02:00 committed by GitHub
parent 086309700e
commit 34f680a20d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -1,5 +1,6 @@
import React from 'react'; 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 { PanelProps, Field } from '@grafana/data';
import { Options } from './types'; import { Options } from './types';
import { dataFrameToLogsModel, dedupLogRows } from 'app/core/logs_model'; import { dataFrameToLogsModel, dedupLogRows } from 'app/core/logs_model';
@ -11,7 +12,9 @@ export const LogsPanel: React.FunctionComponent<LogsPanelProps> = ({
data, data,
timeZone, timeZone,
options: { showLabels, showTime, wrapLogMessage, sortOrder, dedupStrategy, enableLogDetails }, options: { showLabels, showTime, wrapLogMessage, sortOrder, dedupStrategy, enableLogDetails },
title,
}) => { }) => {
const theme = useTheme2();
if (!data) { if (!data) {
return ( return (
<div className="panel-empty"> <div className="panel-empty">
@ -20,6 +23,12 @@ export const LogsPanel: React.FunctionComponent<LogsPanelProps> = ({
); );
} }
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 newResults = data ? dataFrameToLogsModel(data.series, data.request?.intervalMs) : null;
const logRows = newResults?.rows || []; const logRows = newResults?.rows || [];
const deduplicatedRows = dedupLogRows(logRows, dedupStrategy); const deduplicatedRows = dedupLogRows(logRows, dedupStrategy);
@ -30,19 +39,21 @@ export const LogsPanel: React.FunctionComponent<LogsPanelProps> = ({
return ( return (
<CustomScrollbar autoHide> <CustomScrollbar autoHide>
<LogRows <div className={spacing}>
logRows={logRows} <LogRows
deduplicatedRows={deduplicatedRows} logRows={logRows}
dedupStrategy={dedupStrategy} deduplicatedRows={deduplicatedRows}
highlighterExpressions={[]} dedupStrategy={dedupStrategy}
showLabels={showLabels} highlighterExpressions={[]}
showTime={showTime} showLabels={showLabels}
wrapLogMessage={wrapLogMessage} showTime={showTime}
timeZone={timeZone} wrapLogMessage={wrapLogMessage}
getFieldLinks={getFieldLinks} timeZone={timeZone}
logsSortOrder={sortOrder} getFieldLinks={getFieldLinks}
enableLogDetails={enableLogDetails} logsSortOrder={sortOrder}
/> enableLogDetails={enableLogDetails}
/>
</div>
</CustomScrollbar> </CustomScrollbar>
); );
}; };