[User experience] Enhance page load duration metrics (#81915) (#82025)

* Enhance page load duration metrics and helper tooltips
elastic · Oct 29, 2020 · 79934f5 · 79934f5
1 parent 253a6b4
commit 79934f5
Show file tree

Hide file tree

Showing 12 changed files with 191 additions and 34 deletions.
diff --git a/x-pack/plugins/apm/e2e/cypress/support/step_definitions/csm/csm_dashboard.ts b/x-pack/plugins/apm/e2e/cypress/support/step_definitions/csm/csm_dashboard.ts
@@ -26,7 +26,7 @@ Given(`a user browses the APM UI application for RUM Data`, () => {
 });
 
 Then(`should have correct client metrics`, () => {
-  const metrics = ['4 ms', '58 ms', '55'];
+  const metrics = ['80 ms', '4 ms', '76 ms', '55'];
 
   verifyClientMetrics(metrics, true);
 });

diff --git a/x-pack/plugins/apm/e2e/cypress/support/step_definitions/csm/csm_filters.ts b/x-pack/plugins/apm/e2e/cypress/support/step_definitions/csm/csm_filters.ts
@@ -56,7 +56,9 @@ Then(/^it filters the client metrics "([^"]*)"$/, (filterName) => {
   cy.get('.euiStat__title-isLoading').should('not.be.visible');
 
   const data =
-    filterName === 'os' ? ['5 ms', '64 ms', '8'] : ['4 ms', '55 ms', '28'];
+    filterName === 'os'
+      ? ['82 ms', '5 ms', '77 ms', '8']
+      : ['75 ms', '4 ms', '71 ms', '28'];
 
   verifyClientMetrics(data, true);
 

diff --git a/x-pack/plugins/apm/e2e/cypress/support/step_definitions/csm/percentile_select.ts b/x-pack/plugins/apm/e2e/cypress/support/step_definitions/csm/percentile_select.ts
@@ -16,7 +16,7 @@ When('the user changes the selected percentile', () => {
 });
 
 Then(`it displays client metric related to that percentile`, () => {
-  const metrics = ['14 ms', '131 ms', '55'];
+  const metrics = ['165 ms', '14 ms', '151 ms', '55'];
 
   verifyClientMetrics(metrics, false);
 

diff --git a/x-pack/plugins/apm/e2e/cypress/support/step_definitions/csm/service_name_filter.ts b/x-pack/plugins/apm/e2e/cypress/support/step_definitions/csm/service_name_filter.ts
@@ -15,7 +15,7 @@ When('the user changes the selected service name', () => {
 });
 
 Then(`it displays relevant client metrics`, () => {
-  const metrics = ['4 ms', '58 ms', '55'];
+  const metrics = ['80 ms', '4 ms', '76 ms', '55'];
 
   verifyClientMetrics(metrics, false);
 });
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/ClientMetrics/index.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/ClientMetrics/index.tsx
@@ -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';
@@ -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>

diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/RumDashboard.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/RumDashboard.tsx
@@ -36,8 +36,7 @@ export function RumDashboard() {
             <EuiFlexItem grow={1} data-cy={`client-metrics`}>
               <EuiTitle size="xs">
                 <h3>
-                  {I18LABELS.pageLoadDuration} (
-                  {getPercentileLabel(percentile!)})
+                  {I18LABELS.pageLoad} ({getPercentileLabel(percentile!)})
                 </h3>
               </EuiTitle>
               <EuiSpacer size="s" />

diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/UXMetrics/KeyUXMetrics.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/UXMetrics/KeyUXMetrics.tsx
@@ -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';
@@ -70,15 +75,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>
@@ -90,23 +105,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>

diff --git a/.../plugins/apm/public/components/app/RumDashboard/UXMetrics/__tests__/KeyUXMetrics.test.tsx b/.../plugins/apm/public/components/app/RumDashboard/UXMetrics/__tests__/KeyUXMetrics.test.tsx
@@ -19,7 +19,7 @@ describe('KeyUXMetrics', () => {
       status: fetcherHook.FETCH_STATUS.SUCCESS,
       refetch: jest.fn(),
     });
-    const { getByText } = render(
+    const { getAllByText } = render(
       <KeyUXMetrics
         loading={false}
         data={{
@@ -36,10 +36,26 @@ describe('KeyUXMetrics', () => {
       />
     );
 
-    expect(getByText('Longest long task duration 271 ms')).toBeInTheDocument();
-    expect(getByText('Total long tasks duration 520 ms')).toBeInTheDocument();
-    expect(getByText('No. of long tasks 3')).toBeInTheDocument();
-    expect(getByText('Total blocking time 271 ms')).toBeInTheDocument();
-    expect(getByText('First contentful paint 1.27 s')).toBeInTheDocument();
+    const checkText = (text: string) => {
+      return (content: any, node: any) => {
+        return node?.textContent?.includes(text);
+      };
+    };
+
+    expect(
+      getAllByText(checkText('Longest long task duration271 ms'))[0]
+    ).toBeInTheDocument();
+    expect(
+      getAllByText(checkText('Total long tasks duration520 ms'))[0]
+    ).toBeInTheDocument();
+    expect(
+      getAllByText(checkText('No. of long tasks3'))[0]
+    ).toBeInTheDocument();
+    expect(
+      getAllByText(checkText('Total blocking time271 ms'))[0]
+    ).toBeInTheDocument();
+    expect(
+      getAllByText(checkText('First contentful paint1.27 s'))[0]
+    ).toBeInTheDocument();
   });
 });
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/UXMetrics/translations.ts b/x-pack/plugins/apm/public/components/app/RumDashboard/UXMetrics/translations.ts
@@ -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.longestLongTasksTooltip',
+  {
+    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.sumLongTasksTooltip',
+  {
+    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;
 

diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/translations.ts b/x-pack/plugins/apm/public/components/app/RumDashboard/translations.ts
@@ -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',
   }),
@@ -34,6 +37,9 @@ export const I18LABELS = {
       defaultMessage: 'Page load duration',
     }
   ),
+  pageLoad: i18n.translate('xpack.apm.rum.dashboard.pageLoad.label', {
+    defaultMessage: 'Page load',
+  }),
   pageLoadDistribution: i18n.translate(
     'xpack.apm.rum.dashboard.pageLoadDistribution.label',
     {
@@ -156,6 +162,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(

diff --git a/x-pack/plugins/apm/server/lib/rum_client/__snapshots__/queries.test.ts.snap b/x-pack/plugins/apm/server/lib/rum_client/__snapshots__/queries.test.ts.snap