[Stack Monitoring] Lazily import alerting expressions without blocking the plugin initialization (#117187) (#117858)

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

Co-authored-by: Felix Stürmer <weltenwort@users.noreply.github.com>

x-pack/plugins/monitoring/public/alerts/ccr_read_exceptions_alert/index.tsx

@@ -5,17 +5,20 @@
  * 2.0.
  */
 
-import React from 'react';
 import { i18n } from '@kbn/i18n';
-import { Expression, Props } from '../components/param_details_form/expression';
-import { AlertTypeModel, ValidationResult } from '../../../../triggers_actions_ui/public';
+import React from 'react';
+import type { AlertTypeParams } from '../../../../alerting/common';
+import type { AlertTypeModel, ValidationResult } from '../../../../triggers_actions_ui/public';
 import {
   RULE_CCR_READ_EXCEPTIONS,
   RULE_DETAILS,
   RULE_REQUIRES_APP_CONTEXT,
 } from '../../../common/constants';
-import { AlertTypeParams } from '../../../../alerting/common';
-import { MonitoringConfig } from '../../types';
+import type { MonitoringConfig } from '../../types';
+import {
+  LazyExpression,
+  LazyExpressionProps,
+} from '../components/param_details_form/lazy_expression';
 
 interface ValidateOptions extends AlertTypeParams {
   duration: string;
@@ -47,8 +50,8 @@ export function createCCRReadExceptionsAlertType(
     documentationUrl(docLinks) {
       return `${docLinks.links.monitoring.alertsKibanaCCRReadExceptions}`;
     },
-    alertParamsExpression: (props: Props) => (
-      <Expression
+    alertParamsExpression: (props: LazyExpressionProps) => (
+      <LazyExpression
         {...props}
         config={config}
         paramDetails={RULE_DETAILS[RULE_CCR_READ_EXCEPTIONS].paramDetails}

x-pack/plugins/monitoring/public/alerts/components/param_details_form/expression.tsx

@@ -131,3 +131,7 @@ export const Expression: React.FC<Props> = (props) => {
     </Fragment>
   );
 };
+
+// for lazy loading
+// eslint-disable-next-line import/no-default-export
+export default Expression;

x-pack/plugins/monitoring/public/alerts/components/param_details_form/lazy_expression.tsx

@@ -0,0 +1,11 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+
+export type { Props as LazyExpressionProps } from './expression';
+export const LazyExpression = React.lazy(() => import('./expression'));

x-pack/plugins/monitoring/public/alerts/cpu_usage_alert/cpu_usage_alert.tsx

@@ -6,12 +6,14 @@
  */
 
 import React from 'react';
-// eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { AlertTypeModel } from '../../../../triggers_actions_ui/public/types';
+import type { AlertTypeModel } from '../../../../triggers_actions_ui/public';
 import { RULE_CPU_USAGE, RULE_DETAILS, RULE_REQUIRES_APP_CONTEXT } from '../../../common/constants';
-import { validate, MonitoringAlertTypeParams } from '../components/param_details_form/validation';
-import { Expression, Props } from '../components/param_details_form/expression';
-import { MonitoringConfig } from '../../types';
+import type { MonitoringConfig } from '../../types';
+import {
+  LazyExpression,
+  LazyExpressionProps,
+} from '../components/param_details_form/lazy_expression';
+import { MonitoringAlertTypeParams, validate } from '../components/param_details_form/validation';
 
 export function createCpuUsageAlertType(
   config: MonitoringConfig
@@ -23,8 +25,8 @@ export function createCpuUsageAlertType(
     documentationUrl(docLinks) {
       return `${docLinks.links.monitoring.alertsKibanaCpuThreshold}`;
     },
-    alertParamsExpression: (props: Props) => (
-      <Expression
+    alertParamsExpression: (props: LazyExpressionProps) => (
+      <LazyExpression
         {...props}
         config={config}
         paramDetails={RULE_DETAILS[RULE_CPU_USAGE].paramDetails}

x-pack/plugins/monitoring/public/alerts/disk_usage_alert/index.tsx

@@ -6,17 +6,18 @@
  */
 
 import React from 'react';
-import { validate, MonitoringAlertTypeParams } from '../components/param_details_form/validation';
-import { Expression, Props } from '../components/param_details_form/expression';
-
-// eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { AlertTypeModel } from '../../../../triggers_actions_ui/public/types';
+import type { AlertTypeModel } from '../../../../triggers_actions_ui/public';
 import {
-  RULE_DISK_USAGE,
   RULE_DETAILS,
+  RULE_DISK_USAGE,
   RULE_REQUIRES_APP_CONTEXT,
 } from '../../../common/constants';
-import { MonitoringConfig } from '../../types';
+import type { MonitoringConfig } from '../../types';
+import {
+  LazyExpression,
+  LazyExpressionProps,
+} from '../components/param_details_form/lazy_expression';
+import { MonitoringAlertTypeParams, validate } from '../components/param_details_form/validation';
 
 export function createDiskUsageAlertType(
   config: MonitoringConfig
@@ -28,8 +29,8 @@ export function createDiskUsageAlertType(
     documentationUrl(docLinks) {
       return `${docLinks.links.monitoring.alertsKibanaDiskThreshold}`;
     },
-    alertParamsExpression: (props: Props) => (
-      <Expression
+    alertParamsExpression: (props: LazyExpressionProps) => (
+      <LazyExpression
         {...props}
         config={config}
         paramDetails={RULE_DETAILS[RULE_DISK_USAGE].paramDetails}

x-pack/plugins/monitoring/public/alerts/large_shard_size_alert/index.tsx

@@ -5,17 +5,20 @@
  * 2.0.
  */
 
-import React from 'react';
 import { i18n } from '@kbn/i18n';
-import { Expression, Props } from '../components/param_details_form/expression';
-import { AlertTypeModel, ValidationResult } from '../../../../triggers_actions_ui/public';
+import React from 'react';
+import type { AlertTypeParams } from '../../../../alerting/common';
+import type { AlertTypeModel, ValidationResult } from '../../../../triggers_actions_ui/public';
 import {
-  RULE_LARGE_SHARD_SIZE,
   RULE_DETAILS,
+  RULE_LARGE_SHARD_SIZE,
   RULE_REQUIRES_APP_CONTEXT,
 } from '../../../common/constants';
-import { AlertTypeParams } from '../../../../alerting/common';
-import { MonitoringConfig } from '../../types';
+import type { MonitoringConfig } from '../../types';
+import {
+  LazyExpression,
+  LazyExpressionProps,
+} from '../components/param_details_form/lazy_expression';
 
 interface ValidateOptions extends AlertTypeParams {
   indexPattern: string;
@@ -47,8 +50,8 @@ export function createLargeShardSizeAlertType(
     documentationUrl(docLinks) {
       return `${docLinks.links.monitoring.alertsKibanaLargeShardSize}`;
     },
-    alertParamsExpression: (props: Props) => (
-      <Expression
+    alertParamsExpression: (props: LazyExpressionProps) => (
+      <LazyExpression
         {...props}
         config={config}
         paramDetails={RULE_DETAILS[RULE_LARGE_SHARD_SIZE].paramDetails}

x-pack/plugins/monitoring/public/alerts/legacy_alert/expression.tsx

@@ -54,3 +54,7 @@ export const Expression = ({ alertParams, config, setAlertParams, data }: Props)
     </EuiForm>
   );
 };
+
+// for lazy loading
+// eslint-disable-next-line import/no-default-export
+export default Expression;

x-pack/plugins/monitoring/public/alerts/legacy_alert/lazy_expression.tsx

@@ -0,0 +1,11 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+
+export type { Props as LazyExpressionProps } from '../components/param_details_form/expression';
+export const LazyExpression = React.lazy(() => import('./expression'));

x-pack/plugins/monitoring/public/alerts/legacy_alert/legacy_alert.tsx

@@ -6,16 +6,14 @@
  */
 
 import React from 'react';
-// eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { AlertTypeModel } from '../../../../triggers_actions_ui/public/types';
+import type { AlertTypeModel } from '../../../../triggers_actions_ui/public';
 import {
   LEGACY_RULES,
   LEGACY_RULE_DETAILS,
   RULE_REQUIRES_APP_CONTEXT,
 } from '../../../common/constants';
-import { MonitoringConfig } from '../../types';
-import { Expression } from './expression';
-import { Props } from '../components/param_details_form/expression';
+import type { MonitoringConfig } from '../../types';
+import { LazyExpression, LazyExpressionProps } from './lazy_expression';
 
 export function createLegacyAlertTypes(config: MonitoringConfig): AlertTypeModel[] {
   return LEGACY_RULES.map((legacyAlert) => {
@@ -26,7 +24,9 @@ export function createLegacyAlertTypes(config: MonitoringConfig): AlertTypeModel
       documentationUrl(docLinks) {
         return `${docLinks.links.monitoring.alertsKibanaClusterAlerts}`;
       },
-      alertParamsExpression: (props: Props) => <Expression {...props} config={config} />,
+      alertParamsExpression: (props: LazyExpressionProps) => (
+        <LazyExpression {...props} config={config} />
+      ),
       defaultActionMessage: '{{context.internalFullMessage}}',
       validate: () => ({ errors: {} }),
       requiresAppContext: RULE_REQUIRES_APP_CONTEXT,

x-pack/plugins/monitoring/public/alerts/memory_usage_alert/index.tsx

@@ -6,17 +6,18 @@
  */
 
 import React from 'react';
-import { validate, MonitoringAlertTypeParams } from '../components/param_details_form/validation';
-import { Expression, Props } from '../components/param_details_form/expression';
-
-// eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { AlertTypeModel } from '../../../../triggers_actions_ui/public/types';
+import type { AlertTypeModel } from '../../../../triggers_actions_ui/public';
 import {
-  RULE_MEMORY_USAGE,
   RULE_DETAILS,
+  RULE_MEMORY_USAGE,
   RULE_REQUIRES_APP_CONTEXT,
 } from '../../../common/constants';
-import { MonitoringConfig } from '../../types';
+import type { MonitoringConfig } from '../../types';
+import {
+  LazyExpression,
+  LazyExpressionProps,
+} from '../components/param_details_form/lazy_expression';
+import { MonitoringAlertTypeParams, validate } from '../components/param_details_form/validation';
 
 export function createMemoryUsageAlertType(
   config: MonitoringConfig
@@ -28,8 +29,8 @@ export function createMemoryUsageAlertType(
     documentationUrl(docLinks) {
       return `${docLinks.links.monitoring.alertsKibanaJvmThreshold}`;
     },
-    alertParamsExpression: (props: Props) => (
-      <Expression
+    alertParamsExpression: (props: LazyExpressionProps) => (
+      <LazyExpression
         {...props}
         config={config}
         paramDetails={RULE_DETAILS[RULE_MEMORY_USAGE].paramDetails}

x-pack/plugins/monitoring/public/alerts/missing_monitoring_data_alert/expression.tsx

@@ -60,3 +60,7 @@ export const Expression: React.FC<Props> = (props) => {
     </Fragment>
   );
 };
+
+// for lazy loading
+// eslint-disable-next-line import/no-default-export
+export default Expression;

x-pack/plugins/monitoring/public/alerts/missing_monitoring_data_alert/lazy_expression.tsx

@@ -0,0 +1,11 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+
+export type { Props as LazyExpressionProps } from './expression';
+export const LazyExpression = React.lazy(() => import('./expression'));

x-pack/plugins/monitoring/public/alerts/missing_monitoring_data_alert/missing_monitoring_data_alert.tsx

@@ -6,15 +6,14 @@
  */
 
 import React from 'react';
-// eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { AlertTypeModel } from '../../../../triggers_actions_ui/public/types';
-import { validate } from './validation';
+import type { AlertTypeModel } from '../../../../triggers_actions_ui/public';
 import {
-  RULE_MISSING_MONITORING_DATA,
   RULE_DETAILS,
+  RULE_MISSING_MONITORING_DATA,
   RULE_REQUIRES_APP_CONTEXT,
 } from '../../../common/constants';
-import { Expression } from './expression';
+import { LazyExpression, LazyExpressionProps } from './lazy_expression';
+import { validate } from './validation';
 
 export function createMissingMonitoringDataAlertType(): AlertTypeModel {
   return {
@@ -24,8 +23,8 @@ export function createMissingMonitoringDataAlertType(): AlertTypeModel {
     documentationUrl(docLinks) {
       return `${docLinks.links.monitoring.alertsKibanaMissingData}`;
     },
-    alertParamsExpression: (props: any) => (
-      <Expression
+    alertParamsExpression: (props: LazyExpressionProps) => (
+      <LazyExpression
         {...props}
         paramDetails={RULE_DETAILS[RULE_MISSING_MONITORING_DATA].paramDetails}
       />

x-pack/plugins/monitoring/public/alerts/thread_pool_rejections_alert/index.tsx

@@ -5,15 +5,17 @@
  * 2.0.
  */
 
-import React from 'react';
-import { i18n } from '@kbn/i18n';
 import { EuiSpacer } from '@elastic/eui';
-import { Expression, Props } from '../components/param_details_form/expression';
-// eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { AlertTypeModel } from '../../../../triggers_actions_ui/public/types';
-import { CommonAlertParamDetails } from '../../../common/types/alerts';
+import { i18n } from '@kbn/i18n';
+import React from 'react';
+import type { AlertTypeModel } from '../../../../triggers_actions_ui/public';
 import { RULE_REQUIRES_APP_CONTEXT } from '../../../common/constants';
-import { MonitoringConfig } from '../../types';
+import type { CommonAlertParamDetails } from '../../../common/types/alerts';
+import type { MonitoringConfig } from '../../types';
+import {
+  LazyExpression,
+  LazyExpressionProps,
+} from '../components/param_details_form/lazy_expression';
 
 interface ThreadPoolTypes {
   [key: string]: unknown;
@@ -37,10 +39,14 @@ export function createThreadPoolRejectionsAlertType(
     documentationUrl(docLinks) {
       return `${docLinks.links.monitoring.alertsKibanaThreadpoolRejections}`;
     },
-    alertParamsExpression: (props: Props) => (
+    alertParamsExpression: (props: LazyExpressionProps) => (
       <>
         <EuiSpacer />
-        <Expression {...props} config={config} paramDetails={threadPoolAlertDetails.paramDetails} />
+        <LazyExpression
+          {...props}
+          config={config}
+          paramDetails={threadPoolAlertDetails.paramDetails}
+        />
       </>
     ),
     validate: (inputValues: ThreadPoolTypes) => {

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

@@ -14,21 +14,29 @@ import {
   Plugin,
   PluginInitializerContext,
 } from 'kibana/public';
-import { Legacy } from './legacy_shims';
-import { UsageCollectionSetup } from '../../../../src/plugins/usage_collection/public';
+import { DEFAULT_APP_CATEGORIES } from '../../../../src/core/public';
 import {
   FeatureCatalogueCategory,
   HomePublicPluginSetup,
 } from '../../../../src/plugins/home/public';
-import { DEFAULT_APP_CATEGORIES } from '../../../../src/core/public';
-import { MonitoringStartPluginDependencies, MonitoringConfig } from './types';
+import { UsageCollectionSetup } from '../../../../src/plugins/usage_collection/public';
 import { TriggersAndActionsUIPublicPluginSetup } from '../../triggers_actions_ui/public';
 import {
+  RULE_DETAILS,
   RULE_THREAD_POOL_SEARCH_REJECTIONS,
   RULE_THREAD_POOL_WRITE_REJECTIONS,
-  RULE_DETAILS,
 } from '../common/constants';
+import { createCCRReadExceptionsAlertType } from './alerts/ccr_read_exceptions_alert';
+import { createCpuUsageAlertType } from './alerts/cpu_usage_alert';
+import { createDiskUsageAlertType } from './alerts/disk_usage_alert';
+import { createLargeShardSizeAlertType } from './alerts/large_shard_size_alert';
+import { createLegacyAlertTypes } from './alerts/legacy_alert';
+import { createMemoryUsageAlertType } from './alerts/memory_usage_alert';
+import { createMissingMonitoringDataAlertType } from './alerts/missing_monitoring_data_alert';
+import { createThreadPoolRejectionsAlertType } from './alerts/thread_pool_rejections_alert';
 import { setConfig } from './external_config';
+import { Legacy } from './legacy_shims';
+import { MonitoringConfig, MonitoringStartPluginDependencies } from './types';
 
 interface MonitoringSetupPluginDependencies {
   home?: HomePublicPluginSetup;
@@ -42,7 +50,7 @@ export class MonitoringPlugin
 {
   constructor(private initializerContext: PluginInitializerContext<MonitoringConfig>) {}
 
-  public async setup(
+  public setup(
     core: CoreSetup<MonitoringStartPluginDependencies>,
     plugins: MonitoringSetupPluginDependencies
   ) {
@@ -75,7 +83,7 @@ export class MonitoringPlugin
       });
     }
 
-    await this.registerAlerts(plugins, monitoring);
+    this.registerAlerts(plugins, monitoring);
 
     const app: App = {
       id,
@@ -136,27 +144,11 @@ export class MonitoringPlugin
     ];
   }
 
-  private async registerAlerts(
-    plugins: MonitoringSetupPluginDependencies,
-    config: MonitoringConfig
-  ) {
+  private registerAlerts(plugins: MonitoringSetupPluginDependencies, config: MonitoringConfig) {
     const {
       triggersActionsUi: { ruleTypeRegistry },
     } = plugins;
 
-    const { createCpuUsageAlertType } = await import('./alerts/cpu_usage_alert');
-    const { createMissingMonitoringDataAlertType } = await import(
-      './alerts/missing_monitoring_data_alert'
-    );
-    const { createLegacyAlertTypes } = await import('./alerts/legacy_alert');
-    const { createDiskUsageAlertType } = await import('./alerts/disk_usage_alert');
-    const { createThreadPoolRejectionsAlertType } = await import(
-      './alerts/thread_pool_rejections_alert'
-    );
-    const { createMemoryUsageAlertType } = await import('./alerts/memory_usage_alert');
-    const { createCCRReadExceptionsAlertType } = await import('./alerts/ccr_read_exceptions_alert');
-    const { createLargeShardSizeAlertType } = await import('./alerts/large_shard_size_alert');
-
     ruleTypeRegistry.register(createCpuUsageAlertType(config));
     ruleTypeRegistry.register(createDiskUsageAlertType(config));
     ruleTypeRegistry.register(createMemoryUsageAlertType(config));