[Stack Monitoring] Lazily import alerting expressions without blockin…

…g the plugin initialization (#117187) (#117858) Co-authored-by: Kibana Machine <[email protected]> Co-authored-by: Felix Stürmer <[email protected]>
elastic · Nov 8, 2021 · a234068 · a234068
1 parent 1b53bad
commit a234068
Show file tree

Hide file tree

Showing 15 changed files with 138 additions and 86 deletions.
diff --git a/x-pack/plugins/monitoring/public/alerts/ccr_read_exceptions_alert/index.tsx b/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}

diff --git a/x-pack/plugins/monitoring/public/alerts/components/param_details_form/expression.tsx b/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;
diff --git a/x-pack/plugins/monitoring/public/alerts/components/param_details_form/lazy_expression.tsx b/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'));
diff --git a/x-pack/plugins/monitoring/public/alerts/cpu_usage_alert/cpu_usage_alert.tsx b/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}

diff --git a/x-pack/plugins/monitoring/public/alerts/disk_usage_alert/index.tsx b/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}

diff --git a/x-pack/plugins/monitoring/public/alerts/large_shard_size_alert/index.tsx b/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}

diff --git a/x-pack/plugins/monitoring/public/alerts/legacy_alert/expression.tsx b/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;
diff --git a/x-pack/plugins/monitoring/public/alerts/legacy_alert/lazy_expression.tsx b/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'));
diff --git a/x-pack/plugins/monitoring/public/alerts/legacy_alert/legacy_alert.tsx b/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,

diff --git a/x-pack/plugins/monitoring/public/alerts/memory_usage_alert/index.tsx b/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}

diff --git a/x-pack/plugins/monitoring/public/alerts/missing_monitoring_data_alert/expression.tsx b/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;
diff --git a/x-pack/plugins/monitoring/public/alerts/missing_monitoring_data_alert/lazy_expression.tsx b/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'));
diff --git a/.../monitoring/public/alerts/missing_monitoring_data_alert/missing_monitoring_data_alert.tsx b/.../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}
       />

diff --git a/x-pack/plugins/monitoring/public/alerts/thread_pool_rejections_alert/index.tsx b/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) => {