[Logs + Metrics UI] Clean up async plugin initialization (#67654)

This refactors the browser-side plugin bootstrap code such that the eagerly loaded bundle `infra.plugin.js` is minimal and the rest of the logs and metrics app bundles are loaded only when the apps are visited.

x-pack/plugins/infra/public/alerting/metric_threshold/components/expression.tsx

@@ -384,3 +384,7 @@ export const Expressions: React.FC<Props> = (props) => {
     </>
   );
 };
+
+// required for dynamic import
+// eslint-disable-next-line import/no-default-export
+export default Expressions;

x-pack/plugins/infra/public/alerting/metric_threshold/components/validation.tsx

@@ -5,7 +5,6 @@
  */
 
 import { i18n } from '@kbn/i18n';
-import { isNumber } from 'lodash';
 import {
   MetricExpressionParams,
   Comparator,
@@ -106,3 +105,5 @@ export function validateMetricThreshold({
 
   return validationResult;
 }
+
+const isNumber = (value: unknown): value is number => typeof value === 'number';

x-pack/plugins/infra/public/alerting/metric_threshold/index.ts

@@ -4,9 +4,9 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 import { i18n } from '@kbn/i18n';
+import React from 'react';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { AlertTypeModel } from '../../../../triggers_actions_ui/public/types';
-import { Expressions } from './components/expression';
 import { validateMetricThreshold } from './components/validation';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { METRIC_THRESHOLD_ALERT_TYPE_ID } from '../../../server/lib/alerting/metric_threshold/types';
@@ -18,7 +18,7 @@ export function createMetricThresholdAlertType(): AlertTypeModel {
       defaultMessage: 'Metric threshold',
     }),
     iconClass: 'bell',
-    alertParamsExpression: Expressions,
+    alertParamsExpression: React.lazy(() => import('./components/expression')),
     validate: validateMetricThreshold,
     defaultActionMessage: i18n.translate(
       'xpack.infra.metrics.alerting.threshold.defaultActionMessage',

x-pack/plugins/infra/public/apps/common_providers.tsx

@@ -0,0 +1,47 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { CoreStart } from 'kibana/public';
+import { ApolloClient } from 'apollo-client';
+import {
+  useUiSetting$,
+  KibanaContextProvider,
+} from '../../../../../src/plugins/kibana_react/public';
+import { TriggersActionsProvider } from '../utils/triggers_actions_context';
+import { ClientPluginDeps } from '../types';
+import { TriggersAndActionsUIPublicPluginStart } from '../../../triggers_actions_ui/public';
+import { ApolloClientContext } from '../utils/apollo_context';
+import { EuiThemeProvider } from '../../../observability/public';
+import { NavigationWarningPromptProvider } from '../utils/navigation_warning_prompt';
+
+export const CommonInfraProviders: React.FC<{
+  apolloClient: ApolloClient<{}>;
+  triggersActionsUI: TriggersAndActionsUIPublicPluginStart;
+}> = ({ apolloClient, children, triggersActionsUI }) => {
+  const [darkMode] = useUiSetting$<boolean>('theme:darkMode');
+
+  return (
+    <TriggersActionsProvider triggersActionsUI={triggersActionsUI}>
+      <ApolloClientContext.Provider value={apolloClient}>
+        <EuiThemeProvider darkMode={darkMode}>
+          <NavigationWarningPromptProvider>{children}</NavigationWarningPromptProvider>
+        </EuiThemeProvider>
+      </ApolloClientContext.Provider>
+    </TriggersActionsProvider>
+  );
+};
+
+export const CoreProviders: React.FC<{
+  core: CoreStart;
+  plugins: ClientPluginDeps;
+}> = ({ children, core, plugins }) => {
+  return (
+    <KibanaContextProvider services={{ ...core, ...plugins }}>
+      <core.i18n.Context>{children}</core.i18n.Context>
+    </KibanaContextProvider>
+  );
+};

x-pack/plugins/infra/public/apps/common_styles.ts

@@ -0,0 +1,13 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export const CONTAINER_CLASSNAME = 'infra-container-element';
+
+export const prepareMountElement = (element: HTMLElement) => {
+  // Ensure the element we're handed from application mounting is assigned a class
+  // for our index.scss styles to apply to.
+  element.classList.add(CONTAINER_CLASSNAME);
+};

x-pack/plugins/infra/public/apps/legacy_app.tsx

@@ -0,0 +1,98 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { EuiErrorBoundary } from '@elastic/eui';
+import { createBrowserHistory, History } from 'history';
+import { AppMountParameters } from 'kibana/public';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Route, RouteProps, Router, Switch } from 'react-router-dom';
+import url from 'url';
+
+// This exists purely to facilitate legacy app/infra URL redirects.
+// It will be removed in 8.0.0.
+export async function renderApp({ element }: AppMountParameters) {
+  const history = createBrowserHistory();
+
+  ReactDOM.render(<LegacyApp history={history} />, element);
+
+  return () => {
+    ReactDOM.unmountComponentAtNode(element);
+  };
+}
+
+const LegacyApp: React.FunctionComponent<{ history: History<unknown> }> = ({ history }) => {
+  return (
+    <EuiErrorBoundary>
+      <Router history={history}>
+        <Switch>
+          <Route
+            path={'/'}
+            render={({ location }: RouteProps) => {
+              if (!location) {
+                return null;
+              }
+
+              let nextPath = '';
+              let nextBasePath = '';
+              let nextSearch;
+
+              if (
+                location.hash.indexOf('#infrastructure') > -1 ||
+                location.hash.indexOf('#/infrastructure') > -1
+              ) {
+                nextPath = location.hash.replace(
+                  new RegExp(
+                    '#infrastructure/|#/infrastructure/|#/infrastructure|#infrastructure',
+                    'g'
+                  ),
+                  ''
+                );
+                nextBasePath = location.pathname.replace('app/infra', 'app/metrics');
+              } else if (
+                location.hash.indexOf('#logs') > -1 ||
+                location.hash.indexOf('#/logs') > -1
+              ) {
+                nextPath = location.hash.replace(
+                  new RegExp('#logs/|#/logs/|#/logs|#logs', 'g'),
+                  ''
+                );
+                nextBasePath = location.pathname.replace('app/infra', 'app/logs');
+              } else {
+                // This covers /app/infra and /app/infra/home (both of which used to render
+                // the metrics inventory page)
+                nextPath = 'inventory';
+                nextBasePath = location.pathname.replace('app/infra', 'app/metrics');
+                nextSearch = undefined;
+              }
+
+              // app/infra#infrastructure/metrics/:type/:node was changed to app/metrics/detail/:type/:node, this
+              // accounts for that edge case
+              nextPath = nextPath.replace('metrics/', 'detail/');
+
+              // Query parameters (location.search) will arrive as part of location.hash and not location.search
+              const nextPathParts = nextPath.split('?');
+              nextPath = nextPathParts[0];
+              nextSearch = nextPathParts[1] ? nextPathParts[1] : undefined;
+
+              let nextUrl = url.format({
+                pathname: `${nextBasePath}/${nextPath}`,
+                hash: undefined,
+                search: nextSearch,
+              });
+
+              nextUrl = nextUrl.replace('//', '/');
+
+              window.location.href = nextUrl;
+
+              return null;
+            }}
+          />
+        </Switch>
+      </Router>
+    </EuiErrorBoundary>
+  );
+};

x-pack/plugins/infra/public/apps/logs_app.tsx

@@ -0,0 +1,66 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { ApolloClient } from 'apollo-client';
+import { History } from 'history';
+import { CoreStart } from 'kibana/public';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Route, Router, Switch } from 'react-router-dom';
+import { AppMountParameters } from '../../../../../src/core/public';
+import '../index.scss';
+import { NotFoundPage } from '../pages/404';
+import { LinkToLogsPage } from '../pages/link_to/link_to_logs';
+import { LogsPage } from '../pages/logs';
+import { ClientPluginDeps } from '../types';
+import { createApolloClient } from '../utils/apollo_client';
+import { CommonInfraProviders, CoreProviders } from './common_providers';
+import { prepareMountElement } from './common_styles';
+
+export const renderApp = (
+  core: CoreStart,
+  plugins: ClientPluginDeps,
+  { element, history }: AppMountParameters
+) => {
+  const apolloClient = createApolloClient(core.http.fetch);
+
+  prepareMountElement(element);
+
+  ReactDOM.render(
+    <LogsApp apolloClient={apolloClient} core={core} history={history} plugins={plugins} />,
+    element
+  );
+
+  return () => {
+    ReactDOM.unmountComponentAtNode(element);
+  };
+};
+
+const LogsApp: React.FC<{
+  apolloClient: ApolloClient<{}>;
+  core: CoreStart;
+  history: History<unknown>;
+  plugins: ClientPluginDeps;
+}> = ({ apolloClient, core, history, plugins }) => {
+  const uiCapabilities = core.application.capabilities;
+
+  return (
+    <CoreProviders core={core} plugins={plugins}>
+      <CommonInfraProviders
+        apolloClient={apolloClient}
+        triggersActionsUI={plugins.triggers_actions_ui}
+      >
+        <Router history={history}>
+          <Switch>
+            <Route path="/link-to" component={LinkToLogsPage} />
+            {uiCapabilities?.logs?.show && <Route path="/" component={LogsPage} />}
+            <Route component={NotFoundPage} />
+          </Switch>
+        </Router>
+      </CommonInfraProviders>
+    </CoreProviders>
+  );
+};

x-pack/plugins/infra/public/apps/metrics_app.tsx

@@ -0,0 +1,82 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { ApolloClient } from 'apollo-client';
+import { History } from 'history';
+import { CoreStart } from 'kibana/public';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Route, Router, Switch } from 'react-router-dom';
+import { AppMountParameters } from '../../../../../src/core/public';
+import '../index.scss';
+import { NotFoundPage } from '../pages/404';
+import { LinkToMetricsPage } from '../pages/link_to/link_to_metrics';
+import { InfrastructurePage } from '../pages/metrics';
+import { MetricDetail } from '../pages/metrics/metric_detail';
+import { ClientPluginDeps } from '../types';
+import { createApolloClient } from '../utils/apollo_client';
+import { RedirectWithQueryParams } from '../utils/redirect_with_query_params';
+import { CommonInfraProviders, CoreProviders } from './common_providers';
+import { prepareMountElement } from './common_styles';
+
+export const renderApp = (
+  core: CoreStart,
+  plugins: ClientPluginDeps,
+  { element, history }: AppMountParameters
+) => {
+  const apolloClient = createApolloClient(core.http.fetch);
+
+  prepareMountElement(element);
+
+  ReactDOM.render(
+    <MetricsApp apolloClient={apolloClient} core={core} history={history} plugins={plugins} />,
+    element
+  );
+
+  return () => {
+    ReactDOM.unmountComponentAtNode(element);
+  };
+};
+
+const MetricsApp: React.FC<{
+  apolloClient: ApolloClient<{}>;
+  core: CoreStart;
+  history: History<unknown>;
+  plugins: ClientPluginDeps;
+}> = ({ apolloClient, core, history, plugins }) => {
+  const uiCapabilities = core.application.capabilities;
+
+  return (
+    <CoreProviders core={core} plugins={plugins}>
+      <CommonInfraProviders
+        apolloClient={apolloClient}
+        triggersActionsUI={plugins.triggers_actions_ui}
+      >
+        <Router history={history}>
+          <Switch>
+            <Route path="/link-to" component={LinkToMetricsPage} />
+            {uiCapabilities?.infrastructure?.show && (
+              <RedirectWithQueryParams from="/" exact={true} to="/inventory" />
+            )}
+            {uiCapabilities?.infrastructure?.show && (
+              <RedirectWithQueryParams from="/snapshot" exact={true} to="/inventory" />
+            )}
+            {uiCapabilities?.infrastructure?.show && (
+              <RedirectWithQueryParams from="/metrics-explorer" exact={true} to="/explorer" />
+            )}
+            {uiCapabilities?.infrastructure?.show && (
+              <Route path="/detail/:type/:node" component={MetricDetail} />
+            )}
+            {uiCapabilities?.infrastructure?.show && (
+              <Route path="/" component={InfrastructurePage} />
+            )}
+            <Route component={NotFoundPage} />
+          </Switch>
+        </Router>
+      </CommonInfraProviders>
+    </CoreProviders>
+  );
+};