Add scrollbars to raw flux data table (#4650)

feat(de/flux):  add raw response table scrollbars

ui/src/dashboards/containers/DashboardPage.tsx

@@ -528,7 +528,7 @@ class DashboardPage extends Component<Props, State> {
     })
   }
 
-  private setScrollTop = (e: MouseEvent<JSX.Element>): void => {
+  private setScrollTop = (e: MouseEvent<HTMLElement>): void => {
     const target = e.target as HTMLElement
 
     this.setState({scrollTop: target.scrollTop})

ui/src/logs/components/LogsTable.tsx

@@ -315,7 +315,7 @@ class LogsTable extends Component<Props, State> {
     this.handleScroll({scrollLeft})
   }
 
-  private handleScrollbarScroll = (e: MouseEvent<JSX.Element>): void => {
+  private handleScrollbarScroll = (e: MouseEvent<HTMLElement>): void => {
     e.stopPropagation()
     e.preventDefault()
     const {scrollTop, scrollLeft} = e.target as HTMLElement

ui/src/shared/components/FancyScrollbar.tsx

@@ -8,7 +8,7 @@ interface DefaultProps {
   autoHide: boolean
   autoHeight: boolean
   maxHeight: number
-  setScrollTop: (value: React.MouseEvent<JSX.Element>) => void
+  setScrollTop: (value: React.MouseEvent<HTMLElement>) => void
   style: React.CSSProperties
 }
 

ui/src/shared/components/MultiGrid/MultiGrid.tsx

@@ -256,7 +256,7 @@ class MultiGrid extends React.PureComponent<PropsMultiGrid, State> {
     return this.topGridHeight
   }
 
-  private onScrollbarsScroll = (e: React.MouseEvent<JSX.Element>) => {
+  private onScrollbarsScroll = (e: React.MouseEvent<HTMLElement>) => {
     const {scrollTop} = e.target as HTMLElement
     const {scrollLeft} = this.state
 

ui/src/shared/components/TimeMachine/RawFluxDataTable.tsx

@@ -1,6 +1,8 @@
-import React, {PureComponent} from 'react'
+import React, {PureComponent, MouseEvent, CSSProperties} from 'react'
 import {AutoSizer, Grid} from 'react-virtualized'
 
+import FancyScrollbar from 'src/shared/components/FancyScrollbar'
+
 import {parseResponseRaw} from 'src/shared/parsing/flux/response'
 
 interface Props {
@@ -15,6 +17,8 @@ interface Props {
 interface State {
   data: string[][]
   maxColumnCount: number
+  scrollLeft: number
+  scrollTop: number
 }
 
 const ROW_HEIGHT = 30
@@ -32,11 +36,11 @@ class RawFluxDataTable extends PureComponent<Props, State> {
     return {data, maxColumnCount}
   }
 
-  public state = {data: [], maxColumnCount: 0}
+  public state = {data: [], maxColumnCount: 0, scrollLeft: 0, scrollTop: 0}
 
   public render() {
     const {width, height} = this.props
-    const {data, maxColumnCount} = this.state
+    const {scrollTop, scrollLeft} = this.state
 
     return (
       <div className="raw-flux-data-table">
@@ -44,21 +48,26 @@ class RawFluxDataTable extends PureComponent<Props, State> {
           {({width: autoWidth, height: autoHeight}) => {
             const resolvedWidth = width ? width : autoWidth
             const resolvedHeight = height ? height : autoHeight
-            const columnWidth = Math.max(
-              MIN_COLUMN_WIDTH,
-              resolvedWidth / maxColumnCount
-            )
 
             return (
-              <Grid
-                width={resolvedWidth}
-                height={resolvedHeight}
-                cellRenderer={this.renderCell}
-                columnCount={maxColumnCount}
-                rowCount={data.length}
-                rowHeight={ROW_HEIGHT}
-                columnWidth={columnWidth}
-              />
+              <FancyScrollbar
+                style={{
+                  overflowY: 'hidden',
+                  width: resolvedWidth,
+                  height: resolvedHeight,
+                }}
+                autoHide={false}
+                scrollTop={scrollTop}
+                scrollLeft={scrollLeft}
+                setScrollTop={this.onScrollbarsScroll}
+              >
+                {this.renderGrid(
+                  resolvedWidth,
+                  resolvedHeight,
+                  scrollLeft,
+                  scrollTop
+                )}
+              </FancyScrollbar>
             )
           }}
         </AutoSizer>
@@ -66,6 +75,50 @@ class RawFluxDataTable extends PureComponent<Props, State> {
     )
   }
 
+  private renderGrid(
+    width: number,
+    height: number,
+    scrollLeft: number,
+    scrollTop: number
+  ): JSX.Element {
+    const {maxColumnCount, data} = this.state
+    const rowCount = data.length
+    const columnWidth = Math.max(MIN_COLUMN_WIDTH, width / maxColumnCount)
+    const style = this.gridStyle(columnWidth, rowCount)
+
+    return (
+      <Grid
+        width={width}
+        height={height}
+        cellRenderer={this.renderCell}
+        columnCount={maxColumnCount}
+        rowCount={rowCount}
+        rowHeight={ROW_HEIGHT}
+        columnWidth={columnWidth}
+        scrollLeft={scrollLeft}
+        scrollTop={scrollTop}
+        style={style}
+      />
+    )
+  }
+
+  private gridStyle(columnWidth: number, rowCount: number): CSSProperties {
+    const {maxColumnCount} = this.state
+    const width = columnWidth * maxColumnCount
+    const height = ROW_HEIGHT * rowCount
+
+    return {width, height}
+  }
+
+  private onScrollbarsScroll = (e: MouseEvent<HTMLElement>) => {
+    e.preventDefault()
+    e.stopPropagation()
+
+    const {scrollTop, scrollLeft} = e.currentTarget
+
+    this.setState({scrollLeft, scrollTop})
+  }
+
   private renderCell = ({columnIndex, key, rowIndex, style}) => {
     const datum = this.state.data[rowIndex][columnIndex]