Skip to content

Commit

Permalink
[Infra UI] Asset Details Flyout: Add tooltip with documentation link …
Browse files Browse the repository at this point in the history
…in metadata summary (#162132)

## Summary

This PR adds a tooltip with a documentation link in the metadata summary
inside the asset details overview section. It should appear only if we
have defined documentation link so currently only for the `host.ip`
field

<img width="1918" alt="Screenshot 2023-07-18 at 13 13 25"
src="https://github.com/elastic/kibana/assets/14139027/e5ef2067-3a3b-48fd-a395-b763a6832bd1">

## Storybook

<img width="1917" alt="image"
src="https://github.com/elastic/kibana/assets/14139027/dfbd0118-b0ff-475b-a545-9e7278815098">


## Testing
- Go to host view and open the asset details flyout for any host
- Go to the overview tab
- A question mark icon should appear next to the host ip title inside
the metadata section
- Click on the icon and check the tooltip
- the `host.ip` link should open the documentation page for the field in
a new tab



https://github.com/elastic/kibana/assets/14139027/c83dcefd-34b1-4f61-aa96-b9fd0e6ef07b
  • Loading branch information
jennypavlova authored Jul 19, 2023
1 parent e98abd0 commit 8f2d23f
Showing 1 changed file with 82 additions and 40 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,16 @@ import {
EuiFlexItem,
EuiDescriptionList,
EuiDescriptionListDescription,
EuiIcon,
EuiLink,
EuiLoadingSpinner,
EuiPopover,
} from '@elastic/eui';
import { css } from '@emotion/react';
import { i18n } from '@kbn/i18n';
import React from 'react';
import { FormattedMessage } from '@kbn/i18n-react';
import { useBoolean } from '../../../../hooks/use_boolean';
import type { InfraMetadata } from '../../../../../common/http_api';
import { NOT_AVAILABLE_LABEL } from '../../translations';
import { useTabSwitcherContext } from '../../hooks/use_tab_switcher';
Expand All @@ -42,6 +46,8 @@ const metadataData = (metadataInfo: InfraMetadata['info']) => [
{
field: 'hostIp',
value: metadataInfo?.host?.ip,
tooltipLinkLabel: 'host.ip',
tooltipLink: 'https://www.elastic.co/guide/en/ecs/current/ecs-host.html#field-host-ip',
},
{
field: 'hostOsVersion',
Expand All @@ -55,53 +61,89 @@ interface MetadataSummaryProps {
}

export const MetadataSummary = ({ metadata, metadataLoading }: MetadataSummaryProps) => {
const [isPopoverOpen, { off: closePopover, toggle: togglePopover }] = useBoolean(false);
const { showTab } = useTabSwitcherContext();

const onClick = () => {
showTab(FlyoutTabIds.METADATA);
};

return (
<>
<EuiFlexGroup gutterSize="m" responsive={false} wrap justifyContent="spaceBetween">
<EuiFlexGroup alignItems="flexStart">
{metadataData(metadata?.info).map((metadataValue) => (
<EuiFlexItem key={metadataValue.field}>
<EuiDescriptionList data-test-subj="infraMetadataSummaryItem" compressed>
<EuiDescriptionListTitle
css={css`
white-space: nowrap;
`}
>
{columnTitles[metadataValue.field as MetadataFields]}
</EuiDescriptionListTitle>
<EuiDescriptionListDescription>
{metadataLoading ? (
<EuiLoadingSpinner />
) : (
<ExpandableContent values={metadataValue.value ?? NOT_AVAILABLE_LABEL} />
)}
</EuiDescriptionListDescription>
</EuiDescriptionList>
</EuiFlexItem>
))}
</EuiFlexGroup>
<EuiFlexItem grow={false} key="metadata-link">
<EuiButtonEmpty
data-test-subj="infraMetadataSummaryShowAllMetadataButton"
onClick={onClick}
size="xs"
flush="both"
iconSide="right"
iconType="sortRight"
>
<FormattedMessage
id="xpack.infra.assetDetailsEmbeddable.metadataSummary.showAllMetadataButton"
defaultMessage="Show all"
/>
</EuiButtonEmpty>
</EuiFlexItem>
<EuiFlexGroup gutterSize="m" responsive={false} wrap justifyContent="spaceBetween">
<EuiFlexGroup alignItems="flexStart">
{metadataData(metadata?.info).map((metadataValue) => (
<EuiFlexItem key={metadataValue.field}>
<EuiDescriptionList data-test-subj="infraMetadataSummaryItem" compressed>
<EuiDescriptionListTitle
css={css`
white-space: nowrap;
`}
>
<EuiFlexGroup gutterSize="xs">
<EuiFlexItem grow={false}>
{columnTitles[metadataValue.field as MetadataFields]}
</EuiFlexItem>
<EuiFlexItem grow={false}>
{metadataValue.tooltipLink && (
<EuiPopover
button={
<EuiIcon
data-test-subj="assetDetailsMetadataSummaryPopoverButton"
type="questionInCircle"
onClick={togglePopover}
/>
}
isOpen={isPopoverOpen}
closePopover={closePopover}
repositionOnScroll
anchorPosition="upCenter"
>
<FormattedMessage
id="xpack.infra.assetDetails.overviewMetadata.tooltip.documentationLabel"
defaultMessage="See {documentation} for more details."
values={{
documentation: (
<EuiLink
data-test-subj="assetDetailsTooltipDocumentationLink"
href={metadataValue.tooltipLink}
target="_blank"
>
{metadataValue.tooltipLinkLabel}
</EuiLink>
),
}}
/>
</EuiPopover>
)}
</EuiFlexItem>
</EuiFlexGroup>
</EuiDescriptionListTitle>
<EuiDescriptionListDescription>
{metadataLoading ? (
<EuiLoadingSpinner />
) : (
<ExpandableContent values={metadataValue.value ?? NOT_AVAILABLE_LABEL} />
)}
</EuiDescriptionListDescription>
</EuiDescriptionList>
</EuiFlexItem>
))}
</EuiFlexGroup>
</>
<EuiFlexItem grow={false} key="metadata-link">
<EuiButtonEmpty
data-test-subj="infraMetadataSummaryShowAllMetadataButton"
onClick={onClick}
size="xs"
flush="both"
iconSide="right"
iconType="sortRight"
>
<FormattedMessage
id="xpack.infra.assetDetailsEmbeddable.metadataSummary.showAllMetadataButton"
defaultMessage="Show all"
/>
</EuiButtonEmpty>
</EuiFlexItem>
</EuiFlexGroup>
);
};

0 comments on commit 8f2d23f

Please sign in to comment.