[APM] Show Profiling data explanation callout (elastic#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">
michaelolo24 · Oct 4, 2023 · f377164 · f377164
1 parent ede81cf
commit f377164
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 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
@@ -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
@@ -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"
+      />
+    </>
   );
 }