improve lens lazy loading (#79292)

This commit is contained in:
Joe Reuter 2020-10-02 21:50:25 +02:00 committed by GitHub
parent 66878b4285
commit b66de2ce1d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 77 additions and 25 deletions

View file

@ -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';

View file

@ -5,3 +5,5 @@
*/
export * from './editor_frame';
export * from './state_helpers';
export * from './state_management';

View file

@ -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,8 +102,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: {} },
],
}),
},
{} as LensEmbeddableInput
);
@ -112,7 +117,8 @@ describe('embeddable', () => {
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
);

View file

@ -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) {

View file

@ -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

View file

@ -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';

View file

@ -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>