[CSM] Url search

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

@@ -27,3 +27,11 @@ Feature: CSM Dashboard
     Given a user clicks the page load breakdown filter
     When the user selected the breakdown
     Then breakdown series should appear in chart
+
+  Scenario: Search by url filter focus
+    When a user click inside url search field
+    Then it display top pages in the suggestion popover
+
+  Scenario: Search by url filter
+    When a user enters a query in url search field
+    Then it should filter results based on query

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

@@ -0,0 +1,65 @@
+/*
+ * 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 { DEFAULT_TIMEOUT } from './csm_dashboard';
+
+When(`a user click inside url search field`, () => {
+  // wait for all loading to finish
+  cy.get('kbnLoadingIndicator').should('not.be.visible');
+  cy.get('.euiStat__title-isLoading').should('not.be.visible');
+  cy.get('span[data-cy=csmUrlFilter]', DEFAULT_TIMEOUT).within(() => {
+    cy.get('input.euiFieldSearch').click();
+  });
+});
+
+Then(`it display top pages in the suggestion popover`, () => {
+  cy.get('kbnLoadingIndicator').should('not.be.visible');
+
+  cy.get('div.euiPopover__panel-isOpen', DEFAULT_TIMEOUT).within(() => {
+    const listOfUrls = cy.get('li.euiSelectableListItem');
+    listOfUrls.should('have.length', 5);
+
+    const actualUrlsText = [
+      'http://opbeans-node:3000/dashboardPage views: 17Page load duration: 108.734 ms Select',
+      'http://opbeans-node:3000/ordersPage views: 14Page load duration: 71.5895 ms',
+    ];
+
+    cy.get('li.euiSelectableListItem')
+      .eq(0)
+      .should('have.text', actualUrlsText[0]);
+    cy.get('li.euiSelectableListItem')
+      .eq(1)
+      .should('have.text', actualUrlsText[1]);
+  });
+});
+
+When(`a user enters a query in url search field`, () => {
+  cy.get('kbnLoadingIndicator').should('not.be.visible');
+
+  cy.get('[data-cy=csmUrlFilter]').within(() => {
+    cy.get('input.euiSelectableTemplateSitewide__search').type('cus');
+  });
+
+  cy.get('kbnLoadingIndicator').should('not.be.visible');
+});
+
+Then(`it should filter results based on query`, () => {
+  cy.get('kbnLoadingIndicator').should('not.be.visible');
+
+  cy.get('div.euiPopover__panel-isOpen', DEFAULT_TIMEOUT).within(() => {
+    const listOfUrls = cy.get('li.euiSelectableListItem');
+    listOfUrls.should('have.length', 1);
+
+    const actualUrlsText = [
+      'http://opbeans-node:3000/customersPage views: 10Page load duration: 76.3975 ms Select',
+    ];
+
+    cy.get('li.euiSelectableListItem')
+      .eq(0)
+      .should('have.text', actualUrlsText[0]);
+  });
+});

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

@@ -22,7 +22,7 @@ const ClFlexGroup = styled(EuiFlexGroup)`
 export function ClientMetrics() {
   const { urlParams, uiFilters } = useUrlParams();
 
-  const { start, end } = urlParams;
+  const { start, end, searchTerm } = urlParams;
 
   const { data, status } = useFetcher(
     (callApmApi) => {
@@ -31,13 +31,18 @@ export function ClientMetrics() {
         return callApmApi({
           pathname: '/api/apm/rum/client-metrics',
           params: {
-            query: { start, end, uiFilters: JSON.stringify(uiFilters) },
+            query: {
+              start,
+              end,
+              uiFilters: JSON.stringify(uiFilters),
+              urlQuery: searchTerm,
+            },
           },
         });
       }
       return Promise.resolve(null);
     },
-    [start, end, uiFilters]
+    [start, end, uiFilters, searchTerm]
   );
 
   const STAT_STYLE = { width: '240px' };

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

@@ -22,7 +22,7 @@ export interface PercentileRange {
 export function PageLoadDistribution() {
   const { urlParams, uiFilters } = useUrlParams();
 
-  const { start, end } = urlParams;
+  const { start, end, searchTerm } = urlParams;
 
   const [percentileRange, setPercentileRange] = useState<PercentileRange>({
     min: null,
@@ -41,6 +41,7 @@ export function PageLoadDistribution() {
               start,
               end,
               uiFilters: JSON.stringify(uiFilters),
+              urlQuery: searchTerm,
               ...(percentileRange.min && percentileRange.max
                 ? {
                     minPercentile: String(percentileRange.min),
@@ -53,7 +54,14 @@ export function PageLoadDistribution() {
       }
       return Promise.resolve(null);
     },
-    [end, start, uiFilters, percentileRange.min, percentileRange.max]
+    [
+      end,
+      start,
+      uiFilters,
+      percentileRange.min,
+      percentileRange.max,
+      searchTerm,
+    ]
   );
 
   const onPercentileChange = (min: number, max: number) => {

x-pack/plugins/apm/public/components/app/RumDashboard/PageLoadDistribution/use_breakdowns.ts

@@ -17,7 +17,7 @@ interface Props {
 export const useBreakdowns = ({ percentileRange, field, value }: Props) => {
   const { urlParams, uiFilters } = useUrlParams();
 
-  const { start, end } = urlParams;
+  const { start, end, searchTerm } = urlParams;
 
   const { min: minP, max: maxP } = percentileRange ?? {};
 
@@ -32,6 +32,7 @@ export const useBreakdowns = ({ percentileRange, field, value }: Props) => {
               end,
               breakdown: value,
               uiFilters: JSON.stringify(uiFilters),
+              urlQuery: searchTerm,
               ...(minP && maxP
                 ? {
                     minPercentile: String(minP),
@@ -43,6 +44,6 @@ export const useBreakdowns = ({ percentileRange, field, value }: Props) => {
         });
       }
     },
-    [end, start, uiFilters, field, value, minP, maxP]
+    [end, start, uiFilters, field, value, minP, maxP, searchTerm]
   );
 };

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

@@ -16,7 +16,7 @@ import { BreakdownItem } from '../../../../../typings/ui_filters';
 export function PageViewsTrend() {
   const { urlParams, uiFilters } = useUrlParams();
 
-  const { start, end } = urlParams;
+  const { start, end, searchTerm } = urlParams;
 
   const [breakdown, setBreakdown] = useState<BreakdownItem | null>(null);
 
@@ -30,6 +30,7 @@ export function PageViewsTrend() {
               start,
               end,
               uiFilters: JSON.stringify(uiFilters),
+              urlQuery: searchTerm,
               ...(breakdown
                 ? {
                     breakdowns: JSON.stringify(breakdown),
@@ -41,7 +42,7 @@ export function PageViewsTrend() {
       }
       return Promise.resolve(undefined);
     },
-    [end, start, uiFilters, breakdown]
+    [end, start, uiFilters, breakdown, searchTerm]
   );
 
   return (

x-pack/plugins/apm/public/components/shared/LocalUIFilters/ServiceNameFilter/index.tsx → x-pack/plugins/apm/public/components/app/RumDashboard/URLFilter/ServiceNameFilter/index.tsx

@@ -13,8 +13,8 @@ import {
 import { i18n } from '@kbn/i18n';
 import React, { useEffect, useCallback } from 'react';
 import { useHistory } from 'react-router-dom';
-import { useUrlParams } from '../../../../hooks/useUrlParams';
-import { fromQuery, toQuery } from '../../Links/url_helpers';
+import { useUrlParams } from '../../../../../hooks/useUrlParams';
+import { fromQuery, toQuery } from '../../../../shared/Links/url_helpers';
 
 interface Props {
   serviceNames: string[];