[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)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)
2025-04-24 17:59:23 -04:00 · 2024-01-16 11:19:50 +01:00 · 2024-01-16 11:19:50 +01:00 · 1472e49ae8
commit 1472e49ae8
parent ceb379d0fa
7 changed files with 120 additions and 11 deletions
--- a/x-pack/plugins/infra/public/components/asset_details/tabs/overview/kpis/cpu_profiling_prompt.tsx
+++ b/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>
--- a/x-pack/plugins/infra/public/components/asset_details/tabs/overview/kpis/kpi_grid.tsx
+++ b/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>
--- a/x-pack/plugins/infra/public/components/asset_details/tabs/overview/overview.tsx
+++ b/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}
--- a/x-pack/plugins/infra/public/components/asset_details/tabs/profiling/description_callout.tsx
+++ b/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 />
+    </>
+  );
+}
--- a/x-pack/plugins/infra/public/components/asset_details/tabs/profiling/profiling.tsx
+++ b/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]} />
        </>
      )}
--- a/x-pack/plugins/infra/public/components/asset_details/tabs/profiling/profiling_links.tsx
+++ b/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>
--- a/x-pack/plugins/observability/server/ui_settings.ts
+++ b/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:
-          '{betaLabel} Enable Universal Profiling integration in the Infrastructure app.',
-        values: {
-          betaLabel: `<em>[${betaLabel}]</em>`,
-        },
+        defaultMessage: 'Enable Universal Profiling integration in the Infrastructure app.',
      }
    ),
    schema: schema.boolean(),