From bcba287bca2d21184a22db4b1bd5163591a8372d Mon Sep 17 00:00:00 2001
From: Nathan L Smith <smith@nlsmith.com>
Date: Mon, 6 Apr 2020 18:08:47 -0500
Subject: [PATCH 1/2] Add service map icon for rum-js agent type

We previously were only checking for "js-base" as the RUM `agent.name` but it can report either "js-base" or "rum-js", so make that work.

I saw an "opbeans-react" service on a map generated by apm-integration-testing that Gil had running last week. Not sure if that's a newer or older version because I don't see it on apm.elstc.co.

Also clean up the icons storybook a little.

Fixes #62336.
---
 .../app/ServiceMap/Cytoscape.stories.tsx      | 34 +++++++++----------
 .../public/components/app/ServiceMap/icons.ts |  3 +-
 2 files changed, 18 insertions(+), 19 deletions(-)

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
index 46754c8c7cb6b..a8d3b843a1f3d 100644
--- 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
@@ -75,27 +75,17 @@ storiesOf('app/ServiceMap/Cytoscape', module)
       const cy = cytoscape();
       const elements = [
         { data: { id: 'default' } },
-        { data: { id: 'cache', label: 'cache', 'span.type': 'cache' } },
-        { data: { id: 'database', label: 'database', 'span.type': 'db' } },
+        { data: { id: 'cache', 'span.type': 'cache' } },
+        { data: { id: 'database', 'span.type': 'db' } },
         {
           data: {
             id: 'elasticsearch',
-            label: 'elasticsearch',
             'span.type': 'db',
             'span.subtype': 'elasticsearch'
           }
         },
-        {
-          data: { id: 'external', label: 'external', 'span.type': 'external' }
-        },
-        {
-          data: {
-            id: 'messaging',
-            label: 'messaging',
-            'span.type': 'messaging'
-          }
-        },
-
+        { data: { id: 'external', 'span.type': 'external' } },
+        { data: { id: 'messaging', 'span.type': 'messaging' } },
         {
           data: {
             id: 'dotnet',
@@ -119,11 +109,18 @@ storiesOf('app/ServiceMap/Cytoscape', module)
         },
         {
           data: {
-            id: 'js-base',
-            'service.name': 'js-base service',
+            id: 'RUM (js-base)',
+            'service.name': 'RUM service',
             'agent.name': 'js-base'
           }
         },
+        {
+          data: {
+            id: 'RUM (rum-js)',
+            'service.name': 'RUM service',
+            'agent.name': 'rum-js'
+          }
+        },
         {
           data: {
             id: 'nodejs',
@@ -163,7 +160,8 @@ storiesOf('app/ServiceMap/Cytoscape', module)
                 description={
                   <pre>
                     agent.name: {node.data('agent.name') || 'undefined'},
-                    span.type: {node.data('span.type') || 'undefined'}
+                    span.type: {node.data('span.type') || 'undefined'},
+                    span.subtype: {node.data('span.subtype') || 'undefined'}
                   </pre>
                 }
                 icon={
@@ -174,7 +172,7 @@ storiesOf('app/ServiceMap/Cytoscape', module)
                     width={80}
                   />
                 }
-                title={node.data('label')}
+                title={node.data('id')}
               />
             </EuiFlexItem>
           ))}
diff --git a/x-pack/legacy/plugins/apm/public/components/app/ServiceMap/icons.ts b/x-pack/legacy/plugins/apm/public/components/app/ServiceMap/icons.ts
index 4925ffba310b5..53596fb28fae5 100644
--- a/x-pack/legacy/plugins/apm/public/components/app/ServiceMap/icons.ts
+++ b/x-pack/legacy/plugins/apm/public/components/app/ServiceMap/icons.ts
@@ -44,7 +44,8 @@ const serviceIcons: { [key: string]: string } = {
   nodejs: nodeJsIcon,
   php: phpIcon,
   python: pythonIcon,
-  ruby: rubyIcon
+  ruby: rubyIcon,
+  'rum-js': rumJsIcon
 };
 
 // IE 11 does not properly load some SVGs, which causes a runtime error and the

From b08442c81603e5afe46838e830097ed3e1800d25 Mon Sep 17 00:00:00 2001
From: Nathan L Smith <smith@nlsmith.com>
Date: Mon, 6 Apr 2020 18:50:25 -0500
Subject: [PATCH 2/2] use isRumAgentName

---
 .../apm/public/components/app/ServiceMap/icons.ts | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/x-pack/legacy/plugins/apm/public/components/app/ServiceMap/icons.ts b/x-pack/legacy/plugins/apm/public/components/app/ServiceMap/icons.ts
index 53596fb28fae5..dd9b48d312725 100644
--- a/x-pack/legacy/plugins/apm/public/components/app/ServiceMap/icons.ts
+++ b/x-pack/legacy/plugins/apm/public/components/app/ServiceMap/icons.ts
@@ -5,11 +5,12 @@
  */
 
 import cytoscape from 'cytoscape';
+import { isRumAgentName } from '../../../../../../../plugins/apm/common/agent_name';
 import {
   AGENT_NAME,
   SERVICE_NAME,
-  SPAN_TYPE,
-  SPAN_SUBTYPE
+  SPAN_SUBTYPE,
+  SPAN_TYPE
 } from '../../../../../../../plugins/apm/common/elasticsearch_fieldnames';
 import databaseIcon from './icons/database.svg';
 import defaultIconImport from './icons/default.svg';
@@ -44,8 +45,7 @@ const serviceIcons: { [key: string]: string } = {
   nodejs: nodeJsIcon,
   php: phpIcon,
   python: pythonIcon,
-  ruby: rubyIcon,
-  'rum-js': rumJsIcon
+  ruby: rubyIcon
 };
 
 // IE 11 does not properly load some SVGs, which causes a runtime error and the
@@ -63,7 +63,12 @@ export function iconForNode(node: cytoscape.NodeSingular) {
   const type = node.data(SPAN_TYPE);
 
   if (node.data(SERVICE_NAME)) {
-    return serviceIcons[node.data(AGENT_NAME) as string];
+    const agentName = node.data(AGENT_NAME);
+    // RUM can have multiple names. Normalize it
+    const normalizedAgentName = isRumAgentName(agentName)
+      ? 'js-base'
+      : agentName;
+    return serviceIcons[normalizedAgentName];
   } else if (isIE11) {
     return defaultIcon;
   } else if (