[TSVB] Old request might override newer request_handler

Fix: elastic#14208

src/legacy/core_plugins/metrics/public/kbn_vis_types/request_handler.js

@@ -20,47 +20,90 @@
 import { validateInterval } from '../lib/validate_interval';
 import { timezoneProvider } from 'ui/vis/lib/timezone';
 import { timefilter } from 'ui/timefilter';
+import { kfetchAbortable } from 'ui/kfetch';
+
+const ABORT_REQUEST_CODE = 20;
+const API_PATH_NAME = '../api/metrics/vis/data';
 
 const MetricsRequestHandlerProvider = function (Private, Notifier, config, $http, i18n) {
   const notify = new Notifier({ location: i18n('tsvb.requestHandler.notifier.locationNameTitle', { defaultMessage: 'Metrics' }) });
+  const requestsMap = new Map();
+
+  const handleError = (error, callback) => {
+    if (error) {
+      notify.error(error);
+    }
+    callback({});
+  };
 
   return {
     name: 'metrics',
     handler: function ({ uiState, timeRange, filters, query, visParams }) {
       const timezone = Private(timezoneProvider)();
-      return new Promise((resolve) => {
+      return new Promise(resolve => {
         const panel = visParams;
         const uiStateObj = uiState.get(panel.type, {});
         const parsedTimeRange = timefilter.calculateBounds(timeRange);
         const scaledDataFormat = config.get('dateFormat:scaled');
         const dateFormat = config.get('dateFormat');
+
         if (panel && panel.id) {
-          const params = {
-            timerange: { timezone, ...parsedTimeRange },
-            query,
-            filters,
-            panels: [panel],
-            state: uiStateObj
-          };
+          const requestId = panel.visInstanceId;
+
+          if (requestsMap.has(requestId)) {
+            requestsMap.get(requestId)();
+            requestsMap.delete(requestId);
+          }
 
           try {
             const maxBuckets = config.get('metrics:max_buckets');
+
             validateInterval(parsedTimeRange, panel, maxBuckets);
-            const httpResult = $http.post('../api/metrics/vis/data', params)
-              .then(resp => ({ dateFormat, scaledDataFormat, timezone, ...resp.data }))
-              .catch(resp => { throw resp.data; });
 
-            return httpResult
-              .then(resolve)
+            const {
+              fetching,
+              abort,
+            } = kfetchAbortable({
+              pathname: API_PATH_NAME,
+              method: 'POST',
+              body: JSON.stringify({
+                timerange: {
+                  timezone,
+                  ...parsedTimeRange
+                },
+                query,
+                filters,
+                panels: [panel],
+                state: uiStateObj
+              })
+            });
+
+            requestsMap.set(requestId, abort);
+
+            fetching
+              .then(resp => {
+                requestsMap.delete(requestId);
+
+                resolve({
+                  dateFormat,
+                  scaledDataFormat,
+                  timezone,
+                  ...resp
+                });
+              })
               .catch(resp => {
-                resolve({});
-                const err = new Error(resp.message);
-                err.stack = resp.stack;
-                notify.error(err);
+                let  err;
+
+                if (resp.code !== ABORT_REQUEST_CODE) {
+                  err = new Error(resp.message);
+                  err.stack = resp.stack;
+                }
+
+                handleError(err, resolve);
               });
-          } catch (e) {
-            notify.error(e);
-            return resolve();
+
+          } catch (error) {
+            handleError(error, resolve);
           }
         }
       });

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

@@ -23,7 +23,6 @@ import { Adapters } from '../../inspector/types';
 import { PersistedState } from '../../persisted_state';
 import { Filters, Query, TimeRange } from '../../visualize';
 import { AggConfigs } from '../agg_configs';
-import { Vis } from '../vis';
 
 export interface RequestHandlerParams {
   searchSource: SearchSource;
@@ -38,6 +37,7 @@ export interface RequestHandlerParams {
   inspectorAdapters?: Adapters;
   metricsAtAllLevels?: boolean;
   visParams?: any;
+  visInstanceId?: string;
 }
 
 export type RequestHandler = <T>(params: RequestHandlerParams) => T;

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

@@ -54,6 +54,7 @@ interface EmbeddedVisualizeHandlerParams extends VisualizeLoaderParams {
   queryFilter: any;
   autoFetch?: boolean;
   pipelineDataLoader?: boolean;
+  visInstanceId?: string;
 }
 
 const RENDER_COMPLETE_EVENT = 'render_complete';
@@ -120,6 +121,7 @@ export class EmbeddedVisualizeHandler {
       autoFetch = true,
       pipelineDataLoader = false,
       Private,
+      visInstanceId,
     } = params;
 
     this.dataLoaderParams = {
@@ -129,6 +131,7 @@ export class EmbeddedVisualizeHandler {
       queryFilter,
       filters,
       uiState,
+      visInstanceId,
       aggs: vis.getAggConfig(),
       forceFetch: false,
     };
@@ -243,6 +246,10 @@ export class EmbeddedVisualizeHandler {
       this.dataLoaderParams.query = params.query;
     }
 
+    if (params.hasOwnProperty('visInstanceId')) {
+      this.dataLoaderParams.visInstanceId = params.visInstanceId;
+    }
+
     if (fetchRequired) {
       this.fetchAndRender();
     }

src/legacy/ui/public/visualize/loader/pipeline_helpers/build_pipeline.ts

@@ -20,8 +20,7 @@
 import { cloneDeep } from 'lodash';
 // @ts-ignore
 import { setBounds } from 'ui/agg_types/buckets/date_histogram';
-import { SearchSource } from 'ui/courier';
-import { AggConfig, Vis, VisParams, VisState } from 'ui/vis';
+import { AggConfig, RequestHandlerParams, Vis, VisParams, VisState } from 'ui/vis';
 
 interface SchemaFormat {
   id: string;
@@ -55,7 +54,13 @@ interface Schemas {
   [key: string]: any[] | undefined;
 }
 
-type buildVisFunction = (visState: VisState, schemas: Schemas, uiState: any) => string;
+type buildVisFunction = (
+  visState: VisState,
+  schemas: Schemas,
+  uiState: any,
+  params: RequestHandlerParams
+) => string;
+
 type buildVisConfigFunction = (schemas: Schemas, visParams?: VisParams) => VisParams;
 
 interface BuildPipelineVisFunction {
@@ -208,8 +213,11 @@ export const buildPipelineVisFunction: BuildPipelineVisFunction = {
   input_control_vis: visState => {
     return `input_control_vis ${prepareJson('visConfig', visState.params)}`;
   },
-  metrics: (visState, schemas, uiState = {}) => {
-    const paramsJson = prepareJson('params', visState.params);
+  metrics: (visState, schemas, uiState = {}, params: RequestHandlerParams) => {
+    const paramsJson = prepareJson('params', {
+      ...visState.params,
+      visInstanceId: params.visInstanceId,
+    });
     const uiStateJson = prepareJson('uiState', uiState);
 
     return `tsvb ${paramsJson} ${uiStateJson}`;
@@ -333,10 +341,7 @@ const buildVisConfig: BuildVisConfigFunction = {
   },
 };
 
-export const buildVislibDimensions = async (
-  vis: any,
-  params: { searchSource: any; timeRange?: any }
-) => {
+export const buildVislibDimensions = async (vis: any, params: RequestHandlerParams) => {
   const schemas = getSchemas(vis, params.timeRange);
   const dimensions = {
     x: schemas.segment ? schemas.segment[0] : null,
@@ -368,12 +373,10 @@ export const buildVislibDimensions = async (
 
 // If not using the expression pipeline (i.e. visualize_data_loader), we need a mechanism to
 // take a Vis object and decorate it with the necessary params (dimensions, bucket, metric, etc)
-export const getVisParams = async (
-  vis: Vis,
-  params: { searchSource: SearchSource; timeRange?: any }
-) => {
+export const getVisParams = async (vis: Vis, params: RequestHandlerParams) => {
   const schemas = getSchemas(vis, params.timeRange);
   let visConfig = cloneDeep(vis.params);
+
   if (buildVisConfig[vis.type.name]) {
     visConfig = {
       ...visConfig,
@@ -385,10 +388,7 @@ export const getVisParams = async (
   return visConfig;
 };
 
-export const buildPipeline = async (
-  vis: Vis,
-  params: { searchSource: SearchSource; timeRange?: any }
-) => {
+export const buildPipeline = async (vis: Vis, params: RequestHandlerParams) => {
   const { searchSource } = params;
   const { indexPattern } = vis;
   const query = searchSource.getField('query');
@@ -420,7 +420,7 @@ export const buildPipeline = async (
 
   const schemas = getSchemas(vis, params.timeRange);
   if (buildPipelineVisFunction[vis.type.name]) {
-    pipeline += buildPipelineVisFunction[vis.type.name](visState, schemas, uiState);
+    pipeline += buildPipelineVisFunction[vis.type.name](visState, schemas, uiState, params);
   } else if (vislibCharts.includes(vis.type.name)) {
     const visConfig = visState.params;
     visConfig.dimensions = await buildVislibDimensions(vis, params);

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

@@ -24,6 +24,7 @@
  */
 
 import chrome from '../../chrome';
+import uuid from 'uuid';
 import { FilterBarQueryFilterProvider } from '../../filter_bar/query_filter';
 import { IPrivate } from '../../private';
 import { EmbeddedVisualizeHandler } from './embedded_visualize_handler';
@@ -140,6 +141,7 @@ export class VisualizeLoader {
       // lets add Private to the params, we'll need to pass it to visualize later
       Private: this.Private,
       pipelineDataLoader: this.pipelineDataLoader,
+      visInstanceId: uuid.v1(),
     };
 
     return new EmbeddedVisualizeHandler(element, savedObj, handlerParams);