diff --git a/x-pack/plugins/apm/public/application/csmApp.tsx b/x-pack/plugins/apm/public/application/csmApp.tsx new file mode 100644 index 0000000000000..f976813774149 --- /dev/null +++ b/x-pack/plugins/apm/public/application/csmApp.tsx @@ -0,0 +1,151 @@ +/* + * 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 ReactDOM from 'react-dom'; +import { Route, Router } from 'react-router-dom'; +import styled, { ThemeProvider, DefaultTheme } from 'styled-components'; +import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json'; +import euiLightVars from '@elastic/eui/dist/eui_theme_light.json'; +import { CoreStart, AppMountParameters } from 'kibana/public'; +import { ApmPluginSetupDeps } from '../plugin'; + +import { + KibanaContextProvider, + useUiSetting$, +} from '../../../../../src/plugins/kibana_react/public'; +import { px, units } from '../style/variables'; +import { UpdateBreadcrumbs } from '../components/app/Main/UpdateBreadcrumbs'; +import { ScrollToTopOnPathChange } from '../components/app/Main/ScrollToTopOnPathChange'; +import { history, resetHistory } from '../utils/history'; +import 'react-vis/dist/style.css'; +import { RumHome } from '../components/app/RumDashboard/RumHome'; +import { ConfigSchema } from '../index'; +import { BreadcrumbRoute } from '../components/app/Main/ProvideBreadcrumbs'; +import { RouteName } from '../components/app/Main/route_config/route_names'; +import { + renderAsRedirectTo, + routes, +} from '../components/app/Main/route_config'; +import { ApmPluginContext } from '../context/ApmPluginContext'; +import { AlertsContextProvider } from '../../../triggers_actions_ui/public'; +import { LocationProvider } from '../context/LocationContext'; +import { MatchedRouteProvider } from '../context/MatchedRouteContext'; +import { UrlParamsProvider } from '../context/UrlParamsContext'; +import { LoadingIndicatorProvider } from '../context/LoadingIndicatorContext'; +import { LicenseProvider } from '../context/LicenseContext'; + +const CsmMainContainer = styled.div` + padding: ${px(units.plus)}; + height: 100%; +`; + +export const rumRoutes: BreadcrumbRoute[] = [ + { + exact: true, + path: '/', + render: renderAsRedirectTo('/csm'), + breadcrumb: 'Client Side Monitoring', + name: RouteName.CSM, + }, +]; + +function CsmApp() { + const [darkMode] = useUiSetting$('theme:darkMode'); + + return ( + ({ + ...outerTheme, + eui: darkMode ? euiDarkVars : euiLightVars, + darkMode, + })} + > + + + + + + + ); +} + +export function CsmAppRoot({ + core, + deps, + routerHistory, + config, +}: { + core: CoreStart; + deps: ApmPluginSetupDeps; + routerHistory: typeof history; + config: ConfigSchema; +}) { + const i18nCore = core.i18n; + const plugins = deps; + const apmPluginContextValue = { + config, + core, + plugins, + }; + return ( + + + + + + + + + + + + + + + + + + + + + + ); +} + +/** + * This module is rendered asynchronously in the Kibana platform. + */ +export const renderApp = ( + core: CoreStart, + deps: ApmPluginSetupDeps, + { element }: AppMountParameters, + config: ConfigSchema +) => { + resetHistory(); + ReactDOM.render( + } + />, + element + ); + return () => { + ReactDOM.unmountComponentAtNode(element); + }; +}; diff --git a/x-pack/plugins/apm/public/application/index.tsx b/x-pack/plugins/apm/public/application/index.tsx index 315eb562fe562..d2afe30f7b578 100644 --- a/x-pack/plugins/apm/public/application/index.tsx +++ b/x-pack/plugins/apm/public/application/index.tsx @@ -66,13 +66,11 @@ export function ApmAppRoot({ deps, routerHistory, config, - app, }: { core: CoreStart; deps: ApmPluginSetupDeps; routerHistory: typeof history; config: ConfigSchema; - app: JSX.Element; }) { const i18nCore = core.i18n; const plugins = deps; @@ -100,7 +98,9 @@ export function ApmAppRoot({ - {app} + + + diff --git a/x-pack/plugins/apm/public/application/rumApp.tsx b/x-pack/plugins/apm/public/application/rumApp.tsx deleted file mode 100644 index 918c3492883f8..0000000000000 --- a/x-pack/plugins/apm/public/application/rumApp.tsx +++ /dev/null @@ -1,75 +0,0 @@ -/* - * 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 ReactDOM from 'react-dom'; -import { Route } from 'react-router-dom'; -import styled, { ThemeProvider, DefaultTheme } from 'styled-components'; -import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json'; -import euiLightVars from '@elastic/eui/dist/eui_theme_light.json'; -import { CoreStart, AppMountParameters } from '../../../../../src/core/public'; -import { ApmPluginSetupDeps } from '../plugin'; - -import { useUiSetting$ } from '../../../../../src/plugins/kibana_react/public'; -import { px, units } from '../style/variables'; -import { UpdateBreadcrumbs } from '../components/app/Main/UpdateBreadcrumbs'; -import { ScrollToTopOnPathChange } from '../components/app/Main/ScrollToTopOnPathChange'; -import { history, resetHistory } from '../utils/history'; -import 'react-vis/dist/style.css'; -import { RumHome } from '../components/app/RumDashboard/RumHome'; -import { rumRoutes } from '../components/app/Main/route_config'; -import { ApmAppRoot } from './index'; -import { ConfigSchema } from '..'; - -const MainContainer = styled.div` - padding: ${px(units.plus)}; - height: 100%; -`; - -function RumApp() { - const [darkMode] = useUiSetting$('theme:darkMode'); - - return ( - ({ - ...outerTheme, - eui: darkMode ? euiDarkVars : euiLightVars, - darkMode, - })} - > - - - - - - - ); -} - -/** - * This module is rendered asynchronously in the Kibana platform. - */ -export const renderApp = ( - core: CoreStart, - deps: ApmPluginSetupDeps, - { element }: AppMountParameters, - config: ConfigSchema -) => { - resetHistory(); - ReactDOM.render( - } - />, - element - ); - return () => { - ReactDOM.unmountComponentAtNode(element); - }; -}; diff --git a/x-pack/plugins/apm/public/components/app/Main/route_config/index.tsx b/x-pack/plugins/apm/public/components/app/Main/route_config/index.tsx index 62244275f1c95..8caddc94b6907 100644 --- a/x-pack/plugins/apm/public/components/app/Main/route_config/index.tsx +++ b/x-pack/plugins/apm/public/components/app/Main/route_config/index.tsx @@ -37,7 +37,7 @@ interface RouteParams { serviceName: string; } -const renderAsRedirectTo = (to: string) => { +export const renderAsRedirectTo = (to: string) => { return ({ location }: RouteComponentProps) => ( { }); core.application.register({ - id: 'clientSideMonitoring', + id: 'csm', title: 'Client Side Monitoring', order: 8500, - euiIconType: 'apmApp', - icon: 'plugins/apm/public/icon.svg', category: DEFAULT_APP_CATEGORIES.observability, async mount(params: AppMountParameters) { // Load application bundle - const { renderApp } = await import('./application/rumApp'); + const { renderApp } = await import('./application/csmApp'); // Get start services const [coreStart] = await core.getStartServices(); await setupLazyStuff(coreStart);