Skip to content

Commit

Permalink
improve web core vitals
Browse files Browse the repository at this point in the history
  • Loading branch information
@shahzad31
shahzad31 committed Sep 24, 2020
1 parent 08a2266 commit 4f9ac0b
Show file tree
Hide file tree
Showing 8 changed files with 91 additions and 32 deletions.
13 changes: 0 additions & 13 deletions docs/development/core/server/kibana-plugin-core-server.isauthenticated.md
View file

This file was deleted.

10 changes: 5 additions & 5 deletions x-pack/plugins/apm/public/components/app/RumDashboard/CoreVitals/CoreVitalItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -90,7 +90,7 @@ export function CoreVitalItem({
<EuiFlexGroup
gutterSize="none"
alignItems="flexStart"
style={{ maxWidth: 340 }}
style={{ maxWidth: 350 }}
responsive={false}
>
{palette.map((hexCode, ind) => (
Expand Down
15 changes: 13 additions & 2 deletions x-pack/plugins/apm/public/components/app/RumDashboard/CoreVitals/PaletteLegends.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,19 @@ import {
EuiFlexItem,
EuiHealth,
euiPaletteForStatus,
EuiText,
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';
import {
NEEDS_IMPROVEMENT_LABEL,
GOOD_LABEL,
POOR_LABEL,
} from './translations';

const PaletteLegend = styled(EuiHealth)`
&:hover {
Expand Down Expand Up @@ -52,9 +58,10 @@ export function PaletteLegends({
const [darkMode] = useUiSetting$<boolean>('theme:darkMode');

const palette = euiPaletteForStatus(3);
const labels = [GOOD_LABEL, NEEDS_IMPROVEMENT_LABEL, POOR_LABEL];

return (
<EuiFlexGroup responsive={false}>
<EuiFlexGroup responsive={false} gutterSize={'s'}>
{palette.map((color, ind) => (
<EuiFlexItem
key={ind}
Expand All @@ -76,7 +83,11 @@ export function PaletteLegends({
position="bottom"
>
<StyledSpan darkMode={darkMode}>
<PaletteLegend color={color}>{ranks?.[ind]}%</PaletteLegend>
<PaletteLegend color={color}>
<EuiText size="xs">
{labels[ind]} ({ranks?.[ind]}%)
</EuiText>
</PaletteLegend>
</StyledSpan>
</EuiToolTip>
</EuiFlexItem>
Expand Down
5 changes: 3 additions & 2 deletions x-pack/plugins/apm/public/components/app/RumDashboard/CoreVitals/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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' },
Expand All @@ -28,7 +29,7 @@ export function CoreVitals({ data, loading }: Props) {
<EuiFlexItem>
<CoreVitalItem
title={LCP_LABEL}
value={lcp ? lcp + ' s' : '0'}
value={formatToSec(lcp, 'ms')}
ranks={lcpRanks}
loading={loading}
thresholds={CoreVitalsThresholds.LCP}
Expand All @@ -37,7 +38,7 @@ export function CoreVitals({ data, loading }: Props) {
<EuiFlexItem>
<CoreVitalItem
title={FID_LABEL}
value={fid ? fid + ' s' : '0'}
value={formatToSec(fid, 'ms')}
ranks={fidRanks}
loading={loading}
thresholds={CoreVitalsThresholds.FID}
Expand Down
27 changes: 24 additions & 3 deletions x-pack/plugins/apm/public/components/app/RumDashboard/CoreVitals/translations.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,21 +47,42 @@ export const SUM_LONG_TASKS = i18n.translate(
}
);

export const POOR_LABEL = i18n.translate('xpack.apm.rum.coreVitals.poor', {
export const A_POOR_LABEL = i18n.translate('xpack.apm.rum.coreVitals.poor', {
defaultMessage: 'a poor',
});

export const GOOD_LABEL = i18n.translate('xpack.apm.rum.coreVitals.good', {
export const A_GOOD_LABEL = i18n.translate('xpack.apm.rum.coreVitals.good', {
defaultMessage: 'a good',
});

export const AVERAGE_LABEL = i18n.translate(
export const AN_AVERAGE_LABEL = i18n.translate(
'xpack.apm.rum.coreVitals.average',
{
defaultMessage: 'an average',
}
);

export const POOR_LABEL = i18n.translate(
'xpack.apm.rum.coreVitals.legends.poor',
{
defaultMessage: 'Poor',
}
);

export const GOOD_LABEL = i18n.translate(
'xpack.apm.rum.coreVitals.legends.good',
{
defaultMessage: 'Good',
}
);

export const NEEDS_IMPROVEMENT_LABEL = i18n.translate(
'xpack.apm.rum.coreVitals.legends.needsImprovement',
{
defaultMessage: 'Needs improvement',
}
);

export const MORE_LABEL = i18n.translate('xpack.apm.rum.coreVitals.more', {
defaultMessage: 'more',
});
Expand Down
43 changes: 41 additions & 2 deletions x-pack/plugins/apm/public/components/app/RumDashboard/UXMetrics/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,20 @@
* you may not use this file except in compliance with the Elastic License.
*/

import React from 'react';
import React, { useState } from 'react';
import {
EuiButtonIcon,
EuiFlexGroup,
EuiFlexItem,
EuiHorizontalRule,
EuiLink,
EuiPanel,
EuiPopover,
EuiSpacer,
EuiTitle,
EuiText,
} from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n/react';
import { I18LABELS } from '../translations';
import { CoreVitals } from '../CoreVitals';
import { KeyUXMetrics } from './KeyUXMetrics';
Expand Down Expand Up @@ -56,6 +61,10 @@ export function UXMetrics() {
[start, end, uiFilters, searchTerm]
);

const [isPopoverOpen, setIsPopoverOpen] = useState(false);

const closePopover = () => setIsPopoverOpen(false);

return (
<EuiPanel>
<EuiFlexGroup justifyContent="spaceBetween">
Expand All @@ -72,7 +81,37 @@ export function UXMetrics() {
<EuiFlexGroup justifyContent="spaceBetween">
<EuiFlexItem grow={1} data-cy={`client-metrics`}>
<EuiTitle size="xs">
<h3>{I18LABELS.coreWebVitals}</h3>
<h3>
{I18LABELS.coreWebVitals}
<EuiPopover
isOpen={isPopoverOpen}
button={
<EuiButtonIcon
onClick={() => setIsPopoverOpen(true)}
color={'text'}
iconType={'questionInCircle'}
/>
}
closePopover={closePopover}
>
<div style={{ width: '300px' }}>
<EuiText>
<FormattedMessage
id="xpack.apm.ux.dashboard.webCoreVitals.help"
defaultMessage={'Learn more about'}
/>
<EuiLink
href="https://web.dev/vitals/"
external
target="_blank"
>
{' '}
{I18LABELS.coreWebVitals}
</EuiLink>
</EuiText>
</div>
</EuiPopover>
</h3>
</EuiTitle>
<EuiSpacer size="s" />
<CoreVitals data={data} loading={status !== 'success'} />
Expand Down
1 change: 1 addition & 0 deletions x-pack/plugins/apm/server/lib/rum_client/get_long_task_metrics.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,7 @@ export async function getLongTaskMetrics({
}
}
});

return {
noOfLongTasks,
sumOfLongTasks,
Expand Down
9 changes: 4 additions & 5 deletions x-pack/plugins/apm/server/lib/rum_client/get_web_core_vitals.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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),
Expand Down

0 comments on commit 4f9ac0b

Please sign in to comment.