[CSM] Url search

.github/CODEOWNERS

@@ -65,11 +65,12 @@
 
 # Client Side Monitoring (lives in APM directories but owned by Uptime)
 /x-pack/plugins/apm/e2e/cypress/support/step_definitions/csm @elastic/uptime
+/x-pack/plugins/apm/e2e/cypress/integration/csm_dashboard.feature @elastic/uptime
 /x-pack/plugins/apm/public/application/csmApp.tsx @elastic/uptime
 /x-pack/plugins/apm/public/components/app/RumDashboard @elastic/uptime
 /x-pack/plugins/apm/server/lib/rum_client @elastic/uptime
 /x-pack/plugins/apm/server/routes/rum_client.ts @elastic/uptime
-/x-pack/plugins/apm/server/projections/rum_overview.ts @elastic/uptime
+/x-pack/plugins/apm/server/projections/rum_page_load_transactions.ts @elastic/uptime
 
 # Beats
 /x-pack/legacy/plugins/beats_management/  @elastic/beats

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 clicks inside url search field
+    Then it displays 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 clicks 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 displays 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: 109 ms ',
+      'http://opbeans-node:3000/ordersPage views: 14Page load duration: 72 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.euiSelectableSearch').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 ms ',
+    ];
+
+    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[];

x-pack/plugins/apm/public/components/app/RumDashboard/URLFilter/URLSearch/RenderOption.tsx

@@ -0,0 +1,68 @@
+/*
+ * 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 React, { ReactNode } from 'react';
+import classNames from 'classnames';
+import { EuiHighlight, EuiSelectableOption } from '@elastic/eui';
+import styled from 'styled-components';
+import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
+
+const StyledSpan = styled.span`
+  color: ${euiLightVars.euiColorSecondaryText};
+  font-weight: 500;
+  :not(:last-of-type)::after {
+    content: '•';
+    margin: 0 4px;
+  }
+`;
+
+const StyledListSpan = styled.span`
+  display: block;
+  margin-top: 4px;
+  font-size: 12px;
+`;
+export type UrlOption<T = { [key: string]: any }> = {
+  meta?: string[];
+} & EuiSelectableOption<T>;
+
+export const formatOptions = (options: EuiSelectableOption[]) => {
+  return options.map((item: EuiSelectableOption) => ({
+    title: item.label,
+    ...item,
+    className: classNames(
+      'euiSelectableTemplateSitewide__listItem',
+      item.className
+    ),
+  }));
+};
+
+export function selectableRenderOptions(
+  option: UrlOption,
+  searchValue: string
+) {
+  return (
+    <>
+      <EuiHighlight
+        className="euiSelectableTemplateSitewide__listItemTitle"
+        search={searchValue}
+      >
+        {option.label}
+      </EuiHighlight>
+      {renderOptionMeta(option.meta)}
+    </>
+  );
+}
+
+function renderOptionMeta(meta?: string[]): ReactNode {
+  if (!meta || meta.length < 1) return;
+  return (
+    <StyledListSpan>
+      {meta.map((item: string) => (
+        <StyledSpan key={item}>{item}</StyledSpan>
+      ))}
+    </StyledListSpan>
+  );
+}