Reduce index management plugin page load bundle size (#88656)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

x-pack/plugins/index_management/__jest__/client_integration/helpers/setup_environment.tsx

@@ -23,7 +23,7 @@ import { notificationService } from '../../../public/application/services/notifi
 import { ExtensionsService } from '../../../public/services';
 import { UiMetricService } from '../../../public/application/services/ui_metric';
 import { setUiMetricService } from '../../../public/application/services/api';
-import { setExtensionsService } from '../../../public/application/store/selectors';
+import { setExtensionsService } from '../../../public/application/store/selectors/extension_service';
 import {
   MappingsEditorProvider,
   ComponentTemplatesProvider,

x-pack/plugins/index_management/__jest__/components/index_table.test.js

@@ -27,7 +27,7 @@ import { notificationService } from '../../public/application/services/notificat
 import { httpService } from '../../public/application/services/http';
 import { setUiMetricService } from '../../public/application/services/api';
 import { indexManagementStore } from '../../public/application/store';
-import { setExtensionsService } from '../../public/application/store/selectors';
+import { setExtensionsService } from '../../public/application/store/selectors/extension_service';
 import { BASE_PATH, API_BASE_PATH } from '../../common/constants';
 import { ExtensionsService } from '../../public/services';
 import sinon from 'sinon';

x-pack/plugins/index_management/common/constants/index.ts

@@ -4,7 +4,6 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-export { PLUGIN } from './plugin';
 export { BASE_PATH } from './base_path';
 export { API_BASE_PATH } from './api_base_path';
 export { INVALID_INDEX_PATTERN_CHARS, INVALID_TEMPLATE_NAME_CHARS } from './invalid_characters';

x-pack/plugins/index_management/common/index.ts

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-export { PLUGIN, API_BASE_PATH, BASE_PATH } from './constants';
+export { API_BASE_PATH, BASE_PATH } from './constants';
 
 export { getTemplateParameter } from './lib';
 

x-pack/plugins/index_management/public/application/mount_management_section.ts

@@ -10,28 +10,46 @@ import { ManagementAppMountParams } from 'src/plugins/management/public/';
 import { UsageCollectionSetup } from 'src/plugins/usage_collection/public';
 
 import { FleetSetup } from '../../../fleet/public';
-import { PLUGIN } from '../../common/constants';
+import { UIM_APP_NAME } from '../../common/constants';
+import { PLUGIN } from '../../common/constants/plugin';
 import { ExtensionsService } from '../services';
 import { StartDependencies } from '../types';
 import { AppDependencies } from './app_context';
 import { breadcrumbService } from './services/breadcrumbs';
 import { documentationService } from './services/documentation';
-import { HttpService, NotificationService, UiMetricService } from './services';
+import { UiMetricService } from './services';
 
 import { renderApp } from '.';
+import { setUiMetricService } from './services/api';
+import { notificationService } from './services/notification';
+import { httpService } from './services/http';
 
-interface InternalServices {
+function initSetup({
-  httpService: HttpService;
+  usageCollection,
-  notificationService: NotificationService;
+  coreSetup,
-  uiMetricService: UiMetricService;
+}: {
-  extensionsService: ExtensionsService;
+  coreSetup: CoreSetup<StartDependencies>;
+  usageCollection: UsageCollectionSetup;
+}) {
+  const { http, notifications } = coreSetup;
+
+  httpService.setup(http);
+  notificationService.setup(notifications);
+
+  const uiMetricService = new UiMetricService(UIM_APP_NAME);
+
+  setUiMetricService(uiMetricService);
+
+  uiMetricService.setup(usageCollection);
+
+  return { uiMetricService };
 }
 
 export async function mountManagementSection(
   coreSetup: CoreSetup<StartDependencies>,
   usageCollection: UsageCollectionSetup,
-  services: InternalServices,
   params: ManagementAppMountParams,
+  extensionsService: ExtensionsService,
   fleet?: FleetSetup
 ) {
   const { element, setBreadcrumbs, history } = params;
@@ -50,6 +68,11 @@ export async function mountManagementSection(
   breadcrumbService.setup(setBreadcrumbs);
   documentationService.setup(docLinks);
 
+  const { uiMetricService } = initSetup({
+    usageCollection,
+    coreSetup,
+  });
+
   const appDependencies: AppDependencies = {
     core: {
       fatalErrors,
@@ -59,7 +82,7 @@ export async function mountManagementSection(
       usageCollection,
       fleet,
     },
-    services,
+    services: { httpService, notificationService, uiMetricService, extensionsService },
     history,
     setBreadcrumbs,
     uiSettings,

x-pack/plugins/index_management/public/application/store/selectors/extension_service.ts

@@ -0,0 +1,19 @@
+/*
+ * 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 { ExtensionsService } from '../../../services';
+
+// Temporary hack to provide the extensionsService instance to this file.
+// TODO: Refactor and export all the app selectors through the app dependencies context
+
+let extensionsService;
+export const setExtensionsService = (_extensionsService: ExtensionsService) => {
+  extensionsService = _extensionsService;
+};
+
+export { extensionsService };
+
+// End hack

x-pack/plugins/index_management/public/application/store/selectors/index.js

@@ -9,15 +9,9 @@ import { createSelector } from 'reselect';
 import * as qs from 'query-string';
 import { indexStatusLabels } from '../../lib/index_status_labels';
 import { sortTable } from '../../services';
+import { extensionsService } from './extension_service';
 
-// Temporary hack to provide the extensionsService instance to this file.
+export { extensionsService };
-// TODO: Refactor and export all the app selectors through the app dependencies context
-
-let extensionsService;
-export const setExtensionsService = (_extensionsService) => {
-  extensionsService = _extensionsService;
-};
-// End hack
 
 export const getDetailPanelData = (state) => state.detailPanel.data;
 export const getDetailPanelError = (state) => state.detailPanel.error;

x-pack/plugins/index_management/public/application/store/selectors/indices_filter.test.ts

@@ -4,9 +4,10 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 import { ExtensionsService } from '../../../services';
-import { getFilteredIndices, setExtensionsService } from '.';
+import { getFilteredIndices } from '.';
 // @ts-ignore
 import { defaultTableState } from '../reducers/table_state';
+import { setExtensionsService } from './extension_service';
 
 describe('getFilteredIndices selector', () => {
   let extensionService: ExtensionsService;

x-pack/plugins/index_management/public/index.ts

@@ -15,4 +15,4 @@ export { IndexManagementPluginSetup } from './types';
 
 export { getIndexListUri } from './application/services/routing';
 
-export { Index } from '../common';
+export type { Index } from '../common';

x-pack/plugins/index_management/public/plugin.ts

@@ -6,54 +6,43 @@
 import { i18n } from '@kbn/i18n';
 
 import { CoreSetup } from '../../../../src/core/public';
+import { setExtensionsService } from './application/store/selectors/extension_service';
 
-import { UIM_APP_NAME, PLUGIN } from '../common/constants';
-
-import { httpService } from './application/services/http';
-import { notificationService } from './application/services/notification';
-import { UiMetricService } from './application/services/ui_metric';
-
-import { setExtensionsService } from './application/store/selectors';
-import { setUiMetricService } from './application/services/api';
-
-import { IndexManagementPluginSetup, SetupDependencies, StartDependencies } from './types';
 import { ExtensionsService } from './services';
 
+import { IndexManagementPluginSetup, SetupDependencies, StartDependencies } from './types';
+
+// avoid import from index files in plugin.ts, use specific import paths
+import { PLUGIN } from '../common/constants/plugin';
+
 export class IndexMgmtUIPlugin {
-  private uiMetricService = new UiMetricService(UIM_APP_NAME);
   private extensionsService = new ExtensionsService();
 
   constructor() {
     // Temporary hack to provide the service instances in module files in order to avoid a big refactor
     // For the selectors we should expose them through app dependencies and read them from there on each container component.
     setExtensionsService(this.extensionsService);
-    setUiMetricService(this.uiMetricService);
   }
 
   public setup(
     coreSetup: CoreSetup<StartDependencies>,
     plugins: SetupDependencies
   ): IndexManagementPluginSetup {
-    const { http, notifications } = coreSetup;
     const { fleet, usageCollection, management } = plugins;
 
-    httpService.setup(http);
-    notificationService.setup(notifications);
-    this.uiMetricService.setup(usageCollection);
-
     management.sections.section.data.registerApp({
       id: PLUGIN.id,
       title: i18n.translate('xpack.idxMgmt.appTitle', { defaultMessage: 'Index Management' }),
       order: 0,
       mount: async (params) => {
         const { mountManagementSection } = await import('./application/mount_management_section');
-        const services = {
+        return mountManagementSection(
-          httpService,
+          coreSetup,
-          notificationService,
+          usageCollection,
-          uiMetricService: this.uiMetricService,
+          params,
-          extensionsService: this.extensionsService,
+          this.extensionsService,
-        };
+          fleet
-        return mountManagementSection(coreSetup, usageCollection, services, params, fleet);
+        );
       },
     });
 

x-pack/plugins/index_management/server/plugin.ts

@@ -13,7 +13,7 @@ import {
   ILegacyCustomClusterClient,
 } from 'src/core/server';
 
-import { PLUGIN } from '../common';
+import { PLUGIN } from '../common/constants/plugin';
 import { Dependencies } from './types';
 import { ApiRoutes } from './routes';
 import { License, IndexDataEnricher } from './services';