Fix logs search race (#4599)

fix(logs/search): Search update race condition

CHANGELOG.md

@@ -56,6 +56,7 @@
 1.  [#4408](https://github.com/influxdata/chronograf/pull/4408): Render null data point values in Alerts Table as mdashes
 1.  [#4466](https://github.com/influxdata/chronograf/pull/4466): Maintain focus on Flux Editor text area when adding nodes via code
 1.  [#4479](https://github.com/influxdata/chronograf/pull/4479): Add validation to Alert Rule messages
+1.  [#4599](https://github.com/influxdata/chronograf/pull/4599): Fix search results updating race condition
 
 ## v1.6.2 [2018-09-06]
 

ui/src/logs/containers/LogsPage.tsx

@@ -350,7 +350,7 @@ class LogsPage extends Component<Props, State> {
 
     if (this.props.nextNewerLowerBound > maxNewerFetchForward) {
       this.props.setNextNewerLowerBound(Date.now())
-      this.currentNewerChunksGenerator.cancel()
+      await this.currentNewerChunksGenerator.cancelAsync()
     }
 
     await this.props.fetchNewerChunkAsync()
@@ -422,9 +422,6 @@ class LogsPage extends Component<Props, State> {
       console.error(error)
     }
 
-    if (!this.currentNewerChunksGenerator.isCanceled) {
-      this.currentNewerChunksGenerator.cancel()
-    }
     this.loadingNewer = false
     this.currentNewerChunksGenerator = null
   }
@@ -446,10 +443,6 @@ class LogsPage extends Component<Props, State> {
       console.error(error)
     }
 
-    if (!this.currentOlderChunksGenerator.isCanceled) {
-      this.currentOlderChunksGenerator.cancel()
-    }
-
     this.currentOlderChunksGenerator = null
   }
 
@@ -460,16 +453,16 @@ class LogsPage extends Component<Props, State> {
     }
   }
 
-  private cancelChunks() {
-    if (this.currentNewerChunksGenerator) {
-      this.currentNewerChunksGenerator.cancel()
-      this.currentNewerChunksGenerator = null
-    }
+  private cancelChunks = async () => {
+    const cancelPendingChunks = _.compact([
+      this.currentNewerChunksGenerator,
+      this.currentOlderChunksGenerator,
+    ]).map(req => req.cancelAsync())
 
-    if (this.currentOlderChunksGenerator) {
-      this.currentOlderChunksGenerator.cancel()
-      this.currentOlderChunksGenerator = null
-    }
+    await Promise.all(cancelPendingChunks)
+
+    this.currentNewerChunksGenerator = null
+    this.currentOlderChunksGenerator = null
   }
 
   private get tableScrollToRow() {
@@ -858,9 +851,9 @@ class LogsPage extends Component<Props, State> {
     this.updateTableData(SearchStatus.UpdatingNamespace)
   }
 
-  private updateTableData(searchStatus: SearchStatus) {
+  private updateTableData = async (searchStatus: SearchStatus) => {
     this.clearTailInterval()
-    this.cancelChunks()
+    await this.cancelChunks()
     this.props.clearSearchData(searchStatus)
   }
 

ui/src/logs/utils/fetchUntil.ts

@@ -11,12 +11,13 @@ export function fetchUntil<T>(
   const requests = fetchUnless(() => isCanceled || predicate(), request)
 
   const promise = fetchEachAsync(requests)
-
+  const cancelAsync = async () => {
+    isCanceled = true
+    await promise
+  }
   return {
     promise,
-    cancel() {
-      isCanceled = true
-    },
+    cancelAsync,
     isCanceled,
   }
 }

ui/src/types/logs.ts

@@ -203,6 +203,6 @@ export interface MatchSection {
 
 export interface FetchLoop {
   promise: Promise<void>
-  cancel: () => void
+  cancelAsync: () => Promise<void>
   isCanceled: boolean
 }