Add inspector for VEGA (#70941)

* [WIP] Add inspector for VEGA

Closes: #31189

* view -> dataset

* cleanup

* add spec viewer

* cleanup code

* use rx to retrieve data from adapters

* Make custom inspector adapters registerable from the visType

* fix flex-box size

* cleanup

* remove visTypesWithoutInspector from visualize_embeddable

* fix PR comments

* add vega folder to sass-lint

* fix jest

* Update src/plugins/vis_type_vega/public/vega_inspector/components/data_viewer.tsx

Co-authored-by: Wylie Conlon <[email protected]>

* use addSignalListener

* cleanup

* add onColumnResize handler

* EuiCodeEditor -> CodeEditor

* fix type_check

* fix issue with pagination

* fix extra vertical scroll

* add area-label for EuiButtonIcon

* add area-label for EuiComboBox

* Design Commit

- Fixing up layout trying to remove any `.eui` classes and uses flex instead of percentage
- Fixing text to use `Sentence case` not `Title Case`

* Wrapper around signal viewer table

* fix Jest snapshot

Co-authored-by: Elastic Machine <[email protected]>
Co-authored-by: Wylie Conlon <[email protected]>
Co-authored-by: cchaos <[email protected]>

.sass-lint.yml

@@ -3,6 +3,7 @@ files:
     - 'src/legacy/core_plugins/metrics/**/*.s+(a|c)ss'
     - 'src/plugins/timelion/**/*.s+(a|c)ss'
     - 'src/plugins/vis_type_vislib/**/*.s+(a|c)ss'
+    - 'src/plugins/vis_type_vega/**/*.s+(a|c)ss'
     - 'src/plugins/vis_type_xy/**/*.s+(a|c)ss'
     - 'x-pack/plugins/canvas/**/*.s+(a|c)ss'
     - 'x-pack/plugins/triggers_actions_ui/**/*.s+(a|c)ss'

src/plugins/data/public/public.api.md

@@ -52,7 +52,6 @@ import { EuiButtonEmptyProps } from '@elastic/eui';
 import { EuiComboBoxProps } from '@elastic/eui';
 import { EuiConfirmModalProps } from '@elastic/eui';
 import { EuiGlobalToastListToast } from '@elastic/eui';
-import { EventEmitter } from 'events';
 import { ExclusiveUnion } from '@elastic/eui';
 import { ExistsParams } from 'elasticsearch';
 import { ExplainParams } from 'elasticsearch';
@@ -148,7 +147,7 @@ import { ReindexRethrottleParams } from 'elasticsearch';
 import { RenderSearchTemplateParams } from 'elasticsearch';
 import { Reporter } from '@kbn/analytics';
 import { RequestAdapter } from 'src/plugins/inspector/common';
-import { RequestStatistics as RequestStatistics_2 } from 'src/plugins/inspector/common';
+import { RequestStatistics } from 'src/plugins/inspector/common';
 import { Required } from '@kbn/utility-types';
 import * as Rx from 'rxjs';
 import { SavedObject } from 'src/core/server';

src/plugins/data/public/search/aggs/buckets/terms.ts

@@ -129,7 +129,7 @@ export const getTermsBucketAgg = () =>
 
         const response = await nestedSearchSource.fetch({ abortSignal });
         request
-          .stats(getResponseInspectorStats(nestedSearchSource, response))
+          .stats(getResponseInspectorStats(response, nestedSearchSource))
           .ok({ json: response });
         resp = mergeOtherBucketAggResponse(aggConfigs, resp, response, aggConfig, filterAgg());
       }

src/plugins/data/public/search/expressions/esaggs.ts

@@ -160,7 +160,7 @@ const handleCourierRequest = async ({
 
       (searchSource as any).lastQuery = queryHash;
 
-      request.stats(getResponseInspectorStats(searchSource, response)).ok({ json: response });
+      request.stats(getResponseInspectorStats(response, searchSource)).ok({ json: response });
 
       (searchSource as any).rawResponse = response;
     } catch (e) {

src/plugins/data/public/search/expressions/utils/courier_inspector_stats.ts

@@ -61,10 +61,11 @@ export function getRequestInspectorStats(searchSource: ISearchSource) {
 
 /** @public */
 export function getResponseInspectorStats(
-  searchSource: ISearchSource,
-  resp: SearchResponse<unknown>
+  resp: SearchResponse<unknown>,
+  searchSource?: ISearchSource
 ) {
-  const lastRequest = searchSource.history && searchSource.history[searchSource.history.length - 1];
+  const lastRequest =
+    searchSource?.history && searchSource.history[searchSource.history.length - 1];
   const stats: RequestStatistics = {};
 
   if (resp && resp.took) {

src/plugins/data/server/server.api.md

@@ -39,7 +39,6 @@ import { DeleteTemplateParams } from 'elasticsearch';
 import { DetailedPeerCertificate } from 'tls';
 import { Duration } from 'moment';
 import { ErrorToastOptions } from 'src/core/public/notifications';
-import { EventEmitter } from 'events';
 import { ExistsParams } from 'elasticsearch';
 import { ExplainParams } from 'elasticsearch';
 import { FieldStatsParams } from 'elasticsearch';

src/plugins/discover/public/application/angular/discover.js

@@ -874,7 +874,7 @@ function discoverController(
   }
 
   function onResults(resp) {
-    inspectorRequest.stats(getResponseInspectorStats($scope.searchSource, resp)).ok({ json: resp });
+    inspectorRequest.stats(getResponseInspectorStats(resp, $scope.searchSource)).ok({ json: resp });
 
     if (getTimeField()) {
       const tabifiedData = tabifyAggResponse($scope.vis.data.aggs, resp);

src/plugins/discover/public/application/embeddable/search_embeddable.ts

@@ -307,7 +307,7 @@ export class SearchEmbeddable extends Embeddable<SearchInput, SearchOutput>
       this.updateOutput({ loading: false, error: undefined });
 
       // Log response to inspector
-      inspectorRequest.stats(getResponseInspectorStats(searchSource, resp)).ok({ json: resp });
+      inspectorRequest.stats(getResponseInspectorStats(resp, searchSource)).ok({ json: resp });
 
       // Apply the changes to the angular scope
       this.searchScope.$apply(() => {

src/plugins/expressions/common/execution/execution.ts

@@ -23,7 +23,7 @@ import { createExecutionContainer, ExecutionContainer } from './container';
 import { createError } from '../util';
 import { Defer, now } from '../../../kibana_utils/common';
 import { toPromise } from '../../../data/common/utils/abort_utils';
-import { RequestAdapter, DataAdapter } from '../../../inspector/common';
+import { RequestAdapter, DataAdapter, Adapters } from '../../../inspector/common';
 import { isExpressionValueError, ExpressionValueError } from '../expression_types/specs/error';
 import {
   ExpressionAstExpression,
@@ -70,7 +70,7 @@ export class Execution<
   ExtraContext extends Record<string, unknown> = Record<string, unknown>,
   Input = unknown,
   Output = unknown,
-  InspectorAdapters = ExtraContext['inspectorAdapters'] extends object
+  InspectorAdapters extends Adapters = ExtraContext['inspectorAdapters'] extends object
     ? ExtraContext['inspectorAdapters']
     : DefaultInspectorAdapters
 > {

src/plugins/expressions/common/execution/types.ts

@@ -18,15 +18,15 @@
  */
 
 import { ExpressionType } from '../expression_types';
-import { DataAdapter, RequestAdapter } from '../../../inspector/common';
+import { Adapters, DataAdapter, RequestAdapter } from '../../../inspector/common';
 import { TimeRange, Query, Filter } from '../../../data/common';
 import { SavedObject, SavedObjectAttributes } from '../../../../core/public';
 
 /**
  * `ExecutionContext` is an object available to all functions during a single execution;
  * it provides various methods to perform side-effects.
  */
-export interface ExecutionContext<Input = unknown, InspectorAdapters = DefaultInspectorAdapters> {
+export interface ExecutionContext<Input = unknown, InspectorAdapters extends Adapters = Adapters> {
   /**
    * Get initial input with which execution started.
    */
@@ -75,7 +75,7 @@ export interface ExecutionContext<Input = unknown, InspectorAdapters = DefaultIn
 /**
  * Default inspector adapters created if inspector adapters are not set explicitly.
  */
-export interface DefaultInspectorAdapters {
+export interface DefaultInspectorAdapters extends Adapters {
   requests: RequestAdapter;
   data: DataAdapter;
 }

src/plugins/expressions/public/loader.ts

@@ -150,7 +150,7 @@ export class ExpressionLoader {
       variables: params.variables || {},
       inspectorAdapters: params.inspectorAdapters,
     });
-    if (!params.inspectorAdapters) params.inspectorAdapters = this.execution.inspect() as Adapters;
+
     const prevDataHandler = this.execution;
     const data = await prevDataHandler.getData();
     if (this.execution !== prevDataHandler) {
@@ -181,6 +181,9 @@ export class ExpressionLoader {
     if (params.variables && this.params) {
       this.params.variables = params.variables;
     }
+
+    this.params.inspectorAdapters = (params.inspectorAdapters ||
+      this.execution?.inspect()) as Adapters;
   }
 }
 

src/plugins/input_control_vis/public/input_control_vis_type.ts

@@ -65,6 +65,7 @@ export function createInputControlVisTypeDefinition(deps: InputControlVisDepende
         },
       ],
     },
+    inspectorAdapters: {},
     requestHandler: 'none',
     responseHandler: 'none',
   };

src/plugins/inspector/common/adapters/index.ts

@@ -17,5 +17,12 @@
  * under the License.
  */
 
+export { Adapters } from './types';
 export { DataAdapter, FormattedData } from './data';
-export { RequestAdapter, RequestStatistic, RequestStatistics, RequestStatus } from './request';
+export {
+  RequestAdapter,
+  RequestStatistic,
+  RequestStatistics,
+  RequestStatus,
+  RequestResponder,
+} from './request';

src/plugins/inspector/common/adapters/request/index.ts

@@ -19,3 +19,4 @@
 
 export { RequestStatistic, RequestStatistics, RequestStatus } from './types';
 export { RequestAdapter } from './request_adapter';
+export { RequestResponder } from './request_responder';

src/plugins/inspector/common/adapters/types.ts

@@ -0,0 +1,25 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+/**
+ * The interface that the adapters used to open an inspector have to fullfill.
+ */
+export interface Adapters {
+  [key: string]: any;
+}

src/plugins/inspector/public/index.scss

@@ -1 +1 @@
-@import 'views/index'
+@import 'views/index';

src/plugins/inspector/public/plugin.tsx

@@ -22,8 +22,9 @@ import * as React from 'react';
 import { PluginInitializerContext, CoreSetup, CoreStart, Plugin } from '../../../core/public';
 import { toMountPoint } from '../../kibana_react/public';
 import { InspectorViewRegistry } from './view_registry';
-import { Adapters, InspectorOptions, InspectorSession } from './types';
+import { InspectorOptions, InspectorSession } from './types';
 import { InspectorPanel } from './ui/inspector_panel';
+import { Adapters } from '../common';
 
 import { getRequestsViewDescription, getDataViewDescription } from './views';
 

src/plugins/inspector/public/types.ts

@@ -18,23 +18,17 @@
  */
 
 import { OverlayRef } from '../../../core/public';
-
-/**
- * The interface that the adapters used to open an inspector have to fullfill.
- */
-export interface Adapters {
-  [key: string]: any;
-}
+import { Adapters } from '../common';
 
 /**
  * The props interface that a custom inspector view component, that will be passed
  * to {@link InspectorViewDescription#component}, must use.
  */
-export interface InspectorViewProps {
+export interface InspectorViewProps<TAdapters extends Adapters = Adapters> {
   /**
    * Adapters used to open the inspector.
    */
-  adapters: Adapters;
+  adapters: TAdapters;
   /**
    * The title that the inspector is currently using e.g. a visualization name.
    */

src/plugins/inspector/public/ui/inspector_panel.scss

@@ -0,0 +1,12 @@
+.insInspectorPanel__flyoutBody {
+  // TODO: EUI to allow for custom classNames to inner elements
+  // Or supply this as default
+  > div {
+    display: flex;
+    flex-direction: column;
+
+    > div {
+      flex-grow: 1;
+    }
+  }
+}

src/plugins/inspector/public/ui/inspector_panel.test.tsx

@@ -20,7 +20,8 @@
 import React from 'react';
 import { mountWithIntl } from 'test_utils/enzyme_helpers';
 import { InspectorPanel } from './inspector_panel';
-import { Adapters, InspectorViewDescription } from '../types';
+import { InspectorViewDescription } from '../types';
+import { Adapters } from '../../common';
 
 describe('InspectorPanel', () => {
   let adapters: Adapters;

src/plugins/inspector/public/ui/inspector_panel.tsx

@@ -17,11 +17,13 @@
  * under the License.
  */
 
+import './inspector_panel.scss';
 import { i18n } from '@kbn/i18n';
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { EuiFlexGroup, EuiFlexItem, EuiFlyoutHeader, EuiTitle, EuiFlyoutBody } from '@elastic/eui';
-import { Adapters, InspectorViewDescription } from '../types';
+import { InspectorViewDescription } from '../types';
+import { Adapters } from '../../common';
 import { InspectorViewChooser } from './inspector_view_chooser';
 
 function hasAdaptersChanged(oldAdapters: Adapters, newAdapters: Adapters) {
@@ -122,7 +124,9 @@ export class InspectorPanel extends Component<InspectorPanelProps, InspectorPane
             </EuiFlexItem>
           </EuiFlexGroup>
         </EuiFlyoutHeader>
-        <EuiFlyoutBody>{this.renderSelectedPanel()}</EuiFlyoutBody>
+        <EuiFlyoutBody className="insInspectorPanel__flyoutBody">
+          {this.renderSelectedPanel()}
+        </EuiFlyoutBody>
       </React.Fragment>
     );
   }

src/plugins/inspector/public/view_registry.test.ts

@@ -20,7 +20,7 @@
 import { InspectorViewRegistry } from './view_registry';
 import { InspectorViewDescription } from './types';
 
-import { Adapters } from './types';
+import { Adapters } from '../common';
 
 function createMockView(
   params: {

src/plugins/inspector/public/view_registry.ts

@@ -18,7 +18,8 @@
  */
 
 import { EventEmitter } from 'events';
-import { Adapters, InspectorViewDescription } from './types';
+import { InspectorViewDescription } from './types';
+import { Adapters } from '../common';
 
 /**
  * @callback viewShouldShowFunc

src/plugins/inspector/public/views/data/components/data_view.tsx

@@ -30,7 +30,8 @@ import {
 } from '@elastic/eui';
 
 import { DataTableFormat } from './data_table';
-import { InspectorViewProps, Adapters } from '../../../types';
+import { InspectorViewProps } from '../../../types';
+import { Adapters } from '../../../../common';
 import {
   TabularLoaderOptions,
   TabularData,

src/plugins/inspector/public/views/data/index.tsx

@@ -20,7 +20,8 @@ import React from 'react';
 import { i18n } from '@kbn/i18n';
 
 import { DataViewComponent } from './components/data_view';
-import { Adapters, InspectorViewDescription, InspectorViewProps } from '../../types';
+import { InspectorViewDescription, InspectorViewProps } from '../../types';
+import { Adapters } from '../../../common';
 import { IUiSettingsClient } from '../../../../../core/public';
 
 export const getDataViewDescription = (

src/plugins/inspector/public/views/requests/index.ts

@@ -19,7 +19,8 @@
 import { i18n } from '@kbn/i18n';
 
 import { RequestsViewComponent } from './components/requests_view';
-import { Adapters, InspectorViewDescription } from '../../types';
+import { InspectorViewDescription } from '../../types';
+import { Adapters } from '../../../common';
 
 export const getRequestsViewDescription = (): InspectorViewDescription => ({
   title: i18n.translate('inspector.requests.requestsTitle', {

src/plugins/vis_type_markdown/public/markdown_vis.ts

@@ -66,4 +66,5 @@ export const markdownVisDefinition = {
   },
   requestHandler: 'none',
   responseHandler: 'none',
+  inspectorAdapters: {},
 };

src/plugins/vis_type_timelion/public/timelion_vis_type.tsx

@@ -62,6 +62,7 @@ export function getTimelionVisDefinition(dependencies: TimelionVisDependencies)
     },
     requestHandler: timelionRequestHandler,
     responseHandler: 'none',
+    inspectorAdapters: {},
     options: {
       showIndexSelection: false,
       showQueryBar: false,

src/plugins/vis_type_timeseries/public/metrics_type.ts

@@ -78,5 +78,6 @@ export const metricsVisDefinition = {
     showIndexSelection: false,
   },
   requestHandler: metricsRequestHandler,
+  inspectorAdapters: {},
   responseHandler: 'none',
 };

src/plugins/vis_type_vega/kibana.json

@@ -3,6 +3,6 @@
   "version": "kibana",
   "server": true,
   "ui": true,
-  "requiredPlugins": ["data", "visualizations", "mapsLegacy", "expressions"],
+  "requiredPlugins": ["data", "visualizations", "mapsLegacy", "expressions", "inspector"],
   "requiredBundles": ["kibanaUtils", "kibanaReact"]
 }