[APM] Service Map Layout (elastic#59020) (elastic#59261)

* Addresses elastic#55544. - uses the core breadthfirst cytoscape layout - rotates elements by -90degrees - selects rum nodes as roots - implements hover styles to show connected nodes - fixes flash of unstyled cytoscape elements on initial load * PR review feedback * adds canned response for testing cytoscape layout in storybook * update dep snapshot for removing cytoscape-dagre
flash1293 · Mar 4, 2020 · ed63c1c · ed63c1c
1 parent 35baae3
commit ed63c1c
Show file tree

Hide file tree

Showing 10 changed files with 251 additions and 182 deletions.
diff --git a/packages/kbn-storybook/storybook_config/config.js b/packages/kbn-storybook/storybook_config/config.js
@@ -55,7 +55,7 @@ addParameters({
       brandTitle: 'Kibana Storybook',
       brandUrl: 'https://github.com/elastic/kibana/tree/master/packages/kbn-storybook',
     }),
-    showPanel: true,
+    showPanel: false,
     isFullscreen: false,
     panelPosition: 'bottom',
     isToolshown: true,

diff --git a/x-pack/legacy/plugins/apm/public/components/app/ServiceMap/Cytoscape.stories.tsx b/x-pack/legacy/plugins/apm/public/components/app/ServiceMap/Cytoscape.stories.tsx
@@ -9,8 +9,12 @@ import { storiesOf } from '@storybook/react';
 import cytoscape from 'cytoscape';
 import React from 'react';
 import { Cytoscape } from './Cytoscape';
+import { getCytoscapeElements } from './get_cytoscape_elements';
+import serviceMapResponse from './cytoscape-layout-test-response.json';
 import { iconForNode } from './icons';
 
+const elementsFromResponses = getCytoscapeElements([serviceMapResponse], '');
+
 storiesOf('app/ServiceMap/Cytoscape', module).add(
   'example',
   () => {
@@ -49,11 +53,13 @@ storiesOf('app/ServiceMap/Cytoscape', module).add(
       }
     ];
     const height = 300;
+    const width = 1340;
     const serviceName = 'opbeans-python';
     return (
       <Cytoscape
         elements={elements}
         height={height}
+        width={width}
         serviceName={serviceName}
       />
     );
@@ -66,114 +72,137 @@ storiesOf('app/ServiceMap/Cytoscape', module).add(
   }
 );
 
-storiesOf('app/ServiceMap/Cytoscape', module).add(
-  'node icons',
-  () => {
-    const cy = cytoscape();
-    const elements = [
-      { data: { id: 'default', label: 'default', type: undefined } },
-      { data: { id: 'cache', label: 'cache', type: 'cache' } },
-      { data: { id: 'database', label: 'database', type: 'database' } },
-      { data: { id: 'external', label: 'external', type: 'external' } },
-      { data: { id: 'messaging', label: 'messaging', type: 'messaging' } },
+storiesOf('app/ServiceMap/Cytoscape', module)
+  .add(
+    'node icons',
+    () => {
+      const cy = cytoscape();
+      const elements = [
+        { data: { id: 'default', label: 'default', type: undefined } },
+        { data: { id: 'cache', label: 'cache', type: 'cache' } },
+        { data: { id: 'database', label: 'database', type: 'database' } },
+        { data: { id: 'external', label: 'external', type: 'external' } },
+        { data: { id: 'messaging', label: 'messaging', type: 'messaging' } },
 
-      {
-        data: {
-          id: 'dotnet',
-          label: 'dotnet service',
-          type: 'service',
-          agentName: 'dotnet'
-        }
-      },
-      {
-        data: {
-          id: 'go',
-          label: 'go service',
-          type: 'service',
-          agentName: 'go'
-        }
-      },
-      {
-        data: {
-          id: 'java',
-          label: 'java service',
-          type: 'service',
-          agentName: 'java'
-        }
-      },
-      {
-        data: {
-          id: 'js-base',
-          label: 'js-base service',
-          type: 'service',
-          agentName: 'js-base'
-        }
-      },
-      {
-        data: {
-          id: 'nodejs',
-          label: 'nodejs service',
-          type: 'service',
-          agentName: 'nodejs'
+        {
+          data: {
+            id: 'dotnet',
+            label: 'dotnet service',
+            type: 'service',
+            agentName: 'dotnet'
+          }
+        },
+        {
+          data: {
+            id: 'go',
+            label: 'go service',
+            type: 'service',
+            agentName: 'go'
+          }
+        },
+        {
+          data: {
+            id: 'java',
+            label: 'java service',
+            type: 'service',
+            agentName: 'java'
+          }
+        },
+        {
+          data: {
+            id: 'js-base',
+            label: 'js-base service',
+            type: 'service',
+            agentName: 'js-base'
+          }
+        },
+        {
+          data: {
+            id: 'nodejs',
+            label: 'nodejs service',
+            type: 'service',
+            agentName: 'nodejs'
+          }
+        },
+        {
+          data: {
+            id: 'php',
+            label: 'php service',
+            type: 'service',
+            agentName: 'php'
+          }
+        },
+        {
+          data: {
+            id: 'python',
+            label: 'python service',
+            type: 'service',
+            agentName: 'python'
+          }
+        },
+        {
+          data: {
+            id: 'ruby',
+            label: 'ruby service',
+            type: 'service',
+            agentName: 'ruby'
+          }
         }
-      },
-      {
-        data: {
-          id: 'php',
-          label: 'php service',
-          type: 'service',
-          agentName: 'php'
-        }
-      },
-      {
-        data: {
-          id: 'python',
-          label: 'python service',
-          type: 'service',
-          agentName: 'python'
-        }
-      },
-      {
-        data: {
-          id: 'ruby',
-          label: 'ruby service',
-          type: 'service',
-          agentName: 'ruby'
-        }
-      }
-    ];
-    cy.add(elements);
+      ];
+      cy.add(elements);
 
-    return (
-      <EuiFlexGroup gutterSize="l" wrap={true}>
-        {cy.nodes().map(node => (
-          <EuiFlexItem key={node.data('id')}>
-            <EuiCard
-              description={
-                <pre>
-                  agentName: {node.data('agentName') || 'undefined'}, type:{' '}
-                  {node.data('type') || 'undefined'}
-                </pre>
-              }
-              icon={
-                <img
-                  alt={node.data('label')}
-                  src={iconForNode(node)}
-                  height={80}
-                  width={80}
-                />
-              }
-              title={node.data('label')}
-            />
-          </EuiFlexItem>
-        ))}
-      </EuiFlexGroup>
-    );
-  },
-  {
-    info: {
-      propTables: false,
-      source: false
+      return (
+        <EuiFlexGroup gutterSize="l" wrap={true}>
+          {cy.nodes().map(node => (
+            <EuiFlexItem key={node.data('id')}>
+              <EuiCard
+                description={
+                  <pre>
+                    agentName: {node.data('agentName') || 'undefined'}, type:{' '}
+                    {node.data('type') || 'undefined'}
+                  </pre>
+                }
+                icon={
+                  <img
+                    alt={node.data('label')}
+                    src={iconForNode(node)}
+                    height={80}
+                    width={80}
+                  />
+                }
+                title={node.data('label')}
+              />
+            </EuiFlexItem>
+          ))}
+        </EuiFlexGroup>
+      );
+    },
+    {
+      info: {
+        propTables: false,
+        source: false
+      }
     }
-  }
-);
+  )
+  .add(
+    'layout',
+    () => {
+      const height = 640;
+      const width = 1340;
+      const serviceName = undefined; // global service map
+      return (
+        <Cytoscape
+          elements={elementsFromResponses}
+          height={height}
+          width={width}
+          serviceName={serviceName}
+        />
+      );
+    },
+    {
+      info: {
+        source: false
+      }
+    }
+  )
+  .addParameters({ options: { showPanel: false } });