Fix styles and make dependencies more explicit

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

@@ -12,7 +12,7 @@ import {
   KibanaContextProvider,
 } from '../../../../../src/plugins/kibana_react/public';
 import { TriggersActionsProvider } from '../utils/triggers_actions_context';
-import { ClientPluginsStart } from '../types';
+import { ClientPluginDeps } from '../types';
 import { TriggersAndActionsUIPublicPluginStart } from '../../../triggers_actions_ui/public';
 import { ApolloClientContext } from '../utils/apollo_context';
 import { EuiThemeProvider } from '../../../observability/public';
@@ -37,7 +37,7 @@ export const CommonInfraProviders: React.FC<{
 
 export const CoreProviders: React.FC<{
   core: CoreStart;
-  plugins: ClientPluginsStart;
+  plugins: ClientPluginDeps;
 }> = ({ children, core, plugins }) => {
   return (
     <KibanaContextProvider services={{ ...core, ...plugins }}>

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/logs_app.tsx

@@ -11,21 +11,25 @@ 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 { ClientPluginsStart } from '../types';
+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: ClientPluginsStart,
+  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
@@ -40,7 +44,7 @@ const LogsApp: React.FC<{
   apolloClient: ApolloClient<{}>;
   core: CoreStart;
   history: History<unknown>;
-  plugins: ClientPluginsStart;
+  plugins: ClientPluginDeps;
 }> = ({ apolloClient, core, history, plugins }) => {
   const uiCapabilities = core.application.capabilities;
 

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

@@ -11,22 +11,26 @@ 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 { ClientPluginsStart } from '../types';
+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: ClientPluginsStart,
+  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
@@ -41,7 +45,7 @@ const MetricsApp: React.FC<{
   apolloClient: ApolloClient<{}>;
   core: CoreStart;
   history: History<unknown>;
-  plugins: ClientPluginsStart;
+  plugins: ClientPluginDeps;
 }> = ({ apolloClient, core, history, plugins }) => {
   const uiCapabilities = core.application.capabilities;
 

x-pack/plugins/infra/public/pages/metrics/inventory_view/components/table_view.tsx

@@ -15,7 +15,7 @@ import { fieldToName } from '../lib/field_to_display_name';
 import { NodeContextMenu } from './waffle/node_context_menu';
 import { InventoryItemType } from '../../../../../common/inventory_models/types';
 import { SnapshotNode, SnapshotNodePath } from '../../../../../common/http_api/snapshot_api';
-import { CONTAINER_CLASSNAME } from '../../../../apps/start_app';
+import { CONTAINER_CLASSNAME } from '../../../../apps/common_styles';
 
 interface Props {
   nodes: SnapshotNode[];

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

@@ -5,26 +5,26 @@
  */
 import { i18n } from '@kbn/i18n';
 import {
-  Plugin as PluginClass,
+  AppMountParameters,
   CoreSetup,
   CoreStart,
+  Plugin as PluginClass,
   PluginInitializerContext,
-  AppMountParameters,
 } from 'kibana/public';
 import { DEFAULT_APP_CATEGORIES } from '../../../../src/core/public';
+import { createMetricThresholdAlertType } from './alerting/metric_threshold';
+import { getInventoryMetricAlertType } from './components/alerting/inventory/metric_inventory_threshold_alert_type';
+import { getAlertType as getLogsAlertType } from './components/alerting/logs/log_threshold_alert_type';
 import { registerStartSingleton } from './legacy_singletons';
 import { registerFeatures } from './register_feature';
-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 class Plugin
   implements PluginClass<ClientSetup, ClientStart, ClientPluginsSetup, ClientPluginsStart> {
-  constructor(private context: PluginInitializerContext) {}
+  constructor(_context: PluginInitializerContext) {}
 
   setup(core: CoreSetup<ClientPluginsStart, ClientStart>, pluginsSetup: ClientPluginsSetup) {
     registerFeatures(pluginsSetup.home);
@@ -46,7 +46,17 @@ export class Plugin
         const [coreStart, pluginsStart] = await core.getStartServices();
         const { renderApp } = await import('./apps/logs_app');
 
-        return renderApp(coreStart, pluginsStart, params);
+        return renderApp(
+          coreStart,
+          {
+            data: pluginsStart.data,
+            dataEnhanced: pluginsSetup.dataEnhanced,
+            home: pluginsSetup.home,
+            triggers_actions_ui: pluginsStart.triggers_actions_ui,
+            usageCollection: pluginsSetup.usageCollection,
+          },
+          params
+        );
       },
     });
 
@@ -63,7 +73,17 @@ export class Plugin
         const [coreStart, pluginsStart] = await core.getStartServices();
         const { renderApp } = await import('./apps/metrics_app');
 
-        return renderApp(coreStart, pluginsStart, params);
+        return renderApp(
+          coreStart,
+          {
+            data: pluginsStart.data,
+            dataEnhanced: pluginsSetup.dataEnhanced,
+            home: pluginsSetup.home,
+            triggers_actions_ui: pluginsStart.triggers_actions_ui,
+            usageCollection: pluginsSetup.usageCollection,
+          },
+          params
+        );
       },
     });
 
@@ -84,19 +104,4 @@ export class Plugin
   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,
-  //   };
-  // }
 }

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

@@ -6,16 +6,20 @@
 
 import { DataPublicPluginStart } from '../../../../src/plugins/data/public';
 import { HomePublicPluginSetup } from '../../../../src/plugins/home/public';
+import { UsageCollectionSetup } from '../../../../src/plugins/usage_collection/public';
 import { TriggersAndActionsUIPublicPluginSetup } from '../../../plugins/triggers_actions_ui/public';
-import { DataEnhancedStart } from '../../data_enhanced/public';
+import { DataEnhancedSetup } from '../../data_enhanced/public';
 
 export interface ClientPluginsSetup {
+  dataEnhanced: DataEnhancedSetup;
   home: HomePublicPluginSetup;
   triggers_actions_ui: TriggersAndActionsUIPublicPluginSetup;
+  usageCollection: UsageCollectionSetup;
 }
 
 export interface ClientPluginsStart {
   data: DataPublicPluginStart;
-  dataEnhanced: DataEnhancedStart;
   triggers_actions_ui: TriggersAndActionsUIPublicPluginSetup;
 }
+
+export type ClientPluginDeps = ClientPluginsSetup & ClientPluginsStart;