Use Observability Page Template from Observability Shared in APM and Profiling

x-pack/packages/ml/agg_utils/tsconfig.json

@@ -17,7 +17,7 @@
     "@kbn/ml-is-populated-object",
     "@kbn/ml-string-hash",
     "@kbn/data-views-plugin",
-    "@kbn/ml-random-sampler-utils"
+    "@kbn/ml-random-sampler-utils",
   ],
   "exclude": [
     "target/**/*",

x-pack/plugins/apm/kibana.jsonc

@@ -7,10 +7,7 @@
     "id": "apm",
     "server": true,
     "browser": true,
-    "configPath": [
-      "xpack",
-      "apm"
-    ],
+    "configPath": ["xpack", "apm"],
     "requiredPlugins": [
       "data",
       "embeddable",
@@ -19,6 +16,7 @@
       "inspector",
       "licensing",
       "observability",
+      "observabilityShared",
       "exploratoryView",
       "ruleRegistry",
       "triggersActionsUi",

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

@@ -49,6 +49,7 @@ export const renderApp = ({
     data: pluginsStart.data,
     inspector: pluginsStart.inspector,
     observability: pluginsStart.observability,
+    observabilityShared: pluginsStart.observabilityShared,
     observabilityRuleTypeRegistry,
     dataViews: pluginsStart.dataViews,
     unifiedSearch: pluginsStart.unifiedSearch,

x-pack/plugins/apm/public/components/routing/apm_error_boundary.tsx

@@ -45,9 +45,9 @@ const pageHeader = {
 
 function ErrorWithTemplate({ error }: { error: Error }) {
   const { services } = useKibana<ApmPluginStartDeps>();
-  const { observability } = services;
+  const { observabilityShared } = services;
 
-  const ObservabilityPageTemplate = observability.navigation.PageTemplate;
+  const ObservabilityPageTemplate = observabilityShared.navigation.PageTemplate;
 
   if (error instanceof NotFoundRouteException) {
     return (

x-pack/plugins/apm/public/components/routing/templates/apm_main_template.tsx

@@ -7,7 +7,7 @@
 
 import { EuiPageHeaderProps } from '@elastic/eui';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
-import { ObservabilityPageTemplateProps } from '@kbn/observability-plugin/public/components/shared/page_template/page_template';
+import { ObservabilityPageTemplateProps } from '@kbn/observability-shared-plugin/public';
 import type { KibanaPageTemplateProps } from '@kbn/shared-ux-page-kibana-template';
 import React from 'react';
 import { useLocation } from 'react-router-dom';
@@ -54,10 +54,10 @@ export function ApmMainTemplate({
   const location = useLocation();
 
   const { services } = useKibana<ApmPluginStartDeps>();
-  const { http, docLinks, observability, application } = services;
+  const { http, docLinks, observabilityShared, application } = services;
   const basePath = http?.basePath.get();
 
-  const ObservabilityPageTemplate = observability.navigation.PageTemplate;
+  const ObservabilityPageTemplate = observabilityShared.navigation.PageTemplate;
 
   const { data, status } = useFetcher((callApmApi) => {
     return callApmApi('GET /internal/apm/has_data');

x-pack/plugins/apm/public/components/routing/templates/settings_template.stories.tsx

@@ -16,7 +16,7 @@ import { SettingsTemplate } from './settings_template';
 type Args = ComponentProps<typeof SettingsTemplate>;
 
 const coreMock = {
-  observability: {
+  observabilityShared: {
     navigation: {
       PageTemplate: () => {
         return <>hello world</>;

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

@@ -94,6 +94,7 @@ const mockCorePlugins = {
   inspector: {},
   maps: {},
   observability: {},
+  observabilityShared: {},
   data: {},
 };
 

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

@@ -38,6 +38,10 @@ import type { LicensingPluginSetup } from '@kbn/licensing-plugin/public';
 import type { MapsStartApi } from '@kbn/maps-plugin/public';
 import type { MlPluginSetup, MlPluginStart } from '@kbn/ml-plugin/public';
 import type { SharePluginSetup } from '@kbn/share-plugin/public';
+import type {
+  ObservabilitySharedPluginSetup,
+  ObservabilitySharedPluginStart,
+} from '@kbn/observability-shared-plugin/public';
 import {
   FetchDataParams,
   METRIC_TYPE,
@@ -80,6 +84,7 @@ export interface ApmPluginSetupDeps {
   licensing: LicensingPluginSetup;
   ml?: MlPluginSetup;
   observability: ObservabilityPublicSetup;
+  observabilityShared: ObservabilitySharedPluginSetup;
   triggersActionsUi: TriggersAndActionsUIPublicPluginSetup;
   share: SharePluginSetup;
 }
@@ -96,6 +101,7 @@ export interface ApmPluginStartDeps {
   ml?: MlPluginStart;
   triggersActionsUi: TriggersAndActionsUIPublicPluginStart;
   observability: ObservabilityPublicStart;
+  observabilityShared: ObservabilitySharedPluginStart;
   fleet?: FleetStart;
   fieldFormats?: FieldFormatsStart;
   security?: SecurityPluginStart;
@@ -162,7 +168,7 @@ export class ApmPlugin implements Plugin<ApmPluginSetup, ApmPluginStart> {
     }
 
     // register observability nav if user has access to plugin
-    plugins.observability.navigation.registerSections(
+    plugins.observabilityShared.navigation.registerSections(
       from(core.getStartServices()).pipe(
         map(([coreStart, pluginsStart]) => {
           if (coreStart.application.capabilities.apm.show) {

x-pack/plugins/apm/tsconfig.json

@@ -83,6 +83,7 @@
     "@kbn/alerts-as-data-utils",
     "@kbn/exploratory-view-plugin",
     "@kbn/logging-mocks",
+    "@kbn/observability-shared-plugin",
   ],
   "exclude": [
     "target/**/*",

x-pack/plugins/profiling/public/plugin.tsx

@@ -77,7 +77,7 @@ export class ProfilingPlugin implements Plugin {
       })
     );
 
-    pluginsSetup.observability.navigation.registerSections(section$);
+    pluginsSetup.observabilityShared.navigation.registerSections(section$);
 
     coreSetup.application.register({
       id: 'profiling',

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

@@ -13,10 +13,12 @@ import type {
   ObservabilityPublicSetup,
   ObservabilityPublicStart,
 } from '@kbn/observability-plugin/public';
+import { ObservabilitySharedPluginSetup } from '@kbn/observability-shared-plugin/public/plugin';
 import { ChartsPluginSetup, ChartsPluginStart } from '@kbn/charts-plugin/public';
 
 export interface ProfilingPluginPublicSetupDeps {
   observability: ObservabilityPublicSetup;
+  observabilityShared: ObservabilitySharedPluginSetup;
   dataViews: DataViewsPublicPluginSetup;
   data: DataPublicPluginSetup;
   charts: ChartsPluginSetup;

x-pack/plugins/profiling/tsconfig.json

@@ -44,6 +44,7 @@
     "@kbn/i18n-react",
     "@kbn/ml-plugin",
     "@kbn/share-plugin",
+    "@kbn/observability-shared-plugin",
     // add references to other TypeScript projects the plugin depends on
 
     // requiredPlugins from ./kibana.json