Enable expression service screenshot tests (elastic#50472)

* Enables interpreter screenshot tests which were disabled in elastic#42842
* Refactors tests to use expression service
* Fixes edge cases in expression service render:
** fixes swallowing of promise rejections from renderer.render()
** fixes swallowing of errors which emitted sync in render()
* Adds default value to colorRange type, as otherwise it fails in runtime if not passed
# Conflicts:
#	src/plugins/expressions/public/loader.test.ts

src/legacy/core_plugins/vis_type_metric/public/metric_vis_fn.ts

@@ -99,6 +99,7 @@ export const createMetricVisFn = (): ExpressionFunction<
     colorRange: {
       types: ['range'],
       multi: true,
+      default: '{range from=0 to=10000}',
       help: i18n.translate('visTypeMetric.function.colorRange.help', {
         defaultMessage:
           'A range object specifying groups of values to which different colors should be applied.',

src/plugins/expressions/public/loader.test.ts

@@ -18,11 +18,11 @@
  */
 
 import { fromExpression } from '@kbn/interpreter/common';
-import { first } from 'rxjs/operators';
+import { first, skip } from 'rxjs/operators';
+import { Observable } from 'rxjs';
 import { loader, ExpressionLoader } from './loader';
 import { ExpressionDataHandler } from './execute';
 import { IInterpreterRenderHandlers } from './types';
-import { Observable } from 'rxjs';
 import { ExpressionAST } from '../common/types';
 
 const element: HTMLElement = null as any;
@@ -123,8 +123,8 @@ describe('ExpressionLoader', () => {
     const expressionLoader = new ExpressionLoader(element, expressionString, {});
     let response = await expressionLoader.render$.pipe(first()).toPromise();
     expect(response).toBe(1);
-    expressionLoader.update('test2', {});
-    response = await expressionLoader.render$.pipe(first()).toPromise();
+    expressionLoader.update('test');
+    response = await expressionLoader.render$.pipe(skip(1), first()).toPromise();
     expect(response).toBe(2);
   });
 

src/plugins/expressions/public/loader.ts

@@ -39,7 +39,6 @@ export class ExpressionLoader {
   private loadingSubject: Subject<void>;
   private data: Data;
   private params: IExpressionLoaderParams = {};
-  private ignoreNextResponse = false;
 
   constructor(
     element: HTMLElement,
@@ -134,15 +133,14 @@ export class ExpressionLoader {
     params: IExpressionLoaderParams
   ): Promise<void> => {
     if (this.dataHandler && this.dataHandler.isPending) {
-      this.ignoreNextResponse = true;
       this.dataHandler.cancel();
     }
     this.setParams(params);
     this.dataHandler = new ExpressionDataHandler(expression, params);
     if (!params.inspectorAdapters) params.inspectorAdapters = this.dataHandler.inspect();
-    const data = await this.dataHandler.getData();
-    if (this.ignoreNextResponse) {
-      this.ignoreNextResponse = false;
+    const prevDataHandler = this.dataHandler;
+    const data = await prevDataHandler.getData();
+    if (this.dataHandler !== prevDataHandler) {
       return;
     }
     this.dataSubject.next(data);

src/plugins/expressions/public/render.test.ts

@@ -128,5 +128,19 @@ describe('ExpressionRenderHandler', () => {
         expressionRenderHandler.render({ type: 'render', as: 'test' });
       });
     });
+
+    // in case render$ subscription happen after render() got called
+    // we still want to be notified about sync render$ updates
+    it("doesn't swallow sync render errors", async () => {
+      const expressionRenderHandler = new ExpressionRenderHandler(element);
+      expressionRenderHandler.render(false);
+      const promise = expressionRenderHandler.render$.pipe(first()).toPromise();
+      await expect(promise).resolves.toEqual({
+        type: 'error',
+        error: {
+          message: 'invalid data provided to the expression renderer',
+        },
+      });
+    });
   });
 });

src/plugins/expressions/public/render.ts

@@ -19,7 +19,7 @@
 
 import { Observable } from 'rxjs';
 import * as Rx from 'rxjs';
-import { share } from 'rxjs/operators';
+import { filter, share } from 'rxjs/operators';
 import { event, RenderId, Data, IInterpreterRenderHandlers } from './types';
 import { getRenderersRegistry } from './services';
 
@@ -38,7 +38,7 @@ export class ExpressionRenderHandler {
   private element: HTMLElement;
   private destroyFn?: any;
   private renderCount: number = 0;
-  private renderSubject: Rx.Subject<RenderId | RenderError>;
+  private renderSubject: Rx.BehaviorSubject<RenderId | RenderError | null>;
   private eventsSubject: Rx.Subject<unknown>;
   private updateSubject: Rx.Subject<unknown>;
   private handlers: IInterpreterRenderHandlers;
@@ -49,8 +49,11 @@ export class ExpressionRenderHandler {
     this.eventsSubject = new Rx.Subject();
     this.events$ = this.eventsSubject.asObservable().pipe(share());
 
-    this.renderSubject = new Rx.Subject();
-    this.render$ = this.renderSubject.asObservable().pipe(share());
+    this.renderSubject = new Rx.BehaviorSubject(null as RenderId | RenderError | null);
+    this.render$ = this.renderSubject.asObservable().pipe(
+      share(),
+      filter(_ => _ !== null)
+    ) as Observable<RenderId | RenderError>;
 
     this.updateSubject = new Rx.Subject();
     this.update$ = this.updateSubject.asObservable().pipe(share());
@@ -75,7 +78,7 @@ export class ExpressionRenderHandler {
     };
   }
 
-  render = (data: Data, extraHandlers: IExpressionRendererExtraHandlers = {}) => {
+  render = async (data: Data, extraHandlers: IExpressionRendererExtraHandlers = {}) => {
     if (!data || typeof data !== 'object') {
       this.renderSubject.next({
         type: 'error',
@@ -108,7 +111,7 @@ export class ExpressionRenderHandler {
 
     try {
       // Rendering is asynchronous, completed by handlers.done()
-      getRenderersRegistry()
+      await getRenderersRegistry()
         .get(data.as)!
         .render(this.element, data.value, { ...this.handlers, ...extraHandlers });
     } catch (e) {

test/interpreter_functional/plugins/kbn_tp_run_pipeline/public/app.js

@@ -25,6 +25,7 @@ import chrome from 'ui/chrome';
 
 import { RequestAdapter, DataAdapter } from 'ui/inspector/adapters';
 import { registries } from 'plugins/interpreter/registries';
+import { npStart } from 'ui/new_platform';
 
 // This is required so some default styles and required scripts/Angular modules are loaded,
 // or the timezone setting is correctly applied.
@@ -38,6 +39,7 @@ import 'uiExports/visEditorTypes';
 import 'uiExports/visualize';
 import 'uiExports/savedObjectTypes';
 import 'uiExports/search';
+import 'uiExports/interpreter';
 
 import { Main } from './components/main';
 
@@ -54,25 +56,14 @@ app.config(stateManagementConfigProvider =>
   stateManagementConfigProvider.disable()
 );
 
-import { fromExpression } from '@kbn/interpreter/common';
-import { getInterpreter } from '../../../../../src/legacy/core_plugins/interpreter/public/interpreter';
-
-const runPipeline = async (expression, context, handlers) => {
-  const ast = fromExpression(expression);
-  const { interpreter } = await getInterpreter();
-  const pipelineResponse = await interpreter.interpretAst(ast, context, handlers);
-  return pipelineResponse;
-};
-
-
 function RootController($scope, $element) {
   const domNode = $element[0];
 
   // render react to DOM
   render(<Main
     RequestAdapter={RequestAdapter}
     DataAdapter={DataAdapter}
-    runPipeline={runPipeline}
+    expressions={npStart.plugins.expressions}
     registries={registries}
   />, domNode);
 

test/interpreter_functional/plugins/kbn_tp_run_pipeline/public/components/main.js

@@ -24,11 +24,10 @@ import {
   EuiPageContent,
   EuiPageContentHeader,
 } from '@elastic/eui';
+import { first } from 'rxjs/operators';
 
 class Main extends React.Component {
-
   chartDiv = React.createRef();
-  exprDiv = React.createRef();
 
   constructor(props) {
     super(props);
@@ -43,37 +42,26 @@ class Main extends React.Component {
         requests: new props.RequestAdapter(),
         data: new props.DataAdapter(),
       };
-      return await props.runPipeline(expression, context, {
+      return await props.expressions.execute(expression, {
         inspectorAdapters: adapters,
-        getInitialContext: () => initialContext,
-      });
-    };
-
-    const handlers = {
-      onDestroy: () => { return; },
+        context,
+        searchContext: initialContext,
+      }).getData();
     };
 
+    let lastRenderHandler;
     window.renderPipelineResponse = async (context = {}) => {
-      return new Promise(resolve => {
-        if (context.type !== 'render') {
-          this.setState({ expression: 'Expression did not return render type!\n\n' + JSON.stringify(context) });
-          return resolve();
-        }
-        const renderer = props.registries.renderers.get(context.as);
-        if (!renderer) {
-          this.setState({ expression: 'Renderer was not found in registry!\n\n' + JSON.stringify(context) });
-          return resolve();
-        }
-        const renderCompleteHandler = () => {
-          resolve('render complete');
-          this.chartDiv.removeEventListener('renderComplete', renderCompleteHandler);
-        };
-        this.chartDiv.addEventListener('renderComplete', renderCompleteHandler);
-        renderer.render(this.chartDiv, context.value, handlers);
-      });
+      if (lastRenderHandler) {
+        lastRenderHandler.destroy();
+      }
 
-    };
+      lastRenderHandler = props.expressions.render(this.chartDiv, context);
+      const renderResult = await lastRenderHandler.render$.pipe(first()).toPromise();
 
+      if (typeof renderResult === 'object' && renderResult.type === 'error') {
+        return this.setState({ expression: 'Render error!\n\n' + JSON.stringify(renderResult.error) });
+      }
+    };
   }
 
 

test/interpreter_functional/snapshots/baseline/combined_test0.json

@@ -1 +1 @@
-{"type":"kibana_context"}
+{"filters":null,"query":null,"timeRange":null,"type":"kibana_context"}

test/interpreter_functional/snapshots/baseline/combined_test1.json

@@ -1 +1 @@
-{"filters":[],"query":[],"type":"kibana_context"}
+{"filters":[],"query":[],"timeRange":null,"type":"kibana_context"}

test/interpreter_functional/snapshots/baseline/combined_test3.json

@@ -1 +1 @@
-{"as":"visualization","type":"render","value":{"params":{"listenOnChange":true},"visConfig":{"dimensions":{"bucket":{"accessor":0,"format":{"id":"string","params":{}},"type":"vis_dimension"},"metrics":[{"accessor":1,"format":{"id":"number","params":{}},"type":"vis_dimension"}]},"metric":{"colorSchema":"Green to Red","invertColors":false,"labels":{"show":true},"metricColorMode":"None","percentageMode":false,"style":{"bgColor":false,"bgFill":"#000","fontSize":60,"labelColor":false,"subText":""},"useRanges":false}},"visData":{"columns":[{"id":"col-0-2","name":"response.raw: Descending"},{"id":"col-1-1","name":"Count"}],"rows":[{"col-0-2":"200","col-1-1":12891},{"col-0-2":"404","col-1-1":696},{"col-0-2":"503","col-1-1":417}],"type":"kibana_datatable"},"visType":"metric"}}
+{"as":"visualization","type":"render","value":{"params":{"listenOnChange":true},"visConfig":{"dimensions":{"bucket":{"accessor":0,"format":{"id":"string","params":{}},"type":"vis_dimension"},"metrics":[{"accessor":1,"format":{"id":"number","params":{}},"type":"vis_dimension"}]},"metric":{"colorSchema":"Green to Red","colorsRange":[{"from":0,"to":10000,"type":"range"}],"invertColors":false,"labels":{"show":true},"metricColorMode":"None","percentageMode":false,"style":{"bgColor":false,"bgFill":"#000","fontSize":60,"labelColor":false,"subText":""},"useRanges":false}},"visData":{"columns":[{"id":"col-0-2","name":"response.raw: Descending"},{"id":"col-1-1","name":"Count"}],"rows":[{"col-0-2":"200","col-1-1":12891},{"col-0-2":"404","col-1-1":696},{"col-0-2":"503","col-1-1":417}],"type":"kibana_datatable"},"visType":"metric"}}

test/interpreter_functional/snapshots/baseline/final_output_test.json

@@ -1 +1 @@
-{"as":"visualization","type":"render","value":{"params":{"listenOnChange":true},"visConfig":{"dimensions":{"bucket":{"accessor":0,"format":{"id":"string","params":{}},"type":"vis_dimension"},"metrics":[{"accessor":1,"format":{"id":"number","params":{}},"type":"vis_dimension"}]},"metric":{"colorSchema":"Green to Red","invertColors":false,"labels":{"show":true},"metricColorMode":"None","percentageMode":false,"style":{"bgColor":false,"bgFill":"#000","fontSize":60,"labelColor":false,"subText":""},"useRanges":false}},"visData":{"columns":[{"id":"col-0-2","name":"response.raw: Descending"},{"id":"col-1-1","name":"Count"}],"rows":[{"col-0-2":"200","col-1-1":12891},{"col-0-2":"404","col-1-1":696},{"col-0-2":"503","col-1-1":417}],"type":"kibana_datatable"},"visType":"metric"}}
+{"as":"visualization","type":"render","value":{"params":{"listenOnChange":true},"visConfig":{"dimensions":{"bucket":{"accessor":0,"format":{"id":"string","params":{}},"type":"vis_dimension"},"metrics":[{"accessor":1,"format":{"id":"number","params":{}},"type":"vis_dimension"}]},"metric":{"colorSchema":"Green to Red","colorsRange":[{"from":0,"to":10000,"type":"range"}],"invertColors":false,"labels":{"show":true},"metricColorMode":"None","percentageMode":false,"style":{"bgColor":false,"bgFill":"#000","fontSize":60,"labelColor":false,"subText":""},"useRanges":false}},"visData":{"columns":[{"id":"col-0-2","name":"response.raw: Descending"},{"id":"col-1-1","name":"Count"}],"rows":[{"col-0-2":"200","col-1-1":12891},{"col-0-2":"404","col-1-1":696},{"col-0-2":"503","col-1-1":417}],"type":"kibana_datatable"},"visType":"metric"}}

test/interpreter_functional/snapshots/baseline/metric_all_data.json

@@ -1 +1 @@
-{"as":"visualization","type":"render","value":{"params":{"listenOnChange":true},"visConfig":{"dimensions":{"bucket":{"accessor":2,"format":{"id":"string","params":{}},"type":"vis_dimension"},"metrics":[{"accessor":0,"format":{"id":"string","params":{}},"type":"vis_dimension"}]},"metric":{"colorSchema":"Green to Red","invertColors":false,"labels":{"show":true},"metricColorMode":"None","percentageMode":false,"style":{"bgColor":false,"bgFill":"#000","fontSize":60,"labelColor":false,"subText":""},"useRanges":false}},"visData":{"columns":[{"id":"col-0-2","name":"response.raw: Descending"},{"id":"col-1-1","name":"Count"},{"id":"col-2-1","name":"Max bytes"}],"rows":[{"col-0-2":"200","col-1-1":12891,"col-2-1":19986},{"col-0-2":"404","col-1-1":696,"col-2-1":19881},{"col-0-2":"503","col-1-1":417,"col-2-1":0}],"type":"kibana_datatable"},"visType":"metric"}}
+{"as":"visualization","type":"render","value":{"params":{"listenOnChange":true},"visConfig":{"dimensions":{"bucket":{"accessor":2,"format":{"id":"string","params":{}},"type":"vis_dimension"},"metrics":[{"accessor":0,"format":{"id":"string","params":{}},"type":"vis_dimension"}]},"metric":{"colorSchema":"Green to Red","colorsRange":[{"from":0,"to":10000,"type":"range"}],"invertColors":false,"labels":{"show":true},"metricColorMode":"None","percentageMode":false,"style":{"bgColor":false,"bgFill":"#000","fontSize":60,"labelColor":false,"subText":""},"useRanges":false}},"visData":{"columns":[{"id":"col-0-2","name":"response.raw: Descending"},{"id":"col-1-1","name":"Count"},{"id":"col-2-1","name":"Max bytes"}],"rows":[{"col-0-2":"200","col-1-1":12891,"col-2-1":19986},{"col-0-2":"404","col-1-1":696,"col-2-1":19881},{"col-0-2":"503","col-1-1":417,"col-2-1":0}],"type":"kibana_datatable"},"visType":"metric"}}

test/interpreter_functional/snapshots/baseline/metric_invalid_data.json

@@ -0,0 +1 @@
+"[metricVis] > [visdimension] > Can not cast 'null' to any of 'kibana_datatable'"

test/interpreter_functional/snapshots/baseline/metric_multi_metric_data.json

@@ -1 +1 @@
-{"as":"visualization","type":"render","value":{"params":{"listenOnChange":true},"visConfig":{"dimensions":{"metrics":[{"accessor":0,"format":{"id":"string","params":{}},"type":"vis_dimension"},{"accessor":1,"format":{"id":"string","params":{}},"type":"vis_dimension"}]},"metric":{"colorSchema":"Green to Red","invertColors":false,"labels":{"show":true},"metricColorMode":"None","percentageMode":false,"style":{"bgColor":false,"bgFill":"#000","fontSize":60,"labelColor":false,"subText":""},"useRanges":false}},"visData":{"columns":[{"id":"col-0-2","name":"response.raw: Descending"},{"id":"col-1-1","name":"Count"},{"id":"col-2-1","name":"Max bytes"}],"rows":[{"col-0-2":"200","col-1-1":12891,"col-2-1":19986},{"col-0-2":"404","col-1-1":696,"col-2-1":19881},{"col-0-2":"503","col-1-1":417,"col-2-1":0}],"type":"kibana_datatable"},"visType":"metric"}}
+{"as":"visualization","type":"render","value":{"params":{"listenOnChange":true},"visConfig":{"dimensions":{"metrics":[{"accessor":0,"format":{"id":"string","params":{}},"type":"vis_dimension"},{"accessor":1,"format":{"id":"string","params":{}},"type":"vis_dimension"}]},"metric":{"colorSchema":"Green to Red","colorsRange":[{"from":0,"to":10000,"type":"range"}],"invertColors":false,"labels":{"show":true},"metricColorMode":"None","percentageMode":false,"style":{"bgColor":false,"bgFill":"#000","fontSize":60,"labelColor":false,"subText":""},"useRanges":false}},"visData":{"columns":[{"id":"col-0-2","name":"response.raw: Descending"},{"id":"col-1-1","name":"Count"},{"id":"col-2-1","name":"Max bytes"}],"rows":[{"col-0-2":"200","col-1-1":12891,"col-2-1":19986},{"col-0-2":"404","col-1-1":696,"col-2-1":19881},{"col-0-2":"503","col-1-1":417,"col-2-1":0}],"type":"kibana_datatable"},"visType":"metric"}}

test/interpreter_functional/snapshots/baseline/metric_single_metric_data.json

@@ -1 +1 @@
-{"as":"visualization","type":"render","value":{"params":{"listenOnChange":true},"visConfig":{"dimensions":{"metrics":[{"accessor":0,"format":{"id":"string","params":{}},"type":"vis_dimension"}]},"metric":{"colorSchema":"Green to Red","invertColors":false,"labels":{"show":true},"metricColorMode":"None","percentageMode":false,"style":{"bgColor":false,"bgFill":"#000","fontSize":60,"labelColor":false,"subText":""},"useRanges":false}},"visData":{"columns":[{"id":"col-0-2","name":"response.raw: Descending"},{"id":"col-1-1","name":"Count"},{"id":"col-2-1","name":"Max bytes"}],"rows":[{"col-0-2":"200","col-1-1":12891,"col-2-1":19986},{"col-0-2":"404","col-1-1":696,"col-2-1":19881},{"col-0-2":"503","col-1-1":417,"col-2-1":0}],"type":"kibana_datatable"},"visType":"metric"}}
+{"as":"visualization","type":"render","value":{"params":{"listenOnChange":true},"visConfig":{"dimensions":{"metrics":[{"accessor":0,"format":{"id":"string","params":{}},"type":"vis_dimension"}]},"metric":{"colorSchema":"Green to Red","colorsRange":[{"from":0,"to":10000,"type":"range"}],"invertColors":false,"labels":{"show":true},"metricColorMode":"None","percentageMode":false,"style":{"bgColor":false,"bgFill":"#000","fontSize":60,"labelColor":false,"subText":""},"useRanges":false}},"visData":{"columns":[{"id":"col-0-2","name":"response.raw: Descending"},{"id":"col-1-1","name":"Count"},{"id":"col-2-1","name":"Max bytes"}],"rows":[{"col-0-2":"200","col-1-1":12891,"col-2-1":19986},{"col-0-2":"404","col-1-1":696,"col-2-1":19881},{"col-0-2":"503","col-1-1":417,"col-2-1":0}],"type":"kibana_datatable"},"visType":"metric"}}

test/interpreter_functional/snapshots/baseline/partial_test_1.json

@@ -0,0 +1 @@
+{"as":"visualization","type":"render","value":{"params":{"listenOnChange":true},"visConfig":{"bucket":{"accessor":0,"format":{"id":"string","params":{}},"type":"vis_dimension"},"maxFontSize":72,"metric":{"accessor":1,"format":{"id":"number","params":{}},"type":"vis_dimension"},"minFontSize":18,"orientation":"single","scale":"linear","showLabel":true},"visData":{"columns":[{"id":"col-0-2","name":"response.raw: Descending"},{"id":"col-1-1","name":"Count"}],"rows":[{"col-0-2":"200","col-1-1":12891},{"col-0-2":"404","col-1-1":696},{"col-0-2":"503","col-1-1":417}],"type":"kibana_datatable"},"visType":"tagcloud"}}

test/interpreter_functional/snapshots/baseline/partial_test_2.json

@@ -0,0 +1 @@
+{"as":"visualization","type":"render","value":{"params":{"listenOnChange":true},"visConfig":{"dimensions":{"bucket":{"accessor":0,"format":{"id":"string","params":{}},"type":"vis_dimension"},"metrics":[{"accessor":1,"format":{"id":"number","params":{}},"type":"vis_dimension"}]},"metric":{"colorSchema":"Green to Red","colorsRange":[{"from":0,"to":10000,"type":"range"}],"invertColors":false,"labels":{"show":true},"metricColorMode":"None","percentageMode":false,"style":{"bgColor":false,"bgFill":"#000","fontSize":60,"labelColor":false,"subText":""},"useRanges":false}},"visData":{"columns":[{"id":"col-0-2","name":"response.raw: Descending"},{"id":"col-1-1","name":"Count"}],"rows":[{"col-0-2":"200","col-1-1":12891},{"col-0-2":"404","col-1-1":696},{"col-0-2":"503","col-1-1":417}],"type":"kibana_datatable"},"visType":"metric"}}

test/interpreter_functional/snapshots/baseline/partial_test_3.json

@@ -0,0 +1 @@
+{"as":"visualization","type":"render","value":{"params":{"listenOnChange":true},"visConfig":{"bucket":{"accessor":0},"metric":{"accessor":1,"format":{"id":"number"}}},"visData":{"columns":[{"id":"col-0-2","name":"response.raw: Descending"},{"id":"col-1-1","name":"Count"}],"rows":[{"col-0-2":"200","col-1-1":12891},{"col-0-2":"404","col-1-1":696},{"col-0-2":"503","col-1-1":417}],"type":"kibana_datatable"},"visType":"region_map"}}