[RUM Dashboard] New rum services api to replace usage of get services…

… API (elastic#70746)

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

@@ -119,7 +119,7 @@ export function PageLoadDistChart({
             xScaleType={ScaleType.Linear}
             yScaleType={ScaleType.Linear}
             data={data?.pageLoadDistribution ?? []}
-            curve={CurveType.CURVE_NATURAL}
+            curve={CurveType.CURVE_CATMULL_ROM}
           />
           {breakdowns.map(({ name, type }) => (
             <BreakdownSeries

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

@@ -23,7 +23,7 @@ function generateAnnotationData(
   values?: Record<string, number>
 ): LineAnnotationDatum[] {
   return Object.entries(values ?? {}).map((value) => ({
-    dataValue: Math.round(value[1] / 1000),
+    dataValue: value[1],
     details: `${(+value[0]).toFixed(0)}`,
   }));
 }

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

@@ -68,7 +68,7 @@ export const PageLoadDistribution = () => {
   );
 
   const onPercentileChange = (min: number, max: number) => {
-    setPercentileRange({ min: min * 1000, max: max * 1000 });
+    setPercentileRange({ min, max });
   };
 
   return (

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

@@ -46,7 +46,7 @@ export function RumOverview() {
     (callApmApi) => {
       if (start && end) {
         return callApmApi({
-          pathname: '/api/apm/services',
+          pathname: '/api/apm/rum-client/services',
           params: {
             query: {
               start,
@@ -68,11 +68,7 @@ export function RumOverview() {
           <LocalUIFilters {...localUIFiltersConfig} showCount={true}>
             {!isRumServiceRoute && (
               <>
-                <ServiceNameFilter
-                  serviceNames={
-                    data?.items?.map((service) => service.serviceName) ?? []
-                  }
-                />
+                <ServiceNameFilter serviceNames={data ?? []} />
                 <EuiSpacer size="xl" />
                 <EuiHorizontalRule margin="none" />{' '}
               </>

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

@@ -12,6 +12,12 @@ import {
   SetupUIFilters,
 } from '../helpers/setup_request';
 
+export const MICRO_TO_SEC = 1000000;
+
+export function microToSec(val: number) {
+  return Math.round((val / MICRO_TO_SEC + Number.EPSILON) * 100) / 100;
+}
+
 export async function getPageLoadDistribution({
   setup,
   minPercentile,
@@ -42,6 +48,9 @@ export async function getPageLoadDistribution({
           percentiles: {
             field: 'transaction.duration.us',
             percents: [50, 75, 90, 95, 99],
+            hdr: {
+              number_of_significant_value_digits: 3,
+            },
           },
         },
       },
@@ -59,20 +68,29 @@ export async function getPageLoadDistribution({
     return null;
   }
 
-  const minDuration = aggregations?.minDuration.value ?? 0;
+  const { durPercentiles, minDuration } = aggregations ?? {};
 
-  const minPerc = minPercentile ? +minPercentile : minDuration;
+  const minPerc = minPercentile
+    ? +minPercentile * MICRO_TO_SEC
+    : minDuration?.value ?? 0;
 
-  const maxPercQuery = aggregations?.durPercentiles.values['99.0'] ?? 10000;
+  const maxPercQuery = durPercentiles?.values['99.0'] ?? 10000;
 
-  const maxPerc = maxPercentile ? +maxPercentile : maxPercQuery;
+  const maxPerc = maxPercentile ? +maxPercentile * MICRO_TO_SEC : maxPercQuery;
 
   const pageDist = await getPercentilesDistribution(setup, minPerc, maxPerc);
+
+  Object.entries(durPercentiles?.values ?? {}).forEach(([key, val]) => {
+    if (durPercentiles?.values?.[key]) {
+      durPercentiles.values[key] = microToSec(val as number);
+    }
+  });
+
   return {
     pageLoadDistribution: pageDist,
-    percentiles: aggregations?.durPercentiles.values,
-    minDuration: minPerc,
-    maxDuration: maxPerc,
+    percentiles: durPercentiles?.values,
+    minDuration: microToSec(minPerc),
+    maxDuration: microToSec(maxPerc),
   };
 }
 
@@ -81,9 +99,9 @@ const getPercentilesDistribution = async (
   minDuration: number,
   maxDuration: number
 ) => {
-  const stepValue = (maxDuration - minDuration) / 50;
+  const stepValue = (maxDuration - minDuration) / 100;
   const stepValues = [];
-  for (let i = 1; i < 51; i++) {
+  for (let i = 1; i < 101; i++) {
     stepValues.push((stepValue * i + minDuration).toFixed(2));
   }
 
@@ -103,6 +121,9 @@ const getPercentilesDistribution = async (
             field: 'transaction.duration.us',
             values: stepValues,
             keyed: false,
+            hdr: {
+              number_of_significant_value_digits: 3,
+            },
           },
         },
       },
@@ -117,7 +138,7 @@ const getPercentilesDistribution = async (
 
   return pageDist.map(({ key, value }, index: number, arr) => {
     return {
-      x: Math.round(key / 1000),
+      x: microToSec(key),
       y: index === 0 ? value : value - arr[index - 1].value,
     };
   });

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

@@ -17,6 +17,7 @@ import {
   USER_AGENT_NAME,
   USER_AGENT_OS,
 } from '../../../common/elasticsearch_fieldnames';
+import { MICRO_TO_SEC, microToSec } from './get_page_load_distribution';
 
 export const getBreakdownField = (breakdown: string) => {
   switch (breakdown) {
@@ -38,7 +39,9 @@ export const getPageLoadDistBreakdown = async (
   maxDuration: number,
   breakdown: string
 ) => {
-  const stepValue = (maxDuration - minDuration) / 50;
+  // convert secs to micros
+  const stepValue =
+    (maxDuration * MICRO_TO_SEC - minDuration * MICRO_TO_SEC) / 50;
   const stepValues = [];
 
   for (let i = 1; i < 51; i++) {
@@ -67,6 +70,9 @@ export const getPageLoadDistBreakdown = async (
                 field: 'transaction.duration.us',
                 values: stepValues,
                 keyed: false,
+                hdr: {
+                  number_of_significant_value_digits: 3,
+                },
               },
             },
           },
@@ -86,7 +92,7 @@ export const getPageLoadDistBreakdown = async (
       name: String(key),
       data: pageDist.values?.map(({ key: pKey, value }, index: number, arr) => {
         return {
-          x: Math.round(pKey / 1000),
+          x: microToSec(pKey),
           y: index === 0 ? value : value - arr[index - 1].value,
         };
       }),

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

@@ -0,0 +1,48 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { getRumOverviewProjection } from '../../../common/projections/rum_overview';
+import { mergeProjection } from '../../../common/projections/util/merge_projection';
+import {
+  Setup,
+  SetupTimeRange,
+  SetupUIFilters,
+} from '../helpers/setup_request';
+
+export async function getRumServices({
+  setup,
+}: {
+  setup: Setup & SetupTimeRange & SetupUIFilters;
+}) {
+  const projection = getRumOverviewProjection({
+    setup,
+  });
+
+  const params = mergeProjection(projection, {
+    body: {
+      size: 0,
+      query: {
+        bool: projection.body.query.bool,
+      },
+      aggs: {
+        services: {
+          terms: {
+            field: 'service.name',
+            size: 1000,
+          },
+        },
+      },
+    },
+  });
+
+  const { client } = setup;
+
+  const response = await client.search(params);
+
+  const result = response.aggregations?.services.buckets ?? [];
+
+  return result.map(({ key }) => key as string);
+}

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

@@ -11,6 +11,7 @@ import {
 import { getClientMetrics } from './get_client_metrics';
 import { getPageViewTrends } from './get_page_view_trends';
 import { getPageLoadDistribution } from './get_page_load_distribution';
+import { getRumServices } from './get_rum_services';
 
 describe('rum client dashboard queries', () => {
   let mock: SearchParamsMock;
@@ -49,4 +50,13 @@ describe('rum client dashboard queries', () => {
     );
     expect(mock.params).toMatchSnapshot();
   });
+
+  it('fetches rum services', async () => {
+    mock = await inspectSearchParams((setup) =>
+      getRumServices({
+        setup,
+      })
+    );
+    expect(mock.params).toMatchSnapshot();
+  });
 });

x-pack/plugins/apm/server/routes/create_apm_api.ts

@@ -76,6 +76,7 @@ import {
   rumPageViewsTrendRoute,
   rumPageLoadDistributionRoute,
   rumPageLoadDistBreakdownRoute,
+  rumServicesRoute,
 } from './rum_client';
 import {
   observabilityDashboardHasDataRoute,
@@ -172,6 +173,7 @@ const createApmApi = () => {
     .add(rumPageLoadDistributionRoute)
     .add(rumPageLoadDistBreakdownRoute)
     .add(rumClientMetricsRoute)
+    .add(rumServicesRoute)
 
     // Observability dashboard
     .add(observabilityDashboardHasDataRoute)

x-pack/plugins/apm/server/routes/rum_client.ts

@@ -12,6 +12,7 @@ import { rangeRt, uiFiltersRt } from './default_api_types';
 import { getPageViewTrends } from '../lib/rum_client/get_page_view_trends';
 import { getPageLoadDistribution } from '../lib/rum_client/get_page_load_distribution';
 import { getPageLoadDistBreakdown } from '../lib/rum_client/get_pl_dist_breakdown';
+import { getRumServices } from '../lib/rum_client/get_rum_services';
 
 export const percentileRangeRt = t.partial({
   minPercentile: t.string,
@@ -91,3 +92,15 @@ export const rumPageViewsTrendRoute = createRoute(() => ({
     return getPageViewTrends({ setup, breakdowns });
   },
 }));
+
+export const rumServicesRoute = createRoute(() => ({
+  path: '/api/apm/rum-client/services',
+  params: {
+    query: t.intersection([uiFiltersRt, rangeRt]),
+  },
+  handler: async ({ context, request }) => {
+    const setup = await setupRequest(context, request);
+
+    return getRumServices({ setup });
+  },
+}));

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

@@ -150,6 +150,7 @@ export interface AggregationOptionsByType {
     field: string;
     values: string[];
     keyed?: boolean;
+    hdr?: { number_of_significant_value_digits: number };
   };
 }