[8.19] Add feature flag for service map api v2 (#214227) (#219991)

# Backport

This will backport the following commits from `main` to `8.19`:
- [Add feature flag for service map api v2
(#214227)](#214227)

<!--- Backport version: 9.6.6 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sorenlouv/backport)

<!--BACKPORT
[{"author":{"name":"Miriam","email":"[email protected]"},"sourceCommit":{"committedDate":"2025-03-14T14:55:53Z","message":"Add
feature flag for service map api v2 (#214227)\n\nCloses
https://github.com/elastic/kibana/issues/213125\n\n### Summary\n\nAdded
feature flag to enable the new service map api\nNot specific telemetry
for events was added, the advance settings have\ntelemetry already out
of the
box\n\n\nhttps://github.com/user-attachments/assets/684bd369-c46d-4ac0-ab07-33b5395a7f71\n\n<img
width=\"778\" alt=\"Screenshot 2025-03-13 at 14 20
37\"\nsrc=\"https://github.com/user-attachments/assets/6445e85f-1108-43d1-aeee-a340cdfe99b8\"\n/>\n\n###
How to test\n\n- Inspect the response. v2 has a `spans` object, and the
current version\nhas an `elements`
object\n\n---------\n\nCo-authored-by: kibanamachine
<[email protected]>","sha":"3ff1340c01e17fcb8187f0e6e81b52a6c6053346","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","backport:skip","Team:obs-ux-infra_services","Team:obs-ux-management","v9.1.0","v8.19.0"],"title":"Add
feature flag for service map api
v2","number":214227,"url":"https://github.com/elastic/kibana/pull/214227","mergeCommit":{"message":"Add
feature flag for service map api v2 (#214227)\n\nCloses
https://github.com/elastic/kibana/issues/213125\n\n### Summary\n\nAdded
feature flag to enable the new service map api\nNot specific telemetry
for events was added, the advance settings have\ntelemetry already out
of the
box\n\n\nhttps://github.com/user-attachments/assets/684bd369-c46d-4ac0-ab07-33b5395a7f71\n\n<img
width=\"778\" alt=\"Screenshot 2025-03-13 at 14 20
37\"\nsrc=\"https://github.com/user-attachments/assets/6445e85f-1108-43d1-aeee-a340cdfe99b8\"\n/>\n\n###
How to test\n\n- Inspect the response. v2 has a `spans` object, and the
current version\nhas an `elements`
object\n\n---------\n\nCo-authored-by: kibanamachine
<[email protected]>","sha":"3ff1340c01e17fcb8187f0e6e81b52a6c6053346"}},"sourceBranch":"main","suggestedTargetBranches":["8.19"],"targetPullRequestStates":[{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/214227","number":214227,"mergeCommit":{"message":"Add
feature flag for service map api v2 (#214227)\n\nCloses
https://github.com/elastic/kibana/issues/213125\n\n### Summary\n\nAdded
feature flag to enable the new service map api\nNot specific telemetry
for events was added, the advance settings have\ntelemetry already out
of the
box\n\n\nhttps://github.com/user-attachments/assets/684bd369-c46d-4ac0-ab07-33b5395a7f71\n\n<img
width=\"778\" alt=\"Screenshot 2025-03-13 at 14 20
37\"\nsrc=\"https://github.com/user-attachments/assets/6445e85f-1108-43d1-aeee-a340cdfe99b8\"\n/>\n\n###
How to test\n\n- Inspect the response. v2 has a `spans` object, and the
current version\nhas an `elements`
object\n\n---------\n\nCo-authored-by: kibanamachine
<[email protected]>","sha":"3ff1340c01e17fcb8187f0e6e81b52a6c6053346"}},{"branch":"8.x","label":"v8.19.0","branchLabelMappingKey":"^v8.19.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

---------

Co-authored-by: Miriam <[email protected]>
Co-authored-by: kibanamachine <[email protected]>
Co-authored-by: Elastic Machine <[email protected]>

Author: 4 people

src/platform/plugins/private/kibana_usage_collection/server/collectors/management/schema.ts

@@ -496,6 +496,10 @@ export const stackManagementSchema: MakeSchemaFrom<UsageStats> = {
     type: 'integer',
     _meta: { description: 'Non-default value of setting.' },
   },
+  'observability:apmEnableServiceMapApiV2': {
+    type: 'boolean',
+    _meta: { description: 'Non-default value of setting.' },
+  },
   'observability:aiAssistantSimulatedFunctionCalling': {
     type: 'boolean',
     _meta: { description: 'Non-default value of setting.' },

src/platform/plugins/private/kibana_usage_collection/server/collectors/management/types.ts

@@ -54,6 +54,7 @@ export interface UsageStats {
   'observability:apmEnableTableSearchBar': boolean;
   'observability:apmEnableServiceInventoryTableSearchBar': boolean;
   'observability:logsExplorer:allowedDataViews': string[];
+  'observability:apmEnableServiceMapApiV2': boolean;
   'observability:logSources': string[];
   'observability:enableLogsStream': boolean;
   'observability:newLogsOverview': boolean;

src/platform/plugins/shared/telemetry/schema/oss_platform.json

@@ -11298,6 +11298,12 @@
             "description": "Non-default value of setting."
           }
         },
+        "observability:apmEnableServiceMapApiV2": {
+          "type": "boolean",
+          "_meta": {
+            "description": "Non-default value of setting."
+          }
+        },
         "observability:aiAssistantSimulatedFunctionCalling": {
           "type": "boolean",
           "_meta": {

src/platform/test/plugin_functional/test_suites/core_plugins/rendering.ts

@@ -208,7 +208,6 @@ export default function ({ getService }: PluginFunctionalProviderContext) {
         'xpack.apm.serviceMapEnabled (boolean?)',
         'xpack.apm.ui.enabled (boolean?)',
         'xpack.apm.ui.maxTraceItems (number?)',
-        'xpack.apm.ui.serviceMapApiV2Enabled (boolean?)',
         'xpack.apm.managedServiceUrl (string?|never)',
         'xpack.apm.serverlessOnboarding (boolean?|never)',
         'xpack.apm.latestAgentVersionsUrl (string?)',

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

@@ -6,9 +6,13 @@
  */
 
 import { usePerformanceContext } from '@kbn/ebt-tools';
-import { EuiFlexGroup, EuiFlexItem, EuiLoadingSpinner, EuiPanel } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { EuiFlexGroup, EuiFlexItem, EuiLoadingSpinner, EuiPanel, EuiSpacer } from '@elastic/eui';
 import type { ReactNode } from 'react';
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
+import { apmEnableServiceMapApiV2 } from '@kbn/observability-plugin/common';
+import { useEditableSettings } from '@kbn/observability-shared-plugin/public';
+import { Subscription } from 'rxjs';
 import { useApmPluginContext } from '../../../context/apm_plugin/use_apm_plugin_context';
 import { isActivePlatinumLicense } from '../../../../common/license_check';
 import { invalidLicenseMessage, SERVICE_MAP_TIMEOUT_ERROR } from '../../../../common/service_map';
@@ -34,6 +38,7 @@ import { useApmServiceContext } from '../../../context/apm_service/use_apm_servi
 import { isLogsOnlySignal } from '../../../utils/get_signal_type';
 import { ServiceTabEmptyState } from '../service_tab_empty_state';
 import { useServiceMap } from './use_service_map';
+import { TryItButton } from '../../shared/try_it_button';
 
 function PromptContainer({ children }: { children: ReactNode }) {
   return (
@@ -109,15 +114,42 @@ export function ServiceMap({
   const license = useLicenseContext();
   const serviceName = useServiceName();
 
-  const { config } = useApmPluginContext();
+  const { config, core } = useApmPluginContext();
   const { onPageReady } = usePerformanceContext();
+
+  const subscriptions = useRef<Subscription>(new Subscription());
+  const [isServiceMapApiV2Enabled, setIsServiceMapApiV2Enabled] = useState<boolean>(
+    core.settings.client.get(apmEnableServiceMapApiV2)
+  );
+
+  useEffect(() => {
+    subscriptions.current.add(
+      core.settings.client.get$<boolean>(apmEnableServiceMapApiV2).subscribe((value) => {
+        setIsServiceMapApiV2Enabled(value);
+      })
+    );
+  }, [core.settings]);
+
+  useEffect(() => {
+    const currentSubscriptions = subscriptions.current;
+    return () => {
+      currentSubscriptions.unsubscribe();
+    };
+  }, []);
+
+  const { fields, isSaving, saveSingleSetting } = useEditableSettings([apmEnableServiceMapApiV2]);
+
+  const settingsField = fields[apmEnableServiceMapApiV2];
+  const isServiceMapV2Enabled = Boolean(settingsField?.savedValue ?? settingsField?.defaultValue);
+
   const { data, status, error } = useServiceMap({
     environment,
     kuery,
     start,
     end,
     serviceGroupId,
     serviceName,
+    isServiceMapApiV2Enabled,
   });
 
   const { ref, height } = useRefDimensions();
@@ -183,6 +215,39 @@ export function ServiceMap({
   return (
     <>
       <SearchBar showTimeComparison />
+      <EuiFlexGroup alignItems="center" justifyContent="flexStart" gutterSize="s">
+        <TryItButton
+          isFeatureEnabled={isServiceMapV2Enabled}
+          linkLabel={
+            isServiceMapV2Enabled
+              ? i18n.translate('xpack.apm.serviceMap.disableServiceMapApiV2', {
+                  defaultMessage: 'Disable the new service map API',
+                })
+              : i18n.translate('xpack.apm.serviceMap.enableServiceMapApiV2', {
+                  defaultMessage: 'Enable the new service map API',
+                })
+          }
+          onClick={() => {
+            saveSingleSetting(apmEnableServiceMapApiV2, !isServiceMapV2Enabled);
+          }}
+          isLoading={isSaving}
+          popoverContent={
+            <EuiFlexGroup direction="column" gutterSize="s">
+              <EuiFlexItem grow={false}>
+                {i18n.translate('xpack.apm.serviceMap.serviceMapApiV2PopoverContent', {
+                  defaultMessage: 'The new service map API is faster, try it out!',
+                })}
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          }
+          hideThisContent={i18n.translate('xpack.apm.serviceMap.hideThisContent', {
+            defaultMessage:
+              'Hide this. The setting can be enabled or disabled in Advanced Settings.',
+          })}
+          calloutId="showServiceMapV2Callout"
+        />
+      </EuiFlexGroup>
+      <EuiSpacer size="s" />
       <EuiPanel hasBorder={true} paddingSize="none">
         <div data-test-subj="serviceMap" style={{ height: heightWithPadding }} ref={ref}>
           <Cytoscape

x-pack/solutions/observability/plugins/apm/public/components/app/service_map/use_service_map.ts

@@ -38,13 +38,15 @@ export const useServiceMap = ({
   serviceName,
   serviceGroupId,
   kuery,
+  isServiceMapApiV2Enabled,
 }: {
   environment: Environment;
   kuery: string;
   start: string;
   end: string;
   serviceGroupId?: string;
   serviceName?: string;
+  isServiceMapApiV2Enabled: boolean;
 }) => {
   const license = useLicenseContext();
   const { config } = useApmPluginContext();
@@ -74,7 +76,7 @@ export const useServiceMap = ({
             serviceName,
             serviceGroup: serviceGroupId,
             kuery,
-            useV2: config.ui.serviceMapApiV2Enabled,
+            useV2: isServiceMapApiV2Enabled,
           },
         },
       });
@@ -88,7 +90,7 @@ export const useServiceMap = ({
       serviceGroupId,
       kuery,
       config.serviceMapEnabled,
-      config.ui.serviceMapApiV2Enabled,
+      isServiceMapApiV2Enabled,
     ],
     { preservePreviousData: false }
   );

x-pack/solutions/observability/plugins/apm/public/components/app/settings/general_settings/index.tsx

@@ -23,6 +23,7 @@ import {
   apmEnableTableSearchBar,
   apmEnableTransactionProfiling,
   apmEnableServiceInventoryTableSearchBar,
+  apmEnableServiceMapApiV2,
 } from '@kbn/observability-plugin/common';
 import { isEmpty } from 'lodash';
 import React from 'react';
@@ -56,6 +57,7 @@ function getApmSettingsKeys(isProfilingIntegrationEnabled: boolean) {
     enableAgentExplorerView,
     apmEnableTableSearchBar,
     apmEnableServiceInventoryTableSearchBar,
+    apmEnableServiceMapApiV2,
   ];
 
   if (isProfilingIntegrationEnabled) {

x-pack/solutions/observability/plugins/apm/public/components/shared/try_it_button/index.tsx

@@ -29,6 +29,8 @@ interface Props {
   onClick: () => void;
   popoverContent?: React.ReactElement;
   isLoading: boolean;
+  calloutId: string;
+  hideThisContent: string;
 }
 
 export function TryItButton({
@@ -38,16 +40,15 @@ export function TryItButton({
   popoverContent,
   promoLabel,
   isLoading,
+  calloutId,
+  hideThisContent,
 }: Props) {
-  const [showFastFilterTryCallout, setShowFastFilterTryCallout] = useLocalStorage(
-    'apm.showFastFilterTryCallout',
-    true
-  );
+  const [showTryCallout, setShowFastFilterTryCallout] = useLocalStorage(`apm.${calloutId}`, true);
   const { core } = useApmPluginContext();
   const canEditAdvancedSettings = core.application.capabilities.advancedSettings?.save;
   const [isPopoverOpen, togglePopover] = useToggle(false);
 
-  if (!showFastFilterTryCallout) {
+  if (!showTryCallout) {
     return null;
   }
 
@@ -169,7 +170,7 @@ export function TryItButton({
   function HideThisButton() {
     return (
       <EuiFlexItem grow={false}>
-        <EuiToolTip content="Hide this">
+        <EuiToolTip content={hideThisContent}>
           <EuiButtonIcon
             data-test-subj="apmHideThisButtonButton"
             iconType="cross"

x-pack/solutions/observability/plugins/apm/public/context/apm_plugin/mock_apm_plugin_context.tsx

@@ -97,7 +97,6 @@ const mockCore = merge({}, coreStart, {
 const mockConfig: ConfigSchema = {
   serviceMapEnabled: true,
   ui: {
-    serviceMapApiV2Enabled: false,
     enabled: false,
   },
   latestAgentVersionsUrl: '',

x-pack/solutions/observability/plugins/apm/public/index.ts

@@ -12,7 +12,6 @@ import { ApmPlugin } from './plugin';
 export interface ConfigSchema {
   serviceMapEnabled: boolean;
   ui: {
-    serviceMapApiV2Enabled: boolean;
     enabled: boolean;
   };
   latestAgentVersionsUrl: string;