[APM] React flow service map

src/platform/packages/shared/kbn-scout/src/servers/configs/default/serverless/serverless.base.config.ts

@@ -174,6 +174,8 @@ export const defaultConfig: ScoutServerConfig = {
       `--permissionsPolicy.report_to=${JSON.stringify(['violations-endpoint'])}`,
       // Allow dynamic config overrides in tests
       `--coreApp.allowDynamicConfigOverrides=true`,
+      // APM feature flags
+      '--xpack.apm.featureFlags.serviceMapUseReactFlow=true',
       `--xpack.fleet.fleetServerHosts=${JSON.stringify([
         {
           id: 'default-fleet-server',

src/platform/packages/shared/kbn-scout/src/servers/configs/default/stateful/base.config.ts

@@ -181,6 +181,8 @@ export const defaultConfig: ScoutServerConfig = {
       '--xpack.ruleRegistry.write.cache.enabled=false',
       '--monitoring_collection.opentelemetry.metrics.prometheus.enabled=true',
       '--xpack.profiling.enabled=true',
+      // APM feature flags
+      '--xpack.apm.featureFlags.serviceMapUseReactFlow=true',
       // Fleet configuration
       `--xpack.fleet.fleetServerHosts=${JSON.stringify([
         {

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

@@ -213,6 +213,7 @@ export default function ({ getService }: PluginFunctionalProviderContext) {
         'xpack.apm.featureFlags.infrastructureTabAvailable (boolean?|true?)',
         'xpack.apm.featureFlags.infraUiAvailable (boolean?|true?)',
         'xpack.apm.featureFlags.migrationToFleetAvailable (boolean?|true?)',
+        'xpack.apm.featureFlags.serviceMapUseReactFlow (boolean?)',
         'xpack.apm.featureFlags.sourcemapApiAvailable (boolean?|true?)',
         'xpack.apm.featureFlags.storageExplorerAvailable (boolean?|true?)',
         // to be removed in https://github.com/elastic/kibana/issues/221904

x-pack/solutions/observability/plugins/apm/common/apm_feature_flags.ts

@@ -14,6 +14,7 @@ export enum ApmFeatureFlagName {
   InfrastructureTabAvailable = 'infrastructureTabAvailable',
   InfraUiAvailable = 'infraUiAvailable',
   MigrationToFleetAvailable = 'migrationToFleetAvailable',
+  ServiceMapUseReactFlow = 'serviceMapUseReactFlow',
   SourcemapApiAvailable = 'sourcemapApiAvailable',
   StorageExplorerAvailable = 'storageExplorerAvailable',
   RuleFormV2Enabled = 'ruleFormV2Enabled',
@@ -40,6 +41,10 @@ const apmFeatureFlagMap = {
     default: true,
     type: t.boolean,
   },
+  [ApmFeatureFlagName.ServiceMapUseReactFlow]: {
+    default: false,
+    type: t.boolean,
+  },
   [ApmFeatureFlagName.SourcemapApiAvailable]: {
     default: true,
     type: t.boolean,

x-pack/solutions/observability/plugins/apm/public/components/app/service_groups/service_group_save/save_button.tsx

@@ -16,7 +16,7 @@ export function ServiceGroupSaveButton() {
 
   const {
     query: { serviceGroup },
-  } = useAnyOfApmParams('/service-groups', '/services', '/service-map');
+  } = useAnyOfApmParams('/service-groups', '/services', '/service-map', '/react-flow-service-map');
 
   const isGroupEditMode = !!serviceGroup;
 

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

@@ -42,6 +42,7 @@ export function DiagnosticConfigurationForm({
   } = useAnyOfApmParams(
     '/services/{serviceName}/service-map',
     '/service-map',
+    '/react-flow-service-map',
     '/mobile-services/{serviceName}/service-map'
   );
   const { start, end } = useTimeRange({ rangeFrom, rangeTo });

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

@@ -60,6 +60,7 @@ export function DiagnosticFlyout({ onClose, isOpen, selectedNode }: DiagnosticFl
   } = useAnyOfApmParams(
     '/services/{serviceName}/service-map',
     '/service-map',
+    '/react-flow-service-map',
     '/mobile-services/{serviceName}/service-map'
   );
   const { start, end } = useTimeRange({ rangeFrom, rangeTo });
@@ -114,10 +115,10 @@ export function DiagnosticFlyout({ onClose, isOpen, selectedNode }: DiagnosticFl
       }
     } catch (error) {
       notifications?.toasts.addDanger({
-        title: i18n.translate('xpack.apm.diagnosticFlyout.errorTitle', {
+        title: i18n.translate('xpack.apm.serviceMap.diagnosticFlyout.errorTitle', {
           defaultMessage: 'Failed to run diagnostic',
         }),
-        text: i18n.translate('xpack.apm.diagnosticFlyout.errorMessage', {
+        text: i18n.translate('xpack.apm.serviceMap.diagnosticFlyout.errorMessage', {
           defaultMessage: 'An error occurred while running the diagnostic. Please try again.',
         }),
       });
@@ -224,7 +225,7 @@ export function DiagnosticFlyout({ onClose, isOpen, selectedNode }: DiagnosticFl
             data-test-subj="apmDiagnosticRunButton"
             onClick={handleRunDiagnostic}
           >
-            {i18n.translate('xpack.apm.diagnosticFlyout.closeButtonLabel', {
+            {i18n.translate('xpack.apm.serviceMap.diagnosticFlyout.closeButtonLabel', {
               defaultMessage: 'Run diagnostic',
             })}
           </EuiButton>
@@ -252,7 +253,7 @@ export function DiagnosticFlyout({ onClose, isOpen, selectedNode }: DiagnosticFl
             }
             fill
           >
-            {i18n.translate('xpack.apm.storageExplorer.downloadReport', {
+            {i18n.translate('xpack.apm.serviceMap.diagnosticFlyout.downloadReport', {
               defaultMessage: 'Download report',
             })}
           </EuiButton>

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

@@ -31,6 +31,7 @@ import type { Environment } from '../../../../common/environment_rt';
 import { useTimeRange } from '../../../hooks/use_time_range';
 import { DisabledPrompt } from './disabled_prompt';
 import { useServiceMap } from './use_service_map';
+import { ReactFlowServiceMap } from './react_flow_service_map';
 
 function PromptContainer({ children }: { children: ReactNode }) {
   return (
@@ -70,6 +71,22 @@ export function ServiceMapHome() {
   );
 }
 
+export function ReactFlowServiceMapHome() {
+  const {
+    query: { environment, kuery, rangeFrom, rangeTo, serviceGroup },
+  } = useApmParams('/react-flow-service-map');
+  const { start, end } = useTimeRange({ rangeFrom, rangeTo });
+  return (
+    <ServiceMapWithReactFlow
+      environment={environment}
+      kuery={kuery}
+      start={start}
+      end={end}
+      serviceGroupId={serviceGroup}
+    />
+  );
+}
+
 export function ServiceMapServiceDetail() {
   const {
     query: { environment, kuery, rangeFrom, rangeTo },
@@ -82,19 +99,15 @@ export function ServiceMapServiceDetail() {
   return <ServiceMap environment={environment} kuery={kuery} start={start} end={end} />;
 }
 
-export function ServiceMap({
-  environment,
-  kuery,
-  start,
-  end,
-  serviceGroupId,
-}: {
+interface ServiceMapProps {
   environment: Environment;
   kuery: string;
   start: string;
   end: string;
   serviceGroupId?: string;
-}) {
+}
+
+export function ServiceMap({ environment, kuery, start, end, serviceGroupId }: ServiceMapProps) {
   const { euiTheme } = useEuiTheme();
   const license = useLicenseContext();
   const serviceName = useServiceName();
@@ -207,3 +220,119 @@ export function ServiceMap({
     </>
   );
 }
+
+/**
+ * React Flow Service Map implementation (POC)
+ * Uses the same data as the Cytoscape version but renders with React Flow
+ */
+export function ServiceMapWithReactFlow({
+  environment,
+  kuery,
+  start,
+  end,
+  serviceGroupId,
+}: ServiceMapProps) {
+  const license = useLicenseContext();
+  const serviceName = useServiceName();
+
+  const { config } = useApmPluginContext();
+  const { onPageReady } = usePerformanceContext();
+
+  const subscriptions = useRef<Subscription>(new Subscription());
+
+  useEffect(() => {
+    const currentSubscriptions = subscriptions.current;
+    return () => {
+      currentSubscriptions.unsubscribe();
+    };
+  }, []);
+
+  const { data, status, error } = useServiceMap({
+    environment,
+    kuery,
+    start,
+    end,
+    serviceGroupId,
+    serviceName,
+  });
+
+  const { ref, height } = useRefDimensions();
+
+  // Temporary hack to work around bottom padding introduced by EuiPage
+  const PADDING_BOTTOM = 24;
+  const heightWithPadding = height - PADDING_BOTTOM;
+
+  if (!license) {
+    return null;
+  }
+
+  if (!isActivePlatinumLicense(license)) {
+    return (
+      <PromptContainer>
+        <LicensePrompt text={invalidLicenseMessage} />
+      </PromptContainer>
+    );
+  }
+
+  if (!config.serviceMapEnabled) {
+    return (
+      <PromptContainer>
+        <DisabledPrompt />
+      </PromptContainer>
+    );
+  }
+
+  if (status === FETCH_STATUS.SUCCESS && data.elements.length === 0) {
+    return (
+      <PromptContainer>
+        <EmptyPrompt />
+      </PromptContainer>
+    );
+  }
+
+  if (
+    status === FETCH_STATUS.FAILURE &&
+    error &&
+    'body' in error &&
+    error.body?.statusCode === 500 &&
+    error.body?.message === SERVICE_MAP_TIMEOUT_ERROR
+  ) {
+    return (
+      <PromptContainer>
+        <TimeoutPrompt isGlobalServiceMap={!serviceName} />
+      </PromptContainer>
+    );
+  }
+
+  if (status === FETCH_STATUS.SUCCESS) {
+    onPageReady({
+      customMetrics: {
+        key1: 'num_of_nodes',
+        value1: data.nodesCount,
+        key2: 'num_of_traces',
+        value2: data.tracesCount,
+      },
+      meta: { rangeFrom: start, rangeTo: end },
+    });
+  }
+
+  return (
+    <>
+      <SearchBar showTimeComparison />
+      <EuiPanel hasBorder={true} paddingSize="none">
+        <div data-test-subj="reactFlowServiceMap" style={{ height: heightWithPadding }} ref={ref}>
+          <ReactFlowServiceMap
+            elements={data.elements}
+            height={heightWithPadding}
+            serviceName={serviceName}
+            status={status}
+            environment={environment}
+            kuery={kuery}
+            start={start}
+            end={end}
+          />
+        </div>
+      </EuiPanel>
+    </>
+  );
+}

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

@@ -33,6 +33,7 @@ export function DependencyContents({ elementData, environment, start, end }: Con
 
   const { query } = useAnyOfApmParams(
     '/service-map',
+    '/react-flow-service-map',
     '/services/{serviceName}/service-map',
     '/mobile-services/{serviceName}/service-map'
   );
@@ -94,7 +95,7 @@ export function DependencyContents({ elementData, environment, start, end }: Con
             });
           }}
         >
-          {i18n.translate('xpack.apm.serviceMap.dependencyDetailsButtonText', {
+          {i18n.translate('xpack.actions.serviceMap.dependencyDetailsButtonText', {
             defaultMessage: 'Dependency Details',
           })}
         </EuiButton>

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

@@ -34,6 +34,7 @@ export function ServiceContents({ onFocusClick, elementData, environment, kuery
 
   const { query } = useAnyOfApmParams(
     '/service-map',
+    '/react-flow-service-map',
     '/services/{serviceName}/service-map',
     '/mobile-services/{serviceName}/service-map'
   );