From 47722d10062c743db7d96b943d14aa3f3ab56b2a Mon Sep 17 00:00:00 2001 From: Shahzad Date: Tue, 22 Sep 2020 23:33:28 +0200 Subject: [PATCH 01/10] update --- .../CoreVitals/PaletteLegends.tsx | 21 +++++++++++++++++-- 1 file changed, 19 insertions(+), 2 deletions(-) diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/CoreVitals/PaletteLegends.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/CoreVitals/PaletteLegends.tsx index 84cc5f1ddb230..d7021ccf4809f 100644 --- a/x-pack/plugins/apm/public/components/app/RumDashboard/CoreVitals/PaletteLegends.tsx +++ b/x-pack/plugins/apm/public/components/app/RumDashboard/CoreVitals/PaletteLegends.tsx @@ -13,13 +13,26 @@ import { EuiToolTip, } from '@elastic/eui'; import styled from 'styled-components'; +import euiLightVars from '@elastic/eui/dist/eui_theme_light.json'; +import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json'; import { getCoreVitalTooltipMessage, Thresholds } from './CoreVitalItem'; +import { useUiSetting$ } from '../../../../../../../../src/plugins/kibana_react/public'; const PaletteLegend = styled(EuiHealth)` &:hover { cursor: pointer; text-decoration: underline; - background-color: #e7f0f7; + } +`; + +const StyledSpan = styled.span<{ + darkMode: boolean; +}>` + &:hover { + background-color: ${(props) => + props.darkMode + ? euiDarkVars.euiColorLightestShad + : euiLightVars.euiColorLightestShade}; } `; @@ -36,6 +49,8 @@ export function PaletteLegends({ onItemHover, thresholds, }: Props) { + const [darkMode] = useUiSetting$('theme:darkMode'); + const palette = euiPaletteForStatus(3); return ( @@ -60,7 +75,9 @@ export function PaletteLegends({ )} position="bottom" > - {ranks?.[ind]}% + + {ranks?.[ind]}% + ))} From acbc0156e6c5e69923b08bfc19e1f2cb19d869b9 Mon Sep 17 00:00:00 2001 From: Shahzad Date: Wed, 23 Sep 2020 17:01:41 +0200 Subject: [PATCH 02/10] fix typo --- .../components/app/RumDashboard/CoreVitals/PaletteLegends.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/CoreVitals/PaletteLegends.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/CoreVitals/PaletteLegends.tsx index d7021ccf4809f..baa18c1fa7a4c 100644 --- a/x-pack/plugins/apm/public/components/app/RumDashboard/CoreVitals/PaletteLegends.tsx +++ b/x-pack/plugins/apm/public/components/app/RumDashboard/CoreVitals/PaletteLegends.tsx @@ -31,7 +31,7 @@ const StyledSpan = styled.span<{ &:hover { background-color: ${(props) => props.darkMode - ? euiDarkVars.euiColorLightestShad + ? euiDarkVars.euiColorLightestShade : euiLightVars.euiColorLightestShade}; } `; From 4f9ac0bbf9014767e1e546624eb8052a1d5c2863 Mon Sep 17 00:00:00 2001 From: Shahzad Date: Thu, 24 Sep 2020 19:56:20 +0200 Subject: [PATCH 03/10] improve web core vitals --- ...bana-plugin-core-server.isauthenticated.md | 13 ------ .../RumDashboard/CoreVitals/CoreVitalItem.tsx | 10 ++--- .../CoreVitals/PaletteLegends.tsx | 15 ++++++- .../app/RumDashboard/CoreVitals/index.tsx | 5 ++- .../RumDashboard/CoreVitals/translations.ts | 27 ++++++++++-- .../app/RumDashboard/UXMetrics/index.tsx | 43 ++++++++++++++++++- .../lib/rum_client/get_long_task_metrics.ts | 1 + .../lib/rum_client/get_web_core_vitals.ts | 9 ++-- 8 files changed, 91 insertions(+), 32 deletions(-) delete mode 100644 docs/development/core/server/kibana-plugin-core-server.isauthenticated.md diff --git a/docs/development/core/server/kibana-plugin-core-server.isauthenticated.md b/docs/development/core/server/kibana-plugin-core-server.isauthenticated.md deleted file mode 100644 index de839619f3ac7..0000000000000 --- a/docs/development/core/server/kibana-plugin-core-server.isauthenticated.md +++ /dev/null @@ -1,13 +0,0 @@ - - -[Home](./index.md) > [kibana-plugin-core-server](./kibana-plugin-core-server.md) > [IsAuthenticated](./kibana-plugin-core-server.isauthenticated.md) - -## IsAuthenticated type - -Returns authentication status for a request. - -Signature: - -```typescript -export declare type IsAuthenticated = (request: KibanaRequest | LegacyRequest) => boolean; -``` diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/CoreVitals/CoreVitalItem.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/CoreVitals/CoreVitalItem.tsx index 22d50ca0d5c41..dd4c59c97e9cb 100644 --- a/x-pack/plugins/apm/public/components/app/RumDashboard/CoreVitals/CoreVitalItem.tsx +++ b/x-pack/plugins/apm/public/components/app/RumDashboard/CoreVitals/CoreVitalItem.tsx @@ -15,11 +15,11 @@ import { i18n } from '@kbn/i18n'; import { PaletteLegends } from './PaletteLegends'; import { ColorPaletteFlexItem } from './ColorPaletteFlexItem'; import { - AVERAGE_LABEL, - GOOD_LABEL, + AN_AVERAGE_LABEL, + A_GOOD_LABEL, LESS_LABEL, MORE_LABEL, - POOR_LABEL, + A_POOR_LABEL, } from './translations'; export interface Thresholds { @@ -51,7 +51,7 @@ export function getCoreVitalTooltipMessage( values: { percentage, title: title?.toLowerCase(), - exp: good ? GOOD_LABEL : bad ? POOR_LABEL : AVERAGE_LABEL, + exp: good ? A_GOOD_LABEL : bad ? A_POOR_LABEL : AN_AVERAGE_LABEL, moreOrLess: bad || average ? MORE_LABEL : LESS_LABEL, value: good || average ? thresholds.good : thresholds.bad, averageMessage: average @@ -90,7 +90,7 @@ export function CoreVitalItem({ {palette.map((hexCode, ind) => ( diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/CoreVitals/PaletteLegends.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/CoreVitals/PaletteLegends.tsx index baa18c1fa7a4c..c5116fc8ec1f3 100644 --- a/x-pack/plugins/apm/public/components/app/RumDashboard/CoreVitals/PaletteLegends.tsx +++ b/x-pack/plugins/apm/public/components/app/RumDashboard/CoreVitals/PaletteLegends.tsx @@ -10,6 +10,7 @@ import { EuiFlexItem, EuiHealth, euiPaletteForStatus, + EuiText, EuiToolTip, } from '@elastic/eui'; import styled from 'styled-components'; @@ -17,6 +18,11 @@ import euiLightVars from '@elastic/eui/dist/eui_theme_light.json'; import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json'; import { getCoreVitalTooltipMessage, Thresholds } from './CoreVitalItem'; import { useUiSetting$ } from '../../../../../../../../src/plugins/kibana_react/public'; +import { + NEEDS_IMPROVEMENT_LABEL, + GOOD_LABEL, + POOR_LABEL, +} from './translations'; const PaletteLegend = styled(EuiHealth)` &:hover { @@ -52,9 +58,10 @@ export function PaletteLegends({ const [darkMode] = useUiSetting$('theme:darkMode'); const palette = euiPaletteForStatus(3); + const labels = [GOOD_LABEL, NEEDS_IMPROVEMENT_LABEL, POOR_LABEL]; return ( - + {palette.map((color, ind) => ( - {ranks?.[ind]}% + + + {labels[ind]} ({ranks?.[ind]}%) + + diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/CoreVitals/index.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/CoreVitals/index.tsx index 0135f0b369537..cd7fd0af6d683 100644 --- a/x-pack/plugins/apm/public/components/app/RumDashboard/CoreVitals/index.tsx +++ b/x-pack/plugins/apm/public/components/app/RumDashboard/CoreVitals/index.tsx @@ -8,6 +8,7 @@ import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; import { CLS_LABEL, FID_LABEL, LCP_LABEL } from './translations'; import { CoreVitalItem } from './CoreVitalItem'; import { UXMetrics } from '../UXMetrics'; +import { formatToSec } from '../UXMetrics/KeyUXMetrics'; const CoreVitalsThresholds = { LCP: { good: '2.5s', bad: '4.0s' }, @@ -28,7 +29,7 @@ export function CoreVitals({ data, loading }: Props) { setIsPopoverOpen(false); + return ( @@ -72,7 +81,37 @@ export function UXMetrics() { -

{I18LABELS.coreWebVitals}

+

+ {I18LABELS.coreWebVitals} + setIsPopoverOpen(true)} + color={'text'} + iconType={'questionInCircle'} + /> + } + closePopover={closePopover} + > +
+ + + + {' '} + {I18LABELS.coreWebVitals} + + +
+ +

diff --git a/x-pack/plugins/apm/server/lib/rum_client/get_long_task_metrics.ts b/x-pack/plugins/apm/server/lib/rum_client/get_long_task_metrics.ts index 812cf9865bda8..bd4bdb9ca3536 100644 --- a/x-pack/plugins/apm/server/lib/rum_client/get_long_task_metrics.ts +++ b/x-pack/plugins/apm/server/lib/rum_client/get_long_task_metrics.ts @@ -81,6 +81,7 @@ export async function getLongTaskMetrics({ } } }); + return { noOfLongTasks, sumOfLongTasks, diff --git a/x-pack/plugins/apm/server/lib/rum_client/get_web_core_vitals.ts b/x-pack/plugins/apm/server/lib/rum_client/get_web_core_vitals.ts index fa34c2e25fecd..0828d7ab65190 100644 --- a/x-pack/plugins/apm/server/lib/rum_client/get_web_core_vitals.ts +++ b/x-pack/plugins/apm/server/lib/rum_client/get_web_core_vitals.ts @@ -124,13 +124,12 @@ export async function getWebCoreVitals({ { value: 0, key: 0 }, ]; - // Divide by 1000 to convert ms into seconds return { cls: String(cls?.values['50.0']?.toFixed(2) || 0), - fid: ((fid?.values['50.0'] || 0) / 1000).toFixed(2), - lcp: ((lcp?.values['50.0'] || 0) / 1000).toFixed(2), - tbt: tbt?.values['50.0'] || 0, - fcp: fcp?.values['50.0'] || 0, + fid: fid?.values['50.0'] ?? 0, + lcp: lcp?.values['50.0'] ?? 0, + tbt: tbt?.values['50.0'] ?? 0, + fcp: fcp?.values['50.0'] ?? 0, lcpRanks: getRanksPercentages(lcpRanks?.values ?? defaultRanks), fidRanks: getRanksPercentages(fidRanks?.values ?? defaultRanks), From 40ba44c778fbfb8c9eea722791657c63d4242c75 Mon Sep 17 00:00:00 2001 From: Shahzad Date: Thu, 24 Sep 2020 20:05:30 +0200 Subject: [PATCH 04/10] revert --- .../kibana-plugin-core-server.isauthenticated.md | 13 +++++++++++++ 1 file changed, 13 insertions(+) create mode 100644 docs/development/core/server/kibana-plugin-core-server.isauthenticated.md diff --git a/docs/development/core/server/kibana-plugin-core-server.isauthenticated.md b/docs/development/core/server/kibana-plugin-core-server.isauthenticated.md new file mode 100644 index 0000000000000..7d04541df9edf --- /dev/null +++ b/docs/development/core/server/kibana-plugin-core-server.isauthenticated.md @@ -0,0 +1,13 @@ + + +[Home](./index.md) > [kibana-plugin-core-server](./kibana-plugin-core-server.md) > [IsAuthenticated](./kibana-plugin-core-server.isauthenticated.md) + +## IsAuthenticated type + +Returns authentication status for a request. + +Signature: + +```typescript +export declare type IsAuthenticated = (request: KibanaRequest | LegacyRequest) => boolean; +``` \ No newline at end of file From f03323e98b151eb01b0521a1129a7068db86d5e7 Mon Sep 17 00:00:00 2001 From: Shahzad Date: Thu, 24 Sep 2020 20:12:07 +0200 Subject: [PATCH 05/10] revert --- .../core/server/kibana-plugin-core-server.isauthenticated.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/development/core/server/kibana-plugin-core-server.isauthenticated.md b/docs/development/core/server/kibana-plugin-core-server.isauthenticated.md index 7d04541df9edf..de839619f3ac7 100644 --- a/docs/development/core/server/kibana-plugin-core-server.isauthenticated.md +++ b/docs/development/core/server/kibana-plugin-core-server.isauthenticated.md @@ -10,4 +10,4 @@ Returns authentication status for a request. ```typescript export declare type IsAuthenticated = (request: KibanaRequest | LegacyRequest) => boolean; -``` \ No newline at end of file +``` From 216a713f11b90eda66bc3830d425cd0765f4f88c Mon Sep 17 00:00:00 2001 From: Shahzad Date: Thu, 24 Sep 2020 20:17:42 +0200 Subject: [PATCH 06/10] update snapshots --- .../apm_api_integration/trial/tests/csm/web_core_vitals.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/x-pack/test/apm_api_integration/trial/tests/csm/web_core_vitals.ts b/x-pack/test/apm_api_integration/trial/tests/csm/web_core_vitals.ts index 6364a79a12f04..5825c8fc49a6b 100644 --- a/x-pack/test/apm_api_integration/trial/tests/csm/web_core_vitals.ts +++ b/x-pack/test/apm_api_integration/trial/tests/csm/web_core_vitals.ts @@ -59,13 +59,13 @@ export default function rumServicesApiTests({ getService }: FtrProviderContext) 0, ], "fcp": 1072, - "fid": "1.35", + "fid": 1352.13, "fidRanks": Array [ 0, 0, 100, ], - "lcp": "1.27", + "lcp": 1270.5, "lcpRanks": Array [ 100, 0, From fe73fdd91aa33b2b0f9a327a97526b63cbcd4b49 Mon Sep 17 00:00:00 2001 From: Shahzad Date: Mon, 28 Sep 2020 10:11:57 +0200 Subject: [PATCH 07/10] update i18n --- .../apm/public/components/app/RumDashboard/UXMetrics/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/UXMetrics/index.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/UXMetrics/index.tsx index 9e17adf939189..4c93ebd49b407 100644 --- a/x-pack/plugins/apm/public/components/app/RumDashboard/UXMetrics/index.tsx +++ b/x-pack/plugins/apm/public/components/app/RumDashboard/UXMetrics/index.tsx @@ -98,7 +98,7 @@ export function UXMetrics() { Date: Mon, 28 Sep 2020 10:14:00 +0200 Subject: [PATCH 08/10] fix type --- .../apm/public/components/app/RumDashboard/UXMetrics/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/UXMetrics/index.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/UXMetrics/index.tsx index 4c93ebd49b407..5f23ebf5c6e56 100644 --- a/x-pack/plugins/apm/public/components/app/RumDashboard/UXMetrics/index.tsx +++ b/x-pack/plugins/apm/public/components/app/RumDashboard/UXMetrics/index.tsx @@ -26,7 +26,7 @@ import { useFetcher } from '../../../../hooks/useFetcher'; export interface UXMetrics { cls: string; - fid: string; + fid: number; lcp: string; tbt: number; fcp: number; From f35b3aaa29167797ee35efe32c384640054015b1 Mon Sep 17 00:00:00 2001 From: Shahzad Date: Mon, 28 Sep 2020 10:53:49 +0200 Subject: [PATCH 09/10] fix type --- .../apm/public/components/app/RumDashboard/UXMetrics/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/UXMetrics/index.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/UXMetrics/index.tsx index 5f23ebf5c6e56..1a95ac50587af 100644 --- a/x-pack/plugins/apm/public/components/app/RumDashboard/UXMetrics/index.tsx +++ b/x-pack/plugins/apm/public/components/app/RumDashboard/UXMetrics/index.tsx @@ -27,7 +27,7 @@ import { useFetcher } from '../../../../hooks/useFetcher'; export interface UXMetrics { cls: string; fid: number; - lcp: string; + lcp: number; tbt: number; fcp: number; lcpRanks: number[]; From 9bdd3b970f2a2a5d96eef1c768b8eb26811e8fe2 Mon Sep 17 00:00:00 2001 From: Shahzad Date: Tue, 29 Sep 2020 12:21:08 +0200 Subject: [PATCH 10/10] PR feedback --- .../RumDashboard/CoreVitals/CoreVitalItem.tsx | 8 +++---- .../CoreVitals/PaletteLegends.tsx | 23 +++++++++++++++---- .../RumDashboard/CoreVitals/translations.ts | 12 +++++----- 3 files changed, 28 insertions(+), 15 deletions(-) diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/CoreVitals/CoreVitalItem.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/CoreVitals/CoreVitalItem.tsx index dd4c59c97e9cb..6107a8e764adb 100644 --- a/x-pack/plugins/apm/public/components/app/RumDashboard/CoreVitals/CoreVitalItem.tsx +++ b/x-pack/plugins/apm/public/components/app/RumDashboard/CoreVitals/CoreVitalItem.tsx @@ -15,11 +15,11 @@ import { i18n } from '@kbn/i18n'; import { PaletteLegends } from './PaletteLegends'; import { ColorPaletteFlexItem } from './ColorPaletteFlexItem'; import { - AN_AVERAGE_LABEL, - A_GOOD_LABEL, + CV_AVERAGE_LABEL, + CV_GOOD_LABEL, LESS_LABEL, MORE_LABEL, - A_POOR_LABEL, + CV_POOR_LABEL, } from './translations'; export interface Thresholds { @@ -51,7 +51,7 @@ export function getCoreVitalTooltipMessage( values: { percentage, title: title?.toLowerCase(), - exp: good ? A_GOOD_LABEL : bad ? A_POOR_LABEL : AN_AVERAGE_LABEL, + exp: good ? CV_GOOD_LABEL : bad ? CV_POOR_LABEL : CV_AVERAGE_LABEL, moreOrLess: bad || average ? MORE_LABEL : LESS_LABEL, value: good || average ? thresholds.good : thresholds.bad, averageMessage: average diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/CoreVitals/PaletteLegends.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/CoreVitals/PaletteLegends.tsx index c5116fc8ec1f3..43eb468b88317 100644 --- a/x-pack/plugins/apm/public/components/app/RumDashboard/CoreVitals/PaletteLegends.tsx +++ b/x-pack/plugins/apm/public/components/app/RumDashboard/CoreVitals/PaletteLegends.tsx @@ -14,14 +14,15 @@ import { EuiToolTip, } from '@elastic/eui'; import styled from 'styled-components'; +import { FormattedMessage } from '@kbn/i18n/react'; import euiLightVars from '@elastic/eui/dist/eui_theme_light.json'; import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json'; import { getCoreVitalTooltipMessage, Thresholds } from './CoreVitalItem'; import { useUiSetting$ } from '../../../../../../../../src/plugins/kibana_react/public'; import { - NEEDS_IMPROVEMENT_LABEL, - GOOD_LABEL, - POOR_LABEL, + LEGEND_NEEDS_IMPROVEMENT_LABEL, + LEGEND_GOOD_LABEL, + LEGEND_POOR_LABEL, } from './translations'; const PaletteLegend = styled(EuiHealth)` @@ -58,10 +59,14 @@ export function PaletteLegends({ const [darkMode] = useUiSetting$('theme:darkMode'); const palette = euiPaletteForStatus(3); - const labels = [GOOD_LABEL, NEEDS_IMPROVEMENT_LABEL, POOR_LABEL]; + const labels = [ + LEGEND_GOOD_LABEL, + LEGEND_NEEDS_IMPROVEMENT_LABEL, + LEGEND_POOR_LABEL, + ]; return ( - + {palette.map((color, ind) => ( {labels[ind]} ({ranks?.[ind]}%) + diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/CoreVitals/translations.ts b/x-pack/plugins/apm/public/components/app/RumDashboard/CoreVitals/translations.ts index f99978eb891f9..cae1a43733713 100644 --- a/x-pack/plugins/apm/public/components/app/RumDashboard/CoreVitals/translations.ts +++ b/x-pack/plugins/apm/public/components/app/RumDashboard/CoreVitals/translations.ts @@ -47,36 +47,36 @@ export const SUM_LONG_TASKS = i18n.translate( } ); -export const A_POOR_LABEL = i18n.translate('xpack.apm.rum.coreVitals.poor', { +export const CV_POOR_LABEL = i18n.translate('xpack.apm.rum.coreVitals.poor', { defaultMessage: 'a poor', }); -export const A_GOOD_LABEL = i18n.translate('xpack.apm.rum.coreVitals.good', { +export const CV_GOOD_LABEL = i18n.translate('xpack.apm.rum.coreVitals.good', { defaultMessage: 'a good', }); -export const AN_AVERAGE_LABEL = i18n.translate( +export const CV_AVERAGE_LABEL = i18n.translate( 'xpack.apm.rum.coreVitals.average', { defaultMessage: 'an average', } ); -export const POOR_LABEL = i18n.translate( +export const LEGEND_POOR_LABEL = i18n.translate( 'xpack.apm.rum.coreVitals.legends.poor', { defaultMessage: 'Poor', } ); -export const GOOD_LABEL = i18n.translate( +export const LEGEND_GOOD_LABEL = i18n.translate( 'xpack.apm.rum.coreVitals.legends.good', { defaultMessage: 'Good', } ); -export const NEEDS_IMPROVEMENT_LABEL = i18n.translate( +export const LEGEND_NEEDS_IMPROVEMENT_LABEL = i18n.translate( 'xpack.apm.rum.coreVitals.legends.needsImprovement', { defaultMessage: 'Needs improvement',