Made the dashboards import dynamic.

Signed-off-by: Alexander Wert <AlexanderWert@users.noreply.github.com>

x-pack/plugins/apm/public/components/app/metrics/index.tsx

@@ -33,12 +33,12 @@ export function Metrics() {
     return <ServerlessMetrics />;
   }
 
-  const dashboardFile = hasDashboardFile({
+  const hasStaticDashboard = hasDashboardFile({
     agentName,
     runtimeName,
     serverlessType,
   });
-  if (dashboardFile) {
+  if (hasStaticDashboard) {
     return (
       <JsonMetricsDashboard
         agentName={agentName}

x-pack/plugins/apm/public/components/app/metrics/static_dashboard/dashboards/dashboard_catalog.ts

@@ -0,0 +1,28 @@
+/*
+ * 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.
+ */
+
+export const AGENT_NAME_DASHBOARD_FILE_MAPPING: Record<string, string> = {
+  nodejs: 'nodejs',
+};
+
+/**
+ * The specially formatted comment in the `import` expression causes the corresponding webpack chunk to be named. This aids us in debugging chunk size issues.
+ * See https://webpack.js.org/api/module-methods/#magic-comments
+ */
+export async function loadDashboardFile(filename: string): Promise<any> {
+  switch (filename) {
+    case 'nodejs': {
+      return import(
+        /* webpackChunkName: "lazyNodeJsDashboard" */
+        './nodejs.json'
+      );
+    }
+    default: {
+      break;
+    }
+  }
+}

x-pack/plugins/apm/public/components/app/metrics/static_dashboard/helper.ts

@@ -7,12 +7,10 @@
 
 import type { DashboardPanelMap } from '@kbn/dashboard-plugin/common';
 import { APM_STATIC_DATA_VIEW_ID } from '../../../../../common/data_view_constants';
-
-import nodejs from './dashboards/nodejs.json';
-
-const AGENT_NAME_DASHBOARD_FILE_MAPPING: Record<string, any> = {
-  nodejs,
-};
+import {
+  AGENT_NAME_DASHBOARD_FILE_MAPPING,
+  loadDashboardFile,
+} from './dashboards/dashboard_catalog';
 
 export interface MetricsDashboardProps {
   agentName?: string;
@@ -30,12 +28,15 @@ function getDashboardFile({ agentName }: MetricsDashboardProps) {
   return dashboardFile;
 }
 
-export function getDashboardPanelMap(
+export async function getDashboardPanelMap(
   props: MetricsDashboardProps
-): DashboardPanelMap | undefined {
-  const panelsRawObj = getDashboardFile(props);
+): Promise<DashboardPanelMap | undefined> {
+  const dashboardFile = getDashboardFile(props);
+  const panelsRawObj = !!dashboardFile
+    ? await loadDashboardFile(dashboardFile)
+    : undefined;
 
-  if (!panelsRawObj) {
+  if (!dashboardFile || !panelsRawObj) {
     return undefined;
   }
 

x-pack/plugins/apm/public/components/app/metrics/static_dashboard/index.tsx

@@ -17,6 +17,7 @@ import { buildExistsFilter, buildPhraseFilter, Filter } from '@kbn/es-query';
 import { i18n } from '@kbn/i18n';
 import { controlGroupInputBuilder } from '@kbn/controls-plugin/public';
 import { getDefaultControlGroupInput } from '@kbn/controls-plugin/common';
+import { NotificationsStart } from '@kbn/core/public';
 import { APM_STATIC_DATA_VIEW_ID } from '../../../../../common/data_view_constants';
 import {
   ENVIRONMENT_ALL,
@@ -60,44 +61,50 @@ export function JsonMetricsDashboard(dashboardProps: MetricsDashboardProps) {
     });
   }, [dataView, serviceName, environment, dashboard]);
 
+  return (
+    <DashboardRenderer
+      getCreationOptions={() =>
+        getCreationOptions(dashboardProps, notifications)
+      }
+      ref={setDashboard}
+    />
+  );
+}
+
+async function getCreationOptions(
+  dashboardProps: MetricsDashboardProps,
+  notifications: NotificationsStart
+) {
   try {
-    const panels = getDashboardPanelMap(dashboardProps);
+    const builder = controlGroupInputBuilder;
+    const controlGroupInput = getDefaultControlGroupInput();
+
+    await builder.addDataControlFromField(controlGroupInput, {
+      dataViewId: APM_STATIC_DATA_VIEW_ID,
+      title: 'Node name',
+      fieldName: 'service.node.name',
+      width: 'medium',
+      grow: true,
+    });
+    const panels = await getDashboardPanelMap(dashboardProps);
 
     if (!panels) {
       throw new Error('Failed parsing dashboard panels.');
     }
 
-    return (
-      <DashboardRenderer
-        getCreationOptions={async () => {
-          const builder = controlGroupInputBuilder;
-          const controlGroupInput = getDefaultControlGroupInput();
-
-          await builder.addDataControlFromField(controlGroupInput, {
-            dataViewId: APM_STATIC_DATA_VIEW_ID,
-            title: 'Node name',
-            fieldName: 'service.node.name',
-            width: 'medium',
-            grow: true,
-          });
-
-          return {
-            useControlGroupIntegration: true,
-            initialInput: {
-              viewMode: ViewMode.VIEW,
-              panels,
-              controlGroupInput,
-            },
-          };
-        }}
-        ref={setDashboard}
-      />
-    );
+    return {
+      useControlGroupIntegration: true,
+      initialInput: {
+        viewMode: ViewMode.VIEW,
+        panels,
+        controlGroupInput,
+      },
+    };
   } catch (error) {
     notifications.toasts.addDanger(
       getLoadFailureToastLabels(dashboardProps, error)
     );
-    return <></>;
+    return {};
   }
 }