From 2670ed046bc04a2ce6012772dec92b7cc968536a Mon Sep 17 00:00:00 2001 From: lcawl Date: Tue, 29 Jun 2021 12:50:01 -0700 Subject: [PATCH 01/10] [ML] APM latency correlations help popover --- .../correlations/ml_latency_correlations.tsx | 17 ++--- .../ml_latency_correlations_help_popover.tsx | 58 ++++++++++++++++ .../app/help_popover/help_popover.scss | 9 +++ .../app/help_popover/help_popover.tsx | 68 +++++++++++++++++++ .../components/app/help_popover/index.tsx | 8 +++ 5 files changed, 147 insertions(+), 13 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.scss 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/ml_latency_correlations.tsx b/x-pack/plugins/apm/public/components/app/correlations/ml_latency_correlations.tsx index f9536353747ee..fc864eb98465f 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 => { @@ -263,20 +264,7 @@ 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 +308,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 0000000000000..4aaa517e008b4 --- /dev/null +++ b/x-pack/plugins/apm/public/components/app/correlations/ml_latency_correlations_help_popover.tsx @@ -0,0 +1,58 @@ +/* + * 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.scss b/x-pack/plugins/apm/public/components/app/help_popover/help_popover.scss new file mode 100644 index 0000000000000..3ee16a1e9c51f --- /dev/null +++ b/x-pack/plugins/apm/public/components/app/help_popover/help_popover.scss @@ -0,0 +1,9 @@ +.apmHelpPopover__panel { + max-width: $euiSize * 30; +} + +.apmHelpPopover__content { + @include euiYScrollWithShadows; + max-height: 40vh; + padding: $euiSizeS; +} 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 0000000000000..ccf08bd02ea68 --- /dev/null +++ b/x-pack/plugins/apm/public/components/app/help_popover/help_popover.tsx @@ -0,0 +1,68 @@ +/* + * 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 { + EuiButtonIcon, + EuiLinkButtonProps, + EuiPopover, + EuiPopoverProps, + EuiPopoverTitle, + EuiText, +} from '@elastic/eui'; +import './help_popover.scss'; + +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 0000000000000..b1d53722c7bb5 --- /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'; From 2ffad3f0e83beea7075a1bb76638933f8be03409 Mon Sep 17 00:00:00 2001 From: Quynh Nguyen Date: Tue, 29 Jun 2021 15:33:41 -0500 Subject: [PATCH 02/10] Remove spacer --- .../components/app/correlations/ml_latency_correlations.tsx | 1 - 1 file changed, 1 deletion(-) 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 fc864eb98465f..356deaa5433a5 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 @@ -264,7 +264,6 @@ export function MlLatencyCorrelations({ onClose }: Props) { return ( <> - {!isRunning && ( From f6c2155b1d1b94bd81954a631a6b3bb5efa4ca9d Mon Sep 17 00:00:00 2001 From: lcawl Date: Tue, 29 Jun 2021 15:04:36 -0700 Subject: [PATCH 03/10] [ML] Updates correlation tooltip --- .../components/app/correlations/ml_latency_correlations.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 356deaa5433a5..24a05a4e49e1d 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 @@ -152,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 impact [0-1] of an attribute; the greater the impact, the more an attribute increases latency.', } )} > From ed1c71f97fbfe8a256b4159deac2ff8177489cd9 Mon Sep 17 00:00:00 2001 From: Quynh Nguyen Date: Thu, 1 Jul 2021 13:29:00 -0500 Subject: [PATCH 04/10] Remove scss, use styled popover instead --- .../components/app/help_popover/help_popover.scss | 9 --------- .../components/app/help_popover/help_popover.tsx | 15 ++++++++------- 2 files changed, 8 insertions(+), 16 deletions(-) delete mode 100644 x-pack/plugins/apm/public/components/app/help_popover/help_popover.scss diff --git a/x-pack/plugins/apm/public/components/app/help_popover/help_popover.scss b/x-pack/plugins/apm/public/components/app/help_popover/help_popover.scss deleted file mode 100644 index 3ee16a1e9c51f..0000000000000 --- a/x-pack/plugins/apm/public/components/app/help_popover/help_popover.scss +++ /dev/null @@ -1,9 +0,0 @@ -.apmHelpPopover__panel { - max-width: $euiSize * 30; -} - -.apmHelpPopover__content { - @include euiYScrollWithShadows; - max-height: 40vh; - padding: $euiSizeS; -} 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 index ccf08bd02ea68..9b1a2a84fe09e 100644 --- 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 @@ -14,7 +14,12 @@ import { EuiPopoverTitle, EuiText, } from '@elastic/eui'; -import './help_popover.scss'; +import { euiStyled } from '../../../../../../../src/plugins/kibana_react/common'; + +const PopoverContent = euiStyled(EuiText)` + max-width: 480px; + max-height: 40vh; +`; export function HelpPopoverButton({ onClick, @@ -51,18 +56,14 @@ export function HelpPopover({ {title && {title}} - - {children} - + {children} ); } From ea0345ed64f0b2eb8ee5e2b09f67288d2b1be577 Mon Sep 17 00:00:00 2001 From: Quynh Nguyen Date: Thu, 1 Jul 2021 14:07:06 -0500 Subject: [PATCH 05/10] Fix order to be Service > Environment > Transaction --- .../components/app/correlations/index.tsx | 22 ++++++++++--------- 1 file changed, 12 insertions(+), 10 deletions(-) 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 36b298af834ac..3f9b560520cc3 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]); From 54c25d262225e2c0798a7e62f14f4f8a309f9b52 Mon Sep 17 00:00:00 2001 From: lcawl Date: Mon, 5 Jul 2021 09:30:58 -0700 Subject: [PATCH 06/10] Addresses popover text feedback --- .../app/correlations/ml_latency_correlations_help_popover.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 index 4aaa517e008b4..f5bf9e0feb579 100644 --- 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 @@ -32,7 +32,7 @@ export function LatencyCorrelationsHelpPopover() {

@@ -44,7 +44,7 @@ export function LatencyCorrelationsHelpPopover() {

From 74eaa80698f13c4bfb94ec5c89c186ae63fb886b Mon Sep 17 00:00:00 2001 From: lcawl Date: Thu, 8 Jul 2021 17:56:35 -0700 Subject: [PATCH 07/10] Addresses more popover text feedback --- .../correlations/ml_latency_correlations_help_popover.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) 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 index f5bf9e0feb579..64c076b5cf5d1 100644 --- 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 @@ -32,19 +32,19 @@ export function LatencyCorrelationsHelpPopover() {

From 3f718962047723188f70cdf025e06da345c20769 Mon Sep 17 00:00:00 2001 From: lcawl Date: Fri, 9 Jul 2021 08:46:39 -0700 Subject: [PATCH 08/10] Adds performance warning to popover; improves tooltip --- .../components/app/correlations/ml_latency_correlations.tsx | 2 +- .../correlations/ml_latency_correlations_help_popover.tsx | 6 ++++++ 2 files changed, 7 insertions(+), 1 deletion(-) 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 24a05a4e49e1d..4bd20f51977c6 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 @@ -152,7 +152,7 @@ export function MlLatencyCorrelations({ onClose }: Props) { 'xpack.apm.correlations.latencyCorrelations.correlationsTable.correlationColumnDescription', { defaultMessage: - 'The impact [0-1] of an attribute; the greater the impact, the more an attribute increases latency.', + 'The correlation score [0-1] of an attribute; the greater the score, the more an attribute increases latency.', } )} > 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 index 64c076b5cf5d1..1f9a41c1139cd 100644 --- 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 @@ -47,6 +47,12 @@ export function LatencyCorrelationsHelpPopover() { defaultMessage="The table is sorted by correlation coefficients that range from 0 to 1. Attributes with higher correlation values are more likely to contribute to high latency transactions." />

+

+ +

Date: Fri, 9 Jul 2021 08:53:52 -0700 Subject: [PATCH 09/10] Internationalizes aria label in popover --- .../apm/public/components/app/help_popover/help_popover.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) 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 index 9b1a2a84fe09e..8c29d2ad03ce3 100644 --- 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 @@ -31,7 +31,9 @@ export function HelpPopoverButton({ className="apmHelpPopover__buttonIcon" size="s" iconType="help" - aria-label="Help" + aria-label={i18n.translate('xpack.apm.helpPopover.ariaLabel', { + defaultMessage: 'Help', + })} onClick={onClick} /> ); From d875c3e4188b859bcaea3529f5d610533cca1040 Mon Sep 17 00:00:00 2001 From: lcawl Date: Fri, 9 Jul 2021 09:17:42 -0700 Subject: [PATCH 10/10] Internationalizes aria label in ML popover --- .../apm/public/components/app/help_popover/help_popover.tsx | 1 + .../application/components/help_popover/help_popover.tsx | 4 ++++ 2 files changed, 5 insertions(+) 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 index 8c29d2ad03ce3..def310f1d8140 100644 --- 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 @@ -6,6 +6,7 @@ */ import React, { ReactNode } from 'react'; +import { i18n } from '@kbn/i18n'; import { EuiButtonIcon, EuiLinkButtonProps, 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 8cd6a3fbd1138..95c66d58dbb75 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} /> );