[Visualize] Lazy load default editor, fix duplicated styles (#66732)
* Lazy load bundle, fix duplicated styles * Add EuiLoadingChart and EuiErrorBoundary * Return localStorage service * Use mono spinner * Get rid of loading the editor outside of visualize mounting
This commit is contained in:
parent
2d32034f96
commit
66c24c5a4a
|
@ -17,16 +17,23 @@
|
|||
* under the License.
|
||||
*/
|
||||
|
||||
import './index.scss';
|
||||
|
||||
import React, { useEffect, useRef, useState, useCallback } from 'react';
|
||||
|
||||
import { EditorRenderProps } from 'src/plugins/visualize/public';
|
||||
import { PanelsContainer, Panel } from '../../kibana_react/public';
|
||||
import { KibanaContextProvider, PanelsContainer, Panel } from '../../kibana_react/public';
|
||||
import { Storage } from '../../kibana_utils/public';
|
||||
|
||||
import { DefaultEditorSideBar } from './components/sidebar';
|
||||
import { DefaultEditorControllerState } from './default_editor_controller';
|
||||
import { getInitialWidth } from './editor_size';
|
||||
|
||||
const localStorage = new Storage(window.localStorage);
|
||||
|
||||
function DefaultEditor({
|
||||
core,
|
||||
data,
|
||||
vis,
|
||||
uiState,
|
||||
timeRange,
|
||||
|
@ -37,7 +44,7 @@ function DefaultEditor({
|
|||
eventEmitter,
|
||||
linked,
|
||||
savedSearch,
|
||||
}: DefaultEditorControllerState & Omit<EditorRenderProps, 'data' | 'core'>) {
|
||||
}: DefaultEditorControllerState & EditorRenderProps) {
|
||||
const visRef = useRef<HTMLDivElement>(null);
|
||||
const [isCollapsed, setIsCollapsed] = useState(false);
|
||||
|
||||
|
@ -69,34 +76,49 @@ function DefaultEditor({
|
|||
const editorInitialWidth = getInitialWidth(vis.type.editorConfig.defaultSize);
|
||||
|
||||
return (
|
||||
<PanelsContainer
|
||||
className="visEditor--default"
|
||||
resizerClassName={`visEditor__resizer ${isCollapsed ? 'visEditor__resizer-isHidden' : ''}`}
|
||||
>
|
||||
<Panel className="visEditor__visualization" initialWidth={100 - editorInitialWidth}>
|
||||
<div className="visEditor__canvas" ref={visRef} data-shared-items-container />
|
||||
</Panel>
|
||||
|
||||
<Panel
|
||||
className={`visEditor__collapsibleSidebar ${
|
||||
isCollapsed ? 'visEditor__collapsibleSidebar-isClosed' : ''
|
||||
}`}
|
||||
initialWidth={editorInitialWidth}
|
||||
<core.i18n.Context>
|
||||
<KibanaContextProvider
|
||||
services={{
|
||||
appName: 'vis_default_editor',
|
||||
storage: localStorage,
|
||||
data,
|
||||
...core,
|
||||
}}
|
||||
>
|
||||
<DefaultEditorSideBar
|
||||
isCollapsed={isCollapsed}
|
||||
onClickCollapse={onClickCollapse}
|
||||
optionTabs={optionTabs}
|
||||
vis={vis}
|
||||
uiState={uiState}
|
||||
isLinkedSearch={linked}
|
||||
savedSearch={savedSearch}
|
||||
timeRange={timeRange}
|
||||
eventEmitter={eventEmitter}
|
||||
/>
|
||||
</Panel>
|
||||
</PanelsContainer>
|
||||
<PanelsContainer
|
||||
className="visEditor--default"
|
||||
resizerClassName={`visEditor__resizer ${
|
||||
isCollapsed ? 'visEditor__resizer-isHidden' : ''
|
||||
}`}
|
||||
>
|
||||
<Panel className="visEditor__visualization" initialWidth={100 - editorInitialWidth}>
|
||||
<div className="visEditor__canvas" ref={visRef} data-shared-items-container />
|
||||
</Panel>
|
||||
|
||||
<Panel
|
||||
className={`visEditor__collapsibleSidebar ${
|
||||
isCollapsed ? 'visEditor__collapsibleSidebar-isClosed' : ''
|
||||
}`}
|
||||
initialWidth={editorInitialWidth}
|
||||
>
|
||||
<DefaultEditorSideBar
|
||||
isCollapsed={isCollapsed}
|
||||
onClickCollapse={onClickCollapse}
|
||||
optionTabs={optionTabs}
|
||||
vis={vis}
|
||||
uiState={uiState}
|
||||
isLinkedSearch={linked}
|
||||
savedSearch={savedSearch}
|
||||
timeRange={timeRange}
|
||||
eventEmitter={eventEmitter}
|
||||
/>
|
||||
</Panel>
|
||||
</PanelsContainer>
|
||||
</KibanaContextProvider>
|
||||
</core.i18n.Context>
|
||||
);
|
||||
}
|
||||
|
||||
export { DefaultEditor };
|
||||
// default export required for React.Lazy
|
||||
// eslint-disable-next-line import/no-default-export
|
||||
export { DefaultEditor as default };
|
||||
|
|
|
@ -17,19 +17,17 @@
|
|||
* under the License.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import React, { Suspense, lazy } from 'react';
|
||||
import { render, unmountComponentAtNode } from 'react-dom';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import { EventEmitter } from 'events';
|
||||
import { EuiErrorBoundary, EuiLoadingChart } from '@elastic/eui';
|
||||
|
||||
import { EditorRenderProps } from 'src/plugins/visualize/public';
|
||||
import { Vis, VisualizeEmbeddableContract } from 'src/plugins/visualizations/public';
|
||||
import { Storage } from '../../kibana_utils/public';
|
||||
import { KibanaContextProvider } from '../../kibana_react/public';
|
||||
import { DefaultEditor } from './default_editor';
|
||||
import { DefaultEditorDataTab, OptionTab } from './components/sidebar';
|
||||
|
||||
const localStorage = new Storage(window.localStorage);
|
||||
const DefaultEditor = lazy(() => import('./default_editor'));
|
||||
|
||||
export interface DefaultEditorControllerState {
|
||||
vis: Vis;
|
||||
|
@ -80,20 +78,26 @@ class DefaultEditorController {
|
|||
};
|
||||
}
|
||||
|
||||
render({ data, core, ...props }: EditorRenderProps) {
|
||||
render(props: EditorRenderProps) {
|
||||
render(
|
||||
<core.i18n.Context>
|
||||
<KibanaContextProvider
|
||||
services={{
|
||||
appName: 'vis_default_editor',
|
||||
storage: localStorage,
|
||||
data,
|
||||
...core,
|
||||
}}
|
||||
<EuiErrorBoundary>
|
||||
<Suspense
|
||||
fallback={
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flex: '1 1 auto',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<EuiLoadingChart size="xl" mono />
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<DefaultEditor {...this.state} {...props} />
|
||||
</KibanaContextProvider>
|
||||
</core.i18n.Context>,
|
||||
</Suspense>
|
||||
</EuiErrorBoundary>,
|
||||
this.el
|
||||
);
|
||||
}
|
||||
|
|
|
@ -1,5 +1,3 @@
|
|||
@import 'src/legacy/ui/public/styles/styling_constants';
|
||||
|
||||
$vis-editor-sidebar-min-width: 350px;
|
||||
|
||||
// Main layout
|
||||
|
|
|
@ -17,8 +17,6 @@
|
|||
* under the License.
|
||||
*/
|
||||
|
||||
import './index.scss';
|
||||
|
||||
export { DefaultEditorController } from './default_editor_controller';
|
||||
export { useValidation } from './components/controls/utils';
|
||||
export { RangesParamEditor, RangeValues } from './components/controls/ranges';
|
||||
|
|
|
@ -17,6 +17,8 @@
|
|||
* under the License.
|
||||
*/
|
||||
|
||||
import { DefaultEditorController } from '../../../../vis_default_editor/public';
|
||||
|
||||
export function initVisEditorDirective(app, deps) {
|
||||
app.directive('visualizationEditor', function($timeout) {
|
||||
return {
|
||||
|
@ -32,7 +34,7 @@ export function initVisEditorDirective(app, deps) {
|
|||
eventEmitter: '=',
|
||||
},
|
||||
link: function($scope, element) {
|
||||
const Editor = $scope.vis.type.editor || deps.DefaultVisualizationEditor;
|
||||
const Editor = $scope.vis.type.editor || DefaultEditorController;
|
||||
const editor = new Editor(
|
||||
element[0],
|
||||
$scope.vis,
|
||||
|
|
|
@ -34,7 +34,6 @@ import { DataPublicPluginStart } from '../../data/public';
|
|||
import { VisualizationsStart } from '../../visualizations/public';
|
||||
import { SavedVisualizations } from './application/types';
|
||||
import { KibanaLegacyStart } from '../../kibana_legacy/public';
|
||||
import { DefaultEditorController } from '../../vis_default_editor/public';
|
||||
import { DashboardStart } from '../../dashboard/public';
|
||||
import { SavedObjectsStart } from '../../saved_objects/public';
|
||||
|
||||
|
@ -56,7 +55,6 @@ export interface VisualizeKibanaServices {
|
|||
dashboard: DashboardStart;
|
||||
I18nContext: I18nStart['Context'];
|
||||
setActiveUrl: (newUrl: string) => void;
|
||||
DefaultVisualizationEditor: typeof DefaultEditorController;
|
||||
createVisEmbeddableFromObject: VisualizationsStart['__LEGACY']['createVisEmbeddableFromObject'];
|
||||
scopedHistory: () => ScopedHistory;
|
||||
savedObjects: SavedObjectsStart;
|
||||
|
|
|
@ -40,7 +40,6 @@ import { VisualizationsStart } from '../../visualizations/public';
|
|||
import { VisualizeConstants } from './application/visualize_constants';
|
||||
import { setServices, VisualizeKibanaServices } from './kibana_services';
|
||||
import { FeatureCatalogueCategory, HomePublicPluginSetup } from '../../home/public';
|
||||
import { DefaultEditorController } from '../../vis_default_editor/public';
|
||||
import { DashboardStart } from '../../dashboard/public';
|
||||
import { DEFAULT_APP_CATEGORIES } from '../../../core/public';
|
||||
import { SavedObjectsStart } from '../../saved_objects/public';
|
||||
|
@ -132,7 +131,6 @@ export class VisualizePlugin
|
|||
visualizations: pluginsStart.visualizations,
|
||||
I18nContext: coreStart.i18n.Context,
|
||||
setActiveUrl,
|
||||
DefaultVisualizationEditor: DefaultEditorController,
|
||||
createVisEmbeddableFromObject:
|
||||
pluginsStart.visualizations.__LEGACY.createVisEmbeddableFromObject,
|
||||
dashboard: pluginsStart.dashboard,
|
||||
|
|
Loading…
Reference in a new issue