From 6f18f9008e4d703cfdce244ccaa4a699f0c550ec Mon Sep 17 00:00:00 2001 From: Shahzad Date: Thu, 17 Sep 2020 13:02:20 +0200 Subject: [PATCH] [CSM Dashboard] Remove points from line chart (#77617) Co-authored-by: Elastic Machine --- .../Breakdowns/BreakdownFilter.tsx | 3 ++- .../RumDashboard/Charts/PageLoadDistChart.tsx | 3 +++ .../PageLoadDistribution/BreakdownSeries.tsx | 6 +++-- .../rum_client/get_page_load_distribution.ts | 23 +++++++++++++++---- .../lib/rum_client/get_pl_dist_breakdown.ts | 17 +++++++------- .../lib/rum_client/get_web_core_vitals.ts | 2 +- .../trial/tests/csm/web_core_vitals.ts | 2 +- 7 files changed, 38 insertions(+), 18 deletions(-) diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/Breakdowns/BreakdownFilter.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/Breakdowns/BreakdownFilter.tsx index 91ce57c78b993..626c2124d421e 100644 --- a/x-pack/plugins/apm/public/components/app/RumDashboard/Breakdowns/BreakdownFilter.tsx +++ b/x-pack/plugins/apm/public/components/app/RumDashboard/Breakdowns/BreakdownFilter.tsx @@ -75,8 +75,9 @@ export function BreakdownFilter({ const onOptionChange = (value: string) => { if (value === NO_BREAKDOWN) { onBreakdownChange(null); + } else { + onBreakdownChange(items.find(({ fieldName }) => fieldName === value)!); } - onBreakdownChange(items.find(({ fieldName }) => fieldName === value)!); }; return ( 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 index c832ec9fcc0d0..79cd1c5753ae5 100644 --- a/x-pack/plugins/apm/public/components/app/RumDashboard/Charts/PageLoadDistChart.tsx +++ b/x-pack/plugins/apm/public/components/app/RumDashboard/Charts/PageLoadDistChart.tsx @@ -18,6 +18,7 @@ import { TooltipValueFormatter, DARK_THEME, LIGHT_THEME, + Fit, } from '@elastic/charts'; import { EUI_CHARTS_THEME_DARK, @@ -115,12 +116,14 @@ export function PageLoadDistChart({ tickFormat={(d) => numeral(d).format('0.0') + '%'} /> {breakdown && ( ))} 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 index a871d22dd52f1..3d8ab7a72654d 100644 --- 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 @@ -15,10 +15,27 @@ import { export const MICRO_TO_SEC = 1000000; +const NUMBER_OF_PLD_STEPS = 100; + export function microToSec(val: number) { return Math.round((val / MICRO_TO_SEC + Number.EPSILON) * 100) / 100; } +export const getPLDChartSteps = ({ + maxDuration, + minDuration, +}: { + maxDuration: number; + minDuration: number; +}) => { + const stepValue = (maxDuration - minDuration) / NUMBER_OF_PLD_STEPS; + const stepValues = []; + for (let i = 1; i < NUMBER_OF_PLD_STEPS + 1; i++) { + stepValues.push((stepValue * i + minDuration).toFixed(2)); + } + return stepValues; +}; + export async function getPageLoadDistribution({ setup, minPercentile, @@ -105,11 +122,7 @@ const getPercentilesDistribution = async ({ minDuration: number; maxDuration: number; }) => { - const stepValue = (maxDuration - minDuration) / 100; - const stepValues = []; - for (let i = 1; i < 101; i++) { - stepValues.push((stepValue * i + minDuration).toFixed(2)); - } + const stepValues = getPLDChartSteps({ maxDuration, minDuration }); const projection = getRumPageLoadTransactionsProjection({ setup, 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 index 4c9f1184c8e98..1945140e35777 100644 --- 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 @@ -19,7 +19,11 @@ import { USER_AGENT_OS, TRANSACTION_DURATION, } from '../../../common/elasticsearch_fieldnames'; -import { MICRO_TO_SEC, microToSec } from './get_page_load_distribution'; +import { + getPLDChartSteps, + MICRO_TO_SEC, + microToSec, +} from './get_page_load_distribution'; export const getBreakdownField = (breakdown: string) => { switch (breakdown) { @@ -47,13 +51,10 @@ export const getPageLoadDistBreakdown = async ({ breakdown: string; }) => { // convert secs to micros - const stepValue = - (maxDuration * MICRO_TO_SEC - minDuration * MICRO_TO_SEC) / 50; - const stepValues = []; - - for (let i = 1; i < 51; i++) { - stepValues.push((stepValue * i + minDuration).toFixed(2)); - } + const stepValues = getPLDChartSteps({ + minDuration: minDuration * MICRO_TO_SEC, + maxDuration: maxDuration * MICRO_TO_SEC, + }); const projection = getRumPageLoadTransactionsProjection({ setup, diff --git a/x-pack/plugins/apm/server/lib/rum_client/get_web_core_vitals.ts b/x-pack/plugins/apm/server/lib/rum_client/get_web_core_vitals.ts index f7b95696d422d..4fcfb53a05887 100644 --- a/x-pack/plugins/apm/server/lib/rum_client/get_web_core_vitals.ts +++ b/x-pack/plugins/apm/server/lib/rum_client/get_web_core_vitals.ts @@ -124,7 +124,7 @@ export async function getWebCoreVitals({ // Divide by 1000 to convert ms into seconds return { - cls: String(cls?.values['50.0'] || 0), + 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) / 1000).toFixed(2), diff --git a/x-pack/test/apm_api_integration/trial/tests/csm/web_core_vitals.ts b/x-pack/test/apm_api_integration/trial/tests/csm/web_core_vitals.ts index 654386cb9987b..18beb76e5a3a0 100644 --- a/x-pack/test/apm_api_integration/trial/tests/csm/web_core_vitals.ts +++ b/x-pack/test/apm_api_integration/trial/tests/csm/web_core_vitals.ts @@ -52,7 +52,7 @@ export default function rumServicesApiTests({ getService }: FtrProviderContext) expectSnapshot(response.body).toMatchInline(` Object { - "cls": "0", + "cls": "0.00", "clsRanks": Array [ 100, 0,