Merge pull request #3923 from influxdata/log-viewer/fix-upper-fetch

Fetch more when scrolling

ui/src/logs/actions/index.ts

@@ -32,7 +32,7 @@ import {
   TimeMarker,
 } from 'src/types/logs'
 
-export const INITIAL_LIMIT = 100
+export const INITIAL_LIMIT = 1000
 
 const defaultTableData: TableData = {
   columns: [

ui/src/logs/components/LogsTable.tsx

@@ -157,8 +157,6 @@ class LogsTable extends Component<Props, State> {
       isMessageVisible,
       visibleColumnsCount,
     }
-
-    this.loadMoreAboveRows = _.throttle(this.loadMoreAboveRows, 50)
   }
 
   public componentDidUpdate() {
@@ -314,7 +312,7 @@ class LogsTable extends Component<Props, State> {
 
       this.setState({scrollTop})
 
-      if (scrollTop < 200 && scrollTop < previousTop) {
+      if (scrollTop < 200 && scrollTop <= previousTop) {
         this.loadMoreAboveRows()
       }
 

ui/src/logs/containers/LogsPage.tsx

@@ -156,8 +156,10 @@ class LogsPage extends Component<Props, State> {
       this.fetchNewDataset()
     }
 
+    if (getDeep<string>(this.props, 'timeRange.timeOption', '') === 'now') {
       this.startUpdating()
     }
+  }
 
   public componentWillUnmount() {
     clearInterval(this.interval)
@@ -236,7 +238,12 @@ class LogsPage extends Component<Props, State> {
 
   private handleChooseCustomTime = async (time: string) => {
     this.props.setTableCustomTime(time)
-    this.setState({hasScrolled: false})
+    const liveUpdating = LiveUpdating.Pause
+
+    this.setState({
+      hasScrolled: false,
+      liveUpdating,
+    })
 
     await this.props.setTimeMarker({
       timeOption: time,
@@ -255,10 +262,13 @@ class LogsPage extends Component<Props, State> {
         .toISOString(),
     }
 
+    let liveUpdating = LiveUpdating.Pause
     if (time === 0) {
       timeOption = {timeOption: 'now'}
+      liveUpdating = LiveUpdating.Play
     }
 
+    this.setState({liveUpdating})
     await this.props.setTimeMarker(timeOption)
     this.handleSetTimeBounds()
   }
@@ -561,7 +571,6 @@ class LogsPage extends Component<Props, State> {
   }
 
   private fetchNewDataset() {
-    this.setState({liveUpdating: LiveUpdating.Play})
     this.props.executeQueriesAsync()
   }