Update title on the APM empty state prompt (#126146)

* Change hasFleetDataRoute endpoint * Wait until the requests have finished before displaying the empty state prompt
elastic · Feb 23, 2022 · 1249bfe · 1249bfe
1 parent 40bb15c
commit 1249bfe
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 38 deletions.
diff --git a/x-pack/plugins/apm/public/components/routing/templates/apm_main_template.tsx b/x-pack/plugins/apm/public/components/routing/templates/apm_main_template.tsx
@@ -13,7 +13,7 @@ import {
   KibanaPageTemplateProps,
 } from '../../../../../../../src/plugins/kibana_react/public';
 import { EnvironmentsContextProvider } from '../../../context/environments_context/environments_context';
-import { useFetcher } from '../../../hooks/use_fetcher';
+import { useFetcher, FETCH_STATUS } from '../../../hooks/use_fetcher';
 import { ApmPluginStartDeps } from '../../../plugin';
 import { ApmEnvironmentFilter } from '../../shared/environment_filter';
 import { getNoDataConfig } from './no_data_config';
@@ -50,20 +50,35 @@ export function ApmMainTemplate({
 
   const ObservabilityPageTemplate = observability.navigation.PageTemplate;
 
-  const { data } = useFetcher((callApmApi) => {
+  const { data, status } = useFetcher((callApmApi) => {
     return callApmApi('GET /internal/apm/has_data');
   }, []);
 
+  const shouldBypassNoDataScreen = bypassNoDataScreenPaths.some((path) =>
+    location.pathname.includes(path)
+  );
+
+  const { data: fleetApmPoliciesData, status: fleetApmPoliciesStatus } =
+    useFetcher(
+      (callApmApi) => {
+        if (!data?.hasData && !shouldBypassNoDataScreen) {
+          return callApmApi('GET /internal/apm/fleet/has_apm_policies');
+        }
+      },
+      [shouldBypassNoDataScreen, data?.hasData]
+    );
+
   const noDataConfig = getNoDataConfig({
     basePath,
     docsLink: docLinks!.links.observability.guide,
-    hasData: data?.hasData,
+    hasApmData: data?.hasData,
+    hasApmIntegrations: fleetApmPoliciesData?.hasApmPolicies,
+    shouldBypassNoDataScreen,
+    loading:
+      status === FETCH_STATUS.LOADING ||
+      fleetApmPoliciesStatus === FETCH_STATUS.LOADING,
   });
 
-  const shouldBypassNoDataScreen = bypassNoDataScreenPaths.some((path) =>
-    location.pathname.includes(path)
-  );
-
   const rightSideItems = environmentFilter ? [<ApmEnvironmentFilter />] : [];
 
   const pageTemplate = (

diff --git a/x-pack/plugins/apm/public/components/routing/templates/no_data_config.ts b/x-pack/plugins/apm/public/components/routing/templates/no_data_config.ts
@@ -10,35 +10,54 @@ import { KibanaPageTemplateProps } from '../../../../../../../src/plugins/kibana
 
 export function getNoDataConfig({
   docsLink,
+  shouldBypassNoDataScreen,
+  loading,
   basePath,
-  hasData,
+  hasApmData,
+  hasApmIntegrations,
 }: {
   docsLink: string;
+  shouldBypassNoDataScreen: boolean;
+  loading: boolean;
   basePath?: string;
-  hasData?: boolean;
+  hasApmData?: boolean;
+  hasApmIntegrations?: boolean;
 }): KibanaPageTemplateProps['noDataConfig'] {
-  // Returns no data config when there is no historical data
-  if (hasData === false) {
-    return {
-      solution: i18n.translate('xpack.apm.noDataConfig.solutionName', {
-        defaultMessage: 'Observability',
-      }),
-      actions: {
-        elasticAgent: {
-          title: i18n.translate('xpack.apm.ux.overview.agent.title', {
+  // don't show "no data screen" when there is APM data or it should be bypassed
+  if (hasApmData || shouldBypassNoDataScreen || loading) {
+    return;
+  }
+  const noDataConfigDetails = hasApmIntegrations
+    ? {
+        title: i18n.translate('xpack.apm.noDataConfig.addDataButtonLabel', {
+          defaultMessage: 'Add data',
+        }),
+        href: `${basePath}/app/home#/tutorial/apm`,
+      }
+    : {
+        title: i18n.translate(
+          'xpack.apm.noDataConfig.addApmIntegrationButtonLabel',
+          {
             defaultMessage: 'Add the APM integration',
-          }),
-          description: i18n.translate(
-            'xpack.apm.ux.overview.agent.description',
-            {
-              defaultMessage:
-                'Use APM agents to collect APM data. We make it easy with agents for many popular languages.',
-            }
-          ),
-          href: `${basePath}/app/home#/tutorial/apm`,
-        },
+          }
+        ),
+        href: `${basePath}/app/integrations/detail/apm/overview`,
+      };
+
+  return {
+    solution: i18n.translate('xpack.apm.noDataConfig.solutionName', {
+      defaultMessage: 'Observability',
+    }),
+    actions: {
+      elasticAgent: {
+        title: noDataConfigDetails.title,
+        description: i18n.translate('xpack.apm.ux.overview.agent.description', {
+          defaultMessage:
+            'Use APM agents to collect APM data. We make it easy with agents for many popular languages.',
+        }),
+        href: noDataConfigDetails.href,
       },
-      docsLink,
-    };
-  }
+    },
+    docsLink,
+  };
 }
diff --git a/x-pack/plugins/apm/public/tutorial/tutorial_apm_fleet_check.ts b/x-pack/plugins/apm/public/tutorial/tutorial_apm_fleet_check.ts
@@ -8,13 +8,13 @@ import { callApmApi } from '../services/rest/create_call_apm_api';
 
 export async function hasFleetApmIntegrations() {
   try {
-    const { hasData = false } = await callApmApi(
-      'GET /internal/apm/fleet/has_data',
+    const { hasApmPolicies = false } = await callApmApi(
+      'GET /internal/apm/fleet/has_apm_policies',
       {
         signal: null,
       }
     );
-    return hasData;
+    return hasApmPolicies;
   } catch (e) {
     console.error('Something went wrong while fetching apm fleet data', e);
     return false;

diff --git a/x-pack/plugins/apm/server/routes/fleet/route.ts b/x-pack/plugins/apm/server/routes/fleet/route.ts
@@ -27,18 +27,18 @@ import { setupRequest } from '../../lib/helpers/setup_request';
 import { createApmServerRoute } from '../apm_routes/create_apm_server_route';
 
 const hasFleetDataRoute = createApmServerRoute({
-  endpoint: 'GET /internal/apm/fleet/has_data',
+  endpoint: 'GET /internal/apm/fleet/has_apm_policies',
   options: { tags: [] },
-  handler: async ({ core, plugins }): Promise<{ hasData: boolean }> => {
+  handler: async ({ core, plugins }): Promise<{ hasApmPolicies: boolean }> => {
     const fleetPluginStart = await plugins.fleet?.start();
     if (!fleetPluginStart) {
-      return { hasData: false };
+      return { hasApmPolicies: false };
     }
     const packagePolicies = await getApmPackgePolicies({
       core,
       fleetPluginStart,
     });
-    return { hasData: packagePolicies.total > 0 };
+    return { hasApmPolicies: packagePolicies.total > 0 };
   },
 });