diff --git a/src/plugins/saved_objects_management/public/management_section/mount_section.tsx b/src/plugins/saved_objects_management/public/management_section/mount_section.tsx
index fe3150fc0bb07..c1daf3445219f 100644
--- a/src/plugins/saved_objects_management/public/management_section/mount_section.tsx
+++ b/src/plugins/saved_objects_management/public/management_section/mount_section.tsx
@@ -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 {
@@ -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,
@@ -63,23 +57,27 @@ export const mountManagementSection = async ({
-
+ }>
+
+
-
+ }>
+
+
@@ -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 (
-
- );
-};
-
-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('savedObjects:perPage', 50);
-
- useEffect(() => {
- setBreadcrumbs([
- {
- text: i18n.translate('savedObjectsManagement.breadcrumb.index', {
- defaultMessage: 'Saved objects',
- }),
- href: '#/management/kibana/objects',
- },
- ]);
- }, [setBreadcrumbs]);
-
- return (
- {
- 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;
- }}
- />
- );
-};
diff --git a/src/plugins/saved_objects_management/public/management_section/saved_objects_edition_page.tsx b/src/plugins/saved_objects_management/public/management_section/saved_objects_edition_page.tsx
new file mode 100644
index 0000000000000..5ac6e8e103c47
--- /dev/null
+++ b/src/plugins/saved_objects_management/public/management_section/saved_objects_edition_page.tsx
@@ -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 (
+
+ );
+};
+
+// eslint-disable-next-line import/no-default-export
+export { SavedObjectsEditionPage as default };
diff --git a/src/plugins/saved_objects_management/public/management_section/saved_objects_table_page.tsx b/src/plugins/saved_objects_management/public/management_section/saved_objects_table_page.tsx
new file mode 100644
index 0000000000000..7660d17f91c5b
--- /dev/null
+++ b/src/plugins/saved_objects_management/public/management_section/saved_objects_table_page.tsx
@@ -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('savedObjects:perPage', 50);
+
+ useEffect(() => {
+ setBreadcrumbs([
+ {
+ text: i18n.translate('savedObjectsManagement.breadcrumb.index', {
+ defaultMessage: 'Saved objects',
+ }),
+ href: '#/management/kibana/objects',
+ },
+ ]);
+ }, [setBreadcrumbs]);
+
+ return (
+ {
+ 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 };