LogsPanel: Fix scrollbar (#24850)

* Fix scrolling, besides context (wip)

* Remove autoHide

* Revert "Remove autoHide"

This reverts commit 3572718cabeeb29f007497a8f3a90639985c185f.

* Revert "Fix scrolling, besides context (wip)"

This reverts commit 8e11d8961248a207fc072a34879738956ceefcd4.

* Fix scrolling in Logs Panel

* Rename passed prop to disableCustomHorizontalScroll

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

@@ -26,6 +26,9 @@ export interface Props extends Themeable {
   rowLimit?: number;
   rowLimit?: number;
   allowDetails?: boolean;
   allowDetails?: boolean;
   previewLimit?: number;
   previewLimit?: number;
+  // Passed to fix problems with inactive scrolling in Logs Panel
+  // Can be removed when we unify scrolling for Panel and Explore
+  disableCustomHorizontalScroll?: boolean;
   onClickFilterLabel?: (key: string, value: string) => void;
   onClickFilterLabel?: (key: string, value: string) => void;
   onClickFilterOutLabel?: (key: string, value: string) => void;
   onClickFilterOutLabel?: (key: string, value: string) => void;
   getRowContext?: (row: LogRowModel, options?: RowContextOptions) => Promise<any>;
   getRowContext?: (row: LogRowModel, options?: RowContextOptions) => Promise<any>;
@@ -89,6 +92,7 @@ class UnThemedLogRows extends PureComponent<Props, State> {
       allowDetails,
       allowDetails,
       previewLimit,
       previewLimit,
       getFieldLinks,
       getFieldLinks,
+      disableCustomHorizontalScroll,
     } = this.props;
     } = this.props;
     const { renderAll } = this.state;
     const { renderAll } = this.state;
     const { logsRowsTable, logsRowsHorizontalScroll } = getLogRowStyles(theme);
     const { logsRowsTable, logsRowsHorizontalScroll } = getLogRowStyles(theme);
@@ -98,7 +102,10 @@ class UnThemedLogRows extends PureComponent<Props, State> {
       ? 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;
+
+    // For horizontal scrolling we can't use CustomScrollbar as it causes the problem with logs context - it is not visible
+    // for top log rows. Therefore we use CustomScrollbar only in LogsPanel and for Explore, we use custom css styling.
+    const horizontalScrollWindow = wrapLogMessage && !disableCustomHorizontalScroll ? '' : logsRowsHorizontalScroll;
 
 
     // Staged rendering
     // Staged rendering
     const processedRows = dedupedRows ? dedupedRows : [];
     const processedRows = dedupedRows ? dedupedRows : [];

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

@@ -35,6 +35,7 @@ export const LogsPanel: React.FunctionComponent<LogsPanelProps> = ({
         wrapLogMessage={wrapLogMessage}
         wrapLogMessage={wrapLogMessage}
         timeZone={timeZone}
         timeZone={timeZone}
         allowDetails={true}
         allowDetails={true}
+        disableCustomHorizontalScroll={true}
       />
       />
     </CustomScrollbar>
     </CustomScrollbar>
   );
   );