[Vega][Inspector] Request panel should show correct names for requests (#73655)

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

Author: alexwizp

src/plugins/vis_type_vega/public/data_model/ems_file_parser.ts

@@ -21,7 +21,7 @@ import { i18n } from '@kbn/i18n';
 // @ts-ignore
 import { bypassExternalUrlCheck } from '../vega_view/vega_base_view';
 import { IServiceSettings, FileLayer } from '../../../maps_legacy/public';
-import { Data, UrlObject, Requests } from './types';
+import { Data, UrlObject, EmsQueryRequest } from './types';
 
 /**
  * This class processes all Vega spec customizations,
@@ -53,6 +53,7 @@ export class EmsFileParser {
         })
       );
     }
+
     // Optimization: so initiate remote request as early as we know that we will need it
     if (!this._fileLayersP) {
       this._fileLayersP = this._serviceSettings.getFileLayers();
@@ -65,7 +66,7 @@ export class EmsFileParser {
    * @param {object[]} requests each object is generated by parseUrl()
    * @returns {Promise<void>}
    */
-  async populateData(requests: Requests[]) {
+  async populateData(requests: EmsQueryRequest[]) {
     if (requests.length === 0) return;
 
     const layers = await this._fileLayersP;

src/plugins/vis_type_vega/public/data_model/es_query_parser.ts

@@ -23,7 +23,16 @@ import { cloneDeep, isPlainObject } from 'lodash';
 import { SearchParams } from 'elasticsearch';
 import { TimeCache } from './time_cache';
 import { SearchAPI } from './search_api';
-import { Opts, Type, Data, UrlObject, Bool, Requests, Query, ContextVarsObject } from './types';
+import {
+  Opts,
+  Type,
+  Data,
+  UrlObject,
+  Bool,
+  EsQueryRequest,
+  Query,
+  ContextVarsObject,
+} from './types';
 
 const TIMEFILTER: string = '%timefilter%';
 const AUTOINTERVAL: string = '%autointerval%';
@@ -36,6 +45,13 @@ const LEGACY_CONTEXT: string = '%context_query%';
 const CONTEXT: string = '%context%';
 const TIMEFIELD: string = '%timefield%';
 
+const getRequestName = (request: EsQueryRequest, index: number) =>
+  request.dataObject.name ||
+  i18n.translate('visTypeVega.esQueryParser.unnamedRequest', {
+    defaultMessage: 'Unnamed request #{index}',
+    values: { index },
+  });
+
 /**
  * This class parses ES requests specified in the data.url objects.
  */
@@ -196,14 +212,22 @@ export class EsQueryParser {
    * @param {object[]} requests each object is generated by parseUrl()
    * @returns {Promise<void>}
    */
-  async populateData(requests: Requests[]) {
-    const esSearches = requests.map((r: Requests) => r.url);
+  async populateData(requests: EsQueryRequest[]) {
+    const esSearches = requests.map((r: EsQueryRequest, index: number) => ({
+      ...r.url,
+      name: getRequestName(r, index),
+    }));
+
     const data$ = this._searchAPI.search(esSearches);
 
     const results = await data$.toPromise();
 
-    results.forEach((data) => {
-      requests[data.id].dataObject.values = data.rawResponse;
+    results.forEach((data, index) => {
+      const requestObject = requests.find((item) => getRequestName(item, index) === data.name);
+
+      if (requestObject) {
+        requestObject.dataObject.values = data.rawResponse;
+      }
     });
   }
 

src/plugins/vis_type_vega/public/data_model/search_api.ts

@@ -48,25 +48,22 @@ export class SearchAPI {
     const requestResponders: any = {};
 
     return combineLatest(
-      searchRequests.map((request, index) => {
-        const requestId: number = index;
+      searchRequests.map((request) => {
+        const requestId = request.name;
         const params = getSearchParamsFromRequest(request, {
           uiSettings: this.dependencies.uiSettings,
           injectedMetadata: this.dependencies.injectedMetadata,
         });
 
         if (this.inspectorAdapters) {
-          requestResponders[requestId] = this.inspectorAdapters.requests.start(
-            `#${requestId}`,
-            request
-          );
+          requestResponders[requestId] = this.inspectorAdapters.requests.start(requestId, request);
           requestResponders[requestId].json(params.body);
         }
 
         return search({ params }, { signal: this.abortSignal }).pipe(
           tap((data) => this.inspectSearchResult(data, requestResponders[requestId])),
           map((data) => ({
-            id: requestId,
+            name: requestId,
             rawResponse: data.rawResponse,
           }))
         );

src/plugins/vis_type_vega/public/data_model/types.ts

@@ -18,6 +18,7 @@
  */
 
 import { SearchResponse, SearchParams } from 'elasticsearch';
+
 import { Filter } from 'src/plugins/data/public';
 import { DslQuery } from 'src/plugins/data/common';
 import { EsQueryParser } from './es_query_parser';
@@ -75,13 +76,10 @@ interface Projection {
 }
 
 interface RequestDataObject {
+  name?: string;
   values: SearchResponse<unknown>;
 }
 
-interface RequestObject {
-  url: string;
-}
-
 type ContextVarsObjectProps =
   | string
   | {
@@ -176,22 +174,22 @@ export interface Data {
   source?: unknown;
 }
 
-export interface CacheOptions {
-  max: number;
-  maxAge: number;
-}
-
 export interface CacheBounds {
   min: number;
   max: number;
 }
 
-export interface Requests extends RequestObject {
-  obj: RequestObject;
+interface Requests<TUrlData = UrlObject, TRequestDataObject = RequestDataObject> {
+  url: TUrlData;
   name: string;
-  dataObject: RequestDataObject;
+  dataObject: TRequestDataObject;
 }
 
+export type EsQueryRequest = Requests;
+export type EmsQueryRequest = Requests & {
+  obj: UrlObject;
+};
+
 export interface ContextVarsObject {
   [index: string]: any;
   prop: ContextVarsObjectProps;

src/plugins/vis_type_vega/public/data_model/vega_parser.test.js

@@ -87,7 +87,7 @@ describe('VegaParser._resolveEsQueries', () => {
   let searchApiStub;
   const data = [
     {
-      id: 0,
+      name: 'requestId',
       rawResponse: [42],
     },
   ];
@@ -119,16 +119,25 @@ describe('VegaParser._resolveEsQueries', () => {
   test('no data', check({}, {}));
   test('no data2', check({ a: 1 }, { a: 1 }));
   test('non-es data', check({ data: { a: 10 } }, { data: { a: 10 } }));
-  test('es', check({ data: { url: { index: 'a' }, x: 1 } }, { data: { values: [42], x: 1 } }));
+  test(
+    'es',
+    check(
+      { data: { name: 'requestId', url: { index: 'a' }, x: 1 } },
+      { data: { name: 'requestId', values: [42], x: 1 } }
+    )
+  );
   test(
     'es 2',
-    check({ data: { url: { '%type%': 'elasticsearch', index: 'a' } } }, { data: { values: [42] } })
+    check(
+      { data: { name: 'requestId', url: { '%type%': 'elasticsearch', index: 'a' } } },
+      { data: { name: 'requestId', values: [42] } }
+    )
   );
   test(
     'es arr',
     check(
-      { arr: [{ data: { url: { index: 'a' }, x: 1 } }] },
-      { arr: [{ data: { values: [42], x: 1 } }] }
+      { arr: [{ data: { name: 'requestId', url: { index: 'a' }, x: 1 } }] },
+      { arr: [{ data: { name: 'requestId', values: [42], x: 1 } }] }
     )
   );
   test(