Merge branch 'master' into fix-timestamp-source-bug

.github/CODEOWNERS

@@ -89,7 +89,7 @@
 # Client Side Monitoring / Uptime (lives in APM directories but owned by Uptime)
 /x-pack/plugins/apm/e2e/cypress/support/step_definitions/csm @elastic/uptime
 /x-pack/plugins/apm/e2e/cypress/integration/csm_dashboard.feature @elastic/uptime
-/x-pack/plugins/apm/public/application/csmApp.tsx @elastic/uptime
+/x-pack/plugins/apm/public/application/uxApp.tsx @elastic/uptime
 /x-pack/plugins/apm/public/components/app/RumDashboard @elastic/uptime
 /x-pack/plugins/apm/server/lib/rum_client @elastic/uptime
 /x-pack/plugins/apm/server/routes/rum_client.ts @elastic/uptime
@@ -128,7 +128,7 @@
 /x-pack/test/functional_basic/apps/ml/ @elastic/ml-ui
 /x-pack/test/functional_with_es_ssl/apps/ml/ @elastic/ml-ui
 
-# ML team owns and maintains the transform plugin despite it living in the Elasticsearch management section.
+# ML team owns and maintains the transform plugin despite it living in the Data management section.
 /x-pack/plugins/transform/  @elastic/ml-ui
 /x-pack/test/accessibility/apps/transform.ts  @elastic/ml-ui
 /x-pack/test/api_integration/apis/transform/ @elastic/ml-ui
@@ -305,29 +305,29 @@
 /x-pack/plugins/enterprise_search/server/collectors/workplace_search/ @elastic/workplace-search-frontend
 /x-pack/plugins/enterprise_search/server/saved_objects/workplace_search/ @elastic/workplace-search-frontend
 
-# Elasticsearch UI
-/src/plugins/dev_tools/ @elastic/es-ui
-/src/plugins/console/  @elastic/es-ui
-/src/plugins/es_ui_shared/  @elastic/es-ui
-/x-pack/plugins/cross_cluster_replication/  @elastic/es-ui
-/x-pack/plugins/index_lifecycle_management/  @elastic/es-ui
-/x-pack/plugins/console_extensions/  @elastic/es-ui
-/x-pack/plugins/grokdebugger/  @elastic/es-ui
-/x-pack/plugins/index_management/  @elastic/es-ui
-/x-pack/plugins/license_api_guard/  @elastic/es-ui
-/x-pack/plugins/license_management/  @elastic/es-ui
-/x-pack/plugins/painless_lab/  @elastic/es-ui
-/x-pack/plugins/remote_clusters/  @elastic/es-ui
-/x-pack/plugins/rollup/  @elastic/es-ui
-/x-pack/plugins/searchprofiler/  @elastic/es-ui
-/x-pack/plugins/snapshot_restore/  @elastic/es-ui
-/x-pack/plugins/upgrade_assistant/  @elastic/es-ui
-/x-pack/plugins/watcher/  @elastic/es-ui
-/x-pack/plugins/ingest_pipelines/  @elastic/es-ui
-/packages/kbn-ace/ @elastic/es-ui
-/packages/kbn-monaco/ @elastic/es-ui
-#CC# /x-pack/plugins/console_extensions/ @elastic/es-ui
-#CC# /x-pack/plugins/cross_cluster_replication/ @elastic/es-ui
+# Stack Management
+/src/plugins/dev_tools/ @elastic/kibana-stack-management 
+/src/plugins/console/  @elastic/kibana-stack-management 
+/src/plugins/es_ui_shared/  @elastic/kibana-stack-management 
+/x-pack/plugins/cross_cluster_replication/  @elastic/kibana-stack-management 
+/x-pack/plugins/index_lifecycle_management/  @elastic/kibana-stack-management 
+/x-pack/plugins/console_extensions/  @elastic/kibana-stack-management 
+/x-pack/plugins/grokdebugger/  @elastic/kibana-stack-management 
+/x-pack/plugins/index_management/  @elastic/kibana-stack-management 
+/x-pack/plugins/license_api_guard/  @elastic/kibana-stack-management 
+/x-pack/plugins/license_management/  @elastic/kibana-stack-management 
+/x-pack/plugins/painless_lab/  @elastic/kibana-stack-management 
+/x-pack/plugins/remote_clusters/  @elastic/kibana-stack-management 
+/x-pack/plugins/rollup/  @elastic/kibana-stack-management 
+/x-pack/plugins/searchprofiler/  @elastic/kibana-stack-management 
+/x-pack/plugins/snapshot_restore/  @elastic/kibana-stack-management 
+/x-pack/plugins/upgrade_assistant/  @elastic/kibana-stack-management 
+/x-pack/plugins/watcher/  @elastic/kibana-stack-management 
+/x-pack/plugins/ingest_pipelines/  @elastic/kibana-stack-management 
+/packages/kbn-ace/ @elastic/kibana-stack-management 
+/packages/kbn-monaco/ @elastic/kibana-stack-management 
+#CC# /x-pack/plugins/console_extensions/ @elastic/kibana-stack-management 
+#CC# /x-pack/plugins/cross_cluster_replication/ @elastic/kibana-stack-management 
 
 # Security Solution
 /x-pack/test/endpoint_api_integration_no_ingest/ @elastic/security-solution

packages/kbn-legacy-logging/BUILD.bazel

@@ -25,6 +25,7 @@ NPM_MODULE_EXTRA_FILES = [
 
 SRC_DEPS = [
   "//packages/kbn-config-schema",
+  "//packages/kbn-utils",
   "@npm//@elastic/numeral",
   "@npm//@hapi/hapi",
   "@npm//chokidar",

x-pack/plugins/apm/public/application/index.tsx

@@ -43,6 +43,7 @@ export const renderApp = ({
     config,
     core: coreStart,
     plugins: pluginsSetup,
+    observability: pluginsStart.observability,
     observabilityRuleTypeRegistry,
   };
 

x-pack/plugins/apm/public/application/csmApp.tsx → x-pack/plugins/apm/public/application/uxApp.tsx

@@ -12,8 +12,8 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { Route, Router } from 'react-router-dom';
 import { DefaultTheme, ThemeProvider } from 'styled-components';
+import { i18n } from '@kbn/i18n';
 import type { ObservabilityRuleTypeRegistry } from '../../../observability/public';
-import { euiStyled } from '../../../../../src/plugins/kibana_react/common';
 import {
   KibanaContextProvider,
   RedirectAppLinks,
@@ -24,21 +24,16 @@ import { ScrollToTopOnPathChange } from '../components/app/Main/ScrollToTopOnPat
 import { RumHome, UX_LABEL } from '../components/app/RumDashboard/RumHome';
 import { ApmPluginContext } from '../context/apm_plugin/apm_plugin_context';
 import { UrlParamsProvider } from '../context/url_params_context/url_params_context';
-import { useBreadcrumbs } from '../hooks/use_breadcrumbs';
 import { ConfigSchema } from '../index';
 import { ApmPluginSetupDeps, ApmPluginStartDeps } from '../plugin';
 import { createCallApmApi } from '../services/rest/createCallApmApi';
-import { px, units } from '../style/variables';
 import { createStaticIndexPattern } from '../services/rest/index_pattern';
 import { UXActionMenu } from '../components/app/RumDashboard/ActionMenu';
 import { redirectTo } from '../components/routing/redirect_to';
+import { useBreadcrumbs } from '../../../observability/public';
+import { useApmPluginContext } from '../context/apm_plugin/use_apm_plugin_context';
 
-const CsmMainContainer = euiStyled.div`
-  padding: ${px(units.plus)};
-  height: 100%;
-`;
-
-export const rumRoutes: APMRouteDefinition[] = [
+export const uxRoutes: APMRouteDefinition[] = [
   {
     exact: true,
     path: '/',
@@ -47,10 +42,20 @@ export const rumRoutes: APMRouteDefinition[] = [
   },
 ];
 
-function CsmApp() {
+function UxApp() {
   const [darkMode] = useUiSetting$<boolean>('theme:darkMode');
 
-  useBreadcrumbs(rumRoutes);
+  const { core } = useApmPluginContext();
+  const basePath = core.http.basePath.get();
+
+  useBreadcrumbs([
+    { text: UX_LABEL, href: basePath + '/app/ux' },
+    {
+      text: i18n.translate('xpack.apm.ux.overview', {
+        defaultMessage: 'Overview',
+      }),
+    },
+  ]);
 
   return (
     <ThemeProvider
@@ -60,20 +65,20 @@ function CsmApp() {
         darkMode,
       })}
     >
-      <CsmMainContainer data-test-subj="csmMainContainer" role="main">
+      <div data-test-subj="csmMainContainer" role="main">
         <Route component={ScrollToTopOnPathChange} />
         <RumHome />
-      </CsmMainContainer>
+      </div>
     </ThemeProvider>
   );
 }
 
-export function CsmAppRoot({
+export function UXAppRoot({
   appMountParameters,
   core,
   deps,
   config,
-  corePlugins: { embeddable, maps },
+  corePlugins: { embeddable, maps, observability },
   observabilityRuleTypeRegistry,
 }: {
   appMountParameters: AppMountParameters;
@@ -91,6 +96,7 @@ export function CsmAppRoot({
     config,
     core,
     plugins,
+    observability,
     observabilityRuleTypeRegistry,
   };
 
@@ -101,7 +107,7 @@ export function CsmAppRoot({
           <i18nCore.Context>
             <Router history={history}>
               <UrlParamsProvider>
-                <CsmApp />
+                <UxApp />
                 <UXActionMenu appMountParameters={appMountParameters} />
               </UrlParamsProvider>
             </Router>
@@ -142,7 +148,7 @@ export const renderApp = ({
   });
 
   ReactDOM.render(
-    <CsmAppRoot
+    <UXAppRoot
       appMountParameters={appMountParameters}
       core={core}
       deps={deps}

x-pack/plugins/apm/public/components/app/RumDashboard/CsmSharedContext/index.tsx

@@ -30,7 +30,7 @@ export const CsmSharedContext = createContext(defaultContext);
 export function CsmSharedContextProvider({
   children,
 }: {
-  children: JSX.Element[];
+  children: JSX.Element;
 }) {
   const [newData, setNewData] = useState<SharedData>({ totalPageViews: 0 });
 

x-pack/plugins/apm/public/components/app/RumDashboard/Panels/MainFilters.tsx

@@ -6,14 +6,10 @@
  */
 
 import React from 'react';
-import { EuiFlexItem } from '@elastic/eui';
-import { EnvironmentFilter } from '../../../shared/EnvironmentFilter';
 import { ServiceNameFilter } from '../URLFilter/ServiceNameFilter';
 import { useFetcher } from '../../../../hooks/use_fetcher';
 import { RUM_AGENT_NAMES } from '../../../../../common/agent_name';
 import { useUrlParams } from '../../../../context/url_params_context/use_url_params';
-import { UserPercentile } from '../UserPercentile';
-import { useBreakPoints } from '../../../../hooks/use_break_points';
 
 export function MainFilters() {
   const {
@@ -39,25 +35,11 @@ export function MainFilters() {
   );
 
   const rumServiceNames = data?.rumServices ?? [];
-  const { isSmall } = useBreakPoints();
-
-  // on mobile we want it to take full width
-  const envStyle = isSmall ? {} : { maxWidth: 200 };
 
   return (
-    <>
-      <EuiFlexItem grow={false}>
-        <ServiceNameFilter
-          loading={status !== 'success'}
-          serviceNames={rumServiceNames}
-        />
-      </EuiFlexItem>
-      <EuiFlexItem grow={false} style={envStyle}>
-        <EnvironmentFilter />
-      </EuiFlexItem>
-      <EuiFlexItem grow={false}>
-        <UserPercentile />
-      </EuiFlexItem>
-    </>
+    <ServiceNameFilter
+      loading={status !== 'success'}
+      serviceNames={rumServiceNames}
+    />
   );
 }

x-pack/plugins/apm/public/components/app/RumDashboard/RumHome.tsx

@@ -5,33 +5,58 @@
  * 2.0.
  */
 
-import { EuiFlexGroup, EuiFlexItem, EuiTitle } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import React from 'react';
 import { i18n } from '@kbn/i18n';
 import { RumOverview } from '../RumDashboard';
 import { CsmSharedContextProvider } from './CsmSharedContext';
 import { MainFilters } from './Panels/MainFilters';
 import { DatePicker } from '../../shared/DatePicker';
+import { useApmPluginContext } from '../../../context/apm_plugin/use_apm_plugin_context';
+import { EnvironmentFilter } from '../../shared/EnvironmentFilter';
+import { UserPercentile } from './UserPercentile';
+import { useBreakPoints } from '../../../hooks/use_break_points';
 
 export const UX_LABEL = i18n.translate('xpack.apm.ux.title', {
   defaultMessage: 'User Experience',
 });
 
 export function RumHome() {
+  const { observability } = useApmPluginContext();
+  const PageTemplateComponent = observability.navigation.PageTemplate;
+
+  const { isSmall } = useBreakPoints();
+
+  const envStyle = isSmall ? {} : { maxWidth: 200 };
+
   return (
     <CsmSharedContextProvider>
-      <EuiFlexGroup wrap justifyContent={'flexEnd'} responsive={true}>
-        <EuiFlexItem>
-          <EuiTitle>
-            <h1 className="eui-textNoWrap">{UX_LABEL}</h1>
-          </EuiTitle>
-        </EuiFlexItem>
-        <MainFilters />
-        <EuiFlexItem grow={false}>
-          <DatePicker />
-        </EuiFlexItem>
-      </EuiFlexGroup>
-      <RumOverview />
+      <PageTemplateComponent
+        pageHeader={{
+          pageTitle: UX_LABEL,
+          rightSideItems: [
+            <DatePicker />,
+            <div style={envStyle}>
+              <EnvironmentFilter />
+            </div>,
+            <UserPercentile />,
+            <MainFilters />,
+          ],
+        }}
+      >
+        <RumOverview />
+      </PageTemplateComponent>
     </CsmSharedContextProvider>
   );
 }
+
+export function UxHomeHeaderItems() {
+  return (
+    <EuiFlexGroup wrap justifyContent={'flexEnd'} responsive={true}>
+      <MainFilters />
+      <EuiFlexItem grow={false}>
+        <DatePicker />
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+}

x-pack/plugins/apm/public/components/app/RumDashboard/index.tsx

@@ -25,19 +25,16 @@ export function RumOverview() {
   }, []);
 
   return (
-    <>
-      <EuiSpacer size="m" />
-      <EuiFlexGroup>
-        <EuiFlexItem grow={1}>
-          <LocalUIFilters {...localUIFiltersConfig} showCount={true}>
-            <URLFilter />
-            <EuiSpacer size="s" />
-          </LocalUIFilters>
-        </EuiFlexItem>
-        <EuiFlexItem grow={7}>
-          <RumDashboard />
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    </>
+    <EuiFlexGroup>
+      <EuiFlexItem grow={1}>
+        <LocalUIFilters {...localUIFiltersConfig} showCount={true}>
+          <URLFilter />
+          <EuiSpacer size="s" />
+        </LocalUIFilters>
+      </EuiFlexItem>
+      <EuiFlexItem grow={7}>
+        <RumDashboard />
+      </EuiFlexItem>
+    </EuiFlexGroup>
   );
 }

x-pack/plugins/apm/public/context/apm_plugin/apm_plugin_context.tsx

@@ -11,13 +11,15 @@ import type { ObservabilityRuleTypeRegistry } from '../../../../observability/pu
 import { ConfigSchema } from '../..';
 import { ApmPluginSetupDeps } from '../../plugin';
 import { MapsStartApi } from '../../../../maps/public';
+import { ObservabilityPublicStart } from '../../../../observability/public';
 
 export interface ApmPluginContextValue {
   appMountParameters: AppMountParameters;
   config: ConfigSchema;
   core: CoreStart;
   plugins: ApmPluginSetupDeps & { maps?: MapsStartApi };
   observabilityRuleTypeRegistry: ObservabilityRuleTypeRegistry;
+  observability: ObservabilityPublicStart;
 }
 
 export const ApmPluginContext = createContext({} as ApmPluginContextValue);