[APM]Refactor ServiceTabEmptyState to use AddDataPanel (#197578)

## Summary Closes #195876 This PR refactors the ServiceTabEmptyState component to use the newly created generic AddDataPanel component, which was derived from it. The functionality remains the same. ### Tabs |Light|Dark| |-|-| |![callout_light](https://github.com/user-attachments/assets/46c7d14b-c4f4-44e4-a753-099abec378e4)|![callout_dark](https://github.com/user-attachments/assets/298386bf-eb76-4b23-9952-df6576032f86)| ### Actions ![callout_actions](https://github.com/user-attachments/assets/08c4364c-c3cb-45af-b02e-5012cbf86536) ### Dismiss ![callout_dismissable](https://github.com/user-attachments/assets/a0276001-98a9-47b3-83c9-aaa0685c7418)
elastic · Oct 24, 2024 · 42de8c8 · 42de8c8
1 parent f151e2c
commit 42de8c8
Show file tree

Hide file tree

Showing 8 changed files with 196 additions and 219 deletions.
diff --git a/x-pack/plugins/observability_solution/apm/public/components/app/service_overview/index.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/service_overview/index.tsx
@@ -97,7 +97,7 @@ export function ServiceOverview() {
                   <EuiFlexItem>
                     <ServiceTabEmptyState
                       id="serviceOverview"
-                      onDissmiss={() => setDismissedLogsOnlyEmptyState(true)}
+                      onDismiss={() => setDismissedLogsOnlyEmptyState(true)}
                     />
                   </EuiFlexItem>
                 )}

diff --git a/...ins/observability_solution/apm/public/components/app/service_tab_empty_state/constants.ts b/...ins/observability_solution/apm/public/components/app/service_tab_empty_state/constants.ts
@@ -5,9 +5,12 @@
  * 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';
 
-export type EmptyStateKey =
+export type AddAPMCalloutKeys =
   | 'serviceOverview'
   | 'serviceDependencies'
   | 'infraOverview'
@@ -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),
+    },
+  };
 };