Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[APM]Refactor ServiceTabEmptyState to use AddDataPanel #197578

Merged
merged 7 commits into from
Oct 24, 2024
Merged

[APM]Refactor ServiceTabEmptyState to use AddDataPanel #197578

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
a8b7dc2
Refactor ServiceTabEmptyState to use AddDataPanel
iblancof Oct 24, 2024
e767f46
Change onboarding locator category param
iblancof Oct 24, 2024
885128a
Fix typo
iblancof Oct 24, 2024
e275116
Merge branch 'main' into 195876-apm-update-service-tab-empty-state-to…
iblancof Oct 24, 2024
b373fb2
Fix typo
iblancof Oct 24, 2024
ab15255
Remove unnecessary function in ServiceTabEmptyState
iblancof Oct 24, 2024
840d74f
Update imports in ServiceTabEmptyState constants
iblancof Oct 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion x-pack/plugins/observability_solution/apm/public/components/app/service_overview/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ export function ServiceOverview() {
<EuiFlexItem>
<ServiceTabEmptyState
id="serviceOverview"
onDissmiss={() => setDismissedLogsOnlyEmptyState(true)}
onDismiss={() => setDismissedLogsOnlyEmptyState(true)}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for fixing the typo!

/>
</EuiFlexItem>
)}
Expand Down
229 changes: 153 additions & 76 deletions ...ins/observability_solution/apm/public/components/app/service_tab_empty_state/constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,12 @@
* 2.0.
*/

import { ObservabilityOnboardingLocatorParams } from '@kbn/deeplinks-observability';
iblancof marked this conversation as resolved.
Show resolved Hide resolved
import { i18n } from '@kbn/i18n';
import { AddDataPanelProps } from '@kbn/observability-shared-plugin/public';
iblancof marked this conversation as resolved.
Show resolved Hide resolved
import { LocatorPublic } from '@kbn/share-plugin/common';
iblancof marked this conversation as resolved.
Show resolved Hide resolved

export type EmptyStateKey =
export type AddAPMCalloutKeys =
| 'serviceOverview'
| 'serviceDependencies'
| 'infraOverview'
Expand All @@ -16,80 +19,154 @@ export type EmptyStateKey =
| 'metrics'
| 'errorGroupOverview';

interface EmptyStateContent {
title: string;
content: string;
imgName?: string;
}
const defaultActions = (
locator: LocatorPublic<ObservabilityOnboardingLocatorParams> | undefined
) => {
return {
actions: {
primary: {
href: locator?.getRedirectUrl({ category: 'application' }),
label: i18n.translate('xpack.apm.serviceTabEmptyState.defaultPrimaryActionLabel', {
defaultMessage: 'Add APM',
}),
},
secondary: {
href: 'https://ela.st/demo-apm-try-it',
},
link: {
href: 'https://www.elastic.co/observability/application-performance-monitoring',
},
},
};
};

export const emptyStateDefinitions: Record<EmptyStateKey, EmptyStateContent> = {
serviceOverview: {
title: i18n.translate('xpack.apm.serviceTabEmptyState.overviewTitle', {
defaultMessage: 'Detect and resolve issues faster with deep visibility into your application',
}),
content: i18n.translate('xpack.apm.serviceTabEmptyState.overviewContent', {
defaultMessage:
'Understanding your application performance, relationships and dependencies by instrumenting with APM.',
}),
},
serviceDependencies: {
title: i18n.translate('xpack.apm.serviceTabEmptyState.dependenciesTitle', {
defaultMessage: 'Understand the dependencies for your service',
}),
content: i18n.translate('xpack.apm.serviceTabEmptyState.dependenciesContent', {
defaultMessage:
"See your service's dependencies on both internal and third-party services by instrumenting with APM.",
}),
imgName: 'service_tab_empty_state_dependencies.png',
},
infraOverview: {
title: i18n.translate('xpack.apm.serviceTabEmptyState.infrastructureTitle', {
defaultMessage: 'Understand what your service is running on',
}),
content: i18n.translate('xpack.apm.serviceTabEmptyState.infrastructureContent', {
defaultMessage:
'Troubleshoot service problems by seeing the infrastructure your service is running on.',
}),
imgName: 'service_tab_empty_state_infrastructure.png',
},
serviceMap: {
title: i18n.translate('xpack.apm.serviceTabEmptyState.serviceMapTitle', {
defaultMessage: 'Visualise the dependencies between your services',
}),
content: i18n.translate('xpack.apm.serviceTabEmptyState.serviceMapContent', {
defaultMessage:
'See your services dependencies at a glance to help identify dependencies that may be affecting your service.',
}),
imgName: 'service_tab_empty_state_service_map.png',
},
transactionOverview: {
title: i18n.translate('xpack.apm.serviceTabEmptyState.transactionsTitle', {
defaultMessage: 'Troubleshoot latency, throughput and errors',
}),
content: i18n.translate('xpack.apm.serviceTabEmptyState.transactionsContent', {
defaultMessage:
"Troubleshoot your service's performance by analysing latency, throughput and errors down to the specific transaction.",
}),
imgName: 'service_tab_empty_state_transactions.png',
},
metrics: {
title: i18n.translate('xpack.apm.serviceTabEmptyState.metricsTitle', {
defaultMessage: 'View core metrics for your application',
}),
content: i18n.translate('xpack.apm.serviceTabEmptyState.metricsContent', {
defaultMessage:
'View metric trends for the instances of your service to identify performance bottlenecks that could be affecting your users.',
}),
imgName: 'service_tab_empty_state_metrics.png',
},
errorGroupOverview: {
title: i18n.translate('xpack.apm.serviceTabEmptyState.errorGroupOverviewTitle', {
defaultMessage: 'Identify transaction errors with your applications',
}),
content: i18n.translate('xpack.apm.serviceTabEmptyState.errorGroupOverviewContent', {
defaultMessage:
'Analyse errors down to the specific transaction to pin-point specific errors within your service.',
}),
imgName: 'service_tab_empty_state_errors.png',
},
export const addAPMCalloutDefinitions = (
baseFolderPath: string,
locator: LocatorPublic<ObservabilityOnboardingLocatorParams> | undefined
): Record<
AddAPMCalloutKeys,
Omit<AddDataPanelProps, 'onDismiss' | 'onAddData' | 'onLearnMore' | 'onTryIt'>
> => {
return {
serviceOverview: {
content: {
title: i18n.translate('xpack.apm.serviceTabEmptyState.overviewTitle', {
defaultMessage:
'Detect and resolve issues faster with deep visibility into your application',
}),
content: i18n.translate('xpack.apm.serviceTabEmptyState.overviewContent', {
defaultMessage:
'Understanding your application performance, relationships and dependencies by instrumenting with APM.',
}),
img: {
name: 'service_tab_empty_state_overview.png',
baseFolderPath,
position: 'inside',
},
},
...defaultActions(locator),
},
serviceDependencies: {
content: {
title: i18n.translate('xpack.apm.serviceTabEmptyState.dependenciesTitle', {
defaultMessage: 'Understand the dependencies for your service',
}),
content: i18n.translate('xpack.apm.serviceTabEmptyState.dependenciesContent', {
defaultMessage:
"See your service's dependencies on both internal and third-party services by instrumenting with APM.",
}),
img: {
name: 'service_tab_empty_state_dependencies.png',
baseFolderPath,
position: 'below',
},
},
...defaultActions(locator),
},
infraOverview: {
content: {
title: i18n.translate('xpack.apm.serviceTabEmptyState.infrastructureTitle', {
defaultMessage: 'Understand what your service is running on',
}),
content: i18n.translate('xpack.apm.serviceTabEmptyState.infrastructureContent', {
defaultMessage:
'Troubleshoot service problems by seeing the infrastructure your service is running on.',
}),
img: {
name: 'service_tab_empty_state_infrastructure.png',
baseFolderPath,
position: 'below',
},
},
...defaultActions(locator),
},
serviceMap: {
content: {
title: i18n.translate('xpack.apm.serviceTabEmptyState.serviceMapTitle', {
defaultMessage: 'Visualise the dependencies between your services',
}),
content: i18n.translate('xpack.apm.serviceTabEmptyState.serviceMapContent', {
defaultMessage:
'See your services dependencies at a glance to help identify dependencies that may be affecting your service.',
}),
img: {
name: 'service_tab_empty_state_service_map.png',
baseFolderPath,
position: 'below',
},
},
...defaultActions(locator),
},
transactionOverview: {
content: {
title: i18n.translate('xpack.apm.serviceTabEmptyState.transactionsTitle', {
defaultMessage: 'Troubleshoot latency, throughput and errors',
}),
content: i18n.translate('xpack.apm.serviceTabEmptyState.transactionsContent', {
defaultMessage:
"Troubleshoot your service's performance by analysing latency, throughput and errors down to the specific transaction.",
}),
img: {
name: 'service_tab_empty_state_transactions.png',
baseFolderPath,
position: 'below',
},
},
...defaultActions(locator),
},
metrics: {
content: {
title: i18n.translate('xpack.apm.serviceTabEmptyState.metricsTitle', {
defaultMessage: 'View core metrics for your application',
}),
content: i18n.translate('xpack.apm.serviceTabEmptyState.metricsContent', {
defaultMessage:
'View metric trends for the instances of your service to identify performance bottlenecks that could be affecting your users.',
}),
img: {
name: 'service_tab_empty_state_metrics.png',
baseFolderPath,
position: 'below',
},
},
...defaultActions(locator),
},
errorGroupOverview: {
content: {
title: i18n.translate('xpack.apm.serviceTabEmptyState.errorGroupOverviewTitle', {
defaultMessage: 'Identify transaction errors with your applications',
}),
content: i18n.translate('xpack.apm.serviceTabEmptyState.errorGroupOverviewContent', {
defaultMessage:
'Analyse errors down to the specific transaction to pin-point specific errors within your service.',
}),
img: {
name: 'service_tab_empty_state_errors.png',
baseFolderPath,
position: 'below',
},
},
...defaultActions(locator),
},
};
};
Loading