diff --git a/x-pack/plugins/infra/public/apps/common_providers.tsx b/x-pack/plugins/infra/public/apps/common_providers.tsx index a42efcc6b180e1..facb0f1539a101 100644 --- a/x-pack/plugins/infra/public/apps/common_providers.tsx +++ b/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 ( diff --git a/x-pack/plugins/infra/public/apps/common_styles.ts b/x-pack/plugins/infra/public/apps/common_styles.ts new file mode 100644 index 00000000000000..546b83a69035cb --- /dev/null +++ b/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); +}; diff --git a/x-pack/plugins/infra/public/apps/logs_app.tsx b/x-pack/plugins/infra/public/apps/logs_app.tsx index eb9bf484d1af2c..05bf4a77b5a360 100644 --- a/x-pack/plugins/infra/public/apps/logs_app.tsx +++ b/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( , element @@ -40,7 +44,7 @@ const LogsApp: React.FC<{ apolloClient: ApolloClient<{}>; core: CoreStart; history: History; - plugins: ClientPluginsStart; + plugins: ClientPluginDeps; }> = ({ apolloClient, core, history, plugins }) => { const uiCapabilities = core.application.capabilities; diff --git a/x-pack/plugins/infra/public/apps/metrics_app.tsx b/x-pack/plugins/infra/public/apps/metrics_app.tsx index 53286e72f72b18..8713abe0510a6a 100644 --- a/x-pack/plugins/infra/public/apps/metrics_app.tsx +++ b/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( , element @@ -41,7 +45,7 @@ const MetricsApp: React.FC<{ apolloClient: ApolloClient<{}>; core: CoreStart; history: History; - plugins: ClientPluginsStart; + plugins: ClientPluginDeps; }> = ({ apolloClient, core, history, plugins }) => { const uiCapabilities = core.application.capabilities; diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/table_view.tsx b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/table_view.tsx index 3b68ad314f7df5..764eeb154d346a 100644 --- a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/table_view.tsx +++ b/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[]; diff --git a/x-pack/plugins/infra/public/plugin.ts b/x-pack/plugins/infra/public/plugin.ts index 763409b5b5cf35..784769d0e5cfd7 100644 --- a/x-pack/plugins/infra/public/plugin.ts +++ b/x-pack/plugins/infra/public/plugin.ts @@ -5,18 +5,18 @@ */ 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; @@ -24,7 +24,7 @@ export type ClientStart = void; export class Plugin implements PluginClass { - constructor(private context: PluginInitializerContext) {} + constructor(_context: PluginInitializerContext) {} setup(core: CoreSetup, 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, - // }; - // } } diff --git a/x-pack/plugins/infra/public/types.ts b/x-pack/plugins/infra/public/types.ts index 74f8fa880352f9..8181da3301c929 100644 --- a/x-pack/plugins/infra/public/types.ts +++ b/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;