Fix scrolling, besides context (wip)

packages/grafana-ui/src/components/Logs/LogRowMessage.tsx

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

packages/grafana-ui/src/components/Logs/LogRows.tsx

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

packages/grafana-ui/src/components/Logs/getLogRowStyles.ts

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

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

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