Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[User experience] Enhance page load duration metrics #81915

Merged
merged 5 commits into from
Oct 29, 2020
Merged

[User experience] Enhance page load duration metrics #81915

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f903060
Enhance page load duration metrics and helper tooltips
Kerry350 Oct 28, 2020
f394085
Amend translations
Kerry350 Oct 28, 2020
a7085f3
Amend test
Kerry350 Oct 28, 2020
c3ec45e
Amend e2e tests
Kerry350 Oct 29, 2020
f5b46fe
Have separate page load duration and page load labels
Kerry350 Oct 29, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 41 additions & 3 deletions x-pack/plugins/apm/public/components/app/RumDashboard/ClientMetrics/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,13 @@ import * as React from 'react';
import numeral from '@elastic/numeral';
import styled from 'styled-components';
import { useContext, useEffect } from 'react';
import { EuiFlexGroup, EuiFlexItem, EuiStat, EuiToolTip } from '@elastic/eui';
import {
EuiFlexGroup,
EuiFlexItem,
EuiStat,
EuiToolTip,
EuiIconTip,
} from '@elastic/eui';
import { useFetcher } from '../../../../hooks/useFetcher';
import { I18LABELS } from '../translations';
import { useUxQuery } from '../hooks/useUxQuery';
Expand Down Expand Up @@ -70,19 +76,51 @@ export function ClientMetrics() {

return (
<ClFlexGroup responsive={false}>
<EuiFlexItem grow={false} style={STAT_STYLE}>
<EuiStat
titleSize="l"
title={formatTitle('ms', data?.totalPageLoadDuration?.value)}
description={
<>
{I18LABELS.totalPageLoad}
<EuiIconTip
content={I18LABELS.totalPageLoadTooltip}
type="questionInCircle"
/>
</>
}
isLoading={status !== 'success'}
/>
</EuiFlexItem>
<EuiFlexItem grow={false} style={STAT_STYLE}>
<EuiStat
titleSize="l"
title={formatTitle('ms', data?.backEnd?.value)}
description={I18LABELS.backEnd}
description={
<>
{I18LABELS.backEnd}
<EuiIconTip
content={I18LABELS.backEndTooltip}
type="questionInCircle"
/>
</>
}
isLoading={status !== 'success'}
/>
</EuiFlexItem>
<EuiFlexItem grow={false} style={STAT_STYLE}>
<EuiStat
titleSize="l"
title={formatTitle('ms', data?.frontEnd?.value)}
description={I18LABELS.frontEnd}
description={
<>
{I18LABELS.frontEnd}
<EuiIconTip
content={I18LABELS.frontEndTooltip}
type="questionInCircle"
/>
</>
}
isLoading={status !== 'success'}
/>
</EuiFlexItem>
Expand Down
51 changes: 45 additions & 6 deletions x-pack/plugins/apm/public/components/app/RumDashboard/UXMetrics/KeyUXMetrics.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,20 @@
*/

import React from 'react';
import { EuiFlexItem, EuiStat, EuiFlexGroup } from '@elastic/eui';
import { EuiFlexItem, EuiStat, EuiFlexGroup, EuiIconTip } from '@elastic/eui';
import numeral from '@elastic/numeral';
import {
DATA_UNDEFINED_LABEL,
FCP_LABEL,
FCP_TOOLTIP,
LONGEST_LONG_TASK,
LONGEST_LONG_TASK_TOOLTIP,
NO_OF_LONG_TASK,
NO_OF_LONG_TASK_TOOLTIP,
SUM_LONG_TASKS,
SUM_LONG_TASKS_TOOLTIP,
TBT_LABEL,
TBT_TOOLTIP,
} from './translations';
import { useFetcher } from '../../../../hooks/useFetcher';
import { useUxQuery } from '../hooks/useUxQuery';
Expand Down Expand Up @@ -69,15 +74,25 @@ export function KeyUXMetrics({ data, loading }: Props) {
<EuiStat
titleSize="s"
title={formatTitle('ms', data?.fcp)}
description={FCP_LABEL}
description={
<>
{FCP_LABEL}
<EuiIconTip content={FCP_TOOLTIP} type="questionInCircle" />
</>
}
isLoading={loading}
/>
</EuiFlexItem>
<EuiFlexItem grow={false} style={STAT_STYLE}>
<EuiStat
titleSize="s"
title={formatTitle('ms', data?.tbt)}
description={TBT_LABEL}
description={
<>
{TBT_LABEL}
<EuiIconTip content={TBT_TOOLTIP} type="questionInCircle" />
</>
}
isLoading={loading}
/>
</EuiFlexItem>
Expand All @@ -89,23 +104,47 @@ export function KeyUXMetrics({ data, loading }: Props) {
? numeral(longTaskData.noOfLongTasks).format('0,0')
: DATA_UNDEFINED_LABEL
}
description={NO_OF_LONG_TASK}
description={
<>
{NO_OF_LONG_TASK}
<EuiIconTip
content={NO_OF_LONG_TASK_TOOLTIP}
type="questionInCircle"
/>
</>
}
isLoading={status !== 'success'}
/>
</EuiFlexItem>
<EuiFlexItem grow={false} style={STAT_STYLE}>
<EuiStat
titleSize="s"
title={formatTitle('ms', longTaskData?.longestLongTask)}
description={LONGEST_LONG_TASK}
description={
<>
{LONGEST_LONG_TASK}
<EuiIconTip
content={LONGEST_LONG_TASK_TOOLTIP}
type="questionInCircle"
/>
</>
}
isLoading={status !== 'success'}
/>
</EuiFlexItem>
<EuiFlexItem grow={false} style={STAT_STYLE}>
<EuiStat
titleSize="s"
title={formatTitle('ms', longTaskData?.sumOfLongTasks)}
description={SUM_LONG_TASKS}
description={
<>
{SUM_LONG_TASKS}
<EuiIconTip
content={SUM_LONG_TASKS_TOOLTIP}
type="questionInCircle"
/>
</>
}
isLoading={status !== 'success'}
/>
</EuiFlexItem>
Expand Down
40 changes: 40 additions & 0 deletions x-pack/plugins/apm/public/components/app/RumDashboard/UXMetrics/translations.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,31 +18,71 @@ export const FCP_LABEL = i18n.translate('xpack.apm.rum.coreVitals.fcp', {
defaultMessage: 'First contentful paint',
});

export const FCP_TOOLTIP = i18n.translate(
'xpack.apm.rum.coreVitals.fcpTooltip',
{
defaultMessage:
'First contentful paint (FCP) focusses on the initial rendering and measures the time from when the page starts loading to when any part of the page’s content is displayed on the screen.',
}
);

export const TBT_LABEL = i18n.translate('xpack.apm.rum.coreVitals.tbt', {
defaultMessage: 'Total blocking time',
});

export const TBT_TOOLTIP = i18n.translate(
'xpack.apm.rum.coreVitals.tbtTooltip',
{
defaultMessage:
'Total blocking time (TBT) is the sum of the blocking time (duration above 50 ms) for each long task that occurs between the First contentful paint and the time when the transaction is completed.',
}
);

export const NO_OF_LONG_TASK = i18n.translate(
'xpack.apm.rum.uxMetrics.noOfLongTasks',
{
defaultMessage: 'No. of long tasks',
}
);

export const NO_OF_LONG_TASK_TOOLTIP = i18n.translate(
'xpack.apm.rum.uxMetrics.noOfLongTasksTooltip',
{
defaultMessage:
'The number of long tasks, a long task is defined as any user activity or browser task that monopolizes the UI thread for extended periods (greater than 50 milliseconds) and blocks other critical tasks (frame rate or input latency) from being executed.',
}
);

export const LONGEST_LONG_TASK = i18n.translate(
'xpack.apm.rum.uxMetrics.longestLongTasks',
{
defaultMessage: 'Longest long task duration',
}
);

export const LONGEST_LONG_TASK_TOOLTIP = i18n.translate(
'xpack.apm.rum.uxMetrics.longestLongTasks',
{
defaultMessage:
'The duration of the longest long task, a long task is defined as any user activity or browser task that monopolizes the UI thread for extended periods (greater than 50 milliseconds) and blocks other critical tasks (frame rate or input latency) from being executed.',
}
);

export const SUM_LONG_TASKS = i18n.translate(
'xpack.apm.rum.uxMetrics.sumLongTasks',
{
defaultMessage: 'Total long tasks duration',
}
);

export const SUM_LONG_TASKS_TOOLTIP = i18n.translate(
'xpack.apm.rum.uxMetrics.sumLongTasks',
{
defaultMessage:
'The total duration of long tasks, a long task is defined as any user activity or browser task that monopolizes the UI thread for extended periods (greater than 50 milliseconds) and blocks other critical tasks (frame rate or input latency) from being executed.',
}
);

export const getPercentileLabel = (value: number) => {
if (value === 50) return I18LABELS.median;

Expand Down
20 changes: 19 additions & 1 deletion x-pack/plugins/apm/public/components/app/RumDashboard/translations.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,9 @@ export const I18LABELS = {
dataMissing: i18n.translate('xpack.apm.rum.dashboard.dataMissing', {
defaultMessage: 'N/A',
}),
totalPageLoad: i18n.translate('xpack.apm.rum.dashboard.totalPageLoad', {
defaultMessage: 'Total',
}),
backEnd: i18n.translate('xpack.apm.rum.dashboard.backend', {
defaultMessage: 'Backend',
}),
Expand All @@ -31,7 +34,7 @@ export const I18LABELS = {
pageLoadDuration: i18n.translate(
'xpack.apm.rum.dashboard.pageLoadDuration.label',
{
defaultMessage: 'Page load duration',
defaultMessage: 'Page load',
}
),
pageLoadDistribution: i18n.translate(
Expand Down Expand Up @@ -156,6 +159,21 @@ export const I18LABELS = {
noData: i18n.translate('xpack.apm.ux.visitorBreakdown.noData', {
defaultMessage: 'No data.',
}),
// Helper tooltips
totalPageLoadTooltip: i18n.translate(
'xpack.apm.rum.dashboard.tooltips.totalPageLoad',
{
defaultMessage: 'Total represents the full page load duration',
}
),
frontEndTooltip: i18n.translate('xpack.apm.rum.dashboard.tooltips.frontEnd', {
defaultMessage:
'Frontend time represents the total page load duration minus the backend time',
}),
backEndTooltip: i18n.translate('xpack.apm.rum.dashboard.tooltips.backEnd', {
defaultMessage:
'Backend time represents time to first byte (TTFB), which is when the first response packet is received after the request has been made',
}),
};

export const VisitorBreakdownLabel = i18n.translate(
Expand Down
4 changes: 2 additions & 2 deletions x-pack/plugins/apm/server/lib/rum_client/__snapshots__/queries.test.ts.snap
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

24 changes: 13 additions & 11 deletions x-pack/plugins/apm/server/lib/rum_client/get_client_metrics.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@ import { getRumPageLoadTransactionsProjection } from '../../projections/rum_page
import { mergeProjection } from '../../projections/util/merge_projection';
import { Setup, SetupTimeRange } from '../helpers/setup_request';
import {
TRANSACTION_DOM_INTERACTIVE,
TRANSACTION_TIME_TO_FIRST_BYTE,
TRANSACTION_DURATION,
} from '../../../common/elasticsearch_fieldnames';

export async function getClientMetrics({
Expand Down Expand Up @@ -37,18 +37,18 @@ export async function getClientMetrics({
exists: { field: 'transaction.marks.navigationTiming.fetchStart' },
},
aggs: {
backEnd: {
totalPageLoadDuration: {
percentiles: {
field: TRANSACTION_TIME_TO_FIRST_BYTE,
field: TRANSACTION_DURATION,
percents: [percentile],
hdr: {
number_of_significant_value_digits: 3,
},
},
},
domInteractive: {
backEnd: {
percentiles: {
field: TRANSACTION_DOM_INTERACTIVE,
field: TRANSACTION_TIME_TO_FIRST_BYTE,
percents: [percentile],
hdr: {
number_of_significant_value_digits: 3,
Expand All @@ -64,17 +64,19 @@ export async function getClientMetrics({
const { apmEventClient } = setup;
const response = await apmEventClient.search(params);
const {
hasFetchStartField: { backEnd, domInteractive },
hasFetchStartField: { backEnd, totalPageLoadDuration },
} = response.aggregations!;

const pkey = percentile.toFixed(1);

// Divide by 1000 to convert ms into seconds
const totalPageLoadDurationValue = totalPageLoadDuration.values[pkey] ?? 0;
const totalPageLoadDurationValueMs = totalPageLoadDurationValue / 1000; // Microseconds to milliseconds
const backendValue = backEnd.values[pkey] ?? 0;

return {
pageViews: { value: response.hits.total.value ?? 0 },
backEnd: { value: backEnd.values[pkey] || 0 },
frontEnd: {
value: (domInteractive.values[pkey] || 0) - (backEnd.values[pkey] || 0),
},
totalPageLoadDuration: { value: totalPageLoadDurationValueMs },
backEnd: { value: backendValue },
frontEnd: { value: totalPageLoadDurationValueMs - backendValue },
};
}