-
Notifications
You must be signed in to change notification settings - Fork 8.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[RUM Dashboard] User experience metrics (#77384)
Co-authored-by: Elastic Machine <[email protected]>
- Loading branch information
1 parent
6c5258a
commit 10b192b
Showing
21 changed files
with
8,374 additions
and
391 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
103 changes: 103 additions & 0 deletions
103
x-pack/plugins/apm/public/components/app/RumDashboard/UXMetrics/KeyUXMetrics.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,103 @@ | ||
| /* | ||
| * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
| * or more contributor license agreements. Licensed under the Elastic License; | ||
| * you may not use this file except in compliance with the Elastic License. | ||
| */ | ||
|
|
||
| import React from 'react'; | ||
| import { EuiFlexItem, EuiStat, EuiFlexGroup } from '@elastic/eui'; | ||
| import { UXMetrics } from './index'; | ||
| import { | ||
| FCP_LABEL, | ||
| LONGEST_LONG_TASK, | ||
| NO_OF_LONG_TASK, | ||
| SUM_LONG_TASKS, | ||
| TBT_LABEL, | ||
| } from '../CoreVitals/translations'; | ||
| import { useUrlParams } from '../../../../hooks/useUrlParams'; | ||
| import { useFetcher } from '../../../../hooks/useFetcher'; | ||
|
|
||
| export function formatToSec( | ||
| value?: number | string, | ||
| fromUnit = 'MicroSec' | ||
| ): string { | ||
| const valueInMs = Number(value ?? 0) / (fromUnit === 'MicroSec' ? 1000 : 1); | ||
|
|
||
| if (valueInMs < 1000) { | ||
| return valueInMs + ' ms'; | ||
| } | ||
| return (valueInMs / 1000).toFixed(2) + ' s'; | ||
| } | ||
| const STAT_STYLE = { width: '240px' }; | ||
|
|
||
| interface Props { | ||
| data?: UXMetrics | null; | ||
| loading: boolean; | ||
| } | ||
|
|
||
| export function KeyUXMetrics({ data, loading }: Props) { | ||
| const { urlParams, uiFilters } = useUrlParams(); | ||
|
|
||
| const { start, end, serviceName } = urlParams; | ||
|
|
||
| const { data: longTaskData, status } = useFetcher( | ||
| (callApmApi) => { | ||
| if (start && end && serviceName) { | ||
| return callApmApi({ | ||
| pathname: '/api/apm/rum-client/long-task-metrics', | ||
| params: { | ||
| query: { start, end, uiFilters: JSON.stringify(uiFilters) }, | ||
| }, | ||
| }); | ||
| } | ||
| return Promise.resolve(null); | ||
| }, | ||
| [start, end, serviceName, uiFilters] | ||
| ); | ||
|
|
||
| // Note: FCP value is in ms unit | ||
| return ( | ||
| <EuiFlexGroup responsive={false}> | ||
| <EuiFlexItem grow={false} style={STAT_STYLE}> | ||
| <EuiStat | ||
| titleSize="s" | ||
| title={formatToSec(data?.fcp, 'ms')} | ||
| description={FCP_LABEL} | ||
| isLoading={loading} | ||
| /> | ||
| </EuiFlexItem> | ||
| <EuiFlexItem grow={false} style={STAT_STYLE}> | ||
| <EuiStat | ||
| titleSize="s" | ||
| title={formatToSec(data?.tbt)} | ||
| description={TBT_LABEL} | ||
| isLoading={loading} | ||
| /> | ||
| </EuiFlexItem> | ||
| <EuiFlexItem grow={false} style={STAT_STYLE}> | ||
| <EuiStat | ||
| titleSize="s" | ||
| title={longTaskData?.noOfLongTasks ?? 0} | ||
| description={NO_OF_LONG_TASK} | ||
| isLoading={status !== 'success'} | ||
| /> | ||
| </EuiFlexItem> | ||
| <EuiFlexItem grow={false} style={STAT_STYLE}> | ||
| <EuiStat | ||
| titleSize="s" | ||
| title={formatToSec(longTaskData?.longestLongTask)} | ||
| description={LONGEST_LONG_TASK} | ||
| isLoading={status !== 'success'} | ||
| /> | ||
| </EuiFlexItem> | ||
| <EuiFlexItem grow={false} style={STAT_STYLE}> | ||
| <EuiStat | ||
| titleSize="s" | ||
| title={formatToSec(longTaskData?.sumOfLongTasks)} | ||
| description={SUM_LONG_TASKS} | ||
| isLoading={status !== 'success'} | ||
| /> | ||
| </EuiFlexItem> | ||
| </EuiFlexGroup> | ||
| ); | ||
| } |
19 changes: 19 additions & 0 deletions
19
...ck/plugins/apm/public/components/app/RumDashboard/UXMetrics/__tests__/FormatToSec.test.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| /* | ||
| * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
| * or more contributor license agreements. Licensed under the Elastic License; | ||
| * you may not use this file except in compliance with the Elastic License. | ||
| */ | ||
|
|
||
| import { formatToSec } from '../KeyUXMetrics'; | ||
|
|
||
| describe('FormatToSec', () => { | ||
| test('it returns the expected value', () => { | ||
| expect(formatToSec(3413000)).toStrictEqual('3.41 s'); | ||
| expect(formatToSec(15548000)).toStrictEqual('15.55 s'); | ||
| expect(formatToSec(1147.5, 'ms')).toStrictEqual('1.15 s'); | ||
| expect(formatToSec(114, 'ms')).toStrictEqual('114 ms'); | ||
| expect(formatToSec(undefined, 'ms')).toStrictEqual('0 ms'); | ||
| expect(formatToSec(undefined)).toStrictEqual('0 ms'); | ||
| expect(formatToSec('1123232')).toStrictEqual('1.12 s'); | ||
| }); | ||
| }); |
78 changes: 78 additions & 0 deletions
78
x-pack/plugins/apm/public/components/app/RumDashboard/UXMetrics/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; | ||
| * you may not use this file except in compliance with the Elastic License. | ||
| */ | ||
|
|
||
| import React from 'react'; | ||
| import { | ||
| EuiFlexGroup, | ||
| EuiFlexItem, | ||
| EuiHorizontalRule, | ||
| EuiPanel, | ||
| EuiSpacer, | ||
| EuiTitle, | ||
| } from '@elastic/eui'; | ||
| import { I18LABELS } from '../translations'; | ||
| import { CoreVitals } from '../CoreVitals'; | ||
| import { KeyUXMetrics } from './KeyUXMetrics'; | ||
| import { useUrlParams } from '../../../../hooks/useUrlParams'; | ||
| import { useFetcher } from '../../../../hooks/useFetcher'; | ||
|
|
||
| export interface UXMetrics { | ||
| cls: string; | ||
| fid: string; | ||
| lcp: string; | ||
| tbt: string; | ||
| fcp: number; | ||
| lcpRanks: number[]; | ||
| fidRanks: number[]; | ||
| clsRanks: number[]; | ||
| } | ||
|
|
||
| export function UXMetrics() { | ||
| const { urlParams, uiFilters } = useUrlParams(); | ||
|
|
||
| const { start, end } = urlParams; | ||
|
|
||
| const { data, status } = useFetcher( | ||
| (callApmApi) => { | ||
| const { serviceName } = uiFilters; | ||
| if (start && end && serviceName) { | ||
| return callApmApi({ | ||
| pathname: '/api/apm/rum-client/web-core-vitals', | ||
| params: { | ||
| query: { start, end, uiFilters: JSON.stringify(uiFilters) }, | ||
| }, | ||
| }); | ||
| } | ||
| return Promise.resolve(null); | ||
| }, | ||
| [start, end, uiFilters] | ||
| ); | ||
|
|
||
| return ( | ||
| <EuiPanel> | ||
| <EuiFlexGroup justifyContent="spaceBetween"> | ||
| <EuiFlexItem grow={1} data-cy={`client-metrics`}> | ||
| <EuiTitle size="s"> | ||
| <h2>{I18LABELS.userExperienceMetrics}</h2> | ||
| </EuiTitle> | ||
| <EuiSpacer size="s" /> | ||
| <KeyUXMetrics data={data} loading={status !== 'success'} /> | ||
| </EuiFlexItem> | ||
| </EuiFlexGroup> | ||
| <EuiHorizontalRule /> | ||
|
|
||
| <EuiFlexGroup justifyContent="spaceBetween"> | ||
| <EuiFlexItem grow={1} data-cy={`client-metrics`}> | ||
| <EuiTitle size="xs"> | ||
| <h3>{I18LABELS.coreWebVitals}</h3> | ||
| </EuiTitle> | ||
| <EuiSpacer size="s" /> | ||
| <CoreVitals data={data} loading={status !== 'success'} /> | ||
| </EuiFlexItem> | ||
| </EuiFlexGroup> | ||
| </EuiPanel> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.