mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 01:38:56 -04:00
[APM][ECO] Consistent CTA and URL for adding APM data in the new experience (#189349)
## Summary closes https://github.com/elastic/kibana/issues/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
This commit is contained in:
parent
70cad5eb75
commit
3639a5d375
5 changed files with 30 additions and 32 deletions
|
@ -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}>
|
||||
|
|
|
@ -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');
|
||||
}}
|
||||
|
|
|
@ -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: () => {
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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} />}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue