[UX] Improve page-load axis (#78392)

shahzad31 · elasticmachine · web-flow · commit 07ebb81a79d3 · 2020-10-01T10:16:30.000+02:00
Co-authored-by: Elastic Machine &lt;elasticmachine@users.noreply.github.com&gt;
diff --git a/x-pack/plugins/apm/e2e/cypress/support/step_definitions/csm/breakdown_filter.ts b/x-pack/plugins/apm/e2e/cypress/support/step_definitions/csm/breakdown_filter.ts
@@ -36,7 +36,7 @@ Then(`breakdown series should appear in chart`, () => {
 
     cy.get('div.echLegendItem__label', DEFAULT_TIMEOUT).should(
       'have.text',
-      'ChromeChrome Mobile WebViewSafariFirefoxMobile SafariChrome MobileChrome Mobile iOSOverall'
+      'OverallChromeChrome Mobile WebViewSafariFirefoxMobile SafariChrome MobileChrome Mobile iOS'
     );
   });
 });
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', '0.06 s', '55 '];
+  const metrics = ['4 ms', '58 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,7 @@ Then(/^it filters the client metrics "([^"]*)"$/, (filterName) => {
   cy.get('.euiStat__title-isLoading').should('not.be.visible');
 
   const data =
-    filterName === 'os' ? ['5 ms', '0.06 s', '8 '] : ['4 ms', '0.05 s', '28 '];
+    filterName === 'os' ? ['5 ms', '64 ms', '8'] : ['4 ms', '55 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
@@ -18,7 +18,7 @@ When('the user changes the selected percentile', () => {
 });
 
 Then(`it displays client metric related to that percentile`, () => {
-  const metrics = ['14 ms', '0.13 s', '55 '];
+  const metrics = ['14 ms', '131 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', '0.06 s', '55 '];
+  const metrics = ['4 ms', '58 ms', '55'];
 
   verifyClientMetrics(metrics, false);
 });
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/Charts/PageLoadDistChart.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/Charts/PageLoadDistChart.tsx
@@ -88,6 +88,10 @@ export function PageLoadDistChart({
 
   const [darkMode] = useUiSetting$<boolean>('theme:darkMode');
 
+  const euiChartTheme = darkMode
+    ? EUI_CHARTS_THEME_DARK
+    : EUI_CHARTS_THEME_LIGHT;
+
   return (
     <ChartWrapper
       loading={loading || breakdownLoading}
@@ -97,11 +101,7 @@ export function PageLoadDistChart({
         <PageLoadChart>
           <Settings
             baseTheme={darkMode ? DARK_THEME : LIGHT_THEME}
-            theme={
-              darkMode
-                ? EUI_CHARTS_THEME_DARK.theme
-                : EUI_CHARTS_THEME_LIGHT.theme
-            }
+            theme={euiChartTheme.theme}
             onBrushEnd={onBrushEnd}
             tooltip={tooltipProps}
             showLegend
@@ -116,17 +116,23 @@ export function PageLoadDistChart({
             id="left"
             title={I18LABELS.percPageLoaded}
             position={Position.Left}
-            tickFormat={(d) => numeral(d).format('0.0') + '%'}
+            labelFormat={(d) => d + ' %'}
           />
           <LineSeries
+            sortIndex={0}
             fit={Fit.Linear}
             id={'PagesPercentage'}
             name={I18LABELS.overall}
             xScaleType={ScaleType.Linear}
             yScaleType={ScaleType.Linear}
             data={data?.pageLoadDistribution ?? []}
             curve={CurveType.CURVE_CATMULL_ROM}
-            lineSeriesStyle={{ point: { visible: false } }}
+            lineSeriesStyle={{
+              point: { visible: false },
+              line: { strokeWidth: 3 },
+            }}
+            color={euiChartTheme.theme.colors?.vizColors?.[1]}
+            tickFormat={(d) => numeral(d).format('0.0') + ' %'}
           />
           {breakdown && (
             <BreakdownSeries
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/Charts/PageViewsChart.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/Charts/PageViewsChart.tsx
@@ -71,6 +71,8 @@ export function PageViewsChart({ data, loading }: Props) {
     });
   };
 
+  const hasBreakdowns = !!data?.topItems?.length;
+
   const breakdownAccessors = data?.topItems?.length ? data?.topItems : ['y'];
 
   const [darkMode] = useUiSetting$<boolean>('theme:darkMode');
@@ -83,17 +85,17 @@ export function PageViewsChart({ data, loading }: Props) {
     return yAccessor;
   };
 
+  const euiChartTheme = darkMode
+    ? EUI_CHARTS_THEME_DARK
+    : EUI_CHARTS_THEME_LIGHT;
+
   return (
     <ChartWrapper loading={loading} height="calc(100% - 72px)">
       {(!loading || data) && (
         <Chart>
           <Settings
             baseTheme={darkMode ? DARK_THEME : LIGHT_THEME}
-            theme={
-              darkMode
-                ? EUI_CHARTS_THEME_DARK.theme
-                : EUI_CHARTS_THEME_LIGHT.theme
-            }
+            theme={euiChartTheme.theme}
             showLegend
             onBrushEnd={onBrushEnd}
             xDomain={{
@@ -122,6 +124,11 @@ export function PageViewsChart({ data, loading }: Props) {
             stackAccessors={['x']}
             data={data?.items ?? []}
             name={customSeriesNaming}
+            color={
+              !hasBreakdowns
+                ? euiChartTheme.theme.colors?.vizColors?.[1]
+                : undefined
+            }
           />
         </Chart>
       )}
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
@@ -11,6 +11,7 @@ import { EuiFlexGroup, EuiFlexItem, EuiStat, EuiToolTip } from '@elastic/eui';
 import { useFetcher } from '../../../../hooks/useFetcher';
 import { I18LABELS } from '../translations';
 import { useUxQuery } from '../hooks/useUxQuery';
+import { formatToSec } from '../UXMetrics/KeyUXMetrics';
 import { CsmSharedContext } from '../CsmSharedContext';
 
 const ClFlexGroup = styled(EuiFlexGroup)`
@@ -49,22 +50,22 @@ export function ClientMetrics() {
 
   const STAT_STYLE = { width: '240px' };
 
+  const pageViewsTotal = data?.pageViews?.value ?? 0;
+
   return (
     <ClFlexGroup responsive={false}>
       <EuiFlexItem grow={false} style={STAT_STYLE}>
         <EuiStat
           titleSize="l"
-          title={
-            (((data?.backEnd?.value ?? 0) * 1000).toFixed(0) ?? '-') + ' ms'
-          }
+          title={formatToSec(data?.backEnd?.value ?? 0, 'ms')}
           description={I18LABELS.backEnd}
           isLoading={status !== 'success'}
         />
       </EuiFlexItem>
       <EuiFlexItem grow={false} style={STAT_STYLE}>
         <EuiStat
           titleSize="l"
-          title={((data?.frontEnd?.value ?? 0)?.toFixed(2) ?? '-') + ' s'}
+          title={formatToSec(data?.frontEnd?.value ?? 0, 'ms')}
           description={I18LABELS.frontEnd}
           isLoading={status !== 'success'}
         />
@@ -73,9 +74,13 @@ export function ClientMetrics() {
         <EuiStat
           titleSize="l"
           title={
-            <EuiToolTip content={data?.pageViews?.value}>
-              <>{numeral(data?.pageViews?.value).format('0 a') ?? '-'}</>
-            </EuiToolTip>
+            pageViewsTotal < 10000 ? (
+              numeral(pageViewsTotal).format('0,0')
+            ) : (
+              <EuiToolTip content={numeral(pageViewsTotal).format('0,0')}>
+                <>{numeral(pageViewsTotal).format('0 a')}</>
+              </EuiToolTip>
+            )
           }
           description={I18LABELS.pageViews}
           isLoading={status !== 'success'}
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/PageLoadDistribution/BreakdownSeries.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/PageLoadDistribution/BreakdownSeries.tsx
@@ -6,8 +6,13 @@
 
 import { CurveType, Fit, LineSeries, ScaleType } from '@elastic/charts';
 import React, { useEffect } from 'react';
+import {
+  EUI_CHARTS_THEME_DARK,
+  EUI_CHARTS_THEME_LIGHT,
+} from '@elastic/eui/dist/eui_charts_theme';
 import { PercentileRange } from './index';
 import { useBreakdowns } from './use_breakdowns';
+import { useUiSetting$ } from '../../../../../../../../src/plugins/kibana_react/public';
 
 interface Props {
   field: string;
@@ -22,6 +27,12 @@ export function BreakdownSeries({
   percentileRange,
   onLoadingChange,
 }: Props) {
+  const [darkMode] = useUiSetting$<boolean>('theme:darkMode');
+
+  const euiChartTheme = darkMode
+    ? EUI_CHARTS_THEME_DARK
+    : EUI_CHARTS_THEME_LIGHT;
+
   const { data, status } = useBreakdowns({
     field,
     value,
@@ -32,9 +43,11 @@ export function BreakdownSeries({
     onLoadingChange(status !== 'success');
   }, [status, onLoadingChange]);
 
+  // sort index 1 color vizColors1 is already used for overall,
+  // so don't user that here
   return (
     <>
-      {data?.map(({ data: seriesData, name }) => (
+      {data?.map(({ data: seriesData, name }, sortIndex) => (
         <LineSeries
           id={`${field}-${value}-${name}`}
           key={`${field}-${value}-${name}`}
@@ -45,6 +58,11 @@ export function BreakdownSeries({
           data={seriesData ?? []}
           lineSeriesStyle={{ point: { visible: false } }}
           fit={Fit.Linear}
+          color={
+            euiChartTheme.theme.colors?.vizColors?.[
+              sortIndex === 0 ? 0 : sortIndex + 1
+            ]
+          }
         />
       ))}
     </>
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
@@ -6,6 +6,7 @@
 
 import React from 'react';
 import { EuiFlexItem, EuiStat, EuiFlexGroup } from '@elastic/eui';
+import numeral from '@elastic/numeral';
 import { UXMetrics } from './index';
 import {
   FCP_LABEL,
@@ -77,7 +78,7 @@ export function KeyUXMetrics({ data, loading }: Props) {
       <EuiFlexItem grow={false} style={STAT_STYLE}>
         <EuiStat
           titleSize="s"
-          title={longTaskData?.noOfLongTasks ?? 0}
+          title={numeral(longTaskData?.noOfLongTasks ?? 0).format('0,0')}
           description={NO_OF_LONG_TASK}
           isLoading={status !== 'success'}
         />
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
diff --git a/x-pack/plugins/apm/server/lib/rum_client/get_client_metrics.ts b/x-pack/plugins/apm/server/lib/rum_client/get_client_metrics.ts
diff --git a/x-pack/plugins/apm/server/lib/rum_client/get_page_load_distribution.ts b/x-pack/plugins/apm/server/lib/rum_client/get_page_load_distribution.ts
diff --git a/x-pack/plugins/apm/server/lib/rum_client/get_pl_dist_breakdown.ts b/x-pack/plugins/apm/server/lib/rum_client/get_pl_dist_breakdown.ts
diff --git a/x-pack/plugins/apm/server/routes/rum_client.ts b/x-pack/plugins/apm/server/routes/rum_client.ts
