[Inventory] Promote new inventory plugin in APM (#193997)

## Summary Closes #192856. This PR removes the ability to enable the new APM experience and replaces it with a link promoting the new Inventory feature. ![Screen Recording 2024-09-25 at 15 02 29](https://github.com/user-attachments/assets/5dc6b8af-f207-43e5-8125-fffb4b823e4d) --------- Co-authored-by: kibanamachine <[email protected]> (cherry picked from commit 9f9d911)
elastic · Sep 30, 2024 · cfbafff · cfbafff
1 parent 9e1829e
commit cfbafff
Show file tree

Hide file tree

Showing 14 changed files with 151 additions and 482 deletions.
diff --git a/...ervability_solution/apm/ftr_e2e/cypress/e2e/custom_no_data_page/custom_no_data_page.cy.ts b/...ervability_solution/apm/ftr_e2e/cypress/e2e/custom_no_data_page/custom_no_data_page.cy.ts
diff --git a/x-pack/plugins/observability_solution/apm/public/components/app/service_inventory/index.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/service_inventory/index.tsx
@@ -5,40 +5,8 @@
  * 2.0.
  */
 import React from 'react';
-import { i18n } from '@kbn/i18n';
-import { EuiEmptyPrompt, EuiLoadingLogo } from '@elastic/eui';
-import { isEmpty } from 'lodash';
 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 function ServiceInventory() {
-  const { isEnablementPending, isEntityCentricExperienceViewEnabled } =
-    useEntityManagerEnablementContext();
-
-  const {
-    query: { serviceGroup },
-  } = useApmParams('/services');
-
-  if (isEnablementPending) {
-    return (
-      <EuiEmptyPrompt
-        icon={<EuiLoadingLogo logo="logoObservability" size="xl" />}
-        title={
-          <h2>
-            {i18n.translate('xpack.apm.loadingService', {
-              defaultMessage: 'Loading services',
-            })}
-          </h2>
-        }
-      />
-    );
-  }
-
-  return isEntityCentricExperienceViewEnabled && isEmpty(serviceGroup) ? (
-    <MultiSignalInventory />
-  ) : (
-    <ApmServiceInventory />
-  );
+  return <ApmServiceInventory />;
 }
diff --git a/.../apm/public/components/routing/templates/apm_main_template/entities_inventory_callout.tsx b/.../apm/public/components/routing/templates/apm_main_template/entities_inventory_callout.tsx
@@ -0,0 +1,59 @@
+/*
+ * 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 { EuiFlexGroup, EuiFlexItem, EuiLink, EuiToolTip, EuiButtonIcon } from '@elastic/eui';
+import { TechnicalPreviewBadge } from '@kbn/observability-shared-plugin/public';
+import React from 'react';
+import { FormattedMessage } from '@kbn/i18n-react';
+import { useKibana } from '@kbn/kibana-react-plugin/public';
+import { ApmPluginStartDeps } from '../../../../plugin';
+
+interface EntitiesInventoryCalloutProps {
+  onDissmiss: () => void;
+}
+
+export function EntitiesInventoryCallout({ onDissmiss }: EntitiesInventoryCalloutProps) {
+  const { services } = useKibana<ApmPluginStartDeps>();
+  const { observabilityShared } = services;
+
+  const entitiesInventoryLocator = observabilityShared.locators.entitiesInventory;
+
+  return (
+    <EuiFlexGroup direction="row" alignItems="center" gutterSize="xs">
+      <EuiFlexItem grow={false}>
+        <TechnicalPreviewBadge icon="beaker" style={{ verticalAlign: 'middle' }} />
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiLink
+          data-test-subj="apmEntitiesInventoryCalloutLink"
+          href={entitiesInventoryLocator.useUrl({})}
+        >
+          <FormattedMessage
+            id="xpack.apm.entitiesInventoryCallout.linklabel"
+            defaultMessage="Try our new Inventory!"
+          />
+        </EuiLink>
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiToolTip
+          content={
+            <FormattedMessage
+              id="xpack.apm.entitiesInventoryCallout.linkTooltip"
+              defaultMessage="Hide this"
+            />
+          }
+        >
+          <EuiButtonIcon
+            data-test-subj="apmEntitiesInventoryCalloutDismiss"
+            iconType="cross"
+            onClick={onDissmiss}
+          />
+        </EuiToolTip>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+}
diff --git a/...s/routing/templates/apm_main_template.tsx → ...ing/templates/apm_main_template/index.tsx b/...s/routing/templates/apm_main_template.tsx → ...ing/templates/apm_main_template/index.tsx
@@ -11,24 +11,22 @@ import { entityCentricExperience } from '@kbn/observability-plugin/common';
 import { ObservabilityPageTemplateProps } from '@kbn/observability-shared-plugin/public';
 import type { KibanaPageTemplateProps } from '@kbn/shared-ux-page-kibana-template';
 import React, { useContext } from 'react';
-import { i18n } from '@kbn/i18n';
 import { useLocation } from 'react-router-dom';
 import { FeatureFeedbackButton } from '@kbn/observability-shared-plugin/public';
-import { useEntityManagerEnablementContext } from '../../../context/entity_manager_context/use_entity_manager_enablement_context';
-import { useDefaultAiAssistantStarterPromptsForAPM } from '../../../hooks/use_default_ai_assistant_starter_prompts_for_apm';
-import { KibanaEnvironmentContext } from '../../../context/kibana_environment_context/kibana_environment_context';
-import { getPathForFeedback } from '../../../utils/get_path_for_feedback';
-import { EnvironmentsContextProvider } from '../../../context/environments_context/environments_context';
-import { FETCH_STATUS, useFetcher } from '../../../hooks/use_fetcher';
-import { ApmPluginStartDeps } from '../../../plugin';
-import { ServiceGroupSaveButton } from '../../app/service_groups';
-import { ServiceGroupsButtonGroup } from '../../app/service_groups/service_groups_button_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';
-import { CustomNoDataTemplate } from './custom_no_data_template';
-import { ServiceInventoryView } from '../../../context/entity_manager_context/entity_manager_context';
+import { useLocalStorage } from '../../../../hooks/use_local_storage';
+import { useEntityManagerEnablementContext } from '../../../../context/entity_manager_context/use_entity_manager_enablement_context';
+import { useDefaultAiAssistantStarterPromptsForAPM } from '../../../../hooks/use_default_ai_assistant_starter_prompts_for_apm';
+import { KibanaEnvironmentContext } from '../../../../context/kibana_environment_context/kibana_environment_context';
+import { getPathForFeedback } from '../../../../utils/get_path_for_feedback';
+import { EnvironmentsContextProvider } from '../../../../context/environments_context/environments_context';
+import { FETCH_STATUS, useFetcher } from '../../../../hooks/use_fetcher';
+import { ApmPluginStartDeps } from '../../../../plugin';
+import { ServiceGroupSaveButton } from '../../../app/service_groups';
+import { ServiceGroupsButtonGroup } from '../../../app/service_groups/service_groups_button_group';
+import { ApmEnvironmentFilter } from '../../../shared/environment_filter';
+import { getNoDataConfig } from '../no_data_config';
+import { useApmPluginContext } from '../../../../context/apm_plugin/use_apm_plugin_context';
+import { EntitiesInventoryCallout } from './entities_inventory_callout';
 
 // Paths that must skip the no data screen
 const bypassNoDataScreenPaths = ['/settings', '/diagnostics'];
@@ -78,8 +76,8 @@ export function ApmMainTemplate({
     entityCentricExperience,
     true
   );
-  const { isEntityCentricExperienceViewEnabled, serviceInventoryViewLocalStorageSetting } =
-    useEntityManagerEnablementContext();
+
+  const { isEntityCentricExperienceViewEnabled } = useEntityManagerEnablementContext();
 
   const ObservabilityPageTemplate = observabilityShared.navigation.PageTemplate;
 
@@ -117,11 +115,6 @@ export function ApmMainTemplate({
 
   const hasApmData = !!data?.hasData;
   const hasApmIntegrations = !!fleetApmPoliciesData?.hasApmPolicies;
-  const showCustomEmptyState =
-    !hasApmData &&
-    !isLoading &&
-    isEntityCentricExperienceSettingEnabled &&
-    serviceInventoryViewLocalStorageSetting === ServiceInventoryView.classic;
 
   const noDataConfig = getNoDataConfig({
     basePath,
@@ -142,6 +135,7 @@ export function ApmMainTemplate({
   const rightSideItems = [...(showServiceGroupSaveButton ? [<ServiceGroupSaveButton />] : [])];
 
   const sanitizedPath = getPathForFeedback(window.location.pathname);
+
   const pageHeaderTitle = (
     <EuiFlexGroup justifyContent="spaceBetween" wrap={true}>
       {pageHeader?.pageTitle ?? pageTitle}
@@ -168,47 +162,44 @@ export function ApmMainTemplate({
     </EuiFlexGroup>
   );
 
-  const pageTemplate = showCustomEmptyState ? (
-    <CustomNoDataTemplate isPageDataLoaded={isLoading === false} noDataConfig={noDataConfig} />
-  ) : (
-    <ObservabilityPageTemplate
-      noDataConfig={
-        shouldBypassNoDataScreen ||
-        serviceInventoryViewLocalStorageSetting === ServiceInventoryView.entity
-          ? undefined
-          : noDataConfig
-      }
-      isPageDataLoaded={isLoading === false}
-      pageHeader={{
-        rightSideItems,
-        ...pageHeader,
-        pageTitle: pageHeaderTitle,
-        children: (
-          <EuiFlexGroup direction="column">
-            {isEntityCentricExperienceSettingEnabled &&
-            showEnablementCallout &&
-            selectedNavButton === 'allServices' ? (
-              <EntityEnablement
-                label={i18n.translate('xpack.apm.eemEnablement.tryItButton.', {
-                  defaultMessage: 'Try our new experience!',
-                })}
-                tooltip={i18n.translate('xpack.apm.entityEnablement.content', {
-                  defaultMessage:
-                    'Our new experience combines both APM-instrumented services with services detected from logs in a single service inventory.',
-                })}
-              />
-            ) : null}
-            {showServiceGroupsNav && selectedNavButton && (
-              <ServiceGroupsButtonGroup selectedNavButton={selectedNavButton} />
-            )}
-          </EuiFlexGroup>
-        ),
-      }}
-      {...pageTemplateProps}
-    >
-      {children}
-    </ObservabilityPageTemplate>
+  const [dismissedEntitiesInventoryCallout, setdismissedEntitiesInventoryCallout] = useLocalStorage(
+    `apm.dismissedEntitiesInventoryCallout`,
+    false
   );
 
-  return <EnvironmentsContextProvider>{pageTemplate}</EnvironmentsContextProvider>;
+  const showEntitiesInventoryCallout =
+    !dismissedEntitiesInventoryCallout &&
+    isEntityCentricExperienceSettingEnabled &&
+    selectedNavButton !== undefined;
+
+  return (
+    <EnvironmentsContextProvider>
+      <ObservabilityPageTemplate
+        noDataConfig={shouldBypassNoDataScreen ? undefined : noDataConfig}
+        isPageDataLoaded={isLoading === false}
+        pageHeader={{
+          rightSideItems,
+          ...pageHeader,
+          pageTitle: pageHeaderTitle,
+          children: (
+            <EuiFlexGroup direction="column">
+              {showEntitiesInventoryCallout ? (
+                <EntitiesInventoryCallout
+                  onDissmiss={() => {
+                    setdismissedEntitiesInventoryCallout(true);
+                  }}
+                />
+              ) : null}
+              {showServiceGroupsNav && selectedNavButton && (
+                <ServiceGroupsButtonGroup selectedNavButton={selectedNavButton} />
+              )}
+            </EuiFlexGroup>
+          ),
+        }}
+        {...pageTemplateProps}
+      >
+        {children}
+      </ObservabilityPageTemplate>
+    </EnvironmentsContextProvider>
+  );
 }