[APM] Show prompt when service map is disabled (#152100)

Closes #151971

It is possible to disable the service map via
`xpack.apm.serviceMapEnabled: false`. Previously the UI would handle
this very ungracefully by showing a 404 error toast when navigating to
the service map.

This improves the situation by showing a more user friendly prompt:


![image](https://user-images.githubusercontent.com/209966/221195765-b4749886-1cb8-40a3-a6cb-333c0c9c6a87.png)

x-pack/plugins/apm/public/components/app/service_map/disabled_prompt.tsx

@@ -0,0 +1,34 @@
+/*
+ * 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 { EuiEmptyPrompt } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import React from 'react';
+
+export function DisabledPrompt() {
+  return (
+    <EuiEmptyPrompt
+      iconType="eyeClosed"
+      iconColor="subdued"
+      title={
+        <h2>
+          {i18n.translate('xpack.apm.serviceMap.disabledTitle', {
+            defaultMessage: 'Service map is disabled',
+          })}
+        </h2>
+      }
+      body={
+        <p>
+          {i18n.translate('xpack.apm.serviceMap.disabledDescription', {
+            defaultMessage:
+              'The service map has been disabled. It can be enabled via `xpack.apm.serviceMapEnabled`',
+          })}
+        </p>
+      }
+    />
+  );
+}

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

@@ -12,6 +12,7 @@ import {
   EuiPanel,
 } from '@elastic/eui';
 import React, { ReactNode } from 'react';
+import { useApmPluginContext } from '../../../context/apm_plugin/use_apm_plugin_context';
 import { isActivePlatinumLicense } from '../../../../common/license_check';
 import {
   invalidLicenseMessage,
@@ -34,6 +35,7 @@ import { useServiceName } from '../../../hooks/use_service_name';
 import { useApmParams, useAnyOfApmParams } from '../../../hooks/use_apm_params';
 import { Environment } from '../../../../common/environment_rt';
 import { useTimeRange } from '../../../hooks/use_time_range';
+import { DisabledPrompt } from './disabled_prompt';
 
 function PromptContainer({ children }: { children: ReactNode }) {
   return (
@@ -114,8 +116,8 @@ export function ServiceMap({
 }) {
   const theme = useTheme();
   const license = useLicenseContext();
-
   const serviceName = useServiceName();
+  const { config } = useApmPluginContext();
 
   const {
     data = { elements: [] },
@@ -124,7 +126,11 @@ export function ServiceMap({
   } = useFetcher(
     (callApmApi) => {
       // When we don't have a license or a valid license, don't make the request.
-      if (!license || !isActivePlatinumLicense(license)) {
+      if (
+        !license ||
+        !isActivePlatinumLicense(license) ||
+        !config.serviceMapEnabled
+      ) {
         return;
       }
 
@@ -142,7 +148,16 @@ export function ServiceMap({
         },
       });
     },
-    [license, serviceName, environment, start, end, serviceGroupId, kuery]
+    [
+      license,
+      serviceName,
+      environment,
+      start,
+      end,
+      serviceGroupId,
+      kuery,
+      config.serviceMapEnabled,
+    ]
   );
 
   const { ref, height } = useRefDimensions();
@@ -163,6 +178,14 @@ export function ServiceMap({
     );
   }
 
+  if (!config.serviceMapEnabled) {
+    return (
+      <PromptContainer>
+        <DisabledPrompt />
+      </PromptContainer>
+    );
+  }
+
   if (status === FETCH_STATUS.SUCCESS && data.elements.length === 0) {
     return (
       <PromptContainer>