[APM] switch get environment function to use terms_enum api

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

@@ -5,10 +5,9 @@
  * 2.0.
  */
 
+import { SERVICE_ENVIRONMENT } from '../../common/es_fields/apm';
 import { useFetcher } from './use_fetcher';
-
-const INITIAL_DATA = { environments: [] };
-
+import { Environment } from '../../common/environment_rt';
 export function useEnvironmentsFetcher({
   serviceName,
   start,
@@ -18,9 +17,13 @@ export function useEnvironmentsFetcher({
   start?: string;
   end?: string;
 }) {
-  const { data = INITIAL_DATA, status } = useFetcher(
+  const { data, status } = useFetcher(
     (callApmApi) => {
-      if (start && end) {
+      if (!start || !end) {
+        return;
+      }
+
+      if (serviceName) {
         return callApmApi('GET /internal/apm/environments', {
           params: {
             query: {
@@ -29,11 +32,29 @@ export function useEnvironmentsFetcher({
               serviceName,
             },
           },
+        }).then((response) => {
+          // Spreading of original response is needed in order to display the api call in the inspector
+          return { ...response, environments: response.environments };
         });
       }
+      return callApmApi('GET /internal/apm/suggestions', {
+        params: {
+          query: {
+            start,
+            end,
+            fieldName: SERVICE_ENVIRONMENT,
+            fieldValue: '',
+          },
+        },
+      }).then((response) => {
+        return { ...response, environments: response.terms };
+      });
     },
     [start, end, serviceName]
   );
 
-  return { environments: data.environments, status };
+  return {
+    environments: (data?.environments ?? []) as Environment[],
+    status,
+  };
 }

x-pack/plugins/apm/server/routes/environments/get_environments.ts

@@ -17,7 +17,7 @@ import { Environment } from '../../../common/environment_rt';
 import { APMEventClient } from '../../lib/helpers/create_es_client/create_apm_event_client';
 
 /**
- * This is used for getting the list of environments for the environments selector,
+ * This is used for getting the list of environments for the environment selector,
  * filtered by range.
  */
 export async function getEnvironments({

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

@@ -7,6 +7,7 @@
 
 import * as t from 'io-ts';
 import { maxSuggestions } from '@kbn/observability-plugin/common';
+import { Environment } from '../../../common/environment_rt';
 import { getSearchTransactionsEvents } from '../../lib/helpers/transactions';
 import { getEnvironments } from './get_environments';
 import { rangeRt } from '../default_api_types';
@@ -27,11 +28,7 @@ const environmentsRoute = createApmServerRoute({
   handler: async (
     resources
   ): Promise<{
-    environments: Array<
-      | 'ENVIRONMENT_NOT_DEFINED'
-      | 'ENVIRONMENT_ALL'
-      | t.Branded<string, import('@kbn/io-ts-utils').NonEmptyStringBrand>
-    >;
+    environments: Environment[];
   }> => {
     const apmEventClient = await getApmEventClient(resources);
     const { context, params, config } = resources;