change name to csm

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$<boolean>('theme:darkMode');
+
+  return (
+    <ThemeProvider
+      theme={(outerTheme?: DefaultTheme) => ({
+        ...outerTheme,
+        eui: darkMode ? euiDarkVars : euiLightVars,
+        darkMode,
+      })}
+    >
+      <CsmMainContainer data-test-subj="csmMainContainer" role="main">
+        <UpdateBreadcrumbs routes={rumRoutes} />
+        <Route component={ScrollToTopOnPathChange} />
+        <RumHome />
+      </CsmMainContainer>
+    </ThemeProvider>
+  );
+}
+
+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 (
+    <ApmPluginContext.Provider value={apmPluginContextValue}>
+      <AlertsContextProvider
+        value={{
+          http: core.http,
+          docLinks: core.docLinks,
+          capabilities: core.application.capabilities,
+          toastNotifications: core.notifications.toasts,
+          actionTypeRegistry: plugins.triggers_actions_ui.actionTypeRegistry,
+          alertTypeRegistry: plugins.triggers_actions_ui.alertTypeRegistry,
+        }}
+      >
+        <KibanaContextProvider services={{ ...core, ...plugins }}>
+          <i18nCore.Context>
+            <Router history={routerHistory}>
+              <LocationProvider>
+                <MatchedRouteProvider routes={routes}>
+                  <UrlParamsProvider>
+                    <LoadingIndicatorProvider>
+                      <LicenseProvider>
+                        <CsmApp />
+                      </LicenseProvider>
+                    </LoadingIndicatorProvider>
+                  </UrlParamsProvider>
+                </MatchedRouteProvider>
+              </LocationProvider>
+            </Router>
+          </i18nCore.Context>
+        </KibanaContextProvider>
+      </AlertsContextProvider>
+    </ApmPluginContext.Provider>
+  );
+}
+
+/**
+ * This module is rendered asynchronously in the Kibana platform.
+ */
+export const renderApp = (
+  core: CoreStart,
+  deps: ApmPluginSetupDeps,
+  { element }: AppMountParameters,
+  config: ConfigSchema
+) => {
+  resetHistory();
+  ReactDOM.render(
+    <CsmAppRoot
+      core={core}
+      deps={deps}
+      routerHistory={history}
+      config={config}
+      app={<CsmApp />}
+    />,
+    element
+  );
+  return () => {
+    ReactDOM.unmountComponentAtNode(element);
+  };
+};

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({
                 <MatchedRouteProvider routes={routes}>
                   <UrlParamsProvider>
                     <LoadingIndicatorProvider>
-                      <LicenseProvider>{app}</LicenseProvider>
+                      <LicenseProvider>
+                        <App />
+                      </LicenseProvider>
                     </LoadingIndicatorProvider>
                   </UrlParamsProvider>
                 </MatchedRouteProvider>

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<RouteParams>) => (
     <Redirect
       to={{
@@ -268,13 +268,3 @@ export const routes: BreadcrumbRoute[] = [
     name: RouteName.ANOMALY_DETECTION,
   },
 ];
-
-export const rumRoutes: BreadcrumbRoute[] = [
-  {
-    exact: true,
-    path: '/',
-    render: renderAsRedirectTo('/client-side-monitoring'),
-    breadcrumb: 'Client Side Monitoring',
-    name: RouteName.CLIENT_SIDE_MONITORING,
-  },
-];

x-pack/plugins/apm/public/components/app/Main/route_config/route_names.tsx

@@ -27,5 +27,5 @@ export enum RouteName {
   LINK_TO_TRACE = 'link_to_trace',
   CUSTOMIZE_UI = 'customize_ui',
   ANOMALY_DETECTION = 'anomaly_detection',
-  CLIENT_SIDE_MONITORING = 'client-side-monitoring',
+  CSM = 'csm',
 }

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

@@ -137,16 +137,14 @@ export class ApmPlugin implements Plugin<ApmPluginSetup, ApmPluginStart> {
     });
 
     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<unknown>) {
         // 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);