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 index acfbe6e0a4e78..342f3e0aa5267 100644 --- 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 index 28af4fd5d8a56..a8edf862ab256 100644 --- 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 index 75974ef9c202c..5c2109bb518c2 100644 --- 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 index 4d2ba4d01ae6c..55c980d5edeb4 100644 --- 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 index b3899a5649b72..20c6a3fb72aa9 100644 --- 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 index 4a5f43dacedf4..4eb24f8c80b9a 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 @@ -88,6 +88,10 @@ export function PageLoadDistChart({ const [darkMode] = useUiSetting$('theme:darkMode'); + const euiChartTheme = darkMode + ? EUI_CHARTS_THEME_DARK + : EUI_CHARTS_THEME_LIGHT; + return ( numeral(d).format('0.0') + '%'} + labelFormat={(d) => d + ' %'} /> numeral(d).format('0.0') + ' %'} /> {breakdown && ( ('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 ( {(!loading || data) && ( )} 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 index 03f2f31f35817..310c01291aea4 100644 --- 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,14 +50,14 @@ export function ClientMetrics() { const STAT_STYLE = { width: '240px' }; + const pageViewsTotal = data?.pageViews?.value ?? 0; + return ( @@ -64,7 +65,7 @@ export function ClientMetrics() { @@ -73,9 +74,13 @@ export function ClientMetrics() { - <>{numeral(data?.pageViews?.value).format('0 a') ?? '-'} - + pageViewsTotal < 10000 ? ( + numeral(pageViewsTotal).format('0,0') + ) : ( + + <>{numeral(pageViewsTotal).format('0 a')} + + ) } 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 index 3463327441b7b..f348aca495c71 100644 --- 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$('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) => ( ))} 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 index 53722658cafef..5b0e9709d4fa3 100644 --- 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) { 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 index 66cfa954965d2..1c724efac37b2 100644 --- 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 @@ -245,10 +245,214 @@ Object { ], }, }, - "minDuration": Object { - "min": Object { + "loadDistribution": Object { + "percentile_ranks": Object { "field": "transaction.duration.us", - "missing": 0, + "hdr": Object { + "number_of_significant_value_digits": 3, + }, + "keyed": false, + "values": Array [ + 0, + 500000, + 1000000, + 1500000, + 2000000, + 2500000, + 3000000, + 3500000, + 4000000, + 4500000, + 5000000, + 5500000, + 6000000, + 6500000, + 7000000, + 7500000, + 8000000, + 8500000, + 9000000, + 9500000, + 10000000, + 10500000, + 11000000, + 11500000, + 12000000, + 12500000, + 13000000, + 13500000, + 14000000, + 14500000, + 15000000, + 15500000, + 16000000, + 16500000, + 17000000, + 17500000, + 18000000, + 18500000, + 19000000, + 19500000, + 20000000, + 20500000, + 21000000, + 21500000, + 22000000, + 22500000, + 23000000, + 23500000, + 24000000, + 24500000, + 25000000, + 25500000, + 26000000, + 26500000, + 27000000, + 27500000, + 28000000, + 28500000, + 29000000, + 29500000, + 30000000, + 30500000, + 31000000, + 31500000, + 32000000, + 32500000, + 33000000, + 33500000, + 34000000, + 34500000, + 35000000, + 35500000, + 36000000, + 36500000, + 37000000, + 37500000, + 38000000, + 38500000, + 39000000, + 39500000, + 40000000, + 40500000, + 41000000, + 41500000, + 42000000, + 42500000, + 43000000, + 43500000, + 44000000, + 44500000, + 45000000, + 45500000, + 46000000, + 46500000, + 47000000, + 47500000, + 48000000, + 48500000, + 49000000, + 49500000, + 50000000, + 50500000, + 51000000, + 51500000, + 52000000, + 52500000, + 53000000, + 53500000, + 54000000, + 54500000, + 55000000, + 55500000, + 56000000, + 56500000, + 57000000, + 57500000, + 58000000, + 58500000, + 59000000, + 59500000, + 60000000, + 60500000, + 61000000, + 61500000, + 62000000, + 62500000, + 63000000, + 63500000, + 64000000, + 64500000, + 65000000, + 65500000, + 66000000, + 66500000, + 67000000, + 67500000, + 68000000, + 68500000, + 69000000, + 69500000, + 70000000, + 70500000, + 71000000, + 71500000, + 72000000, + 72500000, + 73000000, + 73500000, + 74000000, + 74500000, + 75000000, + 75500000, + 76000000, + 76500000, + 77000000, + 77500000, + 78000000, + 78500000, + 79000000, + 79500000, + 80000000, + 80500000, + 81000000, + 81500000, + 82000000, + 82500000, + 83000000, + 83500000, + 84000000, + 84500000, + 85000000, + 85500000, + 86000000, + 86500000, + 87000000, + 87500000, + 88000000, + 88500000, + 89000000, + 89500000, + 90000000, + 90500000, + 91000000, + 91500000, + 92000000, + 92500000, + 93000000, + 93500000, + 94000000, + 94500000, + 95000000, + 95500000, + 96000000, + 96500000, + 97000000, + 97500000, + 98000000, + 98500000, + 99000000, + ], }, }, }, 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 index a210c32ceb44e..6566ea4f5e29b 100644 --- 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 @@ -72,11 +72,9 @@ export async function getClientMetrics({ // Divide by 1000 to convert ms into seconds return { pageViews, - backEnd: { value: (backEnd.values[pkey] || 0) / 1000 }, + backEnd: { value: backEnd.values[pkey] || 0 }, frontEnd: { - value: - ((domInteractive.values[pkey] || 0) - (backEnd.values[pkey] || 0)) / - 1000, + value: (domInteractive.values[pkey] || 0) - (backEnd.values[pkey] || 0), }, }; } 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 25de9f06fefc4..5f666feb8a18f 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,8 +15,6 @@ 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; } @@ -24,15 +22,31 @@ export function microToSec(val: number) { export const getPLDChartSteps = ({ maxDuration, minDuration, + initStepValue, }: { maxDuration: number; minDuration: number; + initStepValue?: 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)); + let stepValue = 0.5; + // if diff is too low, let's lower + // down the steps value to increase steps + if (maxDuration - minDuration <= 5 * MICRO_TO_SEC) { + stepValue = 0.1; + } + + if (initStepValue) { + stepValue = initStepValue; + } + + let initValue = minDuration; + const stepValues = [initValue]; + + while (initValue < maxDuration) { + initValue += stepValue * MICRO_TO_SEC; + stepValues.push(initValue); } + return stepValues; }; @@ -52,16 +66,21 @@ export async function getPageLoadDistribution({ urlQuery, }); + // we will first get 100 steps using 0sec and 50sec duration, + // most web apps will cover this use case + // if 99th percentile is greater than 50sec, + // we will fetch additional 5 steps beyond 99th percentile + let maxDuration = (maxPercentile ? +maxPercentile : 50) * MICRO_TO_SEC; + const minDuration = minPercentile ? +minPercentile * MICRO_TO_SEC : 0; + const stepValues = getPLDChartSteps({ + maxDuration, + minDuration, + }); + const params = mergeProjection(projection, { body: { size: 0, aggs: { - minDuration: { - min: { - field: TRANSACTION_DURATION, - missing: 0, - }, - }, durPercentiles: { percentiles: { field: TRANSACTION_DURATION, @@ -71,6 +90,16 @@ export async function getPageLoadDistribution({ }, }, }, + loadDistribution: { + percentile_ranks: { + field: TRANSACTION_DURATION, + values: stepValues, + keyed: false, + hdr: { + number_of_significant_value_digits: 3, + }, + }, + }, }, }, }); @@ -86,22 +115,40 @@ export async function getPageLoadDistribution({ return null; } - const { durPercentiles, minDuration } = aggregations ?? {}; + const { durPercentiles, loadDistribution } = aggregations ?? {}; - const minPerc = minPercentile - ? +minPercentile * MICRO_TO_SEC - : minDuration?.value ?? 0; + let pageDistVals = loadDistribution?.values ?? []; - const maxPercQuery = durPercentiles?.values['99.0'] ?? 10000; + const maxPercQuery = durPercentiles?.values['99.0'] ?? 0; - const maxPerc = maxPercentile ? +maxPercentile * MICRO_TO_SEC : maxPercQuery; + // we assumed that page load will never exceed 50secs, if 99th percentile is + // greater then let's fetch additional 10 steps, to cover that on the chart + if (maxPercQuery > maxDuration && !maxPercentile) { + const additionalStepsPageVals = await getPercentilesDistribution({ + setup, + maxDuration: maxPercQuery, + // we pass 50sec as min to get next steps + minDuration: maxDuration, + }); - const pageDist = await getPercentilesDistribution({ - setup, - minDuration: minPerc, - maxDuration: maxPerc, + pageDistVals = pageDistVals.concat(additionalStepsPageVals); + maxDuration = maxPercQuery; + } + + // calculate the diff to get actual page load on specific duration value + const pageDist = pageDistVals.map(({ key, value }, index: number, arr) => { + return { + x: microToSec(key), + y: index === 0 ? value : value - arr[index - 1].value, + }; }); + if (pageDist.length > 0) { + while (pageDist[pageDist.length - 1].y === 0) { + pageDist.pop(); + } + } + Object.entries(durPercentiles?.values ?? {}).forEach(([key, val]) => { if (durPercentiles?.values?.[key]) { durPercentiles.values[key] = microToSec(val as number); @@ -111,8 +158,8 @@ export async function getPageLoadDistribution({ return { pageLoadDistribution: pageDist, percentiles: durPercentiles?.values, - minDuration: microToSec(minPerc), - maxDuration: microToSec(maxPerc), + minDuration: microToSec(minDuration), + maxDuration: microToSec(maxDuration), }; } @@ -125,7 +172,11 @@ const getPercentilesDistribution = async ({ minDuration: number; maxDuration: number; }) => { - const stepValues = getPLDChartSteps({ maxDuration, minDuration }); + const stepValues = getPLDChartSteps({ + minDuration: minDuration + 0.5 * MICRO_TO_SEC, + maxDuration, + initStepValue: 0.5, + }); const projection = getRumPageLoadTransactionsProjection({ setup, @@ -153,12 +204,5 @@ const getPercentilesDistribution = async ({ const { aggregations } = await apmEventClient.search(params); - const pageDist = aggregations?.loadDistribution.values ?? []; - - return pageDist.map(({ key, value }, index: number, arr) => { - return { - x: microToSec(key), - y: index === 0 ? value : value - arr[index - 1].value, - }; - }); + return aggregations?.loadDistribution.values ?? []; }; 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 d59817cc682a9..bebf9c0bc99c9 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 @@ -41,21 +41,21 @@ export const getBreakdownField = (breakdown: string) => { export const getPageLoadDistBreakdown = async ({ setup, - minDuration, - maxDuration, + minPercentile, + maxPercentile, breakdown, urlQuery, }: { setup: Setup & SetupTimeRange & SetupUIFilters; - minDuration: number; - maxDuration: number; + minPercentile: number; + maxPercentile: number; breakdown: string; urlQuery?: string; }) => { // convert secs to micros const stepValues = getPLDChartSteps({ - minDuration: minDuration * MICRO_TO_SEC, - maxDuration: maxDuration * MICRO_TO_SEC, + maxDuration: (maxPercentile ? +maxPercentile : 50) * MICRO_TO_SEC, + minDuration: minPercentile ? +minPercentile * MICRO_TO_SEC : 0, }); const projection = getRumPageLoadTransactionsProjection({ diff --git a/x-pack/plugins/apm/server/routes/rum_client.ts b/x-pack/plugins/apm/server/routes/rum_client.ts index d86069a3ec27a..2bdfaa1421eea 100644 --- a/x-pack/plugins/apm/server/routes/rum_client.ts +++ b/x-pack/plugins/apm/server/routes/rum_client.ts @@ -89,8 +89,8 @@ export const rumPageLoadDistBreakdownRoute = createRoute(() => ({ return getPageLoadDistBreakdown({ setup, - minDuration: Number(minPercentile), - maxDuration: Number(maxPercentile), + minPercentile: Number(minPercentile), + maxPercentile: Number(maxPercentile), breakdown, urlQuery, });