[UX Dashboard] Migrate service list query out of APM

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

@@ -12,7 +12,6 @@ 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';
 import { getLongTaskMetrics } from './get_long_task_metrics';
 import { getWebCoreVitals } from './get_web_core_vitals';
 import { getJSErrors } from './get_js_errors';
@@ -68,17 +67,6 @@ describe('rum client dashboard queries', () => {
     expect(mock.params).toMatchSnapshot();
   });
 
-  it('fetches rum services', async () => {
-    mock = await inspectSearchParams((setup) =>
-      getRumServices({
-        setup,
-        start: 0,
-        end: 50000,
-      })
-    );
-    expect(mock.params).toMatchSnapshot();
-  });
-
   it('fetches rum core vitals', async () => {
     mock = await inspectSearchParams(
       (setup) =>

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

@@ -14,7 +14,6 @@ import { getLongTaskMetrics } from './get_long_task_metrics';
 import { getPageLoadDistribution } from './get_page_load_distribution';
 import { getPageViewTrends } from './get_page_view_trends';
 import { getPageLoadDistBreakdown } from './get_pl_dist_breakdown';
-import { getRumServices } from './get_rum_services';
 import { getUrlSearch } from './get_url_search';
 import { getVisitorBreakdown } from './get_visitor_breakdown';
 import { getWebCoreVitals } from './get_web_core_vitals';
@@ -190,22 +189,6 @@ const rumPageViewsTrendRoute = createApmServerRoute({
   },
 });
 
-const rumServicesRoute = createApmServerRoute({
-  endpoint: 'GET /internal/apm/ux/services',
-  params: t.type({
-    query: t.intersection([uiFiltersRt, rangeRt]),
-  }),
-  options: { tags: ['access:apm'] },
-  handler: async (resources): Promise<{ rumServices: string[] }> => {
-    const setup = await setupUXRequest(resources);
-    const {
-      query: { start, end },
-    } = resources.params;
-    const rumServices = await getRumServices({ setup, start, end });
-    return { rumServices };
-  },
-});
-
 const rumVisitorsBreakdownRoute = createApmServerRoute({
   endpoint: 'GET /internal/apm/ux/visitor-breakdown',
   params: t.type({
@@ -426,7 +409,6 @@ export const rumRouteRepository = {
   ...rumPageLoadDistributionRoute,
   ...rumPageLoadDistBreakdownRoute,
   ...rumPageViewsTrendRoute,
-  ...rumServicesRoute,
   ...rumVisitorsBreakdownRoute,
   ...rumWebCoreVitals,
   ...rumLongTaskMetrics,

x-pack/plugins/ux/common/processor_event.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
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export enum ProcessorEvent {
+  transaction = 'transaction',
+  error = 'error',
+  metric = 'metric',
+  span = 'span',
+  profile = 'profile',
+}

x-pack/plugins/ux/common/utils/merge_projection.ts

@@ -0,0 +1,35 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { DeepPartial } from 'utility-types';
+import { cloneDeep, isPlainObject, mergeWith } from 'lodash';
+
+type PlainObject = Record<string | number | symbol, any>;
+
+type SourceProjection = DeepPartial<any>;
+
+type DeepMerge<T, U> = U extends PlainObject
+  ? T extends PlainObject
+    ? Omit<T, keyof U> & {
+        [key in keyof U]: T extends { [k in key]: any }
+          ? DeepMerge<T[key], U[key]>
+          : U[key];
+      }
+    : U
+  : U;
+
+export function mergeProjection<T extends any, U extends SourceProjection>(
+  target: T,
+  source: U
+): DeepMerge<T, U> {
+  return mergeWith({}, cloneDeep(target), source, (a, b) => {
+    if (isPlainObject(a) && isPlainObject(b)) {
+      return undefined;
+    }
+    return b;
+  }) as DeepMerge<T, U>;
+}

x-pack/plugins/ux/public/components/app/rum_dashboard/panels/web_application_select.tsx

@@ -6,42 +6,42 @@
  */
 
 import React from 'react';
+import datemath from '@kbn/datemath';
+import { useEsSearch } from '@kbn/observability-plugin/public';
+import { serviceNameQuery } from '../../../../services/data/service_name_query';
 import { ServiceNameFilter } from '../url_filter/service_name_filter';
-import { useFetcher } from '../../../../hooks/use_fetcher';
 import { useLegacyUrlParams } from '../../../../context/url_params_context/use_url_params';
-import { RUM_AGENT_NAMES } from '../../../../../common/agent_name';
+import { useDataView } from '../local_uifilters/use_data_view';
+
+function callDateMath(value: unknown): number {
+  const DEFAULT_RETURN_VALUE = 0;
+  if (typeof value === 'string') {
+    return datemath.parse(value)?.valueOf() ?? DEFAULT_RETURN_VALUE;
+  }
+  return DEFAULT_RETURN_VALUE;
+}
 
 export function WebApplicationSelect() {
   const {
     rangeId,
     urlParams: { start, end },
   } = useLegacyUrlParams();
+  const { dataViewTitle } = useDataView();
 
-  const { data, status } = useFetcher(
-    (callApmApi) => {
-      if (start && end) {
-        return callApmApi('GET /internal/apm/ux/services', {
-          params: {
-            query: {
-              start,
-              end,
-              uiFilters: JSON.stringify({ agentName: RUM_AGENT_NAMES }),
-            },
-          },
-        });
-      }
+  const { data, loading } = useEsSearch(
+    {
+      index: dataViewTitle,
+      ...serviceNameQuery(callDateMath(start), callDateMath(end)),
     },
     // `rangeId` works as a cache buster for ranges that never change, like `Today`
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [start, end, rangeId]
+    [start, end, rangeId, dataViewTitle],
+    { name: 'UxApplicationServices' }
   );
 
-  const rumServiceNames = data?.rumServices ?? [];
+  const rumServiceNames =
+    data?.aggregations?.services?.buckets.map(({ key }) => key as string) ?? [];
 
   return (
-    <ServiceNameFilter
-      loading={status !== 'success'}
-      serviceNames={rumServiceNames}
-    />
+    <ServiceNameFilter loading={!!loading} serviceNames={rumServiceNames} />
   );
 }

x-pack/plugins/ux/public/services/data/get_es_filter.test.ts

@@ -0,0 +1,31 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { getEsFilter } from './get_es_filter';
+
+describe('getEsFilters', function () {
+  it('should return environment in include filters', function () {
+    const result = getEsFilter({
+      browser: ['Chrome'],
+      environment: 'production',
+    });
+
+    expect(result).toEqual([
+      { terms: { 'user_agent.name': ['Chrome'] } },
+      { term: { 'service.environment': 'production' } },
+    ]);
+  });
+
+  it('should not return environment in exclude filters', function () {
+    const result = getEsFilter(
+      { browserExcluded: ['Chrome'], environment: 'production' },
+      true
+    );
+
+    expect(result).toEqual([{ terms: { 'user_agent.name': ['Chrome'] } }]);
+  });
+});

x-pack/plugins/ux/public/services/data/get_es_filter.ts

@@ -0,0 +1,45 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { ESFilter } from '@kbn/core/types/elasticsearch';
+import { ENVIRONMENT_ALL } from '../../../common/environment_filter_values';
+import {
+  uxLocalUIFilterNames,
+  uxLocalUIFilters,
+} from '../../../common/ux_ui_filter';
+import { UxUIFilters } from '../../../typings/ui_filters';
+import { environmentQuery } from '../../components/app/rum_dashboard/local_uifilters/queries';
+
+export function getEsFilter(uiFilters: UxUIFilters, exclude?: boolean) {
+  const localFilterValues = uiFilters;
+  const mappedFilters = uxLocalUIFilterNames
+    .filter((name) => {
+      const validFilter = name in localFilterValues;
+      if (typeof name !== 'string') return false;
+      if (exclude) {
+        return name.includes('Excluded') && validFilter;
+      }
+      return !name.includes('Excluded') && validFilter;
+    })
+    .map((filterName) => {
+      const field = uxLocalUIFilters[filterName];
+      const value = localFilterValues[filterName];
+
+      return {
+        terms: {
+          [field.fieldName]: value,
+        },
+      };
+    }) as ESFilter[];
+
+  return [
+    ...mappedFilters,
+    ...(exclude
+      ? []
+      : environmentQuery(uiFilters.environment || ENVIRONMENT_ALL.value)),
+  ];
+}