Merge pull request #3773 from influxdata/fix/logs-scrolling

Fix/logs scrolling

ui/src/logs/components/LogsTable.tsx

@@ -299,14 +299,15 @@ class LogsTable extends Component<Props, State> {
 
   private handleScroll = scrollInfo => {
     const {scrollLeft, scrollTop} = scrollInfo
+    const previousScrolltop = this.state.scrollTop
+
+    this.setState({scrollLeft, scrollTop})
 
     if (scrollTop === 0) {
       this.props.onScrolledToTop()
-    } else if (scrollTop !== this.state.scrollTop) {
+    } else if (scrollTop !== previousScrolltop) {
       this.props.onScrollVertical()
     }
-
-    this.setState({scrollLeft, scrollTop})
   }
 
   private headerRenderer = ({key, style, columnIndex}) => {
@@ -346,7 +347,7 @@ class LogsTable extends Component<Props, State> {
           className={classnames('logs-viewer--cell', {
             highlight: highlightRow,
           })}
-          title={`Filter by "${formattedValue}"`}
+          title={`Filter by '${formattedValue}'`}
           style={{...style, padding: '5px'}}
           key={key}
           data-index={rowIndex}

ui/src/logs/utils/table.ts

@@ -32,11 +32,15 @@ export const formatColumnValue = (
     case 'timestamp':
       return moment(+value / 1000000).format('YYYY/MM/DD HH:mm:ss')
     case 'message':
-      if (value.indexOf(' ') > charLimit - 5) {
-        return _.truncate(value, {length: charLimit - 5}).replace('\\n', '')
-      } else {
-        return value.replace('\\n', '')
+      if (value) {
+        if (value.indexOf(' ') > charLimit - 5) {
+          return _.truncate(value, {length: charLimit - 5}).replace('\\n', '')
+        } else {
+          return value.replace('\\n', '')
+        }
       }
+      return ''
+
     default:
       return value
   }