From 21d3fc4b6ec32033fee3ed4cd9dafb37ba51eaf7 Mon Sep 17 00:00:00 2001
From: jennypavlova <dzheni.pavlova@elastic.co>
Date: Wed, 13 Sep 2023 11:33:28 +0200
Subject: [PATCH] [Infra UI] Update Processes tooltips (#166251)

Closes [#165822](https://github.com/elastic/kibana/issues/165822)
## Summary

This PR moves the explanation tooltip to the top processes title and
changes the explanation text:


![image](https://github.com/elastic/kibana/assets/14139027/86e65860-f215-44f5-aa25-032b0e456853)

## Testing
1. Go to hosts view, open the hosts flyout and go to the processes tab -
the new tooltip should be visible (using the Top processes icon to open
it)
2. Go to the asset details page and do the same steps:



https://github.com/elastic/kibana/assets/14139027/e7a1019b-5ea1-42c0-bcb8-5bca39d3141b
---
 .../components/processes_explanation.tsx      | 111 +++---------------
 .../components/top_processes_tooltip.tsx      |  78 ++++++++++++
 .../tabs/processes/processes.tsx              |  20 +---
 3 files changed, 99 insertions(+), 110 deletions(-)
 create mode 100644 x-pack/plugins/infra/public/components/asset_details/components/top_processes_tooltip.tsx

diff --git a/x-pack/plugins/infra/public/components/asset_details/components/processes_explanation.tsx b/x-pack/plugins/infra/public/components/asset_details/components/processes_explanation.tsx
index 2cf339c2e36d8..5d3f181a85ac1 100644
--- a/x-pack/plugins/infra/public/components/asset_details/components/processes_explanation.tsx
+++ b/x-pack/plugins/infra/public/components/asset_details/components/processes_explanation.tsx
@@ -6,105 +6,32 @@
  */
 
 import React from 'react';
-import { EuiText, EuiLink } from '@elastic/eui';
+import { EuiText } from '@elastic/eui';
 import { FormattedDate, FormattedMessage, FormattedTime } from '@kbn/i18n-react';
-import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { useDateRangeProviderContext } from '../hooks/use_date_range';
-import { Popover } from '../tabs/common/popover';
-
-const DOCUMENTATION_LINK =
-  'https://www.elastic.co/guide/en/observability/current/view-infrastructure-metrics.html';
-const SYSTEM_INTEGRATION_DOCS_LINK = 'https://docs.elastic.co/en/integrations/system';
-
-const ProcessesExplanationTooltipContent = React.memo(() => {
-  const onClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-    e.stopPropagation();
-  };
-
-  return (
-    <EuiText size="xs" onClick={onClick} style={{ width: 300 }}>
-      <p>
-        <FormattedMessage
-          id="xpack.infra.assetDetails.processes.tooltip.explanationLabel"
-          defaultMessage="The processes listed are based on an aggregation of the top CPU and the top memory consuming processes for the 1 minute preceding the end date of the selected time period. The number of top processes is configurable in the {systemIntegration}."
-          values={{
-            systemIntegration: (
-              <EuiLink
-                data-test-subj="infraAssetDetailsTooltipSystemIntegrationDocumentationLink"
-                href={SYSTEM_INTEGRATION_DOCS_LINK}
-                target="_blank"
-              >
-                <FormattedMessage
-                  id="xpack.infra.assetDetails.processes.tooltip.systemIntegrationDocumentationLink"
-                  defaultMessage="System Integration"
-                />
-              </EuiLink>
-            ),
-          }}
-        />
-      </p>
-      <p>
-        <FormattedMessage
-          id="xpack.infra.assetDetails.processes.tooltip.documentationLabel"
-          defaultMessage="Please see the following {documentation} for more details on processes."
-          values={{
-            documentation: (
-              <EuiLink
-                data-test-subj="infraAssetDetailsTooltipDocumentationLink"
-                href={DOCUMENTATION_LINK}
-                target="_blank"
-              >
-                <FormattedMessage
-                  id="xpack.infra.assetDetails.processes.tooltip.documentationLink"
-                  defaultMessage="documentation"
-                />
-              </EuiLink>
-            ),
-          }}
-        />
-      </p>
-    </EuiText>
-  );
-});
 
 export const ProcessesExplanationMessage = () => {
   const { getDateRangeInTimestamp } = useDateRangeProviderContext();
   const dateFromRange = new Date(getDateRangeInTimestamp().to);
 
   return (
-    <EuiFlexGroup gutterSize="xs" alignItems="baseline">
-      <EuiFlexItem grow={false}>
-        <EuiText size="xs" color="subdued">
-          <FormattedMessage
-            id="xpack.infra.assetDetails.overview.processesSectionTitle"
-            defaultMessage="Showing process data collected for the 1 minute preceding {date} @ {time}"
-            values={{
-              date: (
-                <FormattedDate value={dateFromRange} month="short" day="numeric" year="numeric" />
-              ),
-              time: (
-                <FormattedTime
-                  value={dateFromRange}
-                  hour12={false}
-                  hour="2-digit"
-                  minute="2-digit"
-                  second="2-digit"
-                />
-              ),
-            }}
-          />
-        </EuiText>
-      </EuiFlexItem>
-      <EuiFlexItem grow={false}>
-        <Popover
-          iconSize="s"
-          iconColor="subdued"
-          icon="iInCircle"
-          data-test-subj="infraAssetDetailsProcessesPopoverButton"
-        >
-          <ProcessesExplanationTooltipContent />
-        </Popover>
-      </EuiFlexItem>
-    </EuiFlexGroup>
+    <EuiText size="xs" color="subdued">
+      <FormattedMessage
+        id="xpack.infra.assetDetails.overview.processesSectionTitle"
+        defaultMessage="Showing process data collected for the 1 minute preceding {date} @ {time}"
+        values={{
+          date: <FormattedDate value={dateFromRange} month="short" day="numeric" year="numeric" />,
+          time: (
+            <FormattedTime
+              value={dateFromRange}
+              hour12={false}
+              hour="2-digit"
+              minute="2-digit"
+              second="2-digit"
+            />
+          ),
+        }}
+      />
+    </EuiText>
   );
 };
diff --git a/x-pack/plugins/infra/public/components/asset_details/components/top_processes_tooltip.tsx b/x-pack/plugins/infra/public/components/asset_details/components/top_processes_tooltip.tsx
new file mode 100644
index 0000000000000..15ca71c79ef52
--- /dev/null
+++ b/x-pack/plugins/infra/public/components/asset_details/components/top_processes_tooltip.tsx
@@ -0,0 +1,78 @@
+/*
+ * 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 from 'react';
+import { i18n } from '@kbn/i18n';
+import { EuiText, EuiLink } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n-react';
+import { Popover } from '../tabs/common/popover';
+
+const DOCUMENTATION_LINK =
+  'https://www.elastic.co/guide/en/observability/current/view-infrastructure-metrics.html';
+const SYSTEM_INTEGRATION_DOCS_LINK = 'https://docs.elastic.co/en/integrations/system';
+
+export const TopProcessesTooltip = React.memo(() => {
+  return (
+    <Popover
+      aria-label={i18n.translate('xpack.infra.metrics.nodeDetails.processesHeader.tooltipLabel', {
+        defaultMessage: 'More info',
+      })}
+      iconSize="m"
+      icon="iInCircle"
+      data-test-subj="infraAssetDetailsProcessesPopoverButton"
+    >
+      <EuiText size="xs" style={{ width: 300 }}>
+        <p>
+          <FormattedMessage
+            id="xpack.infra.assetDetails.processes.tooltip.topProcesses"
+            defaultMessage="The processes listed are based on an aggregation of the top CPU and the top memory consuming processes. It does not show all processes."
+          />
+        </p>
+        <p>
+          <FormattedMessage
+            id="xpack.infra.assetDetails.processes.tooltip.label"
+            defaultMessage="The number of top processes is configurable in the {systemIntegration}."
+            values={{
+              systemIntegration: (
+                <EuiLink
+                  data-test-subj="infraAssetDetailsTooltipSystemIntegrationDocumentationLink"
+                  href={SYSTEM_INTEGRATION_DOCS_LINK}
+                  target="_blank"
+                >
+                  <FormattedMessage
+                    id="xpack.infra.assetDetails.processes.tooltip.systemIntegrationDocumentationLink"
+                    defaultMessage="System Integration"
+                  />
+                </EuiLink>
+              ),
+            }}
+          />
+        </p>
+        <p>
+          <FormattedMessage
+            id="xpack.infra.assetDetails.processes.tooltip.documentationLabel"
+            defaultMessage="Please see the following {documentation} for more details on processes."
+            values={{
+              documentation: (
+                <EuiLink
+                  data-test-subj="infraAssetDetailsTooltipDocumentationLink"
+                  href={DOCUMENTATION_LINK}
+                  target="_blank"
+                >
+                  <FormattedMessage
+                    id="xpack.infra.assetDetails.processes.tooltip.documentationLink"
+                    defaultMessage="documentation"
+                  />
+                </EuiLink>
+              ),
+            }}
+          />
+        </p>
+      </EuiText>
+    </Popover>
+  );
+});
diff --git a/x-pack/plugins/infra/public/components/asset_details/tabs/processes/processes.tsx b/x-pack/plugins/infra/public/components/asset_details/tabs/processes/processes.tsx
index fc4448d7f067c..52bad6238c103 100644
--- a/x-pack/plugins/infra/public/components/asset_details/tabs/processes/processes.tsx
+++ b/x-pack/plugins/infra/public/components/asset_details/tabs/processes/processes.tsx
@@ -12,7 +12,6 @@ import {
   EuiSearchBar,
   EuiEmptyPrompt,
   EuiButton,
-  EuiIconTip,
   EuiTitle,
   Query,
   EuiFlexGroup,
@@ -34,6 +33,7 @@ import { useAssetDetailsRenderPropsContext } from '../../hooks/use_asset_details
 import { useDateRangeProviderContext } from '../../hooks/use_date_range';
 import { ProcessesExplanationMessage } from '../../components/processes_explanation';
 import { useAssetDetailsUrlState } from '../../hooks/use_asset_details_url_state';
+import { TopProcessesTooltip } from '../../components/top_processes_tooltip';
 
 const options = Object.entries(STATE_NAMES).map(([value, view]: [string, string]) => ({
   value,
@@ -119,23 +119,7 @@ export const Processes = () => {
               </EuiTitle>
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
-              <EuiIconTip
-                aria-label={i18n.translate(
-                  'xpack.infra.metrics.nodeDetails.processesHeader.tooltipLabel',
-                  {
-                    defaultMessage: 'More info',
-                  }
-                )}
-                size="m"
-                type="iInCircle"
-                content={i18n.translate(
-                  'xpack.infra.metrics.nodeDetails.processesHeader.tooltipBody',
-                  {
-                    defaultMessage:
-                      'The table below aggregates the top CPU and top memory consuming processes. It does not display all processes.',
-                  }
-                )}
-              />
+              <TopProcessesTooltip />
             </EuiFlexItem>
           </EuiFlexGroup>
         </EuiFlexItem>