IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Fix scrolling, besides context (wip)

Browse Source
This commit is contained in:
Ivana 2020-05-18 19:30:50 +02:00
parent 1e74037eae
commit 8e11d89612
4 changed files with 15 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/grafana-ui/src/components/Logs/LogRowMessage.tsx
View File

@ -91,10 +91,6 @@ class UnThemedLogRowMessage extends PureComponent<Props> {
? cx([style.logsRowMatchHighLight, style.logsRowMatchHighLightPreview]) ? cx([style.logsRowMatchHighLight, style.logsRowMatchHighLightPreview])
: cx([style.logsRowMatchHighLight]); : cx([style.logsRowMatchHighLight]);
const styles = getStyles(theme); const styles = getStyles(theme);
const whiteSpacePreWrap = {
label: 'white-space-pre-wrap',
whiteSpace: 'pre-wrap',
};
return ( return (
<td className={style.logsRowMessage}> <td className={style.logsRowMessage}>
@ -116,7 +112,6 @@ class UnThemedLogRowMessage extends PureComponent<Props> {
<span className={cx(styles.positionRelative, { [styles.rowWithContext]: contextIsOpen })}> <span className={cx(styles.positionRelative, { [styles.rowWithContext]: contextIsOpen })}>
{needsHighlighter ? ( {needsHighlighter ? (
<Highlighter <Highlighter
style={whiteSpacePreWrap}
textToHighlight={entry} textToHighlight={entry}
searchWords={highlights} searchWords={highlights}
findChunks={findHighlightChunksInText} findChunks={findHighlightChunksInText}

8
packages/grafana-ui/src/components/Logs/LogRows.tsx
View File

@ -9,6 +9,7 @@ import { getLogRowStyles } from './getLogRowStyles';
//Components //Components
import { LogRow } from './LogRow'; import { LogRow } from './LogRow';
import { RowContextOptions } from './LogRowContextProvider'; import { RowContextOptions } from './LogRowContextProvider';
import { CustomScrollbar } from '../CustomScrollbar/CustomScrollbar';
export const PREVIEW_LIMIT = 100; export const PREVIEW_LIMIT = 100;
export const RENDER_LIMIT = 500; export const RENDER_LIMIT = 500;
@ -91,14 +92,13 @@ class UnThemedLogRows extends PureComponent<Props, State> {
getFieldLinks, getFieldLinks,
} = this.props; } = this.props;
const { renderAll } = this.state; const { renderAll } = this.state;
const { logsRowsTable, logsRowsHorizontalScroll } = getLogRowStyles(theme); const { logsRowsTable } = getLogRowStyles(theme);
const dedupedRows = deduplicatedRows ? deduplicatedRows : logRows; const dedupedRows = deduplicatedRows ? deduplicatedRows : logRows;
const hasData = logRows && logRows.length > 0; const hasData = logRows && logRows.length > 0;
const dedupCount = dedupedRows const dedupCount = dedupedRows
? dedupedRows.reduce((sum, row) => (row.duplicates ? sum + row.duplicates : sum), 0) ? dedupedRows.reduce((sum, row) => (row.duplicates ? sum + row.duplicates : sum), 0)
: 0; : 0;
const showDuplicates = dedupStrategy !== LogsDedupStrategy.none && dedupCount > 0; const showDuplicates = dedupStrategy !== LogsDedupStrategy.none && dedupCount > 0;
const horizontalScrollWindow = wrapLogMessage ? '' : logsRowsHorizontalScroll;
// Staged rendering // Staged rendering
const processedRows = dedupedRows ? dedupedRows : []; const processedRows = dedupedRows ? dedupedRows : [];
@ -111,7 +111,7 @@ class UnThemedLogRows extends PureComponent<Props, State> {
const getRowContext = this.props.getRowContext ? this.props.getRowContext : () => Promise.resolve([]); const getRowContext = this.props.getRowContext ? this.props.getRowContext : () => Promise.resolve([]);
return ( return (
<div className={horizontalScrollWindow}> <CustomScrollbar autoHide>
<table className={logsRowsTable}> <table className={logsRowsTable}>
<tbody> <tbody>
{hasData && {hasData &&
@ -161,7 +161,7 @@ class UnThemedLogRows extends PureComponent<Props, State> {
)} )}
</tbody> </tbody>
</table> </table>
</div> </CustomScrollbar>
); );
} }
} }

4
packages/grafana-ui/src/components/Logs/getLogRowStyles.ts
View File

@ -59,10 +59,6 @@ export const getLogRowStyles = stylesFactory((theme: GrafanaTheme, logLevel?: Lo
font-size: ${theme.typography.size.sm}; font-size: ${theme.typography.size.sm};
width: 100%; width: 100%;
`, `,
logsRowsHorizontalScroll: css`
label: logs-rows__horizontal-scroll;
overflow: scroll;
`,
context: context, context: context,
logsRow: css` logsRow: css`
label: logs-row; label: logs-row;

24
public/app/plugins/panel/logs/LogsPanel.tsx
View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import { LogRows, CustomScrollbar } from '@grafana/ui'; import { LogRows } from '@grafana/ui';
import { LogsDedupStrategy, PanelProps } from '@grafana/data'; import { LogsDedupStrategy, PanelProps } from '@grafana/data';
import { Options } from './types'; import { Options } from './types';
import { dataFrameToLogsModel } from 'app/core/logs_model'; import { dataFrameToLogsModel } from 'app/core/logs_model';
@ -25,17 +25,15 @@ export const LogsPanel: React.FunctionComponent<LogsPanelProps> = ({
const sortedNewResults = sortLogsResult(newResults, sortOrder); const sortedNewResults = sortLogsResult(newResults, sortOrder);
return ( return (
<CustomScrollbar autoHide> <LogRows
<LogRows logRows={sortedNewResults.rows}
logRows={sortedNewResults.rows} dedupStrategy={LogsDedupStrategy.none}
dedupStrategy={LogsDedupStrategy.none} highlighterExpressions={[]}
highlighterExpressions={[]} showLabels={showLabels}
showLabels={showLabels} showTime={showTime}
showTime={showTime} wrapLogMessage={wrapLogMessage}
wrapLogMessage={wrapLogMessage} timeZone={timeZone}
timeZone={timeZone} allowDetails={true}
allowDetails={true} />
/>
</CustomScrollbar>
); );
}; };