Skip to content

Commit 4798c59

Browse files
iblancofiblancof
authored
[APM] Update onboarding link to use locator with "application" as category parameter (#197780)
## Summary Closes #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)|
1 parent b680626 commit 4798c59

5 files changed

Lines changed: 95 additions & 44 deletions

File tree

‎x-pack/plugins/observability_solution/apm/public/components/app/service_tab_empty_state/constants.ts‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,13 @@
55
* 2.0.
66
*/
77

8-
import type { ObservabilityOnboardingLocatorParams } from '@kbn/deeplinks-observability';
98
import { i18n } from '@kbn/i18n';
109
import type { AddDataPanelProps } from '@kbn/observability-shared-plugin/public';
1110
import type { LocatorPublic } from '@kbn/share-plugin/common';
11+
import {
12+
ApmOnboardingLocatorCategory,
13+
ApmOnboardingLocatorParams,
14+
} from '../../../locator/onboarding_locator';
1215

1316
export type AddAPMCalloutKeys =
1417
| 'serviceOverview'
@@ -19,13 +22,11 @@ export type AddAPMCalloutKeys =
1922
| 'metrics'
2023
| 'errorGroupOverview';
2124

22-
const defaultActions = (
23-
locator: LocatorPublic<ObservabilityOnboardingLocatorParams> | undefined
24-
) => {
25+
const defaultActions = (locator: LocatorPublic<ApmOnboardingLocatorParams> | undefined) => {
2526
return {
2627
actions: {
2728
primary: {
28-
href: locator?.getRedirectUrl({ category: 'application' }),
29+
href: locator?.getRedirectUrl({ category: ApmOnboardingLocatorCategory.Apm }),
2930
label: i18n.translate('xpack.apm.serviceTabEmptyState.defaultPrimaryActionLabel', {
3031
defaultMessage: 'Add APM',
3132
}),
@@ -42,7 +43,7 @@ const defaultActions = (
4243

4344
export const addAPMCalloutDefinitions = (
4445
baseFolderPath: string,
45-
locator: LocatorPublic<ObservabilityOnboardingLocatorParams> | undefined
46+
locator: LocatorPublic<ApmOnboardingLocatorParams> | undefined
4647
): Record<
4748
AddAPMCalloutKeys,
4849
Omit<AddDataPanelProps, 'onDismiss' | 'onAddData' | 'onLearnMore' | 'onTryIt'>

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

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,8 @@
88
import React from 'react';
99
import { useKibana } from '@kbn/kibana-react-plugin/public';
1010
import { AddDataPanel } from '@kbn/observability-shared-plugin/public';
11-
import {
12-
OBSERVABILITY_ONBOARDING_LOCATOR,
13-
ObservabilityOnboardingLocatorParams,
14-
} from '@kbn/deeplinks-observability';
11+
import { OBSERVABILITY_ONBOARDING_LOCATOR } from '@kbn/deeplinks-observability';
12+
import { ApmOnboardingLocatorParams } from '../../../locator/onboarding_locator';
1513
import { useApmPluginContext } from '../../../context/apm_plugin/use_apm_plugin_context';
1614
import { EmptyStateClickParams, EntityInventoryAddDataParams } from '../../../services/telemetry';
1715
import { ApmPluginStartDeps, ApmServices } from '../../../plugin';
@@ -39,7 +37,7 @@ export function ServiceTabEmptyState({ id, onDismiss }: ServiceTabEmptyStateProp
3937

4038
const { share } = useApmPluginContext();
4139

42-
const onboardingLocator = share.url.locators.get<ObservabilityOnboardingLocatorParams>(
40+
const onboardingLocator = share.url.locators.get<ApmOnboardingLocatorParams>(
4341
OBSERVABILITY_ONBOARDING_LOCATOR
4442
);
4543

‎x-pack/plugins/observability_solution/apm/public/components/routing/app_root/apm_header_action_menu/add_data_context_menu.tsx‎

Lines changed: 31 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,16 @@ import {
1313
} from '@elastic/eui';
1414
import { i18n } from '@kbn/i18n';
1515
import React, { useState } from 'react';
16+
import { OBSERVABILITY_ONBOARDING_LOCATOR } from '@kbn/deeplinks-observability';
17+
import { ApmOnboardingLocatorParams } from '../../../../locator/onboarding_locator';
1618
import { useApmPluginContext } from '../../../../context/apm_plugin/use_apm_plugin_context';
1719
import { useKibana } from '../../../../context/kibana_context/use_kibana';
1820
import { ApmPluginStartDeps, ApmServices } from '../../../../plugin';
1921
import { EntityInventoryAddDataParams } from '../../../../services/telemetry';
2022
import {
21-
associateServiceLogs,
22-
collectServiceLogs,
23-
addApmData,
23+
associateServiceLogsProps,
24+
collectServiceLogsProps,
25+
addApmDataProps,
2426
} from '../../../shared/add_data_buttons/buttons';
2527

2628
const addData = i18n.translate('xpack.apm.addDataContextMenu.link', {
@@ -34,8 +36,17 @@ export function AddDataContextMenu() {
3436
core: {
3537
http: { basePath },
3638
},
39+
share: {
40+
url: { locators },
41+
},
3742
} = useApmPluginContext();
3843

44+
const onboardingLocator = locators.get<ApmOnboardingLocatorParams>(
45+
OBSERVABILITY_ONBOARDING_LOCATOR
46+
);
47+
48+
const addApmButtonData = addApmDataProps(onboardingLocator);
49+
3950
const button = (
4051
<EuiHeaderLink
4152
color="text"
@@ -61,31 +72,35 @@ export function AddDataContextMenu() {
6172
title: addData,
6273
items: [
6374
{
64-
name: associateServiceLogs.name,
65-
href: associateServiceLogs.link,
75+
name: associateServiceLogsProps.name,
76+
href: associateServiceLogsProps.link,
6677
'data-test-subj': 'apmAddDataAssociateServiceLogs',
6778
target: '_blank',
6879
onClick: () => {
6980
reportButtonClick('associate_existing_service_logs');
7081
},
7182
},
7283
{
73-
name: collectServiceLogs.name,
74-
href: basePath.prepend(collectServiceLogs.link),
84+
name: collectServiceLogsProps.name,
85+
href: basePath.prepend(collectServiceLogsProps.link),
7586
'data-test-subj': 'apmAddDataCollectServiceLogs',
7687
onClick: () => {
7788
reportButtonClick('collect_new_service_logs');
7889
},
7990
},
80-
{
81-
name: addApmData.name,
82-
href: basePath.prepend(addApmData.link),
83-
icon: 'plusInCircle',
84-
'data-test-subj': 'apmAddDataApmAgent',
85-
onClick: () => {
86-
reportButtonClick('add_apm_agent');
87-
},
88-
},
91+
...(addApmButtonData.link
92+
? [
93+
{
94+
name: addApmButtonData.name,
95+
href: addApmButtonData.link,
96+
icon: 'plusInCircle',
97+
'data-test-subj': 'apmAddDataApmAgent',
98+
onClick: () => {
99+
reportButtonClick('add_apm_agent');
100+
},
101+
},
102+
]
103+
: []),
89104
],
90105
},
91106
];

‎x-pack/plugins/observability_solution/apm/public/components/shared/add_data_buttons/buttons.tsx‎

Lines changed: 38 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -11,23 +11,31 @@
1111
import { EuiButton, EuiButtonSize } from '@elastic/eui';
1212
import { i18n } from '@kbn/i18n';
1313
import React from 'react';
14+
import { OBSERVABILITY_ONBOARDING_LOCATOR } from '@kbn/deeplinks-observability';
15+
import { LocatorPublic } from '@kbn/share-plugin/common';
1416
import { useApmPluginContext } from '../../../context/apm_plugin/use_apm_plugin_context';
17+
import {
18+
ApmOnboardingLocatorCategory,
19+
ApmOnboardingLocatorParams,
20+
} from '../../../locator/onboarding_locator';
1521

16-
export const addApmData = {
17-
name: i18n.translate('xpack.apm.add.apm.agent.button.', {
18-
defaultMessage: 'Add APM',
19-
}),
20-
link: '/app/observabilityOnboarding/?category=apm',
22+
export const addApmDataProps = (locator: LocatorPublic<ApmOnboardingLocatorParams> | undefined) => {
23+
return {
24+
name: i18n.translate('xpack.apm.add.apm.agent.button.', {
25+
defaultMessage: 'Add APM',
26+
}),
27+
link: locator?.getRedirectUrl({ category: ApmOnboardingLocatorCategory.Apm }),
28+
};
2129
};
2230

23-
export const associateServiceLogs = {
31+
export const associateServiceLogsProps = {
2432
name: i18n.translate('xpack.apm.associate.service.logs.button', {
2533
defaultMessage: 'Associate existing service logs',
2634
}),
2735
link: 'https://ela.st/new-experience-associate-service-logs',
2836
};
2937

30-
export const collectServiceLogs = {
38+
export const collectServiceLogsProps = {
3139
name: i18n.translate('xpack.apm.collect.service.logs.button', {
3240
defaultMessage: 'Collect new service logs',
3341
}),
@@ -42,34 +50,47 @@ interface AddApmDataProps {
4250
}
4351

4452
export function AddApmData({ fill = false, size = 's', ...props }: AddApmDataProps) {
45-
const { core } = useApmPluginContext();
46-
const { basePath } = core.http;
53+
const {
54+
share: {
55+
url: { locators },
56+
},
57+
} = useApmPluginContext();
58+
59+
const onboardingLocator = locators.get<ApmOnboardingLocatorParams>(
60+
OBSERVABILITY_ONBOARDING_LOCATOR
61+
);
62+
63+
const addApmDataButtonProps = addApmDataProps(onboardingLocator);
64+
65+
if (!addApmDataButtonProps.link) {
66+
return;
67+
}
4768

4869
return (
4970
<EuiButton
5071
data-test-subj={props['data-test-subj']}
5172
size={size}
5273
onClick={props.onClick}
53-
href={basePath.prepend(addApmData.link)}
74+
href={addApmDataButtonProps?.link}
5475
fill={fill}
5576
>
56-
{addApmData.name}
77+
{addApmDataButtonProps.name}
5778
</EuiButton>
5879
);
5980
}
6081

6182
export function AssociateServiceLogs({ onClick }: { onClick?: () => void }) {
6283
return (
6384
<EuiButton
64-
data-test-subj="associateServiceLogsButton"
85+
data-test-subj="associateServiceLogsPropsButton"
6586
size="s"
6687
onClick={onClick}
67-
href={associateServiceLogs.link}
88+
href={associateServiceLogsProps.link}
6889
target="_blank"
6990
iconType="popout"
7091
iconSide="right"
7192
>
72-
{associateServiceLogs.name}
93+
{associateServiceLogsProps.name}
7394
</EuiButton>
7495
);
7596
}
@@ -80,12 +101,12 @@ export function CollectServiceLogs({ onClick }: { onClick?: () => void }) {
80101

81102
return (
82103
<EuiButton
83-
data-test-subj="collectServiceLogsButton"
104+
data-test-subj="collectServiceLogsPropsButton"
84105
size="s"
85106
onClick={onClick}
86-
href={basePath.prepend(collectServiceLogs.link)}
107+
href={basePath.prepend(collectServiceLogsProps.link)}
87108
>
88-
{collectServiceLogs.name}
109+
{collectServiceLogsProps.name}
89110
</EuiButton>
90111
);
91112
}

‎x-pack/plugins/observability_solution/apm/public/locator/onboarding_locator.ts‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
/*
2+
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
3+
* or more contributor license agreements. Licensed under the Elastic License
4+
* 2.0; you may not use this file except in compliance with the Elastic License
5+
* 2.0.
6+
*/
7+
8+
import { ObservabilityOnboardingLocatorParams } from '@kbn/deeplinks-observability';
9+
10+
export enum ApmOnboardingLocatorCategory {
11+
Apm = 'application',
12+
}
13+
14+
export interface ApmOnboardingLocatorParams extends ObservabilityOnboardingLocatorParams {
15+
category: ApmOnboardingLocatorCategory;
16+
}

0 commit comments

Comments
 (0)