From 4798c59158f2bd7dc09bfd07c8ab69bcfb23c0b8 Mon Sep 17 00:00:00 2001 From: Irene Blanco Date: Fri, 25 Oct 2024 14:27:55 +0200 Subject: [PATCH] [APM] Update onboarding link to use locator with "application" as category parameter (#197780) ## Summary Closes https://github.com/elastic/kibana/issues/197590. This PR addresses an issue with the onboarding link used by the `addApmData` constant, where the "Application" option fails to preselect. The issue is caused by the URL being incorrectly formed, with the category parameter set to `apm` instead of `application`. To resolve this, the PR introduces two main changes: - Update to use the correct locator - Modify the category parameter to use `application` instead of `apm` |Before|After| |-|-| |![before](https://github.com/user-attachments/assets/650066b8-85a8-4ff4-a7eb-fef46708ea9d)|![after](https://github.com/user-attachments/assets/508bb258-e2c2-4057-9242-653864548e4a)| --- .../app/service_tab_empty_state/constants.ts | 13 +++-- .../app/service_tab_empty_state/index.tsx | 8 +-- .../add_data_context_menu.tsx | 47 ++++++++++------ .../shared/add_data_buttons/buttons.tsx | 55 +++++++++++++------ .../apm/public/locator/onboarding_locator.ts | 16 ++++++ 5 files changed, 95 insertions(+), 44 deletions(-) create mode 100644 x-pack/plugins/observability_solution/apm/public/locator/onboarding_locator.ts diff --git a/x-pack/plugins/observability_solution/apm/public/components/app/service_tab_empty_state/constants.ts b/x-pack/plugins/observability_solution/apm/public/components/app/service_tab_empty_state/constants.ts index 312ed042bb8de..4fa7c09f2c219 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/app/service_tab_empty_state/constants.ts +++ b/x-pack/plugins/observability_solution/apm/public/components/app/service_tab_empty_state/constants.ts @@ -5,10 +5,13 @@ * 2.0. */ -import type { ObservabilityOnboardingLocatorParams } from '@kbn/deeplinks-observability'; import { i18n } from '@kbn/i18n'; import type { AddDataPanelProps } from '@kbn/observability-shared-plugin/public'; import type { LocatorPublic } from '@kbn/share-plugin/common'; +import { + ApmOnboardingLocatorCategory, + ApmOnboardingLocatorParams, +} from '../../../locator/onboarding_locator'; export type AddAPMCalloutKeys = | 'serviceOverview' @@ -19,13 +22,11 @@ export type AddAPMCalloutKeys = | 'metrics' | 'errorGroupOverview'; -const defaultActions = ( - locator: LocatorPublic | undefined -) => { +const defaultActions = (locator: LocatorPublic | undefined) => { return { actions: { primary: { - href: locator?.getRedirectUrl({ category: 'application' }), + href: locator?.getRedirectUrl({ category: ApmOnboardingLocatorCategory.Apm }), label: i18n.translate('xpack.apm.serviceTabEmptyState.defaultPrimaryActionLabel', { defaultMessage: 'Add APM', }), @@ -42,7 +43,7 @@ const defaultActions = ( export const addAPMCalloutDefinitions = ( baseFolderPath: string, - locator: LocatorPublic | undefined + locator: LocatorPublic | undefined ): Record< AddAPMCalloutKeys, Omit diff --git a/x-pack/plugins/observability_solution/apm/public/components/app/service_tab_empty_state/index.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/service_tab_empty_state/index.tsx index f6493e213cce9..2759f5718a16e 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/app/service_tab_empty_state/index.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/app/service_tab_empty_state/index.tsx @@ -8,10 +8,8 @@ import React from 'react'; import { useKibana } from '@kbn/kibana-react-plugin/public'; import { AddDataPanel } from '@kbn/observability-shared-plugin/public'; -import { - OBSERVABILITY_ONBOARDING_LOCATOR, - ObservabilityOnboardingLocatorParams, -} from '@kbn/deeplinks-observability'; +import { OBSERVABILITY_ONBOARDING_LOCATOR } from '@kbn/deeplinks-observability'; +import { ApmOnboardingLocatorParams } from '../../../locator/onboarding_locator'; import { useApmPluginContext } from '../../../context/apm_plugin/use_apm_plugin_context'; import { EmptyStateClickParams, EntityInventoryAddDataParams } from '../../../services/telemetry'; import { ApmPluginStartDeps, ApmServices } from '../../../plugin'; @@ -39,7 +37,7 @@ export function ServiceTabEmptyState({ id, onDismiss }: ServiceTabEmptyStateProp const { share } = useApmPluginContext(); - const onboardingLocator = share.url.locators.get( + const onboardingLocator = share.url.locators.get( OBSERVABILITY_ONBOARDING_LOCATOR ); diff --git a/x-pack/plugins/observability_solution/apm/public/components/routing/app_root/apm_header_action_menu/add_data_context_menu.tsx b/x-pack/plugins/observability_solution/apm/public/components/routing/app_root/apm_header_action_menu/add_data_context_menu.tsx index 7f55b112a5a64..0b628ff985735 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/routing/app_root/apm_header_action_menu/add_data_context_menu.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/routing/app_root/apm_header_action_menu/add_data_context_menu.tsx @@ -13,14 +13,16 @@ import { } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import React, { useState } from 'react'; +import { OBSERVABILITY_ONBOARDING_LOCATOR } from '@kbn/deeplinks-observability'; +import { ApmOnboardingLocatorParams } from '../../../../locator/onboarding_locator'; import { useApmPluginContext } from '../../../../context/apm_plugin/use_apm_plugin_context'; import { useKibana } from '../../../../context/kibana_context/use_kibana'; import { ApmPluginStartDeps, ApmServices } from '../../../../plugin'; import { EntityInventoryAddDataParams } from '../../../../services/telemetry'; import { - associateServiceLogs, - collectServiceLogs, - addApmData, + associateServiceLogsProps, + collectServiceLogsProps, + addApmDataProps, } from '../../../shared/add_data_buttons/buttons'; const addData = i18n.translate('xpack.apm.addDataContextMenu.link', { @@ -34,8 +36,17 @@ export function AddDataContextMenu() { core: { http: { basePath }, }, + share: { + url: { locators }, + }, } = useApmPluginContext(); + const onboardingLocator = locators.get( + OBSERVABILITY_ONBOARDING_LOCATOR + ); + + const addApmButtonData = addApmDataProps(onboardingLocator); + const button = ( { @@ -70,22 +81,26 @@ export function AddDataContextMenu() { }, }, { - name: collectServiceLogs.name, - href: basePath.prepend(collectServiceLogs.link), + name: collectServiceLogsProps.name, + href: basePath.prepend(collectServiceLogsProps.link), 'data-test-subj': 'apmAddDataCollectServiceLogs', onClick: () => { reportButtonClick('collect_new_service_logs'); }, }, - { - name: addApmData.name, - href: basePath.prepend(addApmData.link), - icon: 'plusInCircle', - 'data-test-subj': 'apmAddDataApmAgent', - onClick: () => { - reportButtonClick('add_apm_agent'); - }, - }, + ...(addApmButtonData.link + ? [ + { + name: addApmButtonData.name, + href: addApmButtonData.link, + icon: 'plusInCircle', + 'data-test-subj': 'apmAddDataApmAgent', + onClick: () => { + reportButtonClick('add_apm_agent'); + }, + }, + ] + : []), ], }, ]; diff --git a/x-pack/plugins/observability_solution/apm/public/components/shared/add_data_buttons/buttons.tsx b/x-pack/plugins/observability_solution/apm/public/components/shared/add_data_buttons/buttons.tsx index e3fc828b24803..b58799f0e00c2 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/shared/add_data_buttons/buttons.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/shared/add_data_buttons/buttons.tsx @@ -11,23 +11,31 @@ import { EuiButton, EuiButtonSize } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import React from 'react'; +import { OBSERVABILITY_ONBOARDING_LOCATOR } from '@kbn/deeplinks-observability'; +import { LocatorPublic } from '@kbn/share-plugin/common'; import { useApmPluginContext } from '../../../context/apm_plugin/use_apm_plugin_context'; +import { + ApmOnboardingLocatorCategory, + ApmOnboardingLocatorParams, +} from '../../../locator/onboarding_locator'; -export const addApmData = { - name: i18n.translate('xpack.apm.add.apm.agent.button.', { - defaultMessage: 'Add APM', - }), - link: '/app/observabilityOnboarding/?category=apm', +export const addApmDataProps = (locator: LocatorPublic | undefined) => { + return { + name: i18n.translate('xpack.apm.add.apm.agent.button.', { + defaultMessage: 'Add APM', + }), + link: locator?.getRedirectUrl({ category: ApmOnboardingLocatorCategory.Apm }), + }; }; -export const associateServiceLogs = { +export const associateServiceLogsProps = { name: i18n.translate('xpack.apm.associate.service.logs.button', { defaultMessage: 'Associate existing service logs', }), link: 'https://ela.st/new-experience-associate-service-logs', }; -export const collectServiceLogs = { +export const collectServiceLogsProps = { name: i18n.translate('xpack.apm.collect.service.logs.button', { defaultMessage: 'Collect new service logs', }), @@ -42,18 +50,31 @@ interface AddApmDataProps { } export function AddApmData({ fill = false, size = 's', ...props }: AddApmDataProps) { - const { core } = useApmPluginContext(); - const { basePath } = core.http; + const { + share: { + url: { locators }, + }, + } = useApmPluginContext(); + + const onboardingLocator = locators.get( + OBSERVABILITY_ONBOARDING_LOCATOR + ); + + const addApmDataButtonProps = addApmDataProps(onboardingLocator); + + if (!addApmDataButtonProps.link) { + return; + } return ( - {addApmData.name} + {addApmDataButtonProps.name} ); } @@ -61,15 +82,15 @@ export function AddApmData({ fill = false, size = 's', ...props }: AddApmDataPro export function AssociateServiceLogs({ onClick }: { onClick?: () => void }) { return ( - {associateServiceLogs.name} + {associateServiceLogsProps.name} ); } @@ -80,12 +101,12 @@ export function CollectServiceLogs({ onClick }: { onClick?: () => void }) { return ( - {collectServiceLogs.name} + {collectServiceLogsProps.name} ); } diff --git a/x-pack/plugins/observability_solution/apm/public/locator/onboarding_locator.ts b/x-pack/plugins/observability_solution/apm/public/locator/onboarding_locator.ts new file mode 100644 index 0000000000000..889486cca8ca7 --- /dev/null +++ b/x-pack/plugins/observability_solution/apm/public/locator/onboarding_locator.ts @@ -0,0 +1,16 @@ +/* + * 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 { ObservabilityOnboardingLocatorParams } from '@kbn/deeplinks-observability'; + +export enum ApmOnboardingLocatorCategory { + Apm = 'application', +} + +export interface ApmOnboardingLocatorParams extends ObservabilityOnboardingLocatorParams { + category: ApmOnboardingLocatorCategory; +}