improve lens lazy loading (#79292)

elastic · Oct 2, 2020 · b66de2c · b66de2c
1 parent 66878b4
commit b66de2c
Show file tree

Hide file tree

Showing 7 changed files with 77 additions and 25 deletions.
diff --git a/x-pack/plugins/lens/public/async_services.ts b/x-pack/plugins/lens/public/async_services.ts
@@ -21,4 +21,5 @@ export * from './xy_visualization/xy_visualization';
 export * from './indexpattern_datasource/indexpattern';
 
 export * from './editor_frame_service/editor_frame';
+export * from './editor_frame_service/embeddable';
 export * from './app_plugin/mounter';
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/index.ts b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/index.ts
@@ -5,3 +5,5 @@
  */
 
 export * from './editor_frame';
+export * from './state_helpers';
+export * from './state_management';
diff --git a/x-pack/plugins/lens/public/editor_frame_service/embeddable/embeddable.test.tsx b/x-pack/plugins/lens/public/editor_frame_service/embeddable/embeddable.test.tsx
@@ -26,7 +26,6 @@ import { VIS_EVENT_TO_TRIGGER } from '../../../../../../src/plugins/visualizatio
 import { coreMock, httpServiceMock } from '../../../../../../src/core/public/mocks';
 import { IBasePath } from '../../../../../../src/core/public';
 import { AttributeService } from '../../../../../../src/plugins/dashboard/public';
-import { Ast } from '@kbn/interpreter/common';
 import { LensAttributeService } from '../../lens_attribute_service';
 
 jest.mock('../../../../../../src/plugins/inspector/public/', () => ({
@@ -103,16 +102,23 @@ describe('embeddable', () => {
         indexPatternService: {} as IndexPatternsContract,
         editable: true,
         getTrigger,
-        documentToExpression: () => Promise.resolve({} as Ast),
-        toExpressionString: () => 'my | expression',
+        documentToExpression: () =>
+          Promise.resolve({
+            type: 'expression',
+            chain: [
+              { type: 'function', function: 'my', arguments: {} },
+              { type: 'function', function: 'expression', arguments: {} },
+            ],
+          }),
       },
       {} as LensEmbeddableInput
     );
     await embeddable.initializeSavedVis({} as LensEmbeddableInput);
     embeddable.render(mountpoint);
 
     expect(expressionRenderer).toHaveBeenCalledTimes(1);
-    expect(expressionRenderer.mock.calls[0][0]!.expression).toEqual('my | expression');
+    expect(expressionRenderer.mock.calls[0][0]!.expression).toEqual(`my
+| expression`);
   });
 
   it('should re-render if new input is pushed', async () => {
@@ -129,8 +135,14 @@ describe('embeddable', () => {
         indexPatternService: {} as IndexPatternsContract,
         editable: true,
         getTrigger,
-        documentToExpression: () => Promise.resolve({} as Ast),
-        toExpressionString: () => 'my | expression',
+        documentToExpression: () =>
+          Promise.resolve({
+            type: 'expression',
+            chain: [
+              { type: 'function', function: 'my', arguments: {} },
+              { type: 'function', function: 'expression', arguments: {} },
+            ],
+          }),
       },
       { id: '123' } as LensEmbeddableInput
     );
@@ -162,8 +174,14 @@ describe('embeddable', () => {
         indexPatternService: {} as IndexPatternsContract,
         editable: true,
         getTrigger,
-        documentToExpression: () => Promise.resolve({} as Ast),
-        toExpressionString: () => 'my | expression',
+        documentToExpression: () =>
+          Promise.resolve({
+            type: 'expression',
+            chain: [
+              { type: 'function', function: 'my', arguments: {} },
+              { type: 'function', function: 'expression', arguments: {} },
+            ],
+          }),
       },
       input
     );
@@ -208,8 +226,14 @@ describe('embeddable', () => {
         indexPatternService: {} as IndexPatternsContract,
         editable: true,
         getTrigger,
-        documentToExpression: () => Promise.resolve({} as Ast),
-        toExpressionString: () => 'my | expression',
+        documentToExpression: () =>
+          Promise.resolve({
+            type: 'expression',
+            chain: [
+              { type: 'function', function: 'my', arguments: {} },
+              { type: 'function', function: 'expression', arguments: {} },
+            ],
+          }),
       },
       input
     );
@@ -237,8 +261,14 @@ describe('embeddable', () => {
         indexPatternService: {} as IndexPatternsContract,
         editable: true,
         getTrigger,
-        documentToExpression: () => Promise.resolve({} as Ast),
-        toExpressionString: () => 'my | expression',
+        documentToExpression: () =>
+          Promise.resolve({
+            type: 'expression',
+            chain: [
+              { type: 'function', function: 'my', arguments: {} },
+              { type: 'function', function: 'expression', arguments: {} },
+            ],
+          }),
       },
       { id: '123' } as LensEmbeddableInput
     );
@@ -270,8 +300,14 @@ describe('embeddable', () => {
         indexPatternService: {} as IndexPatternsContract,
         editable: true,
         getTrigger,
-        documentToExpression: () => Promise.resolve({} as Ast),
-        toExpressionString: () => 'my | expression',
+        documentToExpression: () =>
+          Promise.resolve({
+            type: 'expression',
+            chain: [
+              { type: 'function', function: 'my', arguments: {} },
+              { type: 'function', function: 'expression', arguments: {} },
+            ],
+          }),
       },
       { id: '123', timeRange, query, filters } as LensEmbeddableInput
     );
@@ -311,8 +347,14 @@ describe('embeddable', () => {
         indexPatternService: {} as IndexPatternsContract,
         editable: true,
         getTrigger,
-        documentToExpression: () => Promise.resolve({} as Ast),
-        toExpressionString: () => 'my | expression',
+        documentToExpression: () =>
+          Promise.resolve({
+            type: 'expression',
+            chain: [
+              { type: 'function', function: 'my', arguments: {} },
+              { type: 'function', function: 'expression', arguments: {} },
+            ],
+          }),
       },
       { id: '123', timeRange, query, filters } as LensEmbeddableInput
     );

diff --git a/x-pack/plugins/lens/public/editor_frame_service/embeddable/embeddable.tsx b/x-pack/plugins/lens/public/editor_frame_service/embeddable/embeddable.tsx
@@ -18,7 +18,7 @@ import {
 import { ExecutionContextSearch } from 'src/plugins/expressions';
 
 import { Subscription } from 'rxjs';
-import { Ast } from '@kbn/interpreter/common';
+import { toExpression, Ast } from '@kbn/interpreter/common';
 import {
   ExpressionRendererEvent,
   ReactExpressionRendererType,
@@ -59,7 +59,6 @@ export interface LensEmbeddableOutput extends EmbeddableOutput {
 export interface LensEmbeddableDeps {
   attributeService: LensAttributeService;
   documentToExpression: (doc: Document) => Promise<Ast | null>;
-  toExpressionString: (astObj: Ast, type?: string) => string;
   editable: boolean;
   indexPatternService: IndexPatternsContract;
   expressionRenderer: ReactExpressionRendererType;
@@ -135,7 +134,7 @@ export class Embeddable
       savedObjectId: (input as LensByReferenceInput)?.savedObjectId,
     };
     const expression = await this.deps.documentToExpression(this.savedVis);
-    this.expression = expression ? this.deps.toExpressionString(expression) : null;
+    this.expression = expression ? toExpression(expression) : null;
     await this.initializeOutput();
     this.isInitialized = true;
     if (this.domNode) {

diff --git a/x-pack/plugins/lens/public/editor_frame_service/embeddable/embeddable_factory.ts b/x-pack/plugins/lens/public/editor_frame_service/embeddable/embeddable_factory.ts
@@ -7,7 +7,7 @@
 import { Capabilities, HttpSetup } from 'kibana/public';
 import { i18n } from '@kbn/i18n';
 import { RecursiveReadonly } from '@kbn/utility-types';
-import { toExpression, Ast } from '@kbn/interpreter/target/common';
+import { Ast } from '@kbn/interpreter/target/common';
 import {
   IndexPatternsContract,
   TimefilterContract,
@@ -17,7 +17,7 @@ import {
   EmbeddableFactoryDefinition,
   IContainer,
 } from '../../../../../../src/plugins/embeddable/public';
-import { Embeddable, LensByReferenceInput, LensEmbeddableInput } from './embeddable';
+import { LensByReferenceInput, LensEmbeddableInput } from './embeddable';
 import { DOC_TYPE } from '../../persistence';
 import { UiActionsStart } from '../../../../../../src/plugins/ui_actions/public';
 import { Document } from '../../persistence/saved_object_store';
@@ -83,6 +83,8 @@ export class EmbeddableFactory implements EmbeddableFactoryDefinition {
       indexPatternService,
     } = await this.getStartServices();
 
+    const { Embeddable } = await import('../../async_services');
+
     return new Embeddable(
       {
         attributeService,
@@ -93,7 +95,6 @@ export class EmbeddableFactory implements EmbeddableFactoryDefinition {
         basePath: coreHttp.basePath,
         getTrigger: uiActions?.getTrigger,
         documentToExpression,
-        toExpressionString: toExpression,
       },
       input,
       parent

diff --git a/x-pack/plugins/lens/public/editor_frame_service/embeddable/index.ts b/x-pack/plugins/lens/public/editor_frame_service/embeddable/index.ts
@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export * from './embeddable';
diff --git a/x-pack/plugins/lens/public/editor_frame_service/service.tsx b/x-pack/plugins/lens/public/editor_frame_service/service.tsx
@@ -25,10 +25,8 @@ import { Document } from '../persistence/saved_object_store';
 import { mergeTables } from './merge_tables';
 import { formatColumn } from './format_column';
 import { EmbeddableFactory, LensEmbeddableStartServices } from './embeddable/embeddable_factory';
-import { getActiveDatasourceIdFromDoc } from './editor_frame/state_management';
 import { UiActionsStart } from '../../../../../src/plugins/ui_actions/public';
 import { DashboardStart } from '../../../../../src/plugins/dashboard/public';
-import { persistedStateToExpression } from './editor_frame/state_helpers';
 import { LensAttributeService } from '../lens_attribute_service';
 
 export interface EditorFrameSetupPlugins {
@@ -77,6 +75,8 @@ export class EditorFrameService {
       collectAsyncDefinitions(this.visualizations),
     ]);
 
+    const { persistedStateToExpression } = await import('../async_services');
+
     return await persistedStateToExpression(resolvedDatasources, resolvedVisualizations, doc);
   }
 
@@ -133,7 +133,7 @@ export class EditorFrameService {
           const firstDatasourceId = Object.keys(resolvedDatasources)[0];
           const firstVisualizationId = Object.keys(resolvedVisualizations)[0];
 
-          const { EditorFrame } = await import('../async_services');
+          const { EditorFrame, getActiveDatasourceIdFromDoc } = await import('../async_services');
 
           render(
             <I18nProvider>