[Infra UI] Add tooltips to Asset Details (#164858)

Closes #164594 ## Summary This PR adds tooltips to explain the time range used to collect process data and metadata. The tooltips will be shown inside the overview (metadata summary section) tab, metadata tab, and processes tab (both flyout and full page views). ## Fixes I saw that the icons showing different explanation/ docs links inside the overveiew tab are not consistent ( sometimes we have `questionInCircle` and sometimes `iInCircles`) - the designs are using `iInCircles` so I changed it everywhere: <img width="671" alt="icons" src="https://github.com/elastic/kibana/assets/14139027/edda271b-5030-4d83-9722-448fbae8cf8b"> ## Testing 1. Go to host view and open the flyout for any host. The new explanation and tooltips should be shown in: - Overview tab <img width="938" alt="overview" src="https://github.com/elastic/kibana/assets/14139027/ac4ae369-d825-4fba-8865-c9410de29c28"> - Metadata tab <img width="945" alt="metadata" src="https://github.com/elastic/kibana/assets/14139027/4d174bf3-3411-40a5-a208-eb5df2266c61"> - Processed tab <img width="937" alt="processes" src="https://github.com/elastic/kibana/assets/14139027/11d32c66-4a25-4fce-a95e-42698f2e1682"> 2. Click Open as page and check the same on the asset details page <img width="1653" alt="Screenshot 2023-08-28 at 11 28 47" src="https://github.com/elastic/kibana/assets/14139027/342d1565-bb51-4961-b8ac-8b8270c851ff"> <img width="1637" alt="Screenshot 2023-08-28 at 11 28 32" src="https://github.com/elastic/kibana/assets/14139027/63b66a12-d634-4ecc-83de-ad1e1b79334c"> <img width="1649" alt="Screenshot 2023-08-28 at 11 28 16" src="https://github.com/elastic/kibana/assets/14139027/59720bf3-88ad-44b1-8584-769b38d956ed"> --------- Co-authored-by: Kibana Machine <[email protected]>
elastic · Aug 30, 2023 · a511426 · a511426
1 parent cf16ebd
commit a511426
Show file tree

Hide file tree

Showing 12 changed files with 437 additions and 162 deletions.
diff --git a/x-pack/plugins/infra/common/http_api/metadata_api.ts b/x-pack/plugins/infra/common/http_api/metadata_api.ts
@@ -83,6 +83,14 @@ export const InfraMetadataInfoRT = rt.partial({
   cloud: InfraMetadataCloudRT,
   host: InfraMetadataHostRT,
   agent: InfraMetadataAgentRT,
+  '@timestamp': rt.string,
+});
+
+export const InfraMetadataInfoResponseRT = rt.partial({
+  cloud: InfraMetadataCloudRT,
+  host: InfraMetadataHostRT,
+  agent: InfraMetadataAgentRT,
+  timestamp: rt.string,
 });
 
 const InfraMetadataRequiredRT = rt.type({
@@ -92,7 +100,7 @@ const InfraMetadataRequiredRT = rt.type({
 });
 
 const InfraMetadataOptionalRT = rt.partial({
-  info: InfraMetadataInfoRT,
+  info: InfraMetadataInfoResponseRT,
 });
 
 export const InfraMetadataRT = rt.intersection([InfraMetadataRequiredRT, InfraMetadataOptionalRT]);

diff --git a/x-pack/plugins/infra/public/components/asset_details/components/metadata_explanation.tsx b/x-pack/plugins/infra/public/components/asset_details/components/metadata_explanation.tsx
@@ -0,0 +1,102 @@
+/*
+ * 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 { EuiText, EuiLink } from '@elastic/eui';
+import { FormattedDate, FormattedMessage, FormattedTime } from '@kbn/i18n-react';
+import { EuiFlexGroup, EuiFlexItem, EuiLoadingSpinner } from '@elastic/eui';
+import { Popover } from '../tabs/common/popover';
+import { useMetadataStateProviderContext } from '../hooks/use_metadata_state';
+
+const HOSTNAME_DOCS_LINK =
+  'https://www.elastic.co/guide/en/ecs/current/ecs-host.html#field-host-name';
+
+const MetadataExplanationTooltipContent = React.memo(() => {
+  const onClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+    e.stopPropagation();
+  };
+
+  return (
+    <EuiText size="s" onClick={onClick} style={{ width: 200 }}>
+      <FormattedMessage
+        id="xpack.infra.assetDetails.metadata.tooltip.documentationLabel"
+        defaultMessage="{metadata} is populated from the last event detected for this {hostName} for the selected date period."
+        values={{
+          metadata: (
+            <i>
+              <FormattedMessage
+                id="xpack.infra.assetDetails.metadata.tooltip.metadata"
+                defaultMessage="Metadata"
+              />
+            </i>
+          ),
+          hostName: (
+            <EuiLink
+              data-test-subj="infraAssetDetailsTooltipDocumentationLink"
+              href={HOSTNAME_DOCS_LINK}
+              target="_blank"
+            >
+              <FormattedMessage
+                id="xpack.infra.assetDetails.metadata.tooltip.documentationLink"
+                defaultMessage="host.name"
+              />
+            </EuiLink>
+          ),
+        }}
+      />
+    </EuiText>
+  );
+});
+
+export const MetadataExplanationMessage = () => {
+  const { metadata, loading } = useMetadataStateProviderContext();
+
+  return loading ? (
+    <EuiLoadingSpinner />
+  ) : metadata?.info?.timestamp ? (
+    <EuiFlexGroup gutterSize="xs" alignItems="baseline">
+      <EuiFlexItem grow={false}>
+        <EuiText size="xs" color="subdued">
+          <FormattedMessage
+            id="xpack.infra.assetDetails.metadata.tooltip.metadataSectionTitle"
+            defaultMessage="Showing metadata collected on {date} @ {time}"
+            values={{
+              date: (
+                <FormattedDate
+                  value={new Date(metadata?.info?.timestamp)}
+                  month="short"
+                  day="numeric"
+                  year="numeric"
+                />
+              ),
+              time: (
+                <FormattedTime
+                  value={new Date(metadata?.info?.timestamp)}
+                  hour12={false}
+                  hour="2-digit"
+                  minute="2-digit"
+                  second="2-digit"
+                />
+              ),
+            }}
+          />
+        </EuiText>
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <Popover
+          iconSize="s"
+          iconColor="subdued"
+          icon="iInCircle"
+          panelPaddingSize="m"
+          data-test-subj="infraAssetDetailsMetadataPopoverButton"
+        >
+          <MetadataExplanationTooltipContent />
+        </Popover>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  ) : null;
+};
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
@@ -0,0 +1,111 @@
+/*
+ * 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 { EuiText, EuiLink } 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="s" 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"
+          panelPaddingSize="m"
+          data-test-subj="infraAssetDetailsProcessesPopoverButton"
+        >
+          <ProcessesExplanationTooltipContent />
+        </Popover>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};
diff --git a/x-pack/plugins/infra/public/components/asset_details/tabs/common/popover.tsx b/x-pack/plugins/infra/public/components/asset_details/tabs/common/popover.tsx
@@ -5,28 +5,37 @@
  * 2.0.
  */
 
-import { EuiPopover, EuiIcon, IconType } from '@elastic/eui';
+import { PanelPaddingSize } from '@elastic/eui';
+import { EuiPopover, EuiIcon, type IconType, type IconColor, type IconSize } from '@elastic/eui';
 import { css } from '@emotion/react';
 import React from 'react';
 import { useBoolean } from '../../../../hooks/use_boolean';
 
 export const Popover = ({
   children,
   icon,
+  iconColor,
+  iconSize,
+  panelPaddingSize,
   ...props
 }: {
   children: React.ReactNode;
   icon: IconType;
+  iconColor?: IconColor;
+  iconSize?: IconSize;
+  panelPaddingSize?: PanelPaddingSize;
   'data-test-subj'?: string;
 }) => {
   const [isPopoverOpen, { off: closePopover, toggle: togglePopover }] = useBoolean(false);
   return (
     <EuiPopover
-      panelPaddingSize="s"
+      panelPaddingSize={panelPaddingSize ?? 's'}
       button={
         <EuiIcon
           data-test-subj={props['data-test-subj']}
           type={icon}
+          color={iconColor ?? 'text'}
+          size={iconSize ?? 'original'}
           onClick={togglePopover}
           css={css`
             cursor: pointer;

diff --git a/x-pack/plugins/infra/public/components/asset_details/tabs/metadata/metadata.tsx b/x-pack/plugins/infra/public/components/asset_details/tabs/metadata/metadata.tsx
@@ -7,11 +7,12 @@
 
 import React, { useCallback, useMemo } from 'react';
 import { i18n } from '@kbn/i18n';
-import { EuiCallOut, EuiLink } from '@elastic/eui';
+import { EuiCallOut, EuiLink, EuiHorizontalRule } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { Table } from './table';
 import { getAllFields } from './utils';
 import { useMetadataStateProviderContext } from '../../hooks/use_metadata_state';
+import { MetadataExplanationMessage } from '../../components/metadata_explanation';
 import { useAssetDetailsRenderPropsContext } from '../../hooks/use_asset_details_render_props';
 import { useAssetDetailsUrlState } from '../../hooks/use_asset_details_url_state';
 
@@ -70,13 +71,17 @@ export const Metadata = () => {
   }
 
   return (
-    <Table
-      search={urlState?.metadataSearch}
-      onSearchChange={onSearchChange}
-      showActionsColumn={showActionsColumn}
-      rows={fields}
-      loading={metadataLoading}
-    />
+    <>
+      <MetadataExplanationMessage />
+      <EuiHorizontalRule margin="m" />
+      <Table
+        search={urlState?.metadataSearch}
+        onSearchChange={onSearchChange}
+        showActionsColumn={showActionsColumn}
+        rows={fields}
+        loading={metadataLoading}
+      />
+    </>
   );
 };
 

diff --git a/.../infra/public/components/asset_details/tabs/overview/metadata_summary/metadata_header.tsx b/.../infra/public/components/asset_details/tabs/overview/metadata_summary/metadata_header.tsx
@@ -56,10 +56,7 @@ export const MetadataHeader = ({ metadataValue }: MetadataSummaryProps) => {
           {columnTitles[metadataValue.field as MetadataFields]}
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <Popover
-            icon="questionInCircle"
-            data-test-subj="infraAssetDetailsMetadataSummaryPopoverButton"
-          >
+          <Popover icon="iInCircle" data-test-subj="infraAssetDetailsMetadataSummaryPopoverButton">
             <EuiText size="xs">
               {metadataValue.tooltipLink ? (
                 <FormattedMessage