added a test for percentile

Author: shahzad31

x-pack/plugins/apm/e2e/cypress/integration/csm_dashboard.feature

@@ -9,6 +9,10 @@ Feature: CSM Dashboard
     When a user browses the APM UI application for RUM Data
     Then should have correct client metrics
 
+  Scenario: Percentile select
+    When the user changes the selected percentile
+    Then it displays client metric related to that percentile
+
   Scenario Outline: CSM page filters
     When the user filters by "<filterName>"
     Then it filters the client metrics "<filterName>"

x-pack/plugins/apm/e2e/cypress/support/step_definitions/csm/percentile_select.ts

@@ -0,0 +1,29 @@
+/*
+ * 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 { When, Then } from 'cypress-cucumber-preprocessor/steps';
+import { verifyClientMetrics } from './client_metrics_helper';
+import { getDataTestSubj } from './utils';
+
+When('the user changes the selected percentile', () => {
+  // wait for all loading to finish
+  cy.get('kbnLoadingIndicator').should('not.be.visible');
+
+  getDataTestSubj('uxPercentileSelect').click();
+
+  getDataTestSubj('p95Percentile').click();
+});
+
+Then(`it displays client metric related to that percentile`, () => {
+  const metrics = ['14 ms', '0.13 s', '55 '];
+
+  verifyClientMetrics(metrics, false);
+
+  // reset to median
+  getDataTestSubj('uxPercentileSelect').click();
+
+  getDataTestSubj('p50Percentile').click();
+});

x-pack/plugins/apm/e2e/cypress/support/step_definitions/csm/url_search_filter.ts

@@ -24,7 +24,7 @@ Then(`it displays top pages in the suggestion popover`, () => {
     listOfUrls.should('have.length', 5);
 
     const actualUrlsText = [
-      'http://opbeans-node:3000/dashboardPage views: 17Page load duration: 109 ms ',
+      'http://opbeans-node:3000/dashboardPage views: 17Page load duration: 109 ms',
       'http://opbeans-node:3000/ordersPage views: 14Page load duration: 72 ms',
     ];
 

x-pack/plugins/apm/e2e/cypress/support/step_definitions/csm/utils.ts

@@ -0,0 +1,14 @@
+/*
+ * 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 { DEFAULT_TIMEOUT } from './csm_dashboard';
+
+export function getDataTestSubj(dataTestSubj: string) {
+  // wait for all loading to finish
+  cy.get('kbnLoadingIndicator').should('not.be.visible');
+
+  return cy.get(`[data-test-subj=${dataTestSubj}]`, DEFAULT_TIMEOUT);
+}

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

@@ -45,27 +45,27 @@ export function UserPercentile() {
     {
       value: '50',
       inputDisplay: 'P50 (Median)',
-      'data-test-subj': 'p50-percentile',
+      'data-test-subj': 'p50Percentile',
     },
     {
       value: '75',
       inputDisplay: 'P75',
-      'data-test-subj': 'p75-percentile',
+      'data-test-subj': 'p75Percentile',
     },
     {
       value: '90',
       inputDisplay: 'P90',
-      'data-test-subj': 'p90-percentile',
+      'data-test-subj': 'p90Percentile',
     },
     {
       value: '95',
       inputDisplay: 'P95',
-      'data-test-subj': 'p95-percentile',
+      'data-test-subj': 'p95Percentile',
     },
     {
       value: '99',
       inputDisplay: 'P99',
-      'data-test-subj': 'p99-percentile',
+      'data-test-subj': 'p99Percentile',
     },
   ];
 
@@ -75,6 +75,7 @@ export function UserPercentile() {
 
   return (
     <EuiSuperSelect
+      data-test-subj="uxPercentileSelect"
       style={{ width: 150 }}
       options={options}
       valueOfSelected={String(percentile ?? DEFAULT_P)}

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

@@ -45,7 +45,7 @@ export const rumClientMetricsRoute = createRoute(() => ({
     return getClientMetrics({
       setup,
       urlQuery,
-      percentile: Number(percentile),
+      percentile: percentile ? Number(percentile) : undefined,
     });
   },
 }));
@@ -163,7 +163,7 @@ export const rumWebCoreVitals = createRoute(() => ({
     return getWebCoreVitals({
       setup,
       urlQuery,
-      percentile: Number(percentile),
+      percentile: percentile ? Number(percentile) : undefined,
     });
   },
 }));