[8.19] [APM] Storybook support for the new service map API response (#213980) (#219994)

# Backport

This will backport the following commits from `main` to `8.19`:
- [[APM] Storybook support for the new service map API response
(#213980)](#213980)

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

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

<!--BACKPORT [{"author":{"name":"Carlos
Crespo","email":"[email protected]"},"sourceCommit":{"committedDate":"2025-03-12T11:38:11Z","message":"[APM]
Storybook support for the new service map API response
(#213980)\n\ncloses
[213126](https://github.com/elastic/kibana/issues/213126)\n\n##
Summary\n\nAdd support for the new API response to the Service Map
storybook\n\n\n\n![storybook](https://github.com/user-attachments/assets/3e5fbf96-ccee-43a7-b64f-b5a81fd52998)","sha":"4502a930d5d6e34f5d45c9e7a633b763ef1d82bd","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","v9.1.0"],"title":"[APM]
Storybook support for the new service map API
response","number":213980,"url":"https://github.com/elastic/kibana/pull/213980","mergeCommit":{"message":"[APM]
Storybook support for the new service map API response
(#213980)\n\ncloses
[213126](https://github.com/elastic/kibana/issues/213126)\n\n##
Summary\n\nAdd support for the new API response to the Service Map
storybook\n\n\n\n![storybook](https://github.com/user-attachments/assets/3e5fbf96-ccee-43a7-b64f-b5a81fd52998)","sha":"4502a930d5d6e34f5d45c9e7a633b763ef1d82bd"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/213980","number":213980,"mergeCommit":{"message":"[APM]
Storybook support for the new service map API response
(#213980)\n\ncloses
[213126](https://github.com/elastic/kibana/issues/213126)\n\n##
Summary\n\nAdd support for the new API response to the Service Map
storybook\n\n\n\n![storybook](https://github.com/user-attachments/assets/3e5fbf96-ccee-43a7-b64f-b5a81fd52998)","sha":"4502a930d5d6e34f5d45c9e7a633b763ef1d82bd"}}]}]
BACKPORT-->

---------

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

Author: crespocarlos

x-pack/solutions/observability/plugins/apm/common/service_map/get_paths.ts

@@ -0,0 +1,35 @@
+/*
+ * 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 type { ConnectionNode, ExitSpanDestination, ServiceMapSpan } from './types';
+import { getConnections, getExternalConnectionNode, getServiceConnectionNode } from './utils';
+
+export const getPaths = ({ spans }: { spans: ServiceMapSpan[] }) => {
+  const connections: ConnectionNode[][] = [];
+  const exitSpanDestinations: ExitSpanDestination[] = [];
+
+  for (const currentNode of spans) {
+    const exitSpanNode = getExternalConnectionNode(currentNode);
+    const serviceNode = getServiceConnectionNode(currentNode);
+
+    if (currentNode.destinationService) {
+      // maps an exit span to its destination service
+      exitSpanDestinations.push({
+        from: exitSpanNode,
+        to: getServiceConnectionNode(currentNode.destinationService),
+      });
+    }
+
+    // builds a connection between a service and an exit span
+    connections.push([serviceNode, exitSpanNode]);
+  }
+
+  return {
+    connections: getConnections(connections),
+    exitSpanDestinations,
+  };
+};

x-pack/solutions/observability/plugins/apm/common/service_map/index.ts

@@ -24,6 +24,7 @@ import type {
 
 export * from './utils';
 export { getServiceMapNodes } from './get_service_map_nodes';
+export { getPaths } from './get_paths';
 
 export type {
   Connection,

x-pack/solutions/observability/plugins/apm/public/components/app/service_map/__stories__/cytoscape_example_data.stories.tsx

@@ -7,17 +7,23 @@
 
 import {
   EuiButton,
+  EuiCallOut,
   EuiFieldNumber,
   EuiFilePicker,
   EuiFlexGroup,
   EuiFlexItem,
   EuiForm,
-  EuiSpacer,
   EuiToolTip,
 } from '@elastic/eui';
 import type { Meta, StoryFn } from '@storybook/react';
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { CodeEditor } from '@kbn/code-editor';
+import { useArgs } from '@storybook/preview-api';
+import {
+  getPaths,
+  getServiceMapNodes,
+  type ServiceMapResponse,
+} from '../../../../../common/service_map';
 import { Cytoscape } from '../cytoscape';
 import { Centerer } from './centerer';
 import exampleResponseHipsterStore from './example_response_hipster_store.json';
@@ -26,36 +32,16 @@ import exampleResponseTodo from './example_response_todo.json';
 import { generateServiceMapElements } from './generate_service_map_elements';
 import { MockApmPluginStorybook } from '../../../../context/apm_plugin/mock_apm_plugin_storybook';
 
-const STORYBOOK_PATH = 'app/ServiceMap/Example data';
-
-const SESSION_STORAGE_KEY = `${STORYBOOK_PATH}/pre-loaded map`;
-function getSessionJson() {
-  return window.sessionStorage.getItem(SESSION_STORAGE_KEY);
-}
-function setSessionJson(json: string) {
-  window.sessionStorage.setItem(SESSION_STORAGE_KEY, json);
-}
-
 function getHeight() {
-  return window.innerHeight - 300;
+  return window.innerHeight - 200;
 }
 
 const stories: Meta<{}> = {
   title: 'app/ServiceMap/Example data',
   component: Cytoscape,
-  decorators: [
-    (StoryComponent, { globals }) => {
-      return (
-        <MockApmPluginStorybook>
-          <StoryComponent />
-        </MockApmPluginStorybook>
-      );
-    },
-  ],
+  decorators: [(wrappedStory) => <MockApmPluginStorybook>{wrappedStory()}</MockApmPluginStorybook>],
 };
 
-export default stories;
-
 export const GenerateMap: StoryFn<{}> = () => {
   const [size, setSize] = useState<number>(10);
   const [json, setJson] = useState<string>('');
@@ -114,87 +100,106 @@ export const GenerateMap: StoryFn<{}> = () => {
   );
 };
 
-export const MapFromJSON: StoryFn<{}> = () => {
-  const [json, setJson] = useState<string>(
-    getSessionJson() || JSON.stringify(exampleResponseTodo, null, 2)
-  );
-  const [error, setError] = useState<string | undefined>();
+interface MapFromJSONArgs {
+  json: unknown;
+}
+const assertJSON: (json?: any) => asserts json is ServiceMapResponse = (json) => {
+  if (!!json && !('elements' in json || 'spans' in json)) {
+    throw new Error('invalid json');
+  }
+};
+
+const MapFromJSONTemplate: StoryFn<MapFromJSONArgs> = (args) => {
+  const [{ json }, updateArgs] = useArgs();
 
+  const [error, setError] = useState<string | undefined>();
   const [elements, setElements] = useState<any[]>([]);
 
   const [uniqueKeyCounter, setUniqueKeyCounter] = useState<number>(0);
-  const updateRenderedElements = () => {
+  const updateRenderedElements = useCallback(() => {
     try {
-      setElements(JSON.parse(json).elements);
+      assertJSON(json);
+      if ('elements' in json) {
+        setElements(json.elements ?? []);
+      } else {
+        const paths = getPaths({ spans: json.spans ?? [] });
+        const nodes = getServiceMapNodes({
+          anomalies: json.anomalies ?? {
+            mlJobIds: [],
+            serviceAnomalies: [],
+          },
+          connections: paths.connections,
+          servicesData: json.servicesData ?? [],
+          exitSpanDestinations: paths.exitSpanDestinations,
+        });
+
+        setElements(nodes.elements);
+      }
       setUniqueKeyCounter((key) => key + 1);
       setError(undefined);
     } catch (e) {
       setError(e.message);
     }
-  };
+  }, [json]);
 
   useEffect(() => {
     updateRenderedElements();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [updateRenderedElements]);
 
   return (
-    <div>
-      <Cytoscape key={uniqueKeyCounter} elements={elements} height={getHeight()}>
-        <Centerer />
-      </Cytoscape>
-      <EuiForm isInvalid={error !== undefined} error={error}>
-        <EuiFlexGroup>
-          <EuiFlexItem>
-            <CodeEditor // TODO Unable to find context that provides theme. Need CODEOWNER Input
-              languageId="json"
-              value={json}
-              options={{ fontFamily: 'monospace' }}
-              onChange={(value) => {
-                setJson(value);
-                setSessionJson(value);
-              }}
-            />
-          </EuiFlexItem>
-          <EuiFlexItem>
-            <EuiFlexGroup direction="column">
-              <EuiFilePicker
-                display={'large'}
-                fullWidth={true}
-                style={{ height: '100%' }}
-                initialPromptText="Upload a JSON file"
-                onChange={(event) => {
-                  const item = event?.item(0);
-
-                  if (item) {
-                    const f = new FileReader();
-                    f.onload = (onloadEvent) => {
-                      const result = onloadEvent?.target?.result;
-                      if (typeof result === 'string') {
-                        setJson(result);
-                      }
-                    };
-                    f.readAsText(item);
+    <EuiFlexGroup
+      direction="column"
+      justifyContent="spaceBetween"
+      style={{ minHeight: '100vh' }}
+      gutterSize="xs"
+    >
+      <EuiFlexItem grow={false}>
+        <EuiCallOut
+          size="s"
+          title="Upload a JSON file or paste a JSON object in the Storybook Controls panel."
+          iconType="pin"
+        />
+      </EuiFlexItem>
+      <EuiFlexItem grow>
+        <Cytoscape key={uniqueKeyCounter} elements={elements} height={getHeight()}>
+          <Centerer />
+        </Cytoscape>
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiForm isInvalid={error !== undefined} error={error}>
+          <EuiFilePicker
+            display="large"
+            fullWidth
+            initialPromptText="Upload a JSON file"
+            onChange={(event) => {
+              const item = event?.item(0);
+
+              if (item) {
+                const f = new FileReader();
+                f.onload = (onloadEvent) => {
+                  const result = onloadEvent?.target?.result;
+                  if (typeof result === 'string') {
+                    updateArgs({ json: JSON.parse(result) });
                   }
-                }}
-              />
-              <EuiSpacer />
-              <EuiButton
-                data-test-subj="apmMapFromJSONRenderJsonButton"
-                onClick={() => {
-                  updateRenderedElements();
-                }}
-              >
-                Render JSON
-              </EuiButton>
-            </EuiFlexGroup>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiForm>
-    </div>
+                };
+                f.readAsText(item);
+              }
+            }}
+          />
+        </EuiForm>
+      </EuiFlexItem>
+    </EuiFlexGroup>
   );
 };
 
+export const MapFromJSON = MapFromJSONTemplate.bind({});
+MapFromJSON.argTypes = {
+  json: {
+    defaultValue: exampleResponseTodo,
+    control: 'object',
+  },
+};
+
 export const TodoApp: StoryFn<{}> = () => {
   return (
     <div>
@@ -224,3 +229,5 @@ export const HipsterStore: StoryFn<{}> = () => {
     </div>
   );
 };
+
+export default stories;