[UX Dashboard] Port environment select to use data plugin (#134393)

Co-authored-by: shahzad31 <shahzad.muhammad@elastic.co>

x-pack/plugins/ux/public/components/app/rum_dashboard/environment_filter/index.tsx

@@ -73,7 +73,7 @@ export function EnvironmentFilter({
 }: EnvironmentFilterProps) {
   const history = useHistory();
   const location = useLocation();
-  const { environments, status = 'loading' } = useEnvironmentsFetcher({
+  const { environments, loading } = useEnvironmentsFetcher({
     serviceName,
     start,
     end,
@@ -97,7 +97,7 @@ export function EnvironmentFilter({
       onChange={(event) => {
         updateEnvironmentUrl(history, location, event.target.value);
       }}
-      isLoading={status === 'loading'}
+      isLoading={loading}
       style={{ minWidth }}
     />
   );

x-pack/plugins/ux/public/hooks/use_environments_fetcher.tsx

@@ -5,12 +5,19 @@
  * 2.0.
  */
 
+import { useEsSearch } from '@kbn/observability-plugin/public';
 import { useMemo } from 'react';
-import { useFetcher } from './use_fetcher';
 import {
   ENVIRONMENT_ALL,
   ENVIRONMENT_NOT_DEFINED,
 } from '../../common/environment_filter_values';
+import { useDataView } from '../components/app/rum_dashboard/local_uifilters/use_data_view';
+import {
+  getEnvironments,
+  transformEnvironmentsResponse,
+} from '../services/data/environments_query';
+import { callDateMath } from '../services/data/call_date_math';
+import { useKibanaServices } from './use_kibana_services';
 
 function getEnvironmentOptions(environments: string[]) {
   const environmentOptions = environments
@@ -23,8 +30,6 @@ function getEnvironmentOptions(environments: string[]) {
   return [ENVIRONMENT_ALL, ...environmentOptions];
 }
 
-const INITIAL_DATA = { environments: [] };
-
 export function useEnvironmentsFetcher({
   serviceName,
   start,
@@ -34,27 +39,34 @@ export function useEnvironmentsFetcher({
   start?: string;
   end?: string;
 }) {
-  const { data = INITIAL_DATA, status = 'loading' } = useFetcher(
-    (callApmApi) => {
-      if (start && end) {
-        return callApmApi('GET /internal/apm/environments', {
-          params: {
-            query: {
-              start,
-              end,
-              serviceName,
-            },
-          },
-        });
-      }
+  const { dataViewTitle } = useDataView();
+  const kibana = useKibanaServices();
+  const size =
+    // @ts-ignore defaults field should exist and contain this value
+    kibana.uiSettings?.defaults?.['observability:maxSuggestions']?.value ?? 100;
+  const { data: esQueryResponse, loading } = useEsSearch(
+    {
+      index: dataViewTitle,
+      ...getEnvironments({
+        serviceName,
+        start: callDateMath(start),
+        end: callDateMath(end),
+        size,
+      }),
     },
-    [start, end, serviceName]
+    [dataViewTitle, serviceName, start, end, size],
+    { name: 'UxEnvironments' }
+  );
+
+  const environments = useMemo(
+    () => transformEnvironmentsResponse(esQueryResponse) ?? [],
+    [esQueryResponse]
   );
 
   const environmentOptions = useMemo(
-    () => getEnvironmentOptions(data.environments),
-    [data?.environments]
+    () => getEnvironmentOptions(environments),
+    [environments]
   );
 
-  return { environments: data.environments, status, environmentOptions };
+  return { environments, loading, environmentOptions };
 }

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

@@ -0,0 +1,87 @@
+/*
+ * 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 { ESSearchResponse } from '@kbn/core/types/elasticsearch';
+import { TRANSACTION_PAGE_LOAD } from '../../../common/transaction_types';
+import {
+  SERVICE_ENVIRONMENT,
+  SERVICE_NAME,
+  TRANSACTION_TYPE,
+  PROCESSOR_EVENT,
+} from '../../../common/elasticsearch_fieldnames';
+import { ENVIRONMENT_NOT_DEFINED } from '../../../common/environment_filter_values';
+import { Environment } from '../../../common/environment_rt';
+
+export function transformEnvironmentsResponse<T>(
+  response?: ESSearchResponse<T, ReturnType<typeof getEnvironments>>
+) {
+  if (!response) return response;
+
+  const aggs = response.aggregations;
+  const environmentsBuckets = aggs?.environments.buckets || [];
+
+  const environments = environmentsBuckets.map(
+    (environmentBucket) => environmentBucket.key as string
+  );
+
+  return environments as Environment[];
+}
+
+export function getEnvironments({
+  serviceName,
+  size,
+  start,
+  end,
+}: {
+  serviceName?: string;
+  size: number;
+  start: number;
+  end: number;
+}) {
+  return {
+    body: {
+      size: 0,
+      query: {
+        bool: {
+          filter: [
+            {
+              range: {
+                '@timestamp': {
+                  gte: start,
+                  lte: end,
+                  format: 'epoch_millis',
+                },
+              },
+            },
+            {
+              term: {
+                [TRANSACTION_TYPE]: TRANSACTION_PAGE_LOAD,
+              },
+            },
+            {
+              term: {
+                [PROCESSOR_EVENT]: 'transaction',
+              },
+            },
+            ...(serviceName === undefined || serviceName === null
+              ? []
+              : [{ term: { [SERVICE_NAME]: serviceName } }]),
+          ],
+        },
+      },
+      aggs: {
+        environments: {
+          terms: {
+            field: SERVICE_ENVIRONMENT,
+            missing: ENVIRONMENT_NOT_DEFINED.value,
+            size,
+          },
+        },
+      },
+    },
+  };
+}