[8.12] [ObsUX][Profiling, Infra] Add educational banners and tooltips (#174089) (#174881)

# Backport

This will backport the following commits from `main` to `8.12`:
- [[ObsUX][Profiling, Infra] Add educational banners and tooltips
(#174089)](https://github.com/elastic/kibana/pull/174089)

<!--- Backport version: 8.9.8 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Mykola
Harmash","email":"mykola.harmash@gmail.com"},"sourceCommit":{"committedDate":"2024-01-04T14:46:20Z","message":"[ObsUX][Profiling,
Infra] Add educational banners and tooltips (#174089)\n\nCloses
https://github.com/elastic/kibana/issues/173269\r\n\r\n##
Summary\r\n\r\nAdds educational banners and tooltips to the Profiling
tab in
Infra.\r\n\r\n\r\nf5a19fd1-4900-4f35-aa8c-f35230238fe4\r\n\r\n##
How to test\r\n\r\n1. Refer to docs to setup
profiling\r\n[locally](https://github.com/elastic/observability-dev/blob/main/docs/profiling/on_prem.md#setting-profiling-on-prem)\r\nor
[connected to
oblt\r\ncluster](https://github.com/elastic/observability-dev/blob/main/docs/profiling/cloud.md#setting-up-local-kibana-to-oblt-clusters)\r\n2.
Open one of the hosts and make sure that you see the new banner
and\r\ntooltips in the tabs.\r\n3. Make sure the banner is dismissible
and it's state is preserved when\r\nyou refresh the
page\r\n\r\n---------\r\n\r\nCo-authored-by: Mike Birnstiehl
<114418652+mdbirnstiehl@users.noreply.github.com>\r\nCo-authored-by:
Kibana Machine
<42973632+kibanamachine@users.noreply.github.com>","sha":"488edebdb2a5ae091fc67ccd2b42e967be626a7d","branchLabelMapping":{"^v8.13.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","backport
missing","v8.12.0","Team:obs-ux-infra_services","Team:obs-ux-management","v8.13.0"],"number":174089,"url":"https://github.com/elastic/kibana/pull/174089","mergeCommit":{"message":"[ObsUX][Profiling,
Infra] Add educational banners and tooltips (#174089)\n\nCloses
https://github.com/elastic/kibana/issues/173269\r\n\r\n##
Summary\r\n\r\nAdds educational banners and tooltips to the Profiling
tab in
Infra.\r\n\r\n\r\nf5a19fd1-4900-4f35-aa8c-f35230238fe4\r\n\r\n##
How to test\r\n\r\n1. Refer to docs to setup
profiling\r\n[locally](https://github.com/elastic/observability-dev/blob/main/docs/profiling/on_prem.md#setting-profiling-on-prem)\r\nor
[connected to
oblt\r\ncluster](https://github.com/elastic/observability-dev/blob/main/docs/profiling/cloud.md#setting-up-local-kibana-to-oblt-clusters)\r\n2.
Open one of the hosts and make sure that you see the new banner
and\r\ntooltips in the tabs.\r\n3. Make sure the banner is dismissible
and it's state is preserved when\r\nyou refresh the
page\r\n\r\n---------\r\n\r\nCo-authored-by: Mike Birnstiehl
<114418652+mdbirnstiehl@users.noreply.github.com>\r\nCo-authored-by:
Kibana Machine
<42973632+kibanamachine@users.noreply.github.com>","sha":"488edebdb2a5ae091fc67ccd2b42e967be626a7d"}},"sourceBranch":"main","suggestedTargetBranches":["8.12"],"targetPullRequestStates":[{"branch":"8.12","label":"v8.12.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.13.0","labelRegex":"^v8.13.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/174089","number":174089,"mergeCommit":{"message":"[ObsUX][Profiling,
Infra] Add educational banners and tooltips (#174089)\n\nCloses
https://github.com/elastic/kibana/issues/173269\r\n\r\n##
Summary\r\n\r\nAdds educational banners and tooltips to the Profiling
tab in
Infra.\r\n\r\n\r\nf5a19fd1-4900-4f35-aa8c-f35230238fe4\r\n\r\n##
How to test\r\n\r\n1. Refer to docs to setup
profiling\r\n[locally](https://github.com/elastic/observability-dev/blob/main/docs/profiling/on_prem.md#setting-profiling-on-prem)\r\nor
[connected to
oblt\r\ncluster](https://github.com/elastic/observability-dev/blob/main/docs/profiling/cloud.md#setting-up-local-kibana-to-oblt-clusters)\r\n2.
Open one of the hosts and make sure that you see the new banner
and\r\ntooltips in the tabs.\r\n3. Make sure the banner is dismissible
and it's state is preserved when\r\nyou refresh the
page\r\n\r\n---------\r\n\r\nCo-authored-by: Mike Birnstiehl
<114418652+mdbirnstiehl@users.noreply.github.com>\r\nCo-authored-by:
Kibana Machine
<42973632+kibanamachine@users.noreply.github.com>","sha":"488edebdb2a5ae091fc67ccd2b42e967be626a7d"}}]}]
BACKPORT-->

x-pack/plugins/infra/public/components/asset_details/tabs/overview/kpis/cpu_profiling_prompt.tsx

@@ -30,7 +30,7 @@ export function CpuProfilingPrompt() {
     >
       <NewBadge />
       <EuiFlexGroup alignItems="baseline" justifyContent="flexStart" gutterSize="xs">
-        {i18n.translate('xpack.infra.cpuProfilingPrompt.p.viewCPUBreakdownUsingLabel', {
+        {i18n.translate('xpack.infra.cpuProfilingPrompt.promptText', {
           defaultMessage: 'View CPU Breakdown using',
         })}
         <EuiButtonEmpty
@@ -38,7 +38,7 @@ export function CpuProfilingPrompt() {
           onClick={() => showTab('profiling')}
           flush="both"
         >
-          {i18n.translate('xpack.infra.cpuProfilingPrompt.profilingButtonEmptyLabel', {
+          {i18n.translate('xpack.infra.cpuProfilingPrompt.profilingLinkLabel', {
             defaultMessage: 'Profiling',
           })}
         </EuiButtonEmpty>

x-pack/plugins/infra/public/components/asset_details/tabs/overview/kpis/kpi_grid.tsx

@@ -13,7 +13,6 @@ import { findInventoryModel } from '@kbn/metrics-data-access-plugin/common';
 import useAsync from 'react-use/lib/useAsync';
 import { KPI_CHART_HEIGHT } from '../../../../../common/visualizations';
 import { Kpi } from './kpi';
-import { CpuProfilingPrompt } from './cpu_profiling_prompt';
 
 interface Props {
   dataView?: DataView;
@@ -49,7 +48,6 @@ export const KPIGrid = ({ assetName, dataView, dateRange }: Props) => {
             assetName={assetName}
             height={KPI_CHART_HEIGHT}
           />
-          {chartProps.id === 'cpuUsage' && <CpuProfilingPrompt />}
         </EuiFlexItem>
       ))}
     </EuiFlexGroup>

x-pack/plugins/infra/public/components/asset_details/tabs/overview/overview.tsx

@@ -21,6 +21,7 @@ import { useDatePickerContext } from '../../hooks/use_date_picker';
 import { SectionSeparator } from './section_separator';
 import { MetadataErrorCallout } from '../../components/metadata_error_callout';
 import { useIntersectingState } from '../../hooks/use_intersecting_state';
+import { CpuProfilingPrompt } from './kpis/cpu_profiling_prompt';
 
 export const Overview = () => {
   const ref = useRef<HTMLDivElement>(null);
@@ -63,6 +64,7 @@ export const Overview = () => {
     <EuiFlexGroup direction="column" gutterSize="m" ref={ref}>
       <EuiFlexItem grow={false}>
         <KPIGrid assetName={asset.name} dateRange={state.dateRange} dataView={metrics.dataView} />
+        <CpuProfilingPrompt />
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
         {fetchMetadataError && !metadataLoading ? <MetadataErrorCallout /> : metadataSummarySection}

x-pack/plugins/infra/public/components/asset_details/tabs/profiling/description_callout.tsx

@@ -0,0 +1,60 @@
+/*
+ * 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 React, { useCallback } from 'react';
+import { i18n } from '@kbn/i18n';
+import { EuiButton, EuiCallOut, EuiFlexGroup, EuiLink, EuiSpacer, EuiText } from '@elastic/eui';
+import useLocalStorage from 'react-use/lib/useLocalStorage';
+
+const LOCAL_STORAGE_KEY = 'infra-profiling-description-callout-dismissed';
+
+export function DescriptionCallout() {
+  const [isDismissed, setIsDismissed] = useLocalStorage(LOCAL_STORAGE_KEY, false);
+
+  const onDismissClick = useCallback(() => setIsDismissed(true), [setIsDismissed]);
+
+  if (isDismissed) {
+    return null;
+  }
+
+  return (
+    <>
+      <EuiCallOut
+        title={i18n.translate('xpack.infra.profiling.descriptionCallout.title', {
+          defaultMessage: 'Displaying Resource Consumption for this Host',
+        })}
+        iconType="iInCircle"
+      >
+        <EuiText>
+          {i18n.translate('xpack.infra.profiling.descriptionCallout.body', {
+            defaultMessage:
+              'Universal Profiling helps you optimize resource usage and find performance bottlenecks by showing which lines of code are consuming resources on your host, down to the application code, kernel, and third-party libraries.',
+          })}
+        </EuiText>
+        <EuiSpacer />
+        <EuiFlexGroup alignItems="center">
+          <EuiLink
+            data-test-subj="infraProfilingDescriptionCalloutLearnMoreLink"
+            href="https://www.elastic.co/guide/en/observability/current/profiling-get-started.html"
+            external
+            target="_blank"
+          >
+            {i18n.translate('xpack.infra.profiling.descriptionCallout.learnMore', {
+              defaultMessage: 'Learn more',
+            })}
+          </EuiLink>
+          <EuiButton data-test-subj="infraDescriptionCalloutDismissButton" onClick={onDismissClick}>
+            {i18n.translate('xpack.infra.profiling.descriptionCallout.dismiss', {
+              defaultMessage: 'Dismiss',
+            })}
+          </EuiButton>
+        </EuiFlexGroup>
+      </EuiCallOut>
+      <EuiSpacer />
+    </>
+  );
+}

x-pack/plugins/infra/public/components/asset_details/tabs/profiling/profiling.tsx

@@ -6,11 +6,13 @@
  */
 import { i18n } from '@kbn/i18n';
 
-import { EuiSpacer, EuiTabbedContent, type EuiTabbedContentProps } from '@elastic/eui';
+import { EuiLink, EuiSpacer, EuiTabbedContent, type EuiTabbedContentProps } from '@elastic/eui';
 import React from 'react';
 import { ProfilingEmptyState } from '@kbn/observability-shared-plugin/public';
 import { EuiLoadingSpinner } from '@elastic/eui';
 import { css } from '@emotion/react';
+import { EuiText } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n-react';
 import { Flamegraph } from './flamegraph';
 import { Functions } from './functions';
 import { DatePicker } from '../../date_picker/date_picker';
@@ -18,6 +20,8 @@ import { useProfilingStatusData } from '../../hooks/use_profiling_status_data';
 import { useTabSwitcherContext } from '../../hooks/use_tab_switcher';
 import { ContentTabIds } from '../../types';
 import { ErrorPrompt } from './error_prompt';
+import { DescriptionCallout } from './description_callout';
+import { Popover } from '../common/popover';
 
 export function Profiling() {
   const { activeTabId } = useTabSwitcherContext();
@@ -37,6 +41,30 @@ export function Profiling() {
           <Flamegraph />
         </>
       ),
+      append: (
+        <Popover iconSize="s" iconColor="subdued" icon="questionInCircle">
+          <EuiText size="xs">
+            <FormattedMessage
+              id="xpack.infra.profiling.flamegraphInfoPopoverBody"
+              defaultMessage="See a visual representation of the functions that consume the most resources. Each rectangle represents a function. The rectangle width represents the time spent in the function, and the number of stacked rectangles represents the number of functions called to reach the current function. {learnMoreLink}"
+              values={{
+                learnMoreLink: (
+                  <EuiLink
+                    data-test-subj="infraProfilingFlamegraphTabLearnMoreLink"
+                    href="https://www.elastic.co/guide/en/observability/current/universal-profiling.html#profiling-flamegraphs-intro"
+                    external
+                    target="_blank"
+                  >
+                    {i18n.translate('xpack.infra.profiling.flamegraphTabLearnMoreLink', {
+                      defaultMessage: 'Learn more',
+                    })}
+                  </EuiLink>
+                ),
+              }}
+            />
+          </EuiText>
+        </Popover>
+      ),
     },
     {
       id: 'functions',
@@ -49,6 +77,30 @@ export function Profiling() {
           <Functions />
         </>
       ),
+      append: (
+        <Popover iconSize="s" iconColor="subdued" icon="questionInCircle">
+          <EuiText size="xs">
+            <FormattedMessage
+              id="xpack.infra.profiling.functionsInfoPopoverBody"
+              defaultMessage="Identify the most expensive lines of code on your host by looking at the most frequently sampled functions, broken down by CPU time, annualized CO2, and annualized cost estimates. {learnMoreLink}"
+              values={{
+                learnMoreLink: (
+                  <EuiLink
+                    data-test-subj="infraProfilingFunctionsTabLearnMoreLink"
+                    href="https://www.elastic.co/guide/en/observability/current/universal-profiling.html#profiling-functions-intro"
+                    external
+                    target="_blank"
+                  >
+                    {i18n.translate('xpack.infra.profiling.functionsTabLearnMoreLink', {
+                      defaultMessage: 'Learn more',
+                    })}
+                  </EuiLink>
+                ),
+              }}
+            />
+          </EuiText>
+        </Popover>
+      ),
     },
   ];
 
@@ -76,6 +128,7 @@ export function Profiling() {
       ) : (
         <>
           <DatePicker />
+          <DescriptionCallout />
           <EuiTabbedContent tabs={tabs} initialSelectedTab={tabs[0]} />
         </>
       )}

x-pack/plugins/infra/public/components/asset_details/tabs/profiling/profiling_links.tsx

@@ -45,7 +45,7 @@ export function ProfilingLinks({
       <EuiFlexItem grow={false}>
         <EuiLink data-test-subj="infraFlamegraphTestLink" href={PROFILING_FEEDBACK_URL} external>
           {i18n.translate('xpack.infra.flamegraph.profilingFeedbackLink', {
-            defaultMessage: 'Give feedback about profiling',
+            defaultMessage: 'Give feedback',
           })}
         </EuiLink>
       </EuiFlexItem>

x-pack/plugins/observability/server/ui_settings.ts

@@ -246,11 +246,7 @@ export const uiSettings: Record<string, UiSettings> = {
     description: i18n.translate(
       'xpack.observability.enableInfrastructureProfilingIntegrationDescription',
       {
-        defaultMessage:
+        defaultMessage: 'Enable Universal Profiling integration in the Infrastructure app.',
-          '{betaLabel} Enable Universal Profiling integration in the Infrastructure app.',
-        values: {
-          betaLabel: `<em>[${betaLabel}]</em>`,
-        },
       }
     ),
     schema: schema.boolean(),