Merge branch 'master' into actions/feature-and-rbac

* master:
  [RUM Dashboard] New rum services api to replace usage of get services API (elastic#70746)
  fix: remove only consecutive ticks in TSVB (elastic#70981)
  [Functional test] Increase the timeout on opening a saved visualization (elastic#70952)
  [ML] Transforms/DFA: Refactor list action buttons so modals won't unmount after button click. (elastic#70555)
  [Functional test] Add retry for dashboard save (elastic#70950)

package.json

@@ -123,7 +123,7 @@
     "@babel/plugin-transform-modules-commonjs": "^7.10.1",
     "@babel/register": "^7.10.1",
     "@elastic/apm-rum": "^5.2.0",
-    "@elastic/charts": "19.8.0",
+    "@elastic/charts": "19.8.1",
     "@elastic/datemath": "5.0.3",
     "@elastic/ems-client": "7.9.3",
     "@elastic/eui": "24.1.0",

packages/kbn-ui-shared-deps/package.json

@@ -9,7 +9,7 @@
     "kbn:watch": "node scripts/build --dev --watch"
   },
   "dependencies": {
-    "@elastic/charts": "19.8.0",
+    "@elastic/charts": "19.8.1",
     "@elastic/eui": "24.1.0",
     "@elastic/numeral": "^2.5.0",
     "@kbn/i18n": "1.0.0",

test/functional/page_objects/dashboard_page.ts

@@ -290,14 +290,16 @@ export function DashboardPageProvider({ getService, getPageObjects }: FtrProvide
       dashboardName: string,
       saveOptions: SaveDashboardOptions = { waitDialogIsClosed: true }
     ) {
-      await this.enterDashboardTitleAndClickSave(dashboardName, saveOptions);
+      await retry.try(async () => {
+        await this.enterDashboardTitleAndClickSave(dashboardName, saveOptions);
 
-      if (saveOptions.needsConfirm) {
-        await this.clickSave();
-      }
+        if (saveOptions.needsConfirm) {
+          await this.clickSave();
+        }
 
-      // Confirm that the Dashboard has actually been saved
-      await testSubjects.existOrFail('saveDashboardSuccess');
+        // Confirm that the Dashboard has actually been saved
+        await testSubjects.existOrFail('saveDashboardSuccess');
+      });
       const message = await PageObjects.common.closeToast();
       await PageObjects.header.waitUntilLoadingHasFinished();
       await PageObjects.common.waitForSaveModalToClose();

test/functional/page_objects/visualize_page.ts

@@ -257,7 +257,7 @@ export function VisualizePageProvider({ getService, getPageObjects }: FtrProvide
 
     public async openSavedVisualization(vizName: string) {
       const dataTestSubj = `visListingTitleLink-${vizName.split(' ').join('-')}`;
-      await testSubjects.click(dataTestSubj);
+      await testSubjects.click(dataTestSubj, 20000);
       await header.waitUntilLoadingHasFinished();
     }
 

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)