[RUM Dashboard] Use median values instead of averages to display page load times (#76407)

x-pack/plugins/apm/common/__snapshots__/elasticsearch_fieldnames.test.ts.snap

@@ -120,6 +120,8 @@ exports[`Error TRACE_ID 1`] = `"trace id"`;
 
 exports[`Error TRANSACTION_BREAKDOWN_COUNT 1`] = `undefined`;
 
+exports[`Error TRANSACTION_DOM_INTERACTIVE 1`] = `undefined`;
+
 exports[`Error TRANSACTION_DURATION 1`] = `undefined`;
 
 exports[`Error TRANSACTION_ID 1`] = `"transaction id"`;
@@ -132,6 +134,8 @@ exports[`Error TRANSACTION_RESULT 1`] = `undefined`;
 
 exports[`Error TRANSACTION_SAMPLED 1`] = `undefined`;
 
+exports[`Error TRANSACTION_TIME_TO_FIRST_BYTE 1`] = `undefined`;
+
 exports[`Error TRANSACTION_TYPE 1`] = `"request"`;
 
 exports[`Error TRANSACTION_URL 1`] = `undefined`;
@@ -268,6 +272,8 @@ exports[`Span TRACE_ID 1`] = `"trace id"`;
 
 exports[`Span TRANSACTION_BREAKDOWN_COUNT 1`] = `undefined`;
 
+exports[`Span TRANSACTION_DOM_INTERACTIVE 1`] = `undefined`;
+
 exports[`Span TRANSACTION_DURATION 1`] = `undefined`;
 
 exports[`Span TRANSACTION_ID 1`] = `"transaction id"`;
@@ -280,6 +286,8 @@ exports[`Span TRANSACTION_RESULT 1`] = `undefined`;
 
 exports[`Span TRANSACTION_SAMPLED 1`] = `undefined`;
 
+exports[`Span TRANSACTION_TIME_TO_FIRST_BYTE 1`] = `undefined`;
+
 exports[`Span TRANSACTION_TYPE 1`] = `undefined`;
 
 exports[`Span TRANSACTION_URL 1`] = `undefined`;
@@ -416,6 +424,8 @@ exports[`Transaction TRACE_ID 1`] = `"trace id"`;
 
 exports[`Transaction TRANSACTION_BREAKDOWN_COUNT 1`] = `undefined`;
 
+exports[`Transaction TRANSACTION_DOM_INTERACTIVE 1`] = `undefined`;
+
 exports[`Transaction TRANSACTION_DURATION 1`] = `1337`;
 
 exports[`Transaction TRANSACTION_ID 1`] = `"transaction id"`;
@@ -428,6 +438,8 @@ exports[`Transaction TRANSACTION_RESULT 1`] = `"transaction result"`;
 
 exports[`Transaction TRANSACTION_SAMPLED 1`] = `true`;
 
+exports[`Transaction TRANSACTION_TIME_TO_FIRST_BYTE 1`] = `undefined`;
+
 exports[`Transaction TRANSACTION_TYPE 1`] = `"transaction type"`;
 
 exports[`Transaction TRANSACTION_URL 1`] = `undefined`;

x-pack/plugins/apm/common/elasticsearch_fieldnames.ts

@@ -99,3 +99,8 @@ export const TRANSACTION_URL = 'transaction.page.url';
 export const CLIENT_GEO = 'client.geo';
 export const USER_AGENT_DEVICE = 'user_agent.device.name';
 export const USER_AGENT_OS = 'user_agent.os.name';
+
+export const TRANSACTION_TIME_TO_FIRST_BYTE =
+  'transaction.marks.agent.timeToFirstByte';
+export const TRANSACTION_DOM_INTERACTIVE =
+  'transaction.marks.agent.domInteractive';

x-pack/plugins/apm/public/components/app/RumDashboard/Charts/PageLoadDistChart.tsx

@@ -35,7 +35,7 @@ import { BreakdownSeries } from '../PageLoadDistribution/BreakdownSeries';
 
 interface PageLoadData {
   pageLoadDistribution: Array<{ x: number; y: number }>;
-  percentiles: Record<string, number> | undefined;
+  percentiles: Record<string, number | null> | undefined;
   minDuration: number;
   maxDuration: number;
 }

x-pack/plugins/apm/public/components/app/RumDashboard/PageLoadDistribution/PercentileAnnotations.tsx

@@ -16,11 +16,11 @@ import styled from 'styled-components';
 import { EuiToolTip } from '@elastic/eui';
 
 interface Props {
-  percentiles?: Record<string, number>;
+  percentiles?: Record<string, number | null>;
 }
 
 function generateAnnotationData(
-  values?: Record<string, number>
+  values?: Record<string, number | null>
 ): LineAnnotationDatum[] {
   return Object.entries(values ?? {}).map((value) => ({
     dataValue: value[1],

x-pack/plugins/apm/server/lib/rum_client/__snapshots__/queries.test.ts.snap

@@ -10,15 +10,25 @@ Object {
   "body": Object {
     "aggs": Object {
       "backEnd": Object {
-        "avg": Object {
+        "percentiles": Object {
           "field": "transaction.marks.agent.timeToFirstByte",
-          "missing": 0,
+          "hdr": Object {
+            "number_of_significant_value_digits": 3,
+          },
+          "percents": Array [
+            50,
+          ],
         },
       },
       "domInteractive": Object {
-        "avg": Object {
+        "percentiles": Object {
           "field": "transaction.marks.agent.domInteractive",
-          "missing": 0,
+          "hdr": Object {
+            "number_of_significant_value_digits": 3,
+          },
+          "percents": Array [
+            50,
+          ],
         },
       },
       "pageViews": Object {

x-pack/plugins/apm/server/lib/rum_client/get_client_metrics.ts

@@ -11,6 +11,10 @@ import {
   SetupTimeRange,
   SetupUIFilters,
 } from '../helpers/setup_request';
+import {
+  TRANSACTION_DOM_INTERACTIVE,
+  TRANSACTION_TIME_TO_FIRST_BYTE,
+} from '../../../common/elasticsearch_fieldnames';
 
 export async function getClientMetrics({
   setup,
@@ -30,15 +34,21 @@ export async function getClientMetrics({
       aggs: {
         pageViews: { value_count: { field: 'transaction.type' } },
         backEnd: {
-          avg: {
-            field: 'transaction.marks.agent.timeToFirstByte',
-            missing: 0,
+          percentiles: {
+            field: TRANSACTION_TIME_TO_FIRST_BYTE,
+            percents: [50],
+            hdr: {
+              number_of_significant_value_digits: 3,
+            },
           },
         },
         domInteractive: {
-          avg: {
-            field: 'transaction.marks.agent.domInteractive',
-            missing: 0,
+          percentiles: {
+            field: TRANSACTION_DOM_INTERACTIVE,
+            percents: [50],
+            hdr: {
+              number_of_significant_value_digits: 3,
+            },
           },
         },
       },
@@ -53,9 +63,11 @@ export async function getClientMetrics({
   // Divide by 1000 to convert ms into seconds
   return {
     pageViews,
-    backEnd: { value: (backEnd.value || 0) / 1000 },
+    backEnd: { value: (backEnd.values['50.0'] || 0) / 1000 },
     frontEnd: {
-      value: ((domInteractive.value || 0) - (backEnd.value || 0)) / 1000,
+      value:
+        ((domInteractive.values['50.0'] || 0) - (backEnd.values['50.0'] || 0)) /
+        1000,
     },
   };
 }

x-pack/plugins/apm/server/lib/transaction_groups/fetcher.ts

@@ -65,7 +65,7 @@ function getItemsWithRelativeImpact(
     key: string | Record<string, any>;
     avg?: number | null;
     count?: number | null;
-    p95?: number;
+    p95?: number | null;
     sample?: Transaction;
   }>
 ) {
@@ -188,7 +188,7 @@ export interface TransactionGroup {
   key: Record<string, any> | string;
   averageResponseTime: number | null | undefined;
   transactionsPerMinute: number;
-  p95: number | undefined;
+  p95: number | null | undefined;
   impact: number;
   sample: Transaction;
 }

x-pack/plugins/apm/typings/elasticsearch/aggregations.ts

@@ -223,7 +223,7 @@ interface AggregationResponsePart<
     value: number;
   };
   percentiles: {
-    values: Record<string, number>;
+    values: Record<string, number | null>;
   };
   extended_stats: {
     count: number;