[APM][ECO] Consistent CTA and URL for adding APM data in the new expe…

…rience (#189349) ## Summary closes #188833 1. Add APM will point to the new onboarding link: [app/observabilityOnboarding/?category=apm](https://edge-lite-oblt.kb.us-west2.gcp.elastic-cloud.com/app/observabilityOnboarding/?category=apm) 2. Opens at the same tab ### Empty state https://github.com/user-attachments/assets/4eba7d1e-6acc-4290-bd0c-279f9f2f1450 https://github.com/user-attachments/assets/9bfda66f-e350-4972-9b84-aea2b886f031
elastic · Jul 29, 2024 · 3639a5d · 3639a5d
1 parent 70cad5e
commit 3639a5d
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 32 deletions.
diff --git a/...lugins/observability_solution/apm/public/components/app/entities/logs/add_apm_callout.tsx b/...lugins/observability_solution/apm/public/components/app/entities/logs/add_apm_callout.tsx
@@ -7,7 +7,6 @@
 import React from 'react';
 import { i18n } from '@kbn/i18n';
 import {
-  EuiButton,
   EuiFlexGroup,
   EuiFlexItem,
   EuiImage,
@@ -20,20 +19,18 @@ import {
 } from '@elastic/eui';
 import { apmLight } from '@kbn/shared-svg';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { useHistory } from 'react-router-dom';
 import { useKibana } from '../../../../context/kibana_context/use_kibana';
 import { ApmPluginStartDeps, ApmServices } from '../../../../plugin';
+import { AddApmData } from '../../../shared/add_data_buttons/buttons';
 
 export function AddAPMCallOut() {
   const { euiTheme } = useEuiTheme();
   const { services } = useKibana<ApmPluginStartDeps & ApmServices>();
-  const history = useHistory();
 
   function handleClick() {
     services.telemetry.reportEntityInventoryAddData({
       view: 'add_apm_cta',
     });
-    history.push('/tutorial');
   }
 
   return (
@@ -78,11 +75,7 @@ export function AddAPMCallOut() {
       <EuiFlexGroup alignItems="center" gutterSize="s" justifyContent="flexEnd">
         <EuiFlexItem grow={false}>
           <div>
-            <EuiButton data-test-subj="apmAddApmCallOutButton" onClick={handleClick}>
-              {i18n.translate('xpack.apm.logsServiceOverview.callout.addApm', {
-                defaultMessage: 'Add APM',
-              })}
-            </EuiButton>
+            <AddApmData data-test-subj="apmAddDataLogOnlyCallout" onClick={handleClick} />
           </div>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>

diff --git a/...components/app/service_inventory/multi_signal_inventory/table/no_entities_empty_state.tsx b/...components/app/service_inventory/multi_signal_inventory/table/no_entities_empty_state.tsx
@@ -27,7 +27,7 @@ import { useLocalStorage } from '../../../../../hooks/use_local_storage';
 import { ApmPluginStartDeps, ApmServices } from '../../../../../plugin';
 import { EntityInventoryAddDataParams } from '../../../../../services/telemetry';
 import {
-  AddApmAgent,
+  AddApmData,
   AssociateServiceLogs,
   CollectServiceLogs,
 } from '../../../../shared/add_data_buttons/buttons';
@@ -92,8 +92,8 @@ export function NoEntitiesEmptyState() {
           actions={
             <EuiFlexGroup responsive={false} wrap gutterSize="xl" direction="column">
               <EuiFlexGroup direction="row" gutterSize="xs">
-                <AddApmAgent
-                  basePath={basePath}
+                <AddApmData
+                  data-test-subj="apmAddDataEmptyState"
                   onClick={() => {
                     reportButtonClick('add_apm_agent');
                   }}

diff --git a/...n/apm/public/components/routing/app_root/apm_header_action_menu/add_data_context_menu.tsx b/...n/apm/public/components/routing/app_root/apm_header_action_menu/add_data_context_menu.tsx
@@ -21,7 +21,7 @@ import { EntityInventoryAddDataParams } from '../../../../services/telemetry';
 import {
   associateServiceLogs,
   collectServiceLogs,
-  addApmAgent,
+  addApmData,
 } from '../../../shared/add_data_buttons/buttons';
 import { ServiceEcoTour } from '../../../shared/entity_enablement/service_eco_tour';
 
@@ -82,8 +82,8 @@ export function AddDataContextMenu() {
           },
         },
         {
-          name: addApmAgent.name,
-          href: basePath.prepend(addApmAgent.link),
+          name: addApmData.name,
+          href: basePath.prepend(addApmData.link),
           icon: 'plusInCircle',
           'data-test-subj': 'apmAddDataApmAgent',
           onClick: () => {

diff --git a/.../plugins/observability_solution/apm/public/components/shared/add_data_buttons/buttons.tsx b/.../plugins/observability_solution/apm/public/components/shared/add_data_buttons/buttons.tsx
@@ -8,10 +8,12 @@ import React from 'react';
 import { EuiButton } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { IBasePath } from '@kbn/core/public';
+import { useKibana } from '../../../context/kibana_context/use_kibana';
+import { useApmPluginContext } from '../../../context/apm_plugin/use_apm_plugin_context';
 
-export const addApmAgent = {
+export const addApmData = {
   name: i18n.translate('xpack.apm.add.apm.agent.button.', {
-    defaultMessage: 'Add APM agent',
+    defaultMessage: 'Add APM',
   }),
   link: '/app/observabilityOnboarding/?category=apm',
 };
@@ -30,14 +32,26 @@ export const collectServiceLogs = {
   link: '/app/observabilityOnboarding/?category=logs',
 };
 
-export function AddApmAgent({ basePath, onClick }: { basePath: IBasePath; onClick?: () => void }) {
+export function AddApmData({
+  onClick,
+  ...props
+}: {
+  onClick?: () => void;
+  'data-test-subj': string;
+}) {
+  const { core } = useApmPluginContext();
+  const { basePath } = core.http;
+  const {
+    application: { navigateToUrl },
+  } = useKibana().services;
+
   function handleClick() {
-    window.open(basePath.prepend(addApmAgent.link), '_blank');
+    navigateToUrl(basePath.prepend(addApmData.link));
     onClick?.();
   }
   return (
-    <EuiButton data-test-subj="addApmAgentButton" size="s" onClick={handleClick}>
-      {addApmAgent.name}
+    <EuiButton data-test-subj={props['data-test-subj']} size="s" onClick={handleClick}>
+      {addApmData.name}
     </EuiButton>
   );
 }

diff --git a/...plugins/observability_solution/apm/public/components/shared/not_available_apm_metrics.tsx b/...plugins/observability_solution/apm/public/components/shared/not_available_apm_metrics.tsx
@@ -6,22 +6,19 @@
  */
 
 import React from 'react';
-import { EuiButton } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { useHistory } from 'react-router-dom';
 import { PopoverBadge } from './popover_badge';
 import { useKibana } from '../../context/kibana_context/use_kibana';
 import { ApmPluginStartDeps, ApmServices } from '../../plugin';
+import { AddApmData } from './add_data_buttons/buttons';
 
 export function NotAvailableApmMetrics() {
   const { services } = useKibana<ApmPluginStartDeps & ApmServices>();
-  const history = useHistory();
 
   function handleClick() {
     services.telemetry.reportEntityInventoryAddData({
       view: 'add_apm_n/a',
     });
-    history.push('/tutorial');
   }
   return (
     <PopoverBadge
@@ -32,13 +29,7 @@ export function NotAvailableApmMetrics() {
         defaultMessage:
           'Understand key metrics like transaction latency, throughput and error rate by instrumenting your service with APM.',
       })}
-      footer={
-        <EuiButton data-test-subj="apmServicesNotAvailableMetricsButton" onClick={handleClick}>
-          {i18n.translate('xpack.apm.servicesTable.notAvailableApmMetrics.footer', {
-            defaultMessage: 'Add APM',
-          })}
-        </EuiButton>
-      }
+      footer={<AddApmData data-test-subj="apmAddDataNotAvailable" onClick={handleClick} />}
     />
   );
 }