Skip to content

Commit edabd95

Browse files
mshustovelasticmachine
mshustov
and
elasticmachine
authored
load react component lazily in so management section (#64285) (#64746)
* 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>
1 parent cf2269e commit edabd95

File tree

3 files changed

+191
-133
lines changed

3 files changed

+191
-133
lines changed

‎src/plugins/saved_objects_management/public/management_section/mount_section.tsx‎

Lines changed: 24 additions & 133 deletions
Original file line numberDiff line numberDiff line change
@@ -17,23 +17,15 @@
1717
* under the License.
1818
*/
1919

20-
import React, { useEffect } from 'react';
20+
import React, { lazy, Suspense } from 'react';
2121
import ReactDOM from 'react-dom';
22-
import { HashRouter, Switch, Route, useParams, useLocation } from 'react-router-dom';
23-
import { parse } from 'query-string';
24-
import { get } from 'lodash';
25-
import { i18n } from '@kbn/i18n';
22+
import { HashRouter, Switch, Route } from 'react-router-dom';
2623
import { I18nProvider } from '@kbn/i18n/react';
27-
import { CoreSetup, CoreStart, ChromeBreadcrumb, Capabilities } from 'src/core/public';
24+
import { EuiLoadingSpinner } from '@elastic/eui';
25+
import { CoreSetup, Capabilities } from 'src/core/public';
2826
import { ManagementAppMountParams } from '../../../management/public';
29-
import { DataPublicPluginStart } from '../../../data/public';
3027
import { StartDependencies, SavedObjectsManagementPluginStart } from '../plugin';
31-
import {
32-
ISavedObjectsManagementServiceRegistry,
33-
SavedObjectsManagementActionServiceStart,
34-
} from '../services';
35-
import { SavedObjectsTable } from './objects_table';
36-
import { SavedObjectEdition } from './object_view';
28+
import { ISavedObjectsManagementServiceRegistry } from '../services';
3729
import { getAllowedTypes } from './../lib';
3830

3931
interface MountParams {
@@ -44,6 +36,8 @@ interface MountParams {
4436

4537
let allowedObjectTypes: string[] | undefined;
4638

39+
const SavedObjectsEditionPage = lazy(() => import('./saved_objects_edition_page'));
40+
const SavedObjectsTablePage = lazy(() => import('./saved_objects_table_page'));
4741
export const mountManagementSection = async ({
4842
core,
4943
mountParams,
@@ -63,23 +57,27 @@ export const mountManagementSection = async ({
6357
<Switch>
6458
<Route path={'/:service/:id'} exact={true}>
6559
<RedirectToHomeIfUnauthorized capabilities={capabilities}>
66-
<SavedObjectsEditionPage
67-
coreStart={coreStart}
68-
serviceRegistry={serviceRegistry}
69-
setBreadcrumbs={setBreadcrumbs}
70-
/>
60+
<Suspense fallback={<EuiLoadingSpinner />}>
61+
<SavedObjectsEditionPage
62+
coreStart={coreStart}
63+
serviceRegistry={serviceRegistry}
64+
setBreadcrumbs={setBreadcrumbs}
65+
/>
66+
</Suspense>
7167
</RedirectToHomeIfUnauthorized>
7268
</Route>
7369
<Route path={'/'} exact={false}>
7470
<RedirectToHomeIfUnauthorized capabilities={capabilities}>
75-
<SavedObjectsTablePage
76-
coreStart={coreStart}
77-
dataStart={data}
78-
serviceRegistry={serviceRegistry}
79-
actionRegistry={pluginStart.actions}
80-
allowedTypes={allowedObjectTypes}
81-
setBreadcrumbs={setBreadcrumbs}
82-
/>
71+
<Suspense fallback={<EuiLoadingSpinner />}>
72+
<SavedObjectsTablePage
73+
coreStart={coreStart}
74+
dataStart={data}
75+
serviceRegistry={serviceRegistry}
76+
actionRegistry={pluginStart.actions}
77+
allowedTypes={allowedObjectTypes}
78+
setBreadcrumbs={setBreadcrumbs}
79+
/>
80+
</Suspense>
8381
</RedirectToHomeIfUnauthorized>
8482
</Route>
8583
</Switch>
@@ -103,110 +101,3 @@ const RedirectToHomeIfUnauthorized: React.FunctionComponent<{
103101
}
104102
return children! as React.ReactElement;
105103
};
106-
107-
const SavedObjectsEditionPage = ({
108-
coreStart,
109-
serviceRegistry,
110-
setBreadcrumbs,
111-
}: {
112-
coreStart: CoreStart;
113-
serviceRegistry: ISavedObjectsManagementServiceRegistry;
114-
setBreadcrumbs: (crumbs: ChromeBreadcrumb[]) => void;
115-
}) => {
116-
const { service: serviceName, id } = useParams<{ service: string; id: string }>();
117-
const capabilities = coreStart.application.capabilities;
118-
119-
const { search } = useLocation();
120-
const query = parse(search);
121-
const service = serviceRegistry.get(serviceName);
122-
123-
useEffect(() => {
124-
setBreadcrumbs([
125-
{
126-
text: i18n.translate('savedObjectsManagement.breadcrumb.index', {
127-
defaultMessage: 'Saved objects',
128-
}),
129-
href: '#/management/kibana/objects',
130-
},
131-
{
132-
text: i18n.translate('savedObjectsManagement.breadcrumb.edit', {
133-
defaultMessage: 'Edit {savedObjectType}',
134-
values: { savedObjectType: service?.service.type ?? 'object' },
135-
}),
136-
},
137-
]);
138-
}, [setBreadcrumbs, service]);
139-
140-
return (
141-
<SavedObjectEdition
142-
id={id}
143-
serviceName={serviceName}
144-
serviceRegistry={serviceRegistry}
145-
savedObjectsClient={coreStart.savedObjects.client}
146-
overlays={coreStart.overlays}
147-
notifications={coreStart.notifications}
148-
capabilities={capabilities}
149-
notFoundType={query.notFound as string}
150-
/>
151-
);
152-
};
153-
154-
const SavedObjectsTablePage = ({
155-
coreStart,
156-
dataStart,
157-
allowedTypes,
158-
serviceRegistry,
159-
actionRegistry,
160-
setBreadcrumbs,
161-
}: {
162-
coreStart: CoreStart;
163-
dataStart: DataPublicPluginStart;
164-
allowedTypes: string[];
165-
serviceRegistry: ISavedObjectsManagementServiceRegistry;
166-
actionRegistry: SavedObjectsManagementActionServiceStart;
167-
setBreadcrumbs: (crumbs: ChromeBreadcrumb[]) => void;
168-
}) => {
169-
const capabilities = coreStart.application.capabilities;
170-
const itemsPerPage = coreStart.uiSettings.get<number>('savedObjects:perPage', 50);
171-
172-
useEffect(() => {
173-
setBreadcrumbs([
174-
{
175-
text: i18n.translate('savedObjectsManagement.breadcrumb.index', {
176-
defaultMessage: 'Saved objects',
177-
}),
178-
href: '#/management/kibana/objects',
179-
},
180-
]);
181-
}, [setBreadcrumbs]);
182-
183-
return (
184-
<SavedObjectsTable
185-
allowedTypes={allowedTypes}
186-
serviceRegistry={serviceRegistry}
187-
actionRegistry={actionRegistry}
188-
savedObjectsClient={coreStart.savedObjects.client}
189-
indexPatterns={dataStart.indexPatterns}
190-
search={dataStart.search}
191-
http={coreStart.http}
192-
overlays={coreStart.overlays}
193-
notifications={coreStart.notifications}
194-
applications={coreStart.application}
195-
perPageConfig={itemsPerPage}
196-
goInspectObject={savedObject => {
197-
const { editUrl } = savedObject.meta;
198-
if (editUrl) {
199-
// previously, kbnUrl.change(object.meta.editUrl); was used.
200-
// using direct access to location.hash seems the only option for now,
201-
// as using react-router-dom will prefix the url with the router's basename
202-
// which should be ignored there.
203-
window.location.hash = editUrl;
204-
}
205-
}}
206-
canGoInApp={savedObject => {
207-
const { inAppUrl } = savedObject.meta;
208-
return inAppUrl ? get(capabilities, inAppUrl.uiCapabilitiesPath) : false;
209-
}}
210-
/>
211-
);
212-
};

‎src/plugins/saved_objects_management/public/management_section/saved_objects_edition_page.tsx‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
/*
2+
* Licensed to Elasticsearch B.V. under one or more contributor
3+
* license agreements. See the NOTICE file distributed with
4+
* this work for additional information regarding copyright
5+
* ownership. Elasticsearch B.V. licenses this file to you under
6+
* the Apache License, Version 2.0 (the "License"); you may
7+
* not use this file except in compliance with the License.
8+
* You may obtain a copy of the License at
9+
*
10+
* http://www.apache.org/licenses/LICENSE-2.0
11+
*
12+
* Unless required by applicable law or agreed to in writing,
13+
* software distributed under the License is distributed on an
14+
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
15+
* KIND, either express or implied. See the License for the
16+
* specific language governing permissions and limitations
17+
* under the License.
18+
*/
19+
20+
import React, { useEffect } from 'react';
21+
import { useParams, useLocation } from 'react-router-dom';
22+
import { parse } from 'query-string';
23+
import { i18n } from '@kbn/i18n';
24+
import { CoreStart, ChromeBreadcrumb } from 'src/core/public';
25+
import { ISavedObjectsManagementServiceRegistry } from '../services';
26+
import { SavedObjectEdition } from './object_view';
27+
28+
const SavedObjectsEditionPage = ({
29+
coreStart,
30+
serviceRegistry,
31+
setBreadcrumbs,
32+
}: {
33+
coreStart: CoreStart;
34+
serviceRegistry: ISavedObjectsManagementServiceRegistry;
35+
setBreadcrumbs: (crumbs: ChromeBreadcrumb[]) => void;
36+
}) => {
37+
const { service: serviceName, id } = useParams<{ service: string; id: string }>();
38+
const capabilities = coreStart.application.capabilities;
39+
40+
const { search } = useLocation();
41+
const query = parse(search);
42+
const service = serviceRegistry.get(serviceName);
43+
44+
useEffect(() => {
45+
setBreadcrumbs([
46+
{
47+
text: i18n.translate('savedObjectsManagement.breadcrumb.index', {
48+
defaultMessage: 'Saved objects',
49+
}),
50+
href: '#/management/kibana/objects',
51+
},
52+
{
53+
text: i18n.translate('savedObjectsManagement.breadcrumb.edit', {
54+
defaultMessage: 'Edit {savedObjectType}',
55+
values: { savedObjectType: service?.service.type ?? 'object' },
56+
}),
57+
},
58+
]);
59+
}, [setBreadcrumbs, service]);
60+
61+
return (
62+
<SavedObjectEdition
63+
id={id}
64+
serviceName={serviceName}
65+
serviceRegistry={serviceRegistry}
66+
savedObjectsClient={coreStart.savedObjects.client}
67+
overlays={coreStart.overlays}
68+
notifications={coreStart.notifications}
69+
capabilities={capabilities}
70+
notFoundType={query.notFound as string}
71+
/>
72+
);
73+
};
74+
75+
// eslint-disable-next-line import/no-default-export
76+
export { SavedObjectsEditionPage as default };

‎src/plugins/saved_objects_management/public/management_section/saved_objects_table_page.tsx‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
/*
2+
* Licensed to Elasticsearch B.V. under one or more contributor
3+
* license agreements. See the NOTICE file distributed with
4+
* this work for additional information regarding copyright
5+
* ownership. Elasticsearch B.V. licenses this file to you under
6+
* the Apache License, Version 2.0 (the "License"); you may
7+
* not use this file except in compliance with the License.
8+
* You may obtain a copy of the License at
9+
*
10+
* http://www.apache.org/licenses/LICENSE-2.0
11+
*
12+
* Unless required by applicable law or agreed to in writing,
13+
* software distributed under the License is distributed on an
14+
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
15+
* KIND, either express or implied. See the License for the
16+
* specific language governing permissions and limitations
17+
* under the License.
18+
*/
19+
20+
import React, { useEffect } from 'react';
21+
import { get } from 'lodash';
22+
import { i18n } from '@kbn/i18n';
23+
import { CoreStart, ChromeBreadcrumb } from 'src/core/public';
24+
import { DataPublicPluginStart } from '../../../data/public';
25+
import {
26+
ISavedObjectsManagementServiceRegistry,
27+
SavedObjectsManagementActionServiceStart,
28+
} from '../services';
29+
import { SavedObjectsTable } from './objects_table';
30+
31+
const SavedObjectsTablePage = ({
32+
coreStart,
33+
dataStart,
34+
allowedTypes,
35+
serviceRegistry,
36+
actionRegistry,
37+
setBreadcrumbs,
38+
}: {
39+
coreStart: CoreStart;
40+
dataStart: DataPublicPluginStart;
41+
allowedTypes: string[];
42+
serviceRegistry: ISavedObjectsManagementServiceRegistry;
43+
actionRegistry: SavedObjectsManagementActionServiceStart;
44+
setBreadcrumbs: (crumbs: ChromeBreadcrumb[]) => void;
45+
}) => {
46+
const capabilities = coreStart.application.capabilities;
47+
const itemsPerPage = coreStart.uiSettings.get<number>('savedObjects:perPage', 50);
48+
49+
useEffect(() => {
50+
setBreadcrumbs([
51+
{
52+
text: i18n.translate('savedObjectsManagement.breadcrumb.index', {
53+
defaultMessage: 'Saved objects',
54+
}),
55+
href: '#/management/kibana/objects',
56+
},
57+
]);
58+
}, [setBreadcrumbs]);
59+
60+
return (
61+
<SavedObjectsTable
62+
allowedTypes={allowedTypes}
63+
serviceRegistry={serviceRegistry}
64+
actionRegistry={actionRegistry}
65+
savedObjectsClient={coreStart.savedObjects.client}
66+
indexPatterns={dataStart.indexPatterns}
67+
search={dataStart.search}
68+
http={coreStart.http}
69+
overlays={coreStart.overlays}
70+
notifications={coreStart.notifications}
71+
applications={coreStart.application}
72+
perPageConfig={itemsPerPage}
73+
goInspectObject={savedObject => {
74+
const { editUrl } = savedObject.meta;
75+
if (editUrl) {
76+
// previously, kbnUrl.change(object.meta.editUrl); was used.
77+
// using direct access to location.hash seems the only option for now,
78+
// as using react-router-dom will prefix the url with the router's basename
79+
// which should be ignored there.
80+
window.location.hash = editUrl;
81+
}
82+
}}
83+
canGoInApp={savedObject => {
84+
const { inAppUrl } = savedObject.meta;
85+
return inAppUrl ? get(capabilities, inAppUrl.uiCapabilitiesPath) : false;
86+
}}
87+
/>
88+
);
89+
};
90+
// eslint-disable-next-line import/no-default-export
91+
export { SavedObjectsTablePage as default };

0 commit comments

Comments
 (0)