From b8ff4245de75f0d555290d0e3e2cf8c97637d791 Mon Sep 17 00:00:00 2001 From: Lisa Cawley Date: Tue, 13 Jul 2021 12:24:21 -0700 Subject: [PATCH] [ML] Fix APM latency order of sticky header properties, add help popover (#103759) (#105473) * [ML] APM latency correlations help popover * Remove spacer * [ML] Updates correlation tooltip * Remove scss, use styled popover instead * Fix order to be Service > Environment > Transaction * Addresses popover text feedback * Addresses more popover text feedback * Adds performance warning to popover; improves tooltip * Internationalizes aria label in popover * Internationalizes aria label in ML popover Co-authored-by: Quynh Nguyen Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Quynh Nguyen Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> --- .../components/app/correlations/index.tsx | 22 +++--- .../correlations/ml_latency_correlations.tsx | 20 ++---- .../ml_latency_correlations_help_popover.tsx | 64 +++++++++++++++++ .../app/help_popover/help_popover.tsx | 72 +++++++++++++++++++ .../components/app/help_popover/index.tsx | 8 +++ .../components/help_popover/help_popover.tsx | 4 ++ 6 files changed, 165 insertions(+), 25 deletions(-) create mode 100644 x-pack/plugins/apm/public/components/app/correlations/ml_latency_correlations_help_popover.tsx create mode 100644 x-pack/plugins/apm/public/components/app/help_popover/help_popover.tsx create mode 100644 x-pack/plugins/apm/public/components/app/help_popover/index.tsx diff --git a/x-pack/plugins/apm/public/components/app/correlations/index.tsx b/x-pack/plugins/apm/public/components/app/correlations/index.tsx index 2b32ece14e5cdd..9ad5088bb0bcf4 100644 --- a/x-pack/plugins/apm/public/components/app/correlations/index.tsx +++ b/x-pack/plugins/apm/public/components/app/correlations/index.tsx @@ -104,16 +104,7 @@ export function Correlations() { width: '20%', }); } - if (urlParams.transactionName) { - properties.push({ - label: i18n.translate('xpack.apm.correlations.transactionLabel', { - defaultMessage: 'Transaction', - }), - fieldName: TRANSACTION_NAME, - val: urlParams.transactionName, - width: '20%', - }); - } + if (urlParams.environment) { properties.push({ label: i18n.translate('xpack.apm.correlations.environmentLabel', { @@ -125,6 +116,17 @@ export function Correlations() { }); } + if (urlParams.transactionName) { + properties.push({ + label: i18n.translate('xpack.apm.correlations.transactionLabel', { + defaultMessage: 'Transaction', + }), + fieldName: TRANSACTION_NAME, + val: urlParams.transactionName, + width: '20%', + }); + } + return properties; }, [serviceName, urlParams.environment, urlParams.transactionName]); diff --git a/x-pack/plugins/apm/public/components/app/correlations/ml_latency_correlations.tsx b/x-pack/plugins/apm/public/components/app/correlations/ml_latency_correlations.tsx index f9536353747ee9..4bd20f51977c6c 100644 --- a/x-pack/plugins/apm/public/components/app/correlations/ml_latency_correlations.tsx +++ b/x-pack/plugins/apm/public/components/app/correlations/ml_latency_correlations.tsx @@ -36,6 +36,7 @@ import { useCorrelations } from './use_correlations'; import { push } from '../../shared/Links/url_helpers'; import { useUiTracker } from '../../../../../observability/public'; import { asPreciseDecimal } from '../../../../common/utils/formatters'; +import { LatencyCorrelationsHelpPopover } from './ml_latency_correlations_help_popover'; const DEFAULT_PERCENTILE_THRESHOLD = 95; const isErrorMessage = (arg: unknown): arg is Error => { @@ -151,7 +152,7 @@ export function MlLatencyCorrelations({ onClose }: Props) { 'xpack.apm.correlations.latencyCorrelations.correlationsTable.correlationColumnDescription', { defaultMessage: - 'The impact of a field on the latency of the service, ranging from 0 to 1.', + 'The correlation score [0-1] of an attribute; the greater the score, the more an attribute increases latency.', } )} > @@ -263,20 +264,6 @@ export function MlLatencyCorrelations({ onClose }: Props) { return ( <> - -

- {i18n.translate( - 'xpack.apm.correlations.latencyCorrelations.description', - { - defaultMessage: - 'What is slowing down my service? Correlations will help discover a slower performance in a particular cohort of your data.', - } - )} -

- - - - {!isRunning && ( @@ -320,6 +307,9 @@ export function MlLatencyCorrelations({ onClose }: Props) { + + + diff --git a/x-pack/plugins/apm/public/components/app/correlations/ml_latency_correlations_help_popover.tsx b/x-pack/plugins/apm/public/components/app/correlations/ml_latency_correlations_help_popover.tsx new file mode 100644 index 00000000000000..1f9a41c1139cdc --- /dev/null +++ b/x-pack/plugins/apm/public/components/app/correlations/ml_latency_correlations_help_popover.tsx @@ -0,0 +1,64 @@ +/* + * 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, { useState } from 'react'; +import { i18n } from '@kbn/i18n'; +import { FormattedMessage } from '@kbn/i18n/react'; +import { HelpPopover, HelpPopoverButton } from '../help_popover/help_popover'; + +export function LatencyCorrelationsHelpPopover() { + const [isPopoverOpen, setIsPopoverOpen] = useState(false); + + return ( + { + setIsPopoverOpen(!isPopoverOpen); + }} + /> + } + closePopover={() => setIsPopoverOpen(false)} + isOpen={isPopoverOpen} + title={i18n.translate('xpack.apm.correlations.latencyPopoverTitle', { + defaultMessage: 'Latency correlations', + })} + > +

+ +

+

+ +

+

+ +

+

+ +

+

+ +

+ + ); +} diff --git a/x-pack/plugins/apm/public/components/app/help_popover/help_popover.tsx b/x-pack/plugins/apm/public/components/app/help_popover/help_popover.tsx new file mode 100644 index 00000000000000..def310f1d8140d --- /dev/null +++ b/x-pack/plugins/apm/public/components/app/help_popover/help_popover.tsx @@ -0,0 +1,72 @@ +/* + * 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, { ReactNode } from 'react'; +import { i18n } from '@kbn/i18n'; +import { + EuiButtonIcon, + EuiLinkButtonProps, + EuiPopover, + EuiPopoverProps, + EuiPopoverTitle, + EuiText, +} from '@elastic/eui'; +import { euiStyled } from '../../../../../../../src/plugins/kibana_react/common'; + +const PopoverContent = euiStyled(EuiText)` + max-width: 480px; + max-height: 40vh; +`; + +export function HelpPopoverButton({ + onClick, +}: { + onClick: EuiLinkButtonProps['onClick']; +}) { + return ( + + ); +} + +export function HelpPopover({ + anchorPosition, + button, + children, + closePopover, + isOpen, + title, +}: { + anchorPosition?: EuiPopoverProps['anchorPosition']; + button: EuiPopoverProps['button']; + children: ReactNode; + closePopover: EuiPopoverProps['closePopover']; + isOpen: EuiPopoverProps['isOpen']; + title?: string; +}) { + return ( + + {title && {title}} + + {children} + + ); +} diff --git a/x-pack/plugins/apm/public/components/app/help_popover/index.tsx b/x-pack/plugins/apm/public/components/app/help_popover/index.tsx new file mode 100644 index 00000000000000..b1d53722c7bb5e --- /dev/null +++ b/x-pack/plugins/apm/public/components/app/help_popover/index.tsx @@ -0,0 +1,8 @@ +/* + * 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. + */ + +export { HelpPopoverButton, HelpPopover } from './help_popover'; diff --git a/x-pack/plugins/ml/public/application/components/help_popover/help_popover.tsx b/x-pack/plugins/ml/public/application/components/help_popover/help_popover.tsx index 8cd6a3fbd11386..95c66d58dbb751 100644 --- a/x-pack/plugins/ml/public/application/components/help_popover/help_popover.tsx +++ b/x-pack/plugins/ml/public/application/components/help_popover/help_popover.tsx @@ -6,6 +6,7 @@ */ import React, { ReactNode } from 'react'; +import { i18n } from '@kbn/i18n'; import { EuiButtonIcon, EuiLinkButtonProps, @@ -22,6 +23,9 @@ export const HelpPopoverButton = ({ onClick }: { onClick: EuiLinkButtonProps['on className="mlHelpPopover__buttonIcon" size="s" iconType="help" + aria-label={i18n.translate('xpack.ml.helpPopover.ariaLabel', { + defaultMessage: 'Help', + })} onClick={onClick} /> );