Skip to content

Commit

Permalink
load react component lazily in so management section (#64285) (#64746)
Browse files Browse the repository at this point in the history
* load react component lazily in so management section

* remove unused imports

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
  • Loading branch information
mshustov and elasticmachine authored Apr 29, 2020
1 parent cf2269e commit edabd95
Show file tree
Hide file tree
Showing 3 changed files with 191 additions and 133 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -17,23 +17,15 @@
* under the License.
*/

import React, { useEffect } from 'react';
import React, { lazy, Suspense } from 'react';
import ReactDOM from 'react-dom';
import { HashRouter, Switch, Route, useParams, useLocation } from 'react-router-dom';
import { parse } from 'query-string';
import { get } from 'lodash';
import { i18n } from '@kbn/i18n';
import { HashRouter, Switch, Route } from 'react-router-dom';
import { I18nProvider } from '@kbn/i18n/react';
import { CoreSetup, CoreStart, ChromeBreadcrumb, Capabilities } from 'src/core/public';
import { EuiLoadingSpinner } from '@elastic/eui';
import { CoreSetup, Capabilities } from 'src/core/public';
import { ManagementAppMountParams } from '../../../management/public';
import { DataPublicPluginStart } from '../../../data/public';
import { StartDependencies, SavedObjectsManagementPluginStart } from '../plugin';
import {
ISavedObjectsManagementServiceRegistry,
SavedObjectsManagementActionServiceStart,
} from '../services';
import { SavedObjectsTable } from './objects_table';
import { SavedObjectEdition } from './object_view';
import { ISavedObjectsManagementServiceRegistry } from '../services';
import { getAllowedTypes } from './../lib';

interface MountParams {
Expand All @@ -44,6 +36,8 @@ interface MountParams {

let allowedObjectTypes: string[] | undefined;

const SavedObjectsEditionPage = lazy(() => import('./saved_objects_edition_page'));
const SavedObjectsTablePage = lazy(() => import('./saved_objects_table_page'));
export const mountManagementSection = async ({
core,
mountParams,
Expand All @@ -63,23 +57,27 @@ export const mountManagementSection = async ({
<Switch>
<Route path={'/:service/:id'} exact={true}>
<RedirectToHomeIfUnauthorized capabilities={capabilities}>
<SavedObjectsEditionPage
coreStart={coreStart}
serviceRegistry={serviceRegistry}
setBreadcrumbs={setBreadcrumbs}
/>
<Suspense fallback={<EuiLoadingSpinner />}>
<SavedObjectsEditionPage
coreStart={coreStart}
serviceRegistry={serviceRegistry}
setBreadcrumbs={setBreadcrumbs}
/>
</Suspense>
</RedirectToHomeIfUnauthorized>
</Route>
<Route path={'/'} exact={false}>
<RedirectToHomeIfUnauthorized capabilities={capabilities}>
<SavedObjectsTablePage
coreStart={coreStart}
dataStart={data}
serviceRegistry={serviceRegistry}
actionRegistry={pluginStart.actions}
allowedTypes={allowedObjectTypes}
setBreadcrumbs={setBreadcrumbs}
/>
<Suspense fallback={<EuiLoadingSpinner />}>
<SavedObjectsTablePage
coreStart={coreStart}
dataStart={data}
serviceRegistry={serviceRegistry}
actionRegistry={pluginStart.actions}
allowedTypes={allowedObjectTypes}
setBreadcrumbs={setBreadcrumbs}
/>
</Suspense>
</RedirectToHomeIfUnauthorized>
</Route>
</Switch>
Expand All @@ -103,110 +101,3 @@ const RedirectToHomeIfUnauthorized: React.FunctionComponent<{
}
return children! as React.ReactElement;
};

const SavedObjectsEditionPage = ({
coreStart,
serviceRegistry,
setBreadcrumbs,
}: {
coreStart: CoreStart;
serviceRegistry: ISavedObjectsManagementServiceRegistry;
setBreadcrumbs: (crumbs: ChromeBreadcrumb[]) => void;
}) => {
const { service: serviceName, id } = useParams<{ service: string; id: string }>();
const capabilities = coreStart.application.capabilities;

const { search } = useLocation();
const query = parse(search);
const service = serviceRegistry.get(serviceName);

useEffect(() => {
setBreadcrumbs([
{
text: i18n.translate('savedObjectsManagement.breadcrumb.index', {
defaultMessage: 'Saved objects',
}),
href: '#/management/kibana/objects',
},
{
text: i18n.translate('savedObjectsManagement.breadcrumb.edit', {
defaultMessage: 'Edit {savedObjectType}',
values: { savedObjectType: service?.service.type ?? 'object' },
}),
},
]);
}, [setBreadcrumbs, service]);

return (
<SavedObjectEdition
id={id}
serviceName={serviceName}
serviceRegistry={serviceRegistry}
savedObjectsClient={coreStart.savedObjects.client}
overlays={coreStart.overlays}
notifications={coreStart.notifications}
capabilities={capabilities}
notFoundType={query.notFound as string}
/>
);
};

const SavedObjectsTablePage = ({
coreStart,
dataStart,
allowedTypes,
serviceRegistry,
actionRegistry,
setBreadcrumbs,
}: {
coreStart: CoreStart;
dataStart: DataPublicPluginStart;
allowedTypes: string[];
serviceRegistry: ISavedObjectsManagementServiceRegistry;
actionRegistry: SavedObjectsManagementActionServiceStart;
setBreadcrumbs: (crumbs: ChromeBreadcrumb[]) => void;
}) => {
const capabilities = coreStart.application.capabilities;
const itemsPerPage = coreStart.uiSettings.get<number>('savedObjects:perPage', 50);

useEffect(() => {
setBreadcrumbs([
{
text: i18n.translate('savedObjectsManagement.breadcrumb.index', {
defaultMessage: 'Saved objects',
}),
href: '#/management/kibana/objects',
},
]);
}, [setBreadcrumbs]);

return (
<SavedObjectsTable
allowedTypes={allowedTypes}
serviceRegistry={serviceRegistry}
actionRegistry={actionRegistry}
savedObjectsClient={coreStart.savedObjects.client}
indexPatterns={dataStart.indexPatterns}
search={dataStart.search}
http={coreStart.http}
overlays={coreStart.overlays}
notifications={coreStart.notifications}
applications={coreStart.application}
perPageConfig={itemsPerPage}
goInspectObject={savedObject => {
const { editUrl } = savedObject.meta;
if (editUrl) {
// previously, kbnUrl.change(object.meta.editUrl); was used.
// using direct access to location.hash seems the only option for now,
// as using react-router-dom will prefix the url with the router's basename
// which should be ignored there.
window.location.hash = editUrl;
}
}}
canGoInApp={savedObject => {
const { inAppUrl } = savedObject.meta;
return inAppUrl ? get(capabilities, inAppUrl.uiCapabilitiesPath) : false;
}}
/>
);
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/

import React, { useEffect } from 'react';
import { useParams, useLocation } from 'react-router-dom';
import { parse } from 'query-string';
import { i18n } from '@kbn/i18n';
import { CoreStart, ChromeBreadcrumb } from 'src/core/public';
import { ISavedObjectsManagementServiceRegistry } from '../services';
import { SavedObjectEdition } from './object_view';

const SavedObjectsEditionPage = ({
coreStart,
serviceRegistry,
setBreadcrumbs,
}: {
coreStart: CoreStart;
serviceRegistry: ISavedObjectsManagementServiceRegistry;
setBreadcrumbs: (crumbs: ChromeBreadcrumb[]) => void;
}) => {
const { service: serviceName, id } = useParams<{ service: string; id: string }>();
const capabilities = coreStart.application.capabilities;

const { search } = useLocation();
const query = parse(search);
const service = serviceRegistry.get(serviceName);

useEffect(() => {
setBreadcrumbs([
{
text: i18n.translate('savedObjectsManagement.breadcrumb.index', {
defaultMessage: 'Saved objects',
}),
href: '#/management/kibana/objects',
},
{
text: i18n.translate('savedObjectsManagement.breadcrumb.edit', {
defaultMessage: 'Edit {savedObjectType}',
values: { savedObjectType: service?.service.type ?? 'object' },
}),
},
]);
}, [setBreadcrumbs, service]);

return (
<SavedObjectEdition
id={id}
serviceName={serviceName}
serviceRegistry={serviceRegistry}
savedObjectsClient={coreStart.savedObjects.client}
overlays={coreStart.overlays}
notifications={coreStart.notifications}
capabilities={capabilities}
notFoundType={query.notFound as string}
/>
);
};

// eslint-disable-next-line import/no-default-export
export { SavedObjectsEditionPage as default };
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/

import React, { useEffect } from 'react';
import { get } from 'lodash';
import { i18n } from '@kbn/i18n';
import { CoreStart, ChromeBreadcrumb } from 'src/core/public';
import { DataPublicPluginStart } from '../../../data/public';
import {
ISavedObjectsManagementServiceRegistry,
SavedObjectsManagementActionServiceStart,
} from '../services';
import { SavedObjectsTable } from './objects_table';

const SavedObjectsTablePage = ({
coreStart,
dataStart,
allowedTypes,
serviceRegistry,
actionRegistry,
setBreadcrumbs,
}: {
coreStart: CoreStart;
dataStart: DataPublicPluginStart;
allowedTypes: string[];
serviceRegistry: ISavedObjectsManagementServiceRegistry;
actionRegistry: SavedObjectsManagementActionServiceStart;
setBreadcrumbs: (crumbs: ChromeBreadcrumb[]) => void;
}) => {
const capabilities = coreStart.application.capabilities;
const itemsPerPage = coreStart.uiSettings.get<number>('savedObjects:perPage', 50);

useEffect(() => {
setBreadcrumbs([
{
text: i18n.translate('savedObjectsManagement.breadcrumb.index', {
defaultMessage: 'Saved objects',
}),
href: '#/management/kibana/objects',
},
]);
}, [setBreadcrumbs]);

return (
<SavedObjectsTable
allowedTypes={allowedTypes}
serviceRegistry={serviceRegistry}
actionRegistry={actionRegistry}
savedObjectsClient={coreStart.savedObjects.client}
indexPatterns={dataStart.indexPatterns}
search={dataStart.search}
http={coreStart.http}
overlays={coreStart.overlays}
notifications={coreStart.notifications}
applications={coreStart.application}
perPageConfig={itemsPerPage}
goInspectObject={savedObject => {
const { editUrl } = savedObject.meta;
if (editUrl) {
// previously, kbnUrl.change(object.meta.editUrl); was used.
// using direct access to location.hash seems the only option for now,
// as using react-router-dom will prefix the url with the router's basename
// which should be ignored there.
window.location.hash = editUrl;
}
}}
canGoInApp={savedObject => {
const { inAppUrl } = savedObject.meta;
return inAppUrl ? get(capabilities, inAppUrl.uiCapabilitiesPath) : false;
}}
/>
);
};
// eslint-disable-next-line import/no-default-export
export { SavedObjectsTablePage as default };

0 comments on commit edabd95

Please sign in to comment.