[ML] AIOps: Optimize initial load bundles.

packages/kbn-optimizer/limits.yml

@@ -2,7 +2,7 @@ pageLoadAssetSize:
   actions: 20000
   advancedSettings: 27596
   aiAssistantManagementSelection: 19146
-  aiops: 10000
+  aiops: 16000
   alerting: 106936
   apm: 64385
   banners: 17946

x-pack/plugins/aiops/public/components/log_categorization/categorize_field_actions.ts

@@ -10,7 +10,6 @@ import { createAction } from '@kbn/ui-actions-plugin/public';
 import type { CoreStart } from '@kbn/core/public';
 import { ACTION_CATEGORIZE_FIELD, type CategorizeFieldContext } from '@kbn/ml-ui-actions';
 import type { AiopsPluginStartDeps } from '../../types';
-import { showCategorizeFlyout } from './show_flyout';
 
 export const createCategorizeFieldAction = (coreStart: CoreStart, plugins: AiopsPluginStartDeps) =>
   createAction<CategorizeFieldContext>({
@@ -25,6 +24,7 @@ export const createCategorizeFieldAction = (coreStart: CoreStart, plugins: Aiops
     },
     execute: async (context: CategorizeFieldContext) => {
       const { field, dataView, originatingApp, additionalFilter } = context;
+      const { showCategorizeFlyout } = await import('./show_flyout');
       showCategorizeFlyout(field, dataView, coreStart, plugins, originatingApp, additionalFilter);
     },
   });

x-pack/plugins/aiops/public/components/log_categorization/index.ts

@@ -7,7 +7,6 @@
 
 export type { LogCategorizationAppStateProps } from './log_categorization_app_state';
 import { LogCategorizationAppState } from './log_categorization_app_state';
-export { createCategorizeFieldAction } from './categorize_field_actions';
 
 // required for dynamic import using React.lazy()
 // eslint-disable-next-line import/no-default-export

x-pack/plugins/aiops/public/components/log_categorization/show_flyout.tsx

@@ -36,7 +36,7 @@ export async function showCategorizeFlyout(
 ): Promise<void> {
   const { overlays, application, i18n } = coreStart;
 
-  return new Promise(async (resolve, reject) => {
+  return new Promise((resolve, reject) => {
     try {
       const onFlyoutClose = () => {
         flyoutSession.close();

x-pack/plugins/aiops/public/embeddables/change_point_chart/embeddable_change_point_chart_factory.tsx

@@ -15,13 +15,6 @@ import type { DataView } from '@kbn/data-views-plugin/common';
 import { DATA_VIEW_SAVED_OBJECT_TYPE } from '@kbn/data-views-plugin/common';
 import type { ReactEmbeddableFactory } from '@kbn/embeddable-plugin/public';
 import { i18n } from '@kbn/i18n';
-import {
-  apiHasExecutionContext,
-  fetch$,
-  initializeTimeRange,
-  initializeTitles,
-  useBatchedPublishingSubjects,
-} from '@kbn/presentation-publishing';
 
 import fastIsEqual from 'fast-deep-equal';
 import { cloneDeep } from 'lodash';
@@ -61,6 +54,14 @@ export const getChangePointChartEmbeddableFactory = (
       return serializedState;
     },
     buildEmbeddable: async (state, buildApi, uuid, parentApi) => {
+      const {
+        apiHasExecutionContext,
+        fetch$,
+        initializeTimeRange,
+        initializeTitles,
+        useBatchedPublishingSubjects,
+      } = await import('@kbn/presentation-publishing');
+
       const [coreStart, pluginStart] = await getStartServices();
 
       const {

x-pack/plugins/aiops/public/embeddables/pattern_analysis/embeddable_pattern_analysis_factory.tsx

@@ -15,13 +15,6 @@ import type { DataView } from '@kbn/data-views-plugin/common';
 import { DATA_VIEW_SAVED_OBJECT_TYPE } from '@kbn/data-views-plugin/common';
 import type { ReactEmbeddableFactory } from '@kbn/embeddable-plugin/public';
 import { i18n } from '@kbn/i18n';
-import {
-  apiHasExecutionContext,
-  fetch$,
-  initializeTimeRange,
-  initializeTitles,
-  useBatchedPublishingSubjects,
-} from '@kbn/presentation-publishing';
 import fastIsEqual from 'fast-deep-equal';
 import { cloneDeep } from 'lodash';
 import React, { useMemo } from 'react';
@@ -58,6 +51,14 @@ export const getPatternAnalysisEmbeddableFactory = (
       return serializedState;
     },
     buildEmbeddable: async (state, buildApi, uuid, parentApi) => {
+      const {
+        apiHasExecutionContext,
+        fetch$,
+        initializeTimeRange,
+        initializeTitles,
+        useBatchedPublishingSubjects,
+      } = await import('@kbn/presentation-publishing');
+
       const [coreStart, pluginStart] = await getStartServices();
 
       const {

x-pack/plugins/aiops/public/plugin.tsx

@@ -8,15 +8,18 @@
 import type { CoreStart, Plugin } from '@kbn/core/public';
 import { type CoreSetup } from '@kbn/core/public';
 import { firstValueFrom } from 'rxjs';
-import { dynamic } from '@kbn/shared-ux-utility';
 
 import { getChangePointDetectionComponent } from './shared_components';
+import { LogCategorizationForDiscover as PatternAnalysisComponent } from './shared_lazy_components';
 import type {
   AiopsPluginSetup,
   AiopsPluginSetupDeps,
   AiopsPluginStart,
   AiopsPluginStartDeps,
 } from './types';
+import { registerEmbeddables } from './embeddables';
+import { registerAiopsUiActions } from './ui_actions';
+import { registerChangePointChartsAttachment } from './cases/register_change_point_charts_attachment';
 
 export type AiopsCoreSetup = CoreSetup<AiopsPluginStartDeps, AiopsPluginStart>;
 
@@ -27,20 +30,8 @@ export class AiopsPlugin
     core: AiopsCoreSetup,
     { embeddable, cases, licensing, uiActions }: AiopsPluginSetupDeps
   ) {
-    Promise.all([
-      firstValueFrom(licensing.license$),
-      import('./embeddables'),
-      import('./ui_actions'),
-      import('./cases/register_change_point_charts_attachment'),
-      core.getStartServices(),
-    ]).then(
-      ([
-        license,
-        { registerEmbeddables },
-        { registerAiopsUiActions },
-        { registerChangePointChartsAttachment },
-        [coreStart, pluginStart],
-      ]) => {
+    Promise.all([firstValueFrom(licensing.license$), core.getStartServices()]).then(
+      ([license, [coreStart, pluginStart]]) => {
         const { canUseAiops } = coreStart.application.capabilities.ml;
 
         if (license.hasAtLeast('platinum') && canUseAiops) {
@@ -69,12 +60,7 @@ export class AiopsPlugin
         );
         return getPatternAnalysisAvailable(plugins.licensing);
       },
-      PatternAnalysisComponent: dynamic(
-        async () =>
-          import(
-            './components/log_categorization/log_categorization_for_embeddable/log_categorization_for_discover_wrapper'
-          )
-      ),
+      PatternAnalysisComponent,
     };
   }
 

x-pack/plugins/aiops/public/shared_lazy_components.tsx

@@ -12,6 +12,7 @@ import { EuiErrorBoundary, EuiSkeletonText } from '@elastic/eui';
 import type { LogRateAnalysisAppStateProps } from './components/log_rate_analysis';
 import type { LogRateAnalysisContentWrapperProps } from './components/log_rate_analysis/log_rate_analysis_content/log_rate_analysis_content_wrapper';
 import type { LogCategorizationAppStateProps } from './components/log_categorization';
+import type { LogCategorizationEmbeddableWrapperProps } from './components/log_categorization/log_categorization_for_embeddable/log_categorization_for_discover_wrapper';
 import type { ChangePointDetectionAppStateProps } from './components/change_point_detection';
 
 const LogRateAnalysisAppStateLazy = React.lazy(() => import('./components/log_rate_analysis'));
@@ -58,6 +59,25 @@ export const LogCategorization: FC<LogCategorizationAppStateProps> = (props) =>
   </LazyWrapper>
 );
 
+const LogCategorizationForDiscoverLazy = React.lazy(
+  () =>
+    import(
+      './components/log_categorization/log_categorization_for_embeddable/log_categorization_for_discover_wrapper'
+    )
+);
+
+/**
+ * Lazy-wrapped LogCategorizationForDiscover React component
+ * @param {LogCategorizationEmbeddableWrapperProps}  props - properties specifying the data on which to run the analysis.
+ */
+export const LogCategorizationForDiscover: FC<LogCategorizationEmbeddableWrapperProps> = (
+  props
+) => (
+  <LazyWrapper>
+    <LogCategorizationForDiscoverLazy {...props} />
+  </LazyWrapper>
+);
+
 const ChangePointDetectionLazy = React.lazy(() => import('./components/change_point_detection'));
 /**
  * Lazy-wrapped ChangePointDetectionAppStateProps React component

x-pack/plugins/aiops/public/ui_actions/change_point_action_context.ts

@@ -6,7 +6,8 @@
  */
 
 import { isPopulatedObject } from '@kbn/ml-is-populated-object';
-import { apiIsOfType, type EmbeddableApiContext } from '@kbn/presentation-publishing';
+import type { EmbeddableApiContext } from '@kbn/presentation-publishing';
+import { apiIsOfType } from '@kbn/presentation-publishing/interfaces/has_type';
 import { EMBEDDABLE_CHANGE_POINT_CHART_TYPE } from '@kbn/aiops-change-point-detection/constants';
 import type { ChangePointEmbeddableApi } from '../embeddables/change_point_chart/types';
 

x-pack/plugins/aiops/public/ui_actions/index.ts

@@ -16,7 +16,7 @@ import type { CoreStart } from '@kbn/core/public';
 import { createAddChangePointChartAction } from './create_change_point_chart';
 import { createOpenChangePointInMlAppAction } from './open_change_point_ml';
 import type { AiopsPluginStartDeps } from '../types';
-import { createCategorizeFieldAction } from '../components/log_categorization';
+import { createCategorizeFieldAction } from '../components/log_categorization/categorize_field_actions';
 import { createAddPatternAnalysisEmbeddableAction } from './create_pattern_analysis_action';
 import { createAddLogRateAnalysisEmbeddableAction } from './create_log_rate_analysis_actions';
 

x-pack/plugins/aiops/public/ui_actions/open_change_point_ml.tsx

@@ -10,17 +10,17 @@ import { IncompatibleActionError } from '@kbn/ui-actions-plugin/public';
 import { i18n } from '@kbn/i18n';
 import type { CoreStart } from '@kbn/core/public';
 import type { TimeRange } from '@kbn/es-query';
-import { apiHasParentApi, apiPublishesTimeRange } from '@kbn/presentation-publishing';
 import type { ChangePointEmbeddableApi } from '../embeddables/change_point_chart/types';
 import type { AiopsPluginStartDeps } from '../types';
 import type { ChangePointChartActionContext } from './change_point_action_context';
-import { isChangePointChartEmbeddableContext } from './change_point_action_context';
 
 export const OPEN_CHANGE_POINT_IN_ML_APP_ACTION = 'openChangePointInMlAppAction';
 
-export const getEmbeddableTimeRange = (
+const getEmbeddableTimeRange = async (
   embeddable: ChangePointEmbeddableApi
-): TimeRange | undefined => {
+): Promise<TimeRange | undefined> => {
+  const { apiHasParentApi, apiPublishesTimeRange } = await import('@kbn/presentation-publishing');
+
   let timeRange = embeddable.timeRange$?.getValue();
 
   if (!timeRange && apiHasParentApi(embeddable) && apiPublishesTimeRange(embeddable.parentApi)) {
@@ -45,6 +45,7 @@ export function createOpenChangePointInMlAppAction(
         defaultMessage: 'Open in AIOps Labs',
       }),
     async getHref(context): Promise<string | undefined> {
+      const { isChangePointChartEmbeddableContext } = await import('./change_point_action_context');
       if (!isChangePointChartEmbeddableContext(context)) {
         throw new IncompatibleActionError();
       }
@@ -57,7 +58,7 @@ export function createOpenChangePointInMlAppAction(
         page: 'aiops/change_point_detection',
         pageState: {
           index: dataViewId.getValue(),
-          timeRange: getEmbeddableTimeRange(context.embeddable),
+          timeRange: await getEmbeddableTimeRange(context.embeddable),
           fieldConfigs: [
             {
               fn: fn.getValue(),
@@ -69,6 +70,7 @@ export function createOpenChangePointInMlAppAction(
       });
     },
     async execute(context) {
+      const { isChangePointChartEmbeddableContext } = await import('./change_point_action_context');
       if (!isChangePointChartEmbeddableContext(context)) {
         throw new IncompatibleActionError();
       }
@@ -78,6 +80,7 @@ export function createOpenChangePointInMlAppAction(
       }
     },
     async isCompatible(context) {
+      const { isChangePointChartEmbeddableContext } = await import('./change_point_action_context');
       return isChangePointChartEmbeddableContext(context);
     },
   };