[8.x] [APM][Services] New empty states to encourage APM usage in logs…

… only services (#191825) (#192795) # Backport This will backport the following commits from `main` to `8.x`: - [[APM][Services] New empty states to encourage APM usage in logs only services (#191825)](#191825)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Irene Blanco <irene.blanco@elastic.co>
elastic · Sep 13, 2024 · 7c265ec · 7c265ec
1 parent ef0b115
commit 7c265ec
Show file tree

Hide file tree

Showing 32 changed files with 456 additions and 64 deletions.
diff --git a/...ic/assets/service_tab_empty_state/dark/service_tab_empty_state_dependencies.png b/...ic/assets/service_tab_empty_state/dark/service_tab_empty_state_dependencies.png
diff --git a/...m/public/assets/service_tab_empty_state/dark/service_tab_empty_state_errors.png b/...m/public/assets/service_tab_empty_state/dark/service_tab_empty_state_errors.png
diff --git a/.../assets/service_tab_empty_state/dark/service_tab_empty_state_infrastructure.png b/.../assets/service_tab_empty_state/dark/service_tab_empty_state_infrastructure.png
diff --git a/.../public/assets/service_tab_empty_state/dark/service_tab_empty_state_metrics.png b/.../public/assets/service_tab_empty_state/dark/service_tab_empty_state_metrics.png
diff --git a/...public/assets/service_tab_empty_state/dark/service_tab_empty_state_overview.png b/...public/assets/service_tab_empty_state/dark/service_tab_empty_state_overview.png
diff --git a/...lic/assets/service_tab_empty_state/dark/service_tab_empty_state_service_map.png b/...lic/assets/service_tab_empty_state/dark/service_tab_empty_state_service_map.png
diff --git a/...ic/assets/service_tab_empty_state/dark/service_tab_empty_state_transactions.png b/...ic/assets/service_tab_empty_state/dark/service_tab_empty_state_transactions.png
diff --git a/...c/assets/service_tab_empty_state/light/service_tab_empty_state_dependencies.png b/...c/assets/service_tab_empty_state/light/service_tab_empty_state_dependencies.png
diff --git a/.../public/assets/service_tab_empty_state/light/service_tab_empty_state_errors.png b/.../public/assets/service_tab_empty_state/light/service_tab_empty_state_errors.png
diff --git a/...assets/service_tab_empty_state/light/service_tab_empty_state_infrastructure.png b/...assets/service_tab_empty_state/light/service_tab_empty_state_infrastructure.png
diff --git a/...public/assets/service_tab_empty_state/light/service_tab_empty_state_metrics.png b/...public/assets/service_tab_empty_state/light/service_tab_empty_state_metrics.png
diff --git a/...ublic/assets/service_tab_empty_state/light/service_tab_empty_state_overview.png b/...ublic/assets/service_tab_empty_state/light/service_tab_empty_state_overview.png
diff --git a/...ic/assets/service_tab_empty_state/light/service_tab_empty_state_service_map.png b/...ic/assets/service_tab_empty_state/light/service_tab_empty_state_service_map.png
diff --git a/...c/assets/service_tab_empty_state/light/service_tab_empty_state_transactions.png b/...c/assets/service_tab_empty_state/light/service_tab_empty_state_transactions.png
diff --git a/...k/plugins/observability_solution/apm/public/components/app/error_group_overview/index.tsx b/...k/plugins/observability_solution/apm/public/components/app/error_group_overview/index.tsx
@@ -15,9 +15,12 @@ import { useErrorGroupDistributionFetcher } from '../../../hooks/use_error_group
 import { FailedTransactionRateChart } from '../../shared/charts/failed_transaction_rate_chart';
 import { ErrorDistribution } from '../error_group_details/distribution';
 import { ErrorGroupList } from './error_group_list';
+import { isLogsOnlySignal } from '../../../utils/get_signal_type';
+import { ServiceTabEmptyState } from '../service_tab_empty_state';
 
 export function ErrorGroupOverview() {
   const { serviceName } = useApmServiceContext();
+  const { serviceEntitySummary } = useApmServiceContext();
 
   const {
     query: { environment, kuery, comparisonEnabled },
@@ -30,6 +33,13 @@ export function ErrorGroupOverview() {
     kuery,
   });
 
+  const hasLogsOnlySignal =
+    serviceEntitySummary?.dataStreamTypes && isLogsOnlySignal(serviceEntitySummary.dataStreamTypes);
+
+  if (hasLogsOnlySignal) {
+    return <ServiceTabEmptyState id="errorGroupOverview" />;
+  }
+
   return (
     <EuiFlexGroup direction="column" gutterSize="s">
       <EuiFlexItem>

diff --git a/x-pack/plugins/observability_solution/apm/public/components/app/infra_overview/index.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/infra_overview/index.tsx
@@ -6,9 +6,21 @@
  */
 import { EuiPanel } from '@elastic/eui';
 import React from 'react';
+import { useApmServiceContext } from '../../../context/apm_service/use_apm_service_context';
+import { isLogsOnlySignal } from '../../../utils/get_signal_type';
 import { InfraTabs } from './infra_tabs';
+import { ServiceTabEmptyState } from '../service_tab_empty_state';
 
 export function InfraOverview() {
+  const { serviceEntitySummary } = useApmServiceContext();
+
+  const hasLogsOnlySignal =
+    serviceEntitySummary?.dataStreamTypes && isLogsOnlySignal(serviceEntitySummary.dataStreamTypes);
+
+  if (hasLogsOnlySignal) {
+    return <ServiceTabEmptyState id="infraOverview" />;
+  }
+
   return (
     <EuiPanel color="subdued" borderRadius="none" hasShadow={false}>
       <InfraTabs />

diff --git a/x-pack/plugins/observability_solution/apm/public/components/app/metrics/index.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/metrics/index.tsx
@@ -18,11 +18,22 @@ import { JvmMetricsOverview } from './jvm_metrics_overview';
 import { JsonMetricsDashboard } from './static_dashboard';
 import { hasDashboardFile } from './static_dashboard/helper';
 import { useAdHocApmDataView } from '../../../hooks/use_adhoc_apm_data_view';
+import { isLogsOnlySignal } from '../../../utils/get_signal_type';
+import { ServiceTabEmptyState } from '../service_tab_empty_state';
 
 export function Metrics() {
   const { agentName, runtimeName, serverlessType } = useApmServiceContext();
   const isAWSLambda = isAWSLambdaAgentName(serverlessType);
   const { dataView } = useAdHocApmDataView();
+  const { serviceEntitySummary } = useApmServiceContext();
+
+  const hasLogsOnlySignal =
+    serviceEntitySummary?.dataStreamTypes && isLogsOnlySignal(serviceEntitySummary.dataStreamTypes);
+
+  if (hasLogsOnlySignal) {
+    return <ServiceTabEmptyState id="metrics" />;
+  }
+
   if (isAWSLambda) {
     return <ServerlessMetrics />;
   }

diff --git a/...k/plugins/observability_solution/apm/public/components/app/service_dependencies/index.tsx b/...k/plugins/observability_solution/apm/public/components/app/service_dependencies/index.tsx
@@ -9,11 +9,23 @@ import { EuiTitle } from '@elastic/eui';
 import { EuiPanel } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
+import { isLogsOnlySignal } from '../../../utils/get_signal_type';
 import { ChartPointerEventContextProvider } from '../../../context/chart_pointer_event/chart_pointer_event_context';
 import { ServiceOverviewDependenciesTable } from '../service_overview/service_overview_dependencies_table';
 import { ServiceDependenciesBreakdownChart } from './service_dependencies_breakdown_chart';
+import { useApmServiceContext } from '../../../context/apm_service/use_apm_service_context';
+import { ServiceTabEmptyState } from '../service_tab_empty_state';
 
 export function ServiceDependencies() {
+  const { serviceEntitySummary } = useApmServiceContext();
+
+  const hasLogsOnlySignal =
+    serviceEntitySummary?.dataStreamTypes && isLogsOnlySignal(serviceEntitySummary.dataStreamTypes);
+
+  if (hasLogsOnlySignal) {
+    return <ServiceTabEmptyState id="serviceDependencies" />;
+  }
+
   return (
     <>
       <ChartPointerEventContextProvider>

diff --git a/x-pack/plugins/observability_solution/apm/public/components/app/service_map/index.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/service_map/index.tsx
@@ -29,6 +29,9 @@ import { useApmParams, useAnyOfApmParams } from '../../../hooks/use_apm_params';
 import { Environment } from '../../../../common/environment_rt';
 import { useTimeRange } from '../../../hooks/use_time_range';
 import { DisabledPrompt } from './disabled_prompt';
+import { useApmServiceContext } from '../../../context/apm_service/use_apm_service_context';
+import { isLogsOnlySignal } from '../../../utils/get_signal_type';
+import { ServiceTabEmptyState } from '../service_tab_empty_state';
 
 function PromptContainer({ children }: { children: ReactNode }) {
   return (
@@ -76,6 +79,14 @@ export function ServiceMapServiceDetail() {
     '/mobile-services/{serviceName}/service-map'
   );
   const { start, end } = useTimeRange({ rangeFrom, rangeTo });
+  const { serviceEntitySummary } = useApmServiceContext();
+
+  const hasLogsOnlySignal =
+    serviceEntitySummary?.dataStreamTypes && isLogsOnlySignal(serviceEntitySummary.dataStreamTypes);
+
+  if (hasLogsOnlySignal) {
+    return <ServiceTabEmptyState id="serviceMap" />;
+  }
   return <ServiceMap environment={environment} kuery={kuery} start={start} end={end} />;
 }
 

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
@@ -14,9 +14,12 @@ import { ChartPointerEventContextProvider } from '../../../context/chart_pointer
 import { useEntityManagerEnablementContext } from '../../../context/entity_manager_context/use_entity_manager_enablement_context';
 import { useApmParams } from '../../../hooks/use_apm_params';
 import { useTimeRange } from '../../../hooks/use_time_range';
-import { isApmSignal, isLogsSignal } from '../../../utils/get_signal_type';
+import { isApmSignal, isLogsSignal, isLogsOnlySignal } from '../../../utils/get_signal_type';
 import { ApmOverview } from './apm_overview';
 import { LogsOverview } from './logs_overview';
+import { ServiceTabEmptyState } from '../service_tab_empty_state';
+import { useLocalStorage } from '../../../hooks/use_local_storage';
+import { SearchBar } from '../../shared/search_bar/search_bar';
 import { FETCH_STATUS } from '../../../hooks/use_fetcher';
 /**
  * The height a chart should be if it's next to a table with 5 rows and a title.
@@ -49,11 +52,19 @@ export function ServiceOverview() {
 
   const { start, end } = useTimeRange({ rangeFrom, rangeTo });
 
+  const [dismissedLogsOnlyEmptyState, setDismissedLogsOnlyEmptyState] = useLocalStorage(
+    `apm.dismissedLogsOnlyEmptyState.overview`,
+    false
+  );
+
   const hasSignal =
     serviceEntitySummary?.dataStreamTypes && serviceEntitySummary?.dataStreamTypes?.length > 0;
 
   const hasLogsSignal = hasSignal && isLogsSignal(serviceEntitySummary.dataStreamTypes);
 
+  const hasLogsOnlySignal = hasSignal && isLogsOnlySignal(serviceEntitySummary.dataStreamTypes);
+
+  // Shows APM overview when entity has APM signal or when Entity centric is not enabled
   const hasApmSignal = hasSignal && isApmSignal(serviceEntitySummary.dataStreamTypes);
 
   // Shows APM overview when entity has APM signal or when Entity centric is not enabled or when entity has no signal
@@ -69,23 +80,36 @@ export function ServiceOverview() {
   }
 
   return (
-    <AnnotationsContextProvider
-      serviceName={serviceName}
-      environment={environment}
-      start={start}
-      end={end}
-    >
-      <ChartPointerEventContextProvider>
-        <EuiFlexGroup direction="column" gutterSize="s">
-          {showApmOverview ? <ApmOverview /> : null}
-          {/* Only shows Logs overview when entity has Logs signal */}
-          {hasLogsSignal ? (
-            <EuiFlexItem>
-              <LogsOverview hasApmSignal={hasApmSignal} />
-            </EuiFlexItem>
-          ) : null}
-        </EuiFlexGroup>
-      </ChartPointerEventContextProvider>
-    </AnnotationsContextProvider>
+    <>
+      <SearchBar showTimeComparison showTransactionTypeSelector />
+      <AnnotationsContextProvider
+        serviceName={serviceName}
+        environment={environment}
+        start={start}
+        end={end}
+      >
+        <ChartPointerEventContextProvider>
+          <EuiFlexGroup direction="column" gutterSize="s">
+            {showApmOverview ? <ApmOverview /> : null}
+            {/* Only shows Logs overview when entity has Logs signal */}
+            {hasLogsSignal ? (
+              <>
+                {hasLogsOnlySignal && !dismissedLogsOnlyEmptyState && (
+                  <EuiFlexItem>
+                    <ServiceTabEmptyState
+                      id="serviceOverview"
+                      onDissmiss={() => setDismissedLogsOnlyEmptyState(true)}
+                    />
+                  </EuiFlexItem>
+                )}
+                <EuiFlexItem>
+                  <LogsOverview />
+                </EuiFlexItem>
+              </>
+            ) : null}
+          </EuiFlexGroup>
+        </ChartPointerEventContextProvider>
+      </AnnotationsContextProvider>
+    </>
   );
 }
diff --git a/...observability_solution/apm/public/components/app/service_overview/logs_overview/index.tsx b/...observability_solution/apm/public/components/app/service_overview/logs_overview/index.tsx
@@ -5,44 +5,21 @@
  * 2.0.
  */
 
-import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import React from 'react';
-import { useLocalStorage } from '../../../../hooks/use_local_storage';
-import { AddAPMCallOut } from '../../entities/logs/add_apm_callout';
 import { LogRateChart } from '../../entities/charts/log_rate_chart';
 import { LogErrorRateChart } from '../../entities/charts/log_error_rate_chart';
 import { chartHeight } from '..';
 
-interface Props {
-  hasApmSignal?: boolean;
-}
-
-export function LogsOverview({ hasApmSignal }: Props) {
-  const [isLogsApmCalloutEnabled, setIsLogsApmCalloutEnabled] = useLocalStorage(
-    'apm.isLogsApmCalloutEnabled',
-    true
-  );
-
+export function LogsOverview() {
   return (
-    <>
-      {!hasApmSignal && isLogsApmCalloutEnabled ? (
-        <>
-          <AddAPMCallOut
-            onClose={() => {
-              setIsLogsApmCalloutEnabled(false);
-            }}
-          />
-          <EuiSpacer size="s" />
-        </>
-      ) : null}
-      <EuiFlexGroup gutterSize="s">
-        <EuiFlexItem grow={4}>
-          <LogRateChart height={chartHeight} />
-        </EuiFlexItem>
-        <EuiFlexItem grow={4}>
-          <LogErrorRateChart height={chartHeight} />
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    </>
+    <EuiFlexGroup gutterSize="s">
+      <EuiFlexItem grow={4}>
+        <LogRateChart height={chartHeight} />
+      </EuiFlexItem>
+      <EuiFlexItem grow={4}>
+        <LogErrorRateChart height={chartHeight} />
+      </EuiFlexItem>
+    </EuiFlexGroup>
   );
 }
diff --git a/...vability_solution/apm/public/components/app/service_overview/service_overview.stories.tsx b/...vability_solution/apm/public/components/app/service_overview/service_overview.stories.tsx
@@ -42,6 +42,7 @@ const stories: Meta<{}> = {
         transactionType,
         transactionTypeStatus,
         serviceEntitySummary,
+        transactionTypes: ['type'],
       } as unknown as APMServiceContextValue;
 
       return (

diff --git a/...servability_solution/apm/public/components/app/service_overview/service_overview.test.tsx b/...servability_solution/apm/public/components/app/service_overview/service_overview.test.tsx
@@ -9,10 +9,28 @@ import { composeStories } from '@storybook/testing-react';
 import { render, screen } from '@testing-library/react';
 import React from 'react';
 import * as stories from './service_overview.stories';
+import * as useAdHocApmDataView from '../../../hooks/use_adhoc_apm_data_view';
 
 const { Example } = composeStories(stories);
 
 describe('ServiceOverview', () => {
+  let useAdHocApmDataViewSpy: jest.SpyInstance;
+
+  beforeAll(() => {
+    useAdHocApmDataViewSpy = jest.spyOn(useAdHocApmDataView, 'useAdHocApmDataView');
+
+    useAdHocApmDataViewSpy.mockImplementation(() => {
+      return {
+        dataView: {
+          id: 'foo-1',
+        },
+      };
+    });
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
   it('renders', async () => {
     render(<Example />);
 

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
@@ -0,0 +1,95 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+
+export type EmptyStateKey =
+  | 'serviceOverview'
+  | 'serviceDependencies'
+  | 'infraOverview'
+  | 'serviceMap'
+  | 'transactionOverview'
+  | 'metrics'
+  | 'errorGroupOverview';
+
+interface EmptyStateContent {
+  title: string;
+  content: string;
+  imgName?: string;
+}
+
+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 services 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',
+  },
+};