[file upload] lazy load to reduce page load size (#74967)
* [file upload] lazy load to reduce page load size * tslint
This commit is contained in:
parent
f6f59ec261
commit
187a13075b
|
@ -0,0 +1,38 @@
|
|||
/*
|
||||
* 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.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { FeatureCollection } from 'geojson';
|
||||
|
||||
export interface FileUploadComponentProps {
|
||||
appName: string;
|
||||
isIndexingTriggered: boolean;
|
||||
onFileUpload: (geojsonFile: FeatureCollection, name: string) => void;
|
||||
onFileRemove: () => void;
|
||||
onIndexReady: (indexReady: boolean) => void;
|
||||
transformDetails: string;
|
||||
onIndexingComplete: (indexResponses: {
|
||||
indexDataResp: unknown;
|
||||
indexPatternResp: unknown;
|
||||
}) => void;
|
||||
}
|
||||
|
||||
let lazyLoadPromise: Promise<React.ComponentType<FileUploadComponentProps>>;
|
||||
|
||||
export async function getFileUploadComponent(): Promise<
|
||||
React.ComponentType<FileUploadComponentProps>
|
||||
> {
|
||||
if (typeof lazyLoadPromise !== 'undefined') {
|
||||
return lazyLoadPromise;
|
||||
}
|
||||
|
||||
lazyLoadPromise = new Promise(async (resolve) => {
|
||||
// @ts-expect-error
|
||||
const { JsonUploadAndParse } = await import('./components/json_upload_and_parse');
|
||||
resolve(JsonUploadAndParse);
|
||||
});
|
||||
return lazyLoadPromise;
|
||||
}
|
|
@ -9,3 +9,5 @@ import { FileUploadPlugin } from './plugin';
|
|||
export function plugin() {
|
||||
return new FileUploadPlugin();
|
||||
}
|
||||
|
||||
export { FileUploadComponentProps } from './get_file_upload_component';
|
||||
|
|
|
@ -4,10 +4,8 @@
|
|||
* you may not use this file except in compliance with the Elastic License.
|
||||
*/
|
||||
|
||||
// @ts-ignore
|
||||
import { CoreSetup, CoreStart, Plugin } from 'kibana/server';
|
||||
// @ts-ignore
|
||||
import { JsonUploadAndParse } from './components/json_upload_and_parse';
|
||||
import { getFileUploadComponent } from './get_file_upload_component';
|
||||
// @ts-ignore
|
||||
import { setupInitServicesAndConstants, startInitServicesAndConstants } from './kibana_services';
|
||||
import { IDataPluginServices } from '../../../../src/plugins/data/public';
|
||||
|
@ -35,7 +33,7 @@ export class FileUploadPlugin implements Plugin<FileUploadPluginSetup, FileUploa
|
|||
public start(core: CoreStart, plugins: FileUploadPluginStartDependencies) {
|
||||
startInitServicesAndConstants(core, plugins);
|
||||
return {
|
||||
JsonUploadAndParse,
|
||||
getFileUploadComponent,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
|
@ -19,6 +19,7 @@ import { VectorLayer } from '../../layers/vector_layer/vector_layer';
|
|||
// @ts-expect-error
|
||||
import { createDefaultLayerDescriptor } from '../../sources/es_search_source';
|
||||
import { RenderWizardArguments } from '../../layers/layer_wizard_registry';
|
||||
import { FileUploadComponentProps } from '../../../../../file_upload/public';
|
||||
|
||||
export const INDEX_SETUP_STEP_ID = 'INDEX_SETUP_STEP_ID';
|
||||
export const INDEXING_STEP_ID = 'INDEXING_STEP_ID';
|
||||
|
@ -32,17 +33,20 @@ enum INDEXING_STAGE {
|
|||
|
||||
interface State {
|
||||
indexingStage: INDEXING_STAGE | null;
|
||||
fileUploadComponent: React.ComponentType<FileUploadComponentProps> | null;
|
||||
}
|
||||
|
||||
export class ClientFileCreateSourceEditor extends Component<RenderWizardArguments, State> {
|
||||
private _isMounted: boolean = false;
|
||||
|
||||
state = {
|
||||
state: State = {
|
||||
indexingStage: null,
|
||||
fileUploadComponent: null,
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
this._isMounted = true;
|
||||
this._loadFileUploadComponent();
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
|
@ -59,6 +63,13 @@ export class ClientFileCreateSourceEditor extends Component<RenderWizardArgument
|
|||
}
|
||||
}
|
||||
|
||||
async _loadFileUploadComponent() {
|
||||
const fileUploadComponent = await getFileUploadComponent();
|
||||
if (this._isMounted) {
|
||||
this.setState({ fileUploadComponent });
|
||||
}
|
||||
}
|
||||
|
||||
_onFileUpload = (geojsonFile: FeatureCollection, name: string) => {
|
||||
if (!this._isMounted) {
|
||||
return;
|
||||
|
@ -145,7 +156,11 @@ export class ClientFileCreateSourceEditor extends Component<RenderWizardArgument
|
|||
};
|
||||
|
||||
render() {
|
||||
const FileUpload = getFileUploadComponent();
|
||||
if (!this.state.fileUploadComponent) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const FileUpload = this.state.fileUploadComponent;
|
||||
return (
|
||||
<EuiPanel>
|
||||
<FileUpload
|
||||
|
|
|
@ -3,6 +3,7 @@
|
|||
* or more contributor license agreements. Licensed under the Elastic License;
|
||||
* you may not use this file except in compliance with the Elastic License.
|
||||
*/
|
||||
import React from 'react';
|
||||
import { DataPublicPluginStart } from 'src/plugins/data/public';
|
||||
// eslint-disable-next-line @kbn/eslint/no-restricted-paths
|
||||
import { IndexPatternsService } from 'src/plugins/data/public/index_patterns';
|
||||
|
@ -10,10 +11,11 @@ import { NavigateToAppOptions } from 'kibana/public';
|
|||
import { MapsConfigType } from '../config';
|
||||
import { MapsLegacyConfigType } from '../../../../src/plugins/maps_legacy/public';
|
||||
import { EmbeddableStart } from '../../../../src/plugins/embeddable/public';
|
||||
import { FileUploadComponentProps } from '../../file_upload/public';
|
||||
|
||||
export function getLicenseId(): any;
|
||||
export function getInspector(): any;
|
||||
export function getFileUploadComponent(): any;
|
||||
export function getFileUploadComponent(): Promise<React.ComponentType<FileUploadComponentProps>>;
|
||||
export function getIndexPatternSelectComponent(): any;
|
||||
export function getHttp(): any;
|
||||
export function getTimeFilter(): any;
|
||||
|
|
|
@ -33,8 +33,8 @@ export const getInspector = () => {
|
|||
|
||||
let fileUploadPlugin;
|
||||
export const setFileUpload = (fileUpload) => (fileUploadPlugin = fileUpload);
|
||||
export const getFileUploadComponent = () => {
|
||||
return fileUploadPlugin.JsonUploadAndParse;
|
||||
export const getFileUploadComponent = async () => {
|
||||
return await fileUploadPlugin.getFileUploadComponent();
|
||||
};
|
||||
|
||||
let uiSettings;
|
||||
|
|
Loading…
Reference in a new issue