Skip to content

Commit

Permalink
[Infra UI] Update Processes tooltips (#166251)
Browse files Browse the repository at this point in the history 
Closes [#165822](#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
  • Loading branch information
@jennypavlova
jennypavlova authored Sep 13, 2023
1 parent 09e8e9a commit 21d3fc4
Show file tree
Hide file tree
Showing 3 changed files with 99 additions and 110 deletions.
111 changes: 19 additions & 92 deletions x-pack/plugins/infra/public/components/asset_details/components/processes_explanation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
};
78 changes: 78 additions & 0 deletions x-pack/plugins/infra/public/components/asset_details/components/top_processes_tooltip.tsx
View file
Original file line number Diff line number Diff line change
@@ -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>
);
});
20 changes: 2 additions & 18 deletions x-pack/plugins/infra/public/components/asset_details/tabs/processes/processes.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ import {
EuiSearchBar,
EuiEmptyPrompt,
EuiButton,
EuiIconTip,
EuiTitle,
Query,
EuiFlexGroup,
Expand All @@ -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,
Expand Down Expand Up @@ -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>
Expand Down

0 comments on commit 21d3fc4

Please sign in to comment.