Create clean, app-specific mount functions

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 { ClientPluginsStart } 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: ClientPluginsStart;
+}> = ({ children, core, plugins }) => {
+  return (
+    <KibanaContextProvider services={{ ...core, ...plugins }}>
+      <core.i18n.Context>{children}</core.i18n.Context>
+    </KibanaContextProvider>
+  );
+};

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 { NotFoundPage } from '../pages/404';
+import { LinkToLogsPage } from '../pages/link_to/link_to_logs';
+import { LogsPage } from '../pages/logs';
+import { ClientPluginsStart } from '../types';
+import { createApolloClient } from '../utils/apollo_client';
+import { RedirectWithQueryParams } from '../utils/redirect_with_query_params';
+import { CommonInfraProviders, CoreProviders } from './common_providers';
+
+export const renderApp = (
+  core: CoreStart,
+  plugins: ClientPluginsStart,
+  { element, history }: AppMountParameters
+) => {
+  const apolloClient = createApolloClient(core.http.fetch);
+
+  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: ClientPluginsStart;
+}> = ({ 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 && (
+              <RedirectWithQueryParams from="/" exact={true} to="/stream" />
+            )}
+            {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,78 @@
+/*
+ * 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 { 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 { ClientPluginsStart } from '../types';
+import { createApolloClient } from '../utils/apollo_client';
+import { RedirectWithQueryParams } from '../utils/redirect_with_query_params';
+import { CommonInfraProviders, CoreProviders } from './common_providers';
+
+export const renderApp = (
+  core: CoreStart,
+  plugins: ClientPluginsStart,
+  { element, history }: AppMountParameters
+) => {
+  const apolloClient = createApolloClient(core.http.fetch);
+
+  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: ClientPluginsStart;
+}> = ({ 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>
+  );
+};

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

@@ -4,8 +4,9 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { PluginInitializerContext, PluginInitializer } from 'kibana/public';
-import { Plugin, ClientSetup, ClientStart, ClientPluginsSetup, ClientPluginsStart } from './plugin';
+import { PluginInitializer, PluginInitializerContext } from 'kibana/public';
+import { ClientSetup, ClientStart, Plugin } from './plugin';
+import { ClientPluginsSetup, ClientPluginsStart } from './types';
 
 export const plugin: PluginInitializer<
   ClientSetup,

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

@@ -4,7 +4,6 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 import { i18n } from '@kbn/i18n';
-import { merge } from 'lodash';
 import {
   Plugin as PluginClass,
   CoreSetup,
@@ -15,43 +14,19 @@ import {
 import { DEFAULT_APP_CATEGORIES } from '../../../../src/core/public';
 import { registerStartSingleton } from './legacy_singletons';
 import { registerFeatures } from './register_feature';
-import { HomePublicPluginSetup } from '../../../../src/plugins/home/public';
-import { DataPublicPluginSetup, DataPublicPluginStart } from '../../../../src/plugins/data/public';
-import { UsageCollectionSetup } from '../../../../src/plugins/usage_collection/public';
-import { DataEnhancedSetup, DataEnhancedStart } from '../../data_enhanced/public';
-
-import { TriggersAndActionsUIPublicPluginSetup } from '../../../plugins/triggers_actions_ui/public';
 import { getAlertType as getLogsAlertType } from './components/alerting/logs/log_threshold_alert_type';
 import { getInventoryMetricAlertType } from './components/alerting/inventory/metric_inventory_threshold_alert_type';
 import { createMetricThresholdAlertType } from './alerting/metric_threshold';
+import { ClientPluginsSetup, ClientPluginsStart } from './types';
 
 export type ClientSetup = void;
 export type ClientStart = void;
 
-export interface ClientPluginsSetup {
-  home: HomePublicPluginSetup;
-  data: DataPublicPluginSetup;
-  usageCollection: UsageCollectionSetup;
-  dataEnhanced: DataEnhancedSetup;
-  triggers_actions_ui: TriggersAndActionsUIPublicPluginSetup;
-}
-
-export interface ClientPluginsStart {
-  data: DataPublicPluginStart;
-  dataEnhanced: DataEnhancedStart;
-}
-
-export type InfraPlugins = ClientPluginsSetup & ClientPluginsStart;
-
-const getMergedPlugins = (setup: ClientPluginsSetup, start: ClientPluginsStart): InfraPlugins => {
-  return merge({}, setup, start);
-};
-
 export class Plugin
   implements PluginClass<ClientSetup, ClientStart, ClientPluginsSetup, ClientPluginsStart> {
-  constructor(context: PluginInitializerContext) {}
+  constructor(private context: PluginInitializerContext) {}
 
-  setup(core: CoreSetup, pluginsSetup: ClientPluginsSetup) {
+  setup(core: CoreSetup<ClientPluginsStart, ClientStart>, pluginsSetup: ClientPluginsSetup) {
     registerFeatures(pluginsSetup.home);
 
     pluginsSetup.triggers_actions_ui.alertTypeRegistry.register(getInventoryMetricAlertType());
@@ -69,17 +44,9 @@ export class Plugin
       category: DEFAULT_APP_CATEGORIES.observability,
       mount: async (params: AppMountParameters) => {
         const [coreStart, pluginsStart] = await core.getStartServices();
-        const plugins = getMergedPlugins(pluginsSetup, pluginsStart as ClientPluginsStart);
-        const { startApp, composeLibs, LogsRouter } = await this.downloadAssets();
+        const { renderApp } = await import('./apps/logs_app');
 
-        return startApp(
-          composeLibs(coreStart),
-          coreStart,
-          plugins,
-          params,
-          LogsRouter,
-          pluginsSetup.triggers_actions_ui
-        );
+        return renderApp(coreStart, pluginsStart, params);
       },
     });
 
@@ -94,17 +61,9 @@ export class Plugin
       category: DEFAULT_APP_CATEGORIES.observability,
       mount: async (params: AppMountParameters) => {
         const [coreStart, pluginsStart] = await core.getStartServices();
-        const plugins = getMergedPlugins(pluginsSetup, pluginsStart as ClientPluginsStart);
-        const { startApp, composeLibs, MetricsRouter } = await this.downloadAssets();
+        const { renderApp } = await import('./apps/metrics_app');
 
-        return startApp(
-          composeLibs(coreStart),
-          coreStart,
-          plugins,
-          params,
-          MetricsRouter,
-          pluginsSetup.triggers_actions_ui
-        );
+        return renderApp(coreStart, pluginsStart, params);
       },
     });
 
@@ -122,22 +81,22 @@ export class Plugin
     });
   }
 
-  start(core: CoreStart, plugins: ClientPluginsStart) {
+  start(core: CoreStart, _plugins: ClientPluginsStart) {
     registerStartSingleton(core);
   }
 
-  private async downloadAssets() {
-    const [{ startApp }, { composeLibs }, { LogsRouter, MetricsRouter }] = await Promise.all([
-      import('./apps/start_app'),
-      import('./compose_libs'),
-      import('./routers'),
-    ]);
-
-    return {
-      startApp,
-      composeLibs,
-      LogsRouter,
-      MetricsRouter,
-    };
-  }
+  // private async downloadAssets() {
+  //   const [{ startApp }, { composeLibs }, { LogsRouter, MetricsRouter }] = await Promise.all([
+  //     import('./apps/start_app'),
+  //     import('./compose_libs'),
+  //     import('./routers'),
+  //   ]);
+
+  //   return {
+  //     startApp,
+  //     composeLibs,
+  //     LogsRouter,
+  //     MetricsRouter,
+  //   };
+  // }
 }

x-pack/plugins/infra/public/types.ts

@@ -0,0 +1,21 @@
+/*
+ * 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 { DataPublicPluginStart } from '../../../../src/plugins/data/public';
+import { HomePublicPluginSetup } from '../../../../src/plugins/home/public';
+import { TriggersAndActionsUIPublicPluginSetup } from '../../../plugins/triggers_actions_ui/public';
+import { DataEnhancedStart } from '../../data_enhanced/public';
+
+export interface ClientPluginsSetup {
+  home: HomePublicPluginSetup;
+  triggers_actions_ui: TriggersAndActionsUIPublicPluginSetup;
+}
+
+export interface ClientPluginsStart {
+  data: DataPublicPluginStart;
+  dataEnhanced: DataEnhancedStart;
+  triggers_actions_ui: TriggersAndActionsUIPublicPluginSetup;
+}