Fix logs scrollbar (#4640)

fix(logs/scroll): fix the horizontal scroll bar

* Update grid to have minWidth
* Fix logs scrollbar position
* Clean up unnecessary handlers
* Update 1.7.0 changelog

Co-authored-by: Alex P <thealexpaxton@gmail.com>

CHANGELOG.md

@@ -60,6 +60,7 @@
 1.  [#4605](https://github.com/influxdata/chronograf/pull/4605): Fix vertical stuck vertical scroll in firefox
 1.  [#4612](https://github.com/influxdata/chronograf/pull/4612): Fix issue with disappearing alias'
 1.  [#4621](https://github.com/influxdata/chronograf/pull/4621): Fix log viewer message expansion
+1.  [#4640](https://github.com/influxdata/chronograf/pull/4640): Fix missing horizontal scrollbar
 
 ## v1.6.2 [2018-09-06]
 

ui/src/logs/components/LogsTable.tsx

@@ -25,6 +25,7 @@ import {
   getColumnWidth,
   getMessageWidth,
   getColumnsFromData,
+  getMinTableWidth,
 } from 'src/logs/utils/table'
 import {
   getValidMessageFilters,
@@ -227,11 +228,10 @@ class LogsTable extends Component<Props, State> {
               rowCount={1}
               width={width}
               scrollLeft={this.state.scrollLeft}
-              onScroll={this.handleHeaderScroll}
               cellRenderer={this.headerRenderer}
               columnCount={columnCount}
               columnWidth={this.getColumnWidth}
-              style={{overflowX: 'hidden'}}
+              style={{overflow: 'hidden'}}
             />
           )}
         </AutoSizer>
@@ -246,7 +246,7 @@ class LogsTable extends Component<Props, State> {
                 <FancyScrollbar
                   style={{
                     width,
-                    height,
+                    height: height - ROW_HEIGHT,
                     marginTop: `${ROW_HEIGHT}px`,
                   }}
                   setScrollTop={this.handleScrollbarScroll}
@@ -255,7 +255,7 @@ class LogsTable extends Component<Props, State> {
                 >
                   <Grid
                     {...this.gridProperties(
-                      width,
+                      Math.max(this.minTableWidth, width),
                       height,
                       onRowsRendered,
                       columnCount,
@@ -263,7 +263,7 @@ class LogsTable extends Component<Props, State> {
                     )}
                     style={{
                       height: this.calculateTotalHeight(),
-                      overflowY: 'hidden',
+                      overflow: 'hidden',
                     }}
                   />
                 </FancyScrollbar>
@@ -284,7 +284,7 @@ class LogsTable extends Component<Props, State> {
     registerChild: (g: Grid) => void
   ) => {
     const {scrollToRow} = this.props
-    const {scrollLeft, scrollTop} = this.state
+    const {scrollTop, scrollLeft} = this.state
 
     let rowHeight: number | RowHeightHandler = ROW_HEIGHT
 
@@ -324,10 +324,11 @@ class LogsTable extends Component<Props, State> {
   private handleScrollbarScroll = (e: MouseEvent<JSX.Element>): void => {
     e.stopPropagation()
     e.preventDefault()
-    const {scrollTop} = e.target as HTMLElement
+    const {scrollTop, scrollLeft} = e.target as HTMLElement
 
     this.handleScroll({
       scrollTop,
+      scrollLeft,
     })
   }
 
@@ -414,9 +415,6 @@ class LogsTable extends Component<Props, State> {
     })
   }
 
-  private handleHeaderScroll = ({scrollLeft}): void =>
-    this.setState({scrollLeft})
-
   private getColumnWidth = ({index}: {index: number}): number => {
     const {severityFormat} = this.props
     const column = getColumnFromData(this.props.data, index)
@@ -713,6 +711,14 @@ class LogsTable extends Component<Props, State> {
       </div>
     )
   }
+
+  private get minTableWidth(): number {
+    return getMinTableWidth(
+      this.props.data,
+      this.props.tableColumns,
+      this.props.severityFormat
+    )
+  }
 }
 
 export default LogsTable

ui/src/logs/utils/table.ts

@@ -110,13 +110,14 @@ export const calculateMessageHeight = (
   return Math.max(lines, 1) * ROW_HEIGHT + 2
 }
 
-export const getMessageWidth = (
+export const getFixedColumnsTotalWidth = (
   data: TableData,
   tableColumns: LogsTableColumn[],
   severityFormat: SeverityFormat
 ): number => {
   const columns = getColumnsFromData(data)
-  const otherWidth = columns.reduce((acc, col) => {
+
+  return columns.reduce((acc, col) => {
     const colConfig = tableColumns.find(c => c.internalName === col)
     const isColVisible = colConfig && colConfig.visible
     if (col === 'message' || col === 'time' || !isColVisible) {
@@ -130,15 +131,42 @@ export const getMessageWidth = (
 
     return acc + getColumnWidth(columnName)
   }, 0)
+}
+
+export const getMessageWidth = (
+  data: TableData,
+  tableColumns: LogsTableColumn[],
+  severityFormat: SeverityFormat
+): number => {
+  const otherColumnsWidth = getFixedColumnsTotalWidth(
+    data,
+    tableColumns,
+    severityFormat
+  )
 
   const calculatedWidth = Math.max(
-    window.innerWidth - (otherWidth + 180),
+    window.innerWidth - (otherColumnsWidth + 180),
     100 * CHAR_WIDTH
   )
 
   return calculatedWidth - CHAR_WIDTH
 }
 
+const MIN_MESSAGE_WIDTH = 99 * CHAR_WIDTH
+export const getMinTableWidth = (
+  data: TableData,
+  tableColumns: LogsTableColumn[],
+  severityFormat: SeverityFormat
+): number => {
+  const otherColumnsWidth = getFixedColumnsTotalWidth(
+    data,
+    tableColumns,
+    severityFormat
+  )
+
+  return MIN_MESSAGE_WIDTH + otherColumnsWidth
+}
+
 export const applyChangesToTableData = (
   tableData: TableData,
   tableColumns: LogsTableColumn[]

ui/src/shared/components/FancyScrollbar.tsx

@@ -87,6 +87,7 @@ class FancyScrollbar extends Component<Props & Partial<DefaultProps>> {
         renderThumbHorizontal={this.handleMakeDiv('thumb-h')}
         renderThumbVertical={this.handleMakeDiv('thumb-v')}
         renderView={this.handleMakeDiv('view')}
+        thumbMinSize={30}
       >
         {children}
       </Scrollbars>