[APM] Elastic Entity Model enablement

x-pack/plugins/observability_solution/apm/ftr_e2e/cypress/e2e/service_inventory/service_inventory.cy.ts

@@ -91,7 +91,7 @@ describe('Service inventory', () => {
     it('with the correct environment when changing the environment', () => {
       cy.wait(mainAliasNames);
 
-      cy.getByTestSubj('environmentFilter').type('production');
+      cy.getByTestSubj('environmentFilter').type('{selectall}production');
 
       cy.contains('button', 'production').click();
 
@@ -103,6 +103,7 @@ describe('Service inventory', () => {
 
     it('when selecting a different time range and clicking the update button', () => {
       cy.wait(mainAliasNames);
+      cy.getByTestSubj('apmServiceGroupsTourDismissButton').click();
 
       cy.selectAbsoluteTimeRange(
         moment(timeRange.rangeFrom).subtract(5, 'm').toISOString(),

x-pack/plugins/observability_solution/apm/kibana.jsonc

@@ -30,7 +30,8 @@
       "lens",
       "maps",
       "uiActions",
-      "logsDataAccess"
+      "logsDataAccess",
+      "entityManager"
     ],
     "optionalPlugins": [
       "actions",
@@ -52,13 +53,6 @@
       "cases",
       "observabilityAIAssistant"
     ],
-    "requiredBundles": [
-      "fleet",
-      "kibanaReact",
-      "kibanaUtils",
-      "ml",
-      "observability",
-      "maps"
-    ]
+    "requiredBundles": ["fleet", "kibanaReact", "kibanaUtils", "ml", "observability", "maps"]
   }
 }

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

@@ -5,24 +5,39 @@
  * 2.0.
  */
 import React from 'react';
+import { i18n } from '@kbn/i18n';
+import { EuiEmptyPrompt, EuiLoadingLogo } from '@elastic/eui';
 import { isEmpty } from 'lodash';
-import { apmEnableMultiSignal } from '@kbn/observability-plugin/common';
-import { useApmPluginContext } from '../../../context/apm_plugin/use_apm_plugin_context';
 import { ApmServiceInventory } from './apm_signal_inventory';
 import { MultiSignalInventory } from './multi_signal_inventory';
 import { useApmParams } from '../../../hooks/use_apm_params';
+import { useEntityManagerEnablementContext } from '../../../context/entity_manager_context/use_entity_manager_enablement_context';
 
-export const ServiceInventory = () => {
-  const { core } = useApmPluginContext();
-  const isMultiSignalEnabled = core.uiSettings.get<boolean>(apmEnableMultiSignal, false);
+export function ServiceInventory() {
+  const { isEntityManagerEnabled, isEnablementPending } = useEntityManagerEnablementContext();
 
   const {
     query: { serviceGroup },
   } = useApmParams('/services');
 
-  return isMultiSignalEnabled && isEmpty(serviceGroup) ? (
+  if (isEnablementPending) {
+    return (
+      <EuiEmptyPrompt
+        icon={<EuiLoadingLogo logo="logoObservability" size="xl" />}
+        title={
+          <h2>
+            {i18n.translate('xpack.apm.loadingService', {
+              defaultMessage: 'Loading services',
+            })}
+          </h2>
+        }
+      />
+    );
+  }
+
+  return isEntityManagerEnabled && isEmpty(serviceGroup) ? (
     <MultiSignalInventory />
   ) : (
     <ApmServiceInventory />
   );
-};
+}

x-pack/plugins/observability_solution/apm/public/components/routing/apm_route_config.tsx

@@ -101,6 +101,7 @@ const apmRoutes = {
               environmentFilter={false}
               showServiceGroupSaveButton={false}
               showServiceGroupsNav
+              showEnablementCallout
               selectedNavButton="serviceGroups"
             >
               <ServiceGroupsList />

x-pack/plugins/observability_solution/apm/public/components/routing/app_root/index.tsx

@@ -42,6 +42,7 @@ import { RedirectWithDefaultEnvironment } from './redirect_with_default_environm
 import { RedirectWithOffset } from './redirect_with_offset';
 import { ScrollToTopOnPathChange } from './scroll_to_top_on_path_change';
 import { UpdateExecutionContextOnRouteChange } from './update_execution_context_on_route_change';
+import { EntityManagerEnablementContextProvider } from '../../../context/entity_manager_context/entity_manager_context';
 
 const storage = new Storage(localStorage);
 
@@ -83,15 +84,17 @@ export function ApmAppRoot({
                                     <BreadcrumbsContextProvider>
                                       <UrlParamsProvider>
                                         <LicenseProvider>
-                                          <AnomalyDetectionJobsContextProvider>
-                                            <InspectorContextProvider>
-                                              <ApmThemeProvider>
-                                                <MountApmHeaderActionMenu />
-                                                <Route component={ScrollToTopOnPathChange} />
-                                                <RouteRenderer />
-                                              </ApmThemeProvider>
-                                            </InspectorContextProvider>
-                                          </AnomalyDetectionJobsContextProvider>
+                                          <EntityManagerEnablementContextProvider>
+                                            <AnomalyDetectionJobsContextProvider>
+                                              <InspectorContextProvider>
+                                                <ApmThemeProvider>
+                                                  <MountApmHeaderActionMenu />
+                                                  <Route component={ScrollToTopOnPathChange} />
+                                                  <RouteRenderer />
+                                                </ApmThemeProvider>
+                                              </InspectorContextProvider>
+                                            </AnomalyDetectionJobsContextProvider>
+                                          </EntityManagerEnablementContextProvider>
                                         </LicenseProvider>
                                       </UrlParamsProvider>
                                     </BreadcrumbsContextProvider>

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

@@ -23,6 +23,7 @@ import { ServiceGroupsButtonGroup } from '../../app/service_groups/service_group
 import { ApmEnvironmentFilter } from '../../shared/environment_filter';
 import { getNoDataConfig } from './no_data_config';
 import { useApmPluginContext } from '../../../context/apm_plugin/use_apm_plugin_context';
+import { EntityEnablement } from '../../shared/entity_enablement';
 
 // Paths that must skip the no data screen
 const bypassNoDataScreenPaths = ['/settings', '/diagnostics'];
@@ -45,6 +46,7 @@ export function ApmMainTemplate({
   environmentFilter = true,
   showServiceGroupSaveButton = false,
   showServiceGroupsNav = false,
+  showEnablementCallout = false,
   environmentFilterInTemplate = true,
   selectedNavButton,
   ...pageTemplateProps
@@ -55,6 +57,7 @@ export function ApmMainTemplate({
   environmentFilter?: boolean;
   showServiceGroupSaveButton?: boolean;
   showServiceGroupsNav?: boolean;
+  showEnablementCallout?: boolean;
   selectedNavButton?: 'serviceGroups' | 'allServices';
 } & KibanaPageTemplateProps &
   Pick<ObservabilityPageTemplateProps, 'pageSectionProps'>) {
@@ -126,6 +129,7 @@ export function ApmMainTemplate({
   const pageHeaderTitle = (
     <EuiFlexGroup justifyContent="spaceBetween" wrap={true}>
       {pageHeader?.pageTitle ?? pageTitle}
+      <EuiFlexItem grow={false} />
       <EuiFlexItem grow={false}>
         <EuiFlexGroup justifyContent="center">
           <EuiFlexItem grow={false}>
@@ -152,10 +156,14 @@ export function ApmMainTemplate({
         rightSideItems,
         ...pageHeader,
         pageTitle: pageHeaderTitle,
-        children:
-          showServiceGroupsNav && selectedNavButton ? (
-            <ServiceGroupsButtonGroup selectedNavButton={selectedNavButton} />
-          ) : null,
+        children: (
+          <EuiFlexGroup direction="column">
+            {showEnablementCallout && selectedNavButton === 'allServices' && <EntityEnablement />}
+            {showServiceGroupsNav && selectedNavButton && (
+              <ServiceGroupsButtonGroup selectedNavButton={selectedNavButton} />
+            )}
+          </EuiFlexGroup>
+        ),
       }}
       {...pageTemplateProps}
     >

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

@@ -137,6 +137,7 @@ export function ServiceGroupTemplate({
       environmentFilter={environmentFilter}
       showServiceGroupSaveButton={!isAllServices}
       showServiceGroupsNav={isAllServices}
+      showEnablementCallout
       selectedNavButton={isAllServices ? 'allServices' : 'serviceGroups'}
       {...pageTemplateProps}
     >

x-pack/plugins/observability_solution/apm/public/components/shared/entity_enablement/feedback_modal.tsx

@@ -0,0 +1,106 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { useContext } from 'react';
+import { i18n } from '@kbn/i18n';
+import {
+  useEuiTheme,
+  EuiButtonEmpty,
+  EuiConfirmModal,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiIcon,
+  EuiPanel,
+  EuiText,
+  EuiTitle,
+} from '@elastic/eui';
+import { getSurveyFeedbackURL } from '@kbn/observability-shared-plugin/public';
+import { KibanaEnvironmentContext } from '../../../context/kibana_environment_context/kibana_environment_context';
+import { getPathForFeedback } from '../../../utils/get_path_for_feedback';
+
+export function FeedbackModal({
+  isFeedbackModalVisible = false,
+  onClose,
+}: {
+  isFeedbackModalVisible?: boolean;
+  onClose: () => void;
+}) {
+  const kibanaEnvironment = useContext(KibanaEnvironmentContext);
+  const { kibanaVersion, isCloudEnv, isServerlessEnv } = kibanaEnvironment;
+  const sanitizedPath = getPathForFeedback(window.location.pathname);
+  const { euiTheme } = useEuiTheme();
+
+  return (
+    <>
+      {isFeedbackModalVisible && (
+        <EuiConfirmModal
+          style={{
+            width: '600px',
+          }}
+          onCancel={onClose}
+          onConfirm={onClose}
+          confirmButtonText={
+            <EuiButtonEmpty
+              css={{
+                color: euiTheme.colors.emptyShade,
+              }}
+              data-test-subj="xpack.apm.eemFeedback.button.open"
+              iconType="discuss"
+              target="_blank"
+              size="s"
+              href={getSurveyFeedbackURL({
+                formUrl: 'https://ela.st/new-o11y-experience',
+                kibanaVersion,
+                isCloudEnv,
+                isServerlessEnv,
+                sanitizedPath,
+              })}
+            >
+              {i18n.translate('xpack.apm.eemFeedback.button.openSurvey', {
+                defaultMessage: 'Tell us what you think!',
+              })}
+            </EuiButtonEmpty>
+          }
+          defaultFocusedButton="confirm"
+        >
+          <EuiPanel hasShadow={false}>
+            <EuiFlexGroup
+              direction="column"
+              justifyContent="center"
+              alignItems="center"
+              gutterSize="s"
+            >
+              <EuiFlexItem>
+                <EuiIcon type="heart" size="l" />
+              </EuiFlexItem>
+              <EuiFlexItem>
+                <EuiTitle>
+                  <h2>
+                    {i18n.translate('xpack.apm.eemFeedback.title', {
+                      defaultMessage: 'Let us know what you think!',
+                    })}
+                  </h2>
+                </EuiTitle>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiPanel>
+
+          <EuiPanel hasShadow={false} paddingSize="s">
+            <EuiText grow={false} size="s">
+              <p>
+                {i18n.translate('xpack.apm.feedbackModal.body.thanks', {
+                  defaultMessage:
+                    "Thank you for trying our new experience. We'll be continuing to improve on this so please come back often.",
+                })}
+              </p>
+            </EuiText>
+          </EuiPanel>
+        </EuiConfirmModal>
+      )}
+    </>
+  );
+}