Cancel visualize fetches when navigating away or re-fetching

src/legacy/core_plugins/input_control_vis/public/control/control.js

@@ -60,6 +60,10 @@ export class Control {
     throw new Error('fetch method not defined, subclass are required to implement');
   }
 
+  destroy() {
+    throw new Error('destroy method not defined, subclass are required to implement');
+  }
+
   format = (value) => {
     const field = this.filterManager.getField();
     if (field) {

src/legacy/core_plugins/input_control_vis/public/control/list_control_factory.js

@@ -68,6 +68,12 @@ const termsAgg = ({ field, size, direction, query }) => {
 class ListControl extends Control {
 
   fetch = async (query) => {
+    // Abort any in-progress fetch
+    if (this.abortController) {
+      this.abortController.abort();
+    }
+    this.abortController = new AbortController();
+
     const indexPattern = this.filterManager.getIndexPattern();
     if (!indexPattern) {
       this.disable(noIndexPatternMsg(this.controlParams.indexPattern));
@@ -114,13 +120,18 @@ class ListControl extends Control {
       indexPattern,
       aggs,
       this.useTimeFilter,
-      ancestorFilters);
+      ancestorFilters
+    );
+    this.abortController.signal.addEventListener('abort', () => searchSource.cancelQueued());
 
     this.lastQuery = query;
     let resp;
     try {
       resp = await searchSource.fetch();
     } catch(error) {
+      // If the fetch was aborted then no need to surface this error in the UI
+      if (error.name === 'AbortError') return;
+
       this.disable(i18n.translate('inputControl.listControl.unableToFetchTooltip', {
         defaultMessage: 'Unable to fetch terms, error: {errorMessage}',
         values: { errorMessage: error.message }
@@ -148,6 +159,10 @@ class ListControl extends Control {
     this.disabledReason = '';
   }
 
+  destroy() {
+    if (this.abortController) this.abortController.abort();
+  }
+
   hasValue() {
     return typeof this.value !== 'undefined' && this.value.length > 0;
   }

src/legacy/core_plugins/input_control_vis/public/control/range_control_factory.js

@@ -50,6 +50,12 @@ const minMaxAgg = (field) => {
 class RangeControl extends Control {
 
   async fetch() {
+    // Abort any in-progress fetch
+    if (this.abortController) {
+      this.abortController.abort();
+    }
+    this.abortController = new AbortController();
+
     const indexPattern = this.filterManager.getIndexPattern();
     if (!indexPattern) {
       this.disable(noIndexPatternMsg(this.controlParams.indexPattern));
@@ -60,11 +66,15 @@ class RangeControl extends Control {
 
     const aggs = minMaxAgg(indexPattern.fields.byName[fieldName]);
     const searchSource = createSearchSource(this.kbnApi, null, indexPattern, aggs, this.useTimeFilter);
+    this.abortController.signal.addEventListener('abort', () => searchSource.cancelQueued());
 
     let resp;
     try {
       resp = await searchSource.fetch();
     } catch(error) {
+      // If the fetch was aborted then no need to surface this error in the UI
+      if (error.name === 'AbortError') return;
+
       this.disable(i18n.translate('inputControl.rangeControl.unableToFetchTooltip', {
         defaultMessage: 'Unable to fetch range min and max, error: {errorMessage}',
         values: { errorMessage: error.message }
@@ -84,6 +94,10 @@ class RangeControl extends Control {
     this.max = max;
     this.enable = true;
   }
+
+  destroy() {
+    if (this.abortController) this.abortController.abort();
+  }
 }
 
 export async function rangeControlFactory(controlParams, kbnApi, useTimeFilter) {

src/legacy/core_plugins/input_control_vis/public/vis_controller.js

@@ -42,14 +42,13 @@ class VisController {
       this.controls = [];
       this.controls = await this.initControls();
       this.drawVis();
-      return;
     }
-    return;
   }
 
   destroy() {
     this.updateSubsciption.unsubscribe();
     unmountComponentAtNode(this.el);
+    this.controls.forEach(control => control.destroy());
   }
 
   drawVis = () => {

src/legacy/core_plugins/interpreter/public/functions/esaggs.ts

@@ -87,7 +87,7 @@ export const esaggs = (): ExpressionFunction<typeof name, Context, Arguments, Re
       help: '',
     },
   },
-  async fn(context, args, handlers) {
+  async fn(context, args, { inspectorAdapters, abortSignal }) {
     const $injector = await chrome.dangerouslyGetActiveInjector();
     const Private: Function = $injector.get('Private');
     const indexPatterns = Private(IndexPatternsProvider);
@@ -112,14 +112,15 @@ export const esaggs = (): ExpressionFunction<typeof name, Context, Arguments, Re
       forceFetch: true,
       metricsAtAllLevels: args.metricsAtAllLevels,
       partialRows: args.partialRows,
-      inspectorAdapters: handlers.inspectorAdapters,
+      inspectorAdapters,
       queryFilter,
+      abortSignal: (abortSignal as unknown) as AbortSignal,
     });
 
     const table: KibanaDatatable = {
       type: 'kibana_datatable',
       rows: response.rows,
-      columns: response.columns.map(column => {
+      columns: response.columns.map((column: any) => {
         const cleanedColumn: KibanaDatatableColumn = {
           id: column.id,
           name: column.name,

src/legacy/core_plugins/kibana/public/discover/controllers/discover.js

@@ -761,6 +761,9 @@ function discoverController(
       })
       .then(onResults)
       .catch((error) => {
+        // If the request was aborted then no need to surface this error in the UI
+        if (error instanceof Error && error.name === 'AbortError') return;
+
         const fetchError = getPainlessError(error);
 
         if (fetchError) {

src/legacy/core_plugins/kibana/public/discover/embeddable/search_embeddable.ts

@@ -191,6 +191,7 @@ export class SearchEmbeddable extends Embeddable<SearchInput, SearchOutput>
     if (this.autoRefreshFetchSubscription) {
       this.autoRefreshFetchSubscription.unsubscribe();
     }
+    this.savedSearch.searchSource.cancelQueued();
   }
 
   private initializeSearchScope() {
@@ -270,6 +271,10 @@ export class SearchEmbeddable extends Embeddable<SearchInput, SearchOutput>
     if (!this.searchScope) return;
 
     const { searchSource } = this.savedSearch;
+
+    // Abort any in-progress requests
+    searchSource.cancelQueued();
+
     searchSource.setField('size', config.get('discover:sampleSize'));
     searchSource.setField('sort', getSort(this.searchScope.sort, this.searchScope.indexPattern));
 
@@ -304,6 +309,9 @@ export class SearchEmbeddable extends Embeddable<SearchInput, SearchOutput>
         this.searchScope!.totalHitCount = resp.hits.total;
       });
     } catch (error) {
+      // If the fetch was aborted, no need to surface this in the UI
+      if (error.name === 'AbortError') return;
+
       toastNotifications.addError(error, {
         title: i18n.translate('kbn.embeddable.errorTitle', {
           defaultMessage: 'Error fetching data',

src/legacy/ui/public/agg_types/buckets/histogram.js

@@ -76,13 +76,13 @@ export const histogramBucketAgg = new BucketAggType({
     {
       name: 'interval',
       editorComponent: NumberIntervalParamEditor,
-      modifyAggConfigOnSearchRequestStart(aggConfig, searchSource) {
+      modifyAggConfigOnSearchRequestStart(aggConfig, searchSource, searchRequest) {
         const field = aggConfig.getField();
         const aggBody = field.scripted
           ? { script: { source: field.script, lang: field.lang } }
           : { field: field.name };
 
-        return searchSource
+        const childSearchSource = searchSource
           .createChild()
           .setField('size', 0)
           .setField('aggs', {
@@ -92,15 +92,19 @@ export const histogramBucketAgg = new BucketAggType({
             minAgg: {
               min: aggBody
             }
-          })
-          .fetch()
+          });
+
+        searchRequest.whenAborted(() => childSearchSource.cancelQueued());
+
+        return childSearchSource.fetch()
           .then((resp) => {
             aggConfig.setAutoBounds({
               min: _.get(resp, 'aggregations.minAgg.value'),
               max: _.get(resp, 'aggregations.maxAgg.value')
             });
           })
-          .catch(() => {
+          .catch(e => {
+            if (e.name === 'AbortError') return;
             toastNotifications.addWarning(i18n.translate('common.ui.aggTypes.histogram.missingMaxMinValuesWarning', {
               // eslint-disable-next-line max-len
               defaultMessage: 'Unable to retrieve max and min values to auto-scale histogram buckets. This may lead to poor visualization performance.'

src/legacy/ui/public/courier/fetch/request/search_request/search_request.js

@@ -168,10 +168,13 @@ export function SearchRequestProvider(Promise) {
 
     abort() {
       this._markStopped();
-      this.defer = null;
       this.aborted = true;
-      this.abortedDefer.resolve();
+      const error = new Error('The request was aborted.');
+      error.name = 'AbortError';
+      this.abortedDefer.resolve(error);
       this.abortedDefer = null;
+      this.defer.reject(error);
+      this.defer = null;
     }
 
     whenAborted(cb) {

src/legacy/ui/public/vis/request_handlers/courier.js

@@ -40,7 +40,8 @@ const CourierRequestHandlerProvider = function () {
       partialRows,
       metricsAtAllLevels,
       inspectorAdapters,
-      queryFilter
+      queryFilter,
+      abortSignal,
     }) {
       // Create a new search source that inherits the original search source
       // but has the appropriate timeRange applied via a filter.
@@ -101,6 +102,11 @@ const CourierRequestHandlerProvider = function () {
         request.stats(getRequestInspectorStats(requestSearchSource));
 
         try {
+          // Abort any in-progress requests before fetching again
+          if (abortSignal) {
+            abortSignal.addEventListener('abort', () => requestSearchSource.cancelQueued());
+          }
+
           const response = await requestSearchSource.fetch();
 
           searchSource.lastQuery = queryHash;

src/legacy/ui/public/vis/request_handlers/request_handlers.d.ts

@@ -40,6 +40,7 @@ export interface RequestHandlerParams {
   inspectorAdapters?: Adapters;
   metricsAtAllLevels?: boolean;
   visParams?: any;
+  abortSignal?: AbortSignal;
 }
 
 export type RequestHandler<T = unknown> = (params: RequestHandlerParams) => T;

src/legacy/ui/public/visualize/loader/embedded_visualize_handler.test.ts

@@ -153,21 +153,30 @@ describe('EmbeddedVisualizeHandler', () => {
       const params = { timeRange: { foo: 'bar' } };
       handler.update(params);
       jest.runAllTimers();
-      expect(mockDataLoaderFetch).toHaveBeenCalledWith({ ...dataLoaderParams, ...params });
+      expect(mockDataLoaderFetch).toHaveBeenCalled();
+      const { abortSignal, ...otherParams } = mockDataLoaderFetch.mock.calls[0][0];
+      expect(abortSignal).toBeInstanceOf(AbortSignal);
+      expect(otherParams).toEqual({ ...dataLoaderParams, ...params });
     });
 
     it('should call dataLoader.render with updated filters', () => {
       const params = { filters: [{ meta: { disabled: false } }] };
       handler.update(params);
       jest.runAllTimers();
-      expect(mockDataLoaderFetch).toHaveBeenCalledWith({ ...dataLoaderParams, ...params });
+      expect(mockDataLoaderFetch).toHaveBeenCalled();
+      const { abortSignal, ...otherParams } = mockDataLoaderFetch.mock.calls[0][0];
+      expect(abortSignal).toBeInstanceOf(AbortSignal);
+      expect(otherParams).toEqual({ ...dataLoaderParams, ...params });
     });
 
     it('should call dataLoader.render with updated query', () => {
       const params = { query: { foo: 'bar' } };
       handler.update(params);
       jest.runAllTimers();
-      expect(mockDataLoaderFetch).toHaveBeenCalledWith({ ...dataLoaderParams, ...params });
+      expect(mockDataLoaderFetch).toHaveBeenCalled();
+      const { abortSignal, ...otherParams } = mockDataLoaderFetch.mock.calls[0][0];
+      expect(abortSignal).toBeInstanceOf(AbortSignal);
+      expect(otherParams).toEqual({ ...dataLoaderParams, ...params });
     });
   });
 
@@ -197,6 +206,13 @@ describe('EmbeddedVisualizeHandler', () => {
       handler.destroy();
       expect(spy).toHaveBeenCalledTimes(1);
     });
+
+    it('should call abort on controller', () => {
+      handler.abortController = new AbortController();
+      const spy = jest.spyOn(handler.abortController, 'abort');
+      handler.destroy();
+      expect(spy).toHaveBeenCalled();
+    });
   });
 
   describe('openInspector', () => {

src/legacy/ui/public/visualize/loader/embedded_visualize_handler.ts

@@ -105,6 +105,7 @@ export class EmbeddedVisualizeHandler {
   private actions: any = {};
   private events$: Rx.Observable<any>;
   private autoFetch: boolean;
+  private abortController?: AbortController;
   private autoRefreshFetchSubscription: Rx.Subscription | undefined;
 
   constructor(
@@ -268,6 +269,7 @@ export class EmbeddedVisualizeHandler {
    */
   public destroy(): void {
     this.destroyed = true;
+    this.cancel();
     this.debouncedFetchAndRender.cancel();
     if (this.autoFetch) {
       if (this.autoRefreshFetchSubscription) this.autoRefreshFetchSubscription.unsubscribe();
@@ -443,7 +445,14 @@ export class EmbeddedVisualizeHandler {
     this.fetchAndRender();
   };
 
+  private cancel = () => {
+    if (this.abortController) this.abortController.abort();
+  };
+
   private fetch = (forceFetch: boolean = false) => {
+    this.cancel();
+    this.abortController = new AbortController();
+    this.dataLoaderParams.abortSignal = this.abortController.signal;
     this.dataLoaderParams.aggs = this.vis.getAggConfig();
     this.dataLoaderParams.forceFetch = forceFetch;
     this.dataLoaderParams.inspectorAdapters = this.inspectorAdapters;
@@ -452,23 +461,27 @@ export class EmbeddedVisualizeHandler {
     this.vis.requestError = undefined;
     this.vis.showRequestError = false;
 
-    return this.dataLoader
-      .fetch(this.dataLoaderParams)
-      .then(data => {
-        // Pipeline responses never throw errors, so we need to check for
-        // `type: 'error'`, and then throw so it can be caught below.
-        // TODO: We should revisit this after we have fully migrated
-        // to the new expression pipeline infrastructure.
-        if (data && data.type === 'error') {
-          throw data.error;
-        }
-
-        if (data && data.value) {
-          this.dataSubject.next(data.value);
-        }
-        return data;
-      })
-      .catch(this.handleDataLoaderError);
+    return (
+      this.dataLoader
+        // Don't pass in this.dataLoaderParams directly because it may be modified async in another
+        // call to fetch before the previous one has completed
+        .fetch({ ...this.dataLoaderParams })
+        .then(data => {
+          // Pipeline responses never throw errors, so we need to check for
+          // `type: 'error'`, and then throw so it can be caught below.
+          // TODO: We should revisit this after we have fully migrated
+          // to the new expression pipeline infrastructure.
+          if (data && data.type === 'error') {
+            throw data.error;
+          }
+
+          if (data && data.value) {
+            this.dataSubject.next(data.value);
+          }
+          return data;
+        })
+        .catch(this.handleDataLoaderError)
+    );
   };
 
   /**
@@ -478,6 +491,9 @@ export class EmbeddedVisualizeHandler {
    * frequently encountered by users.
    */
   private handleDataLoaderError = (error: any): void => {
+    // If the data loader was aborted then no need to surface this error in the UI
+    if (error && error.name === 'AbortError') return;
+
     // TODO: come up with a general way to cancel execution of pipeline expressions.
     if (this.dataLoaderParams.searchSource && this.dataLoaderParams.searchSource.cancelQueued) {
       this.dataLoaderParams.searchSource.cancelQueued();