From f37716494894cfb4813f9cbefec12ea53f33d7ff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cau=C3=AA=20Marcondes?=
 <55978943+cauemarcondes@users.noreply.github.com>
Date: Wed, 4 Oct 2023 12:11:00 +0100
Subject: [PATCH] [APM] Show Profiling data explanation callout (#167968)

We want to make it clear to users that the Profiling data shown in the
APM UI are filtered by host.names.

<img width="1527" alt="Screenshot 2023-10-04 at 10 55 48"
src="https://github.com/elastic/kibana/assets/55978943/32d9d049-72f6-4add-9824-bb6357374096">
---
 .../host_names_filter_warning.tsx             |  3 +-
 .../app/profiling_overview/index.tsx          | 81 +++++++++++++++++--
 2 files changed, 75 insertions(+), 9 deletions(-)

diff --git a/x-pack/plugins/apm/public/components/app/profiling_overview/host_names_filter_warning.tsx b/x-pack/plugins/apm/public/components/app/profiling_overview/host_names_filter_warning.tsx
index 6e6fa196a986e..4d72591f5b871 100644
--- a/x-pack/plugins/apm/public/components/app/profiling_overview/host_names_filter_warning.tsx
+++ b/x-pack/plugins/apm/public/components/app/profiling_overview/host_names_filter_warning.tsx
@@ -34,7 +34,8 @@ export function HostnamesFilterWarning({ hostNames = [] }: Props) {
       <EuiFlexItem grow={false}>
         <EuiText size="xs" color="subdued">
           {i18n.translate('xpack.apm.profiling.flamegraph.filteredLabel', {
-            defaultMessage: 'Displaying items from specific host names',
+            defaultMessage:
+              "Displaying profiling insights from the service's host(s)",
           })}
         </EuiText>
       </EuiFlexItem>
diff --git a/x-pack/plugins/apm/public/components/app/profiling_overview/index.tsx b/x-pack/plugins/apm/public/components/app/profiling_overview/index.tsx
index 8cafb3e2beb17..6c6bd7a356d78 100644
--- a/x-pack/plugins/apm/public/components/app/profiling_overview/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/profiling_overview/index.tsx
@@ -6,21 +6,30 @@
  */
 
 import {
+  EuiButton,
+  EuiCallOut,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiLink,
   EuiSpacer,
   EuiTabbedContent,
   EuiTabbedContentProps,
 } from '@elastic/eui';
-import React, { useMemo } from 'react';
 import { i18n } from '@kbn/i18n';
+import { useKibana } from '@kbn/kibana-react-plugin/public';
+import React, { useMemo } from 'react';
+import { ApmDocumentType } from '../../../../common/document_type';
 import { useApmParams } from '../../../hooks/use_apm_params';
+import { useLocalStorage } from '../../../hooks/use_local_storage';
+import { usePreferredDataSourceAndBucketSize } from '../../../hooks/use_preferred_data_source_and_bucket_size';
 import { useProfilingPlugin } from '../../../hooks/use_profiling_plugin';
 import { useTimeRange } from '../../../hooks/use_time_range';
+import { ApmPluginStartDeps } from '../../../plugin';
 import { ProfilingFlamegraph } from './profiling_flamegraph';
 import { ProfilingTopNFunctions } from './profiling_top_functions';
-import { usePreferredDataSourceAndBucketSize } from '../../../hooks/use_preferred_data_source_and_bucket_size';
-import { ApmDocumentType } from '../../../../common/document_type';
 
 export function ProfilingOverview() {
+  const { services } = useKibana<ApmPluginStartDeps>();
   const {
     path: { serviceName },
     query: { rangeFrom, rangeTo, environment, kuery },
@@ -34,6 +43,13 @@ export function ProfilingOverview() {
     type: ApmDocumentType.TransactionMetric,
     numBuckets: 20,
   });
+  const [
+    apmUniversalProfilingShowCallout,
+    setAPMUniversalProfilingShowCallout,
+  ] = useLocalStorage('apmUniversalProfilingShowCallout', true);
+
+  const baseUrl =
+    services.docLinks?.ELASTIC_WEBSITE_URL || 'https://www.elastic.co/';
 
   const tabs = useMemo((): EuiTabbedContentProps['tabs'] => {
     return [
@@ -83,10 +99,59 @@ export function ProfilingOverview() {
   }
 
   return (
-    <EuiTabbedContent
-      tabs={tabs}
-      initialSelectedTab={tabs[0]}
-      autoFocus="selected"
-    />
+    <>
+      {apmUniversalProfilingShowCallout && (
+        <>
+          <EuiCallOut
+            title={i18n.translate('xpack.apm.profiling.callout.title', {
+              defaultMessage:
+                'Displaying profiling insights from the host(s) running {serviceName} services',
+              values: { serviceName },
+            })}
+            color="primary"
+            iconType="iInCircle"
+          >
+            <p>
+              {i18n.translate('xpack.apm.profiling.callout.description', {
+                defaultMessage:
+                  'Universal Profiling provides unprecedented code visibility into the runtime behaviour of all applications. It profiles every line of code on the host(s) running your services, including not only your application code but also the kernel and third-party libraries.',
+              })}
+            </p>
+            <EuiFlexGroup direction="row">
+              <EuiFlexItem grow={false} style={{ justifyContent: 'center' }}>
+                <EuiLink
+                  href={`${baseUrl}observability/universal-profiling`}
+                  target="_blank"
+                  data-test-subj="apmProfilingOverviewLearnMoreLink"
+                >
+                  {i18n.translate('xpack.apm.profiling.callout.learnMore', {
+                    defaultMessage: 'Learn more',
+                  })}
+                </EuiLink>
+              </EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                <EuiButton
+                  data-test-subj="apmProfilingOverviewLinkButtonButton"
+                  color="primary"
+                  onClick={() => {
+                    setAPMUniversalProfilingShowCallout(false);
+                  }}
+                >
+                  {i18n.translate('xpack.apm.profiling.callout.dismiss', {
+                    defaultMessage: 'Dismiss',
+                  })}
+                </EuiButton>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiCallOut>
+          <EuiSpacer />
+        </>
+      )}
+      <EuiTabbedContent
+        tabs={tabs}
+        initialSelectedTab={tabs[0]}
+        autoFocus="selected"
+      />
+    </>
   );
 }