From 867a2d4c63acef8f53545fa8ce463945f091f3f3 Mon Sep 17 00:00:00 2001
From: Nathan L Smith <nathan.smith@elastic.co>
Date: Wed, 10 Jun 2020 17:15:04 -0500
Subject: [PATCH] [APM] Lazy-load alert triggers (#68806)

Use `React.lazy` to load the alert triggers so the code doesn't load until the alert flyout is opened.

Fixes #66189.
---
 .../shared/ErrorRateAlertTrigger/index.tsx    |  5 +++
 .../TransactionDurationAlertTrigger/index.tsx |  5 +++
 x-pack/plugins/apm/public/plugin.ts           | 32 ++++++++++---------
 3 files changed, 27 insertions(+), 15 deletions(-)

diff --git a/x-pack/plugins/apm/public/components/shared/ErrorRateAlertTrigger/index.tsx b/x-pack/plugins/apm/public/components/shared/ErrorRateAlertTrigger/index.tsx
index fd107a087cace..b457fb1092bc6 100644
--- a/x-pack/plugins/apm/public/components/shared/ErrorRateAlertTrigger/index.tsx
+++ b/x-pack/plugins/apm/public/components/shared/ErrorRateAlertTrigger/index.tsx
@@ -116,3 +116,8 @@ export function ErrorRateAlertTrigger(props: Props) {
     />
   );
 }
+
+// Default export is required for React.lazy loading
+//
+// eslint-disable-next-line import/no-default-export
+export default ErrorRateAlertTrigger;
diff --git a/x-pack/plugins/apm/public/components/shared/TransactionDurationAlertTrigger/index.tsx b/x-pack/plugins/apm/public/components/shared/TransactionDurationAlertTrigger/index.tsx
index 5cea4696d60a7..473fd432c166a 100644
--- a/x-pack/plugins/apm/public/components/shared/TransactionDurationAlertTrigger/index.tsx
+++ b/x-pack/plugins/apm/public/components/shared/TransactionDurationAlertTrigger/index.tsx
@@ -175,3 +175,8 @@ export function TransactionDurationAlertTrigger(props: Props) {
     />
   );
 }
+
+// Default export is required for React.lazy loading
+//
+// eslint-disable-next-line import/no-default-export
+export default TransactionDurationAlertTrigger;
diff --git a/x-pack/plugins/apm/public/plugin.ts b/x-pack/plugins/apm/public/plugin.ts
index 0939c51b16605..2f46e2090351b 100644
--- a/x-pack/plugins/apm/public/plugin.ts
+++ b/x-pack/plugins/apm/public/plugin.ts
@@ -5,40 +5,38 @@
  */
 
 import { i18n } from '@kbn/i18n';
+import { lazy } from 'react';
+import { ConfigSchema } from '.';
 import {
   AppMountParameters,
   CoreSetup,
   CoreStart,
+  DEFAULT_APP_CATEGORIES,
   Plugin,
   PluginInitializerContext,
 } from '../../../../src/core/public';
-import { DEFAULT_APP_CATEGORIES } from '../../../../src/core/public';
-
-import {
-  PluginSetupContract as AlertingPluginPublicSetup,
-  PluginStartContract as AlertingPluginPublicStart,
-} from '../../alerts/public';
-import { FeaturesPluginSetup } from '../../features/public';
 import {
   DataPublicPluginSetup,
   DataPublicPluginStart,
 } from '../../../../src/plugins/data/public';
 import { HomePublicPluginSetup } from '../../../../src/plugins/home/public';
+import {
+  PluginSetupContract as AlertingPluginPublicSetup,
+  PluginStartContract as AlertingPluginPublicStart,
+} from '../../alerts/public';
+import { FeaturesPluginSetup } from '../../features/public';
 import { LicensingPluginSetup } from '../../licensing/public';
 import {
   TriggersAndActionsUIPublicPluginSetup,
   TriggersAndActionsUIPublicPluginStart,
 } from '../../triggers_actions_ui/public';
-import { ConfigSchema } from '.';
-import { createCallApmApi } from './services/rest/createCallApmApi';
-import { featureCatalogueEntry } from './featureCatalogueEntry';
 import { AlertType } from '../common/alert_types';
-import { ErrorRateAlertTrigger } from './components/shared/ErrorRateAlertTrigger';
-import { TransactionDurationAlertTrigger } from './components/shared/TransactionDurationAlertTrigger';
+import { featureCatalogueEntry } from './featureCatalogueEntry';
+import { createCallApmApi } from './services/rest/createCallApmApi';
+import { createStaticIndexPattern } from './services/rest/index_pattern';
 import { setHelpExtension } from './setHelpExtension';
 import { toggleAppLinkInNav } from './toggleAppLinkInNav';
 import { setReadonlyBadge } from './updateBadge';
-import { createStaticIndexPattern } from './services/rest/index_pattern';
 
 export type ApmPluginSetup = void;
 export type ApmPluginStart = void;
@@ -112,7 +110,9 @@ export class ApmPlugin implements Plugin<ApmPluginSetup, ApmPluginStart> {
         defaultMessage: 'Error rate',
       }),
       iconClass: 'bell',
-      alertParamsExpression: ErrorRateAlertTrigger,
+      alertParamsExpression: lazy(() =>
+        import('./components/shared/ErrorRateAlertTrigger')
+      ),
       validate: () => ({
         errors: [],
       }),
@@ -125,7 +125,9 @@ export class ApmPlugin implements Plugin<ApmPluginSetup, ApmPluginStart> {
         defaultMessage: 'Transaction duration',
       }),
       iconClass: 'bell',
-      alertParamsExpression: TransactionDurationAlertTrigger,
+      alertParamsExpression: lazy(() =>
+        import('./components/shared/TransactionDurationAlertTrigger')
+      ),
       validate: () => ({
         errors: [],
       }),