[APM] Fix SVG rendered agent icon in Service Map, and improve storybo…

…ok for icons (#102182)

x-pack/plugins/apm/public/components/app/service_inventory/ServiceList/index.tsx

@@ -29,7 +29,7 @@ import { fontSizes, px, truncate, unit } from '../../../../style/variables';
 import { ManagedTable, ITableColumn } from '../../../shared/ManagedTable';
 import { EnvironmentBadge } from '../../../shared/EnvironmentBadge';
 import { ServiceOrTransactionsOverviewLink } from '../../../shared/Links/apm/service_transactions_overview_link';
-import { AgentIcon } from '../../../shared/AgentIcon';
+import { AgentIcon } from '../../../shared/agent_icon';
 import { HealthBadge } from './HealthBadge';
 import { ServiceListMetric } from './ServiceListMetric';
 

x-pack/plugins/apm/public/components/app/service_map/__stories__/Cytoscape.stories.tsx

@@ -5,12 +5,10 @@
  * 2.0.
  */
 
-import { EuiCard, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import cytoscape from 'cytoscape';
 import React, { ComponentType } from 'react';
 import { EuiThemeProvider } from '../../../../../../../../src/plugins/kibana_react/common';
 import { Cytoscape } from '../Cytoscape';
-import { iconForNode } from '../icons';
 import { Centerer } from './centerer';
 
 export default {
@@ -70,231 +68,6 @@ export function Example() {
   );
 }
 
-export function NodeIcons() {
-  const cy = cytoscape();
-  const elements = [
-    { data: { id: 'default' } },
-    {
-      data: {
-        id: 'aws',
-        'span.type': 'aws',
-        'span.subtype': 'servicename',
-      },
-    },
-    { data: { id: 'cache', 'span.type': 'cache' } },
-    { data: { id: 'database', 'span.type': 'db' } },
-    {
-      data: {
-        id: 'cassandra',
-        'span.type': 'db',
-        'span.subtype': 'cassandra',
-      },
-    },
-    {
-      data: {
-        id: 'elasticsearch',
-        'span.type': 'db',
-        'span.subtype': 'elasticsearch',
-      },
-    },
-    {
-      data: {
-        id: 'mongodb',
-        'span.type': 'db',
-        'span.subtype': 'mongodb',
-      },
-    },
-    {
-      data: {
-        id: 'mysql',
-        'span.type': 'db',
-        'span.subtype': 'mysql',
-      },
-    },
-    {
-      data: {
-        id: 'postgresql',
-        'span.type': 'db',
-        'span.subtype': 'postgresql',
-      },
-    },
-    {
-      data: {
-        id: 'redis',
-        'span.type': 'db',
-        'span.subtype': 'redis',
-      },
-    },
-    { data: { id: 'external', 'span.type': 'external' } },
-    { data: { id: 'ext', 'span.type': 'ext' } },
-    {
-      data: {
-        id: 'graphql',
-        'span.type': 'external',
-        'span.subtype': 'graphql',
-      },
-    },
-    {
-      data: {
-        id: 'grpc',
-        'span.type': 'external',
-        'span.subtype': 'grpc',
-      },
-    },
-    {
-      data: {
-        id: 'websocket',
-        'span.type': 'external',
-        'span.subtype': 'websocket',
-      },
-    },
-    { data: { id: 'messaging', 'span.type': 'messaging' } },
-    {
-      data: {
-        id: 'jms',
-        'span.type': 'messaging',
-        'span.subtype': 'jms',
-      },
-    },
-    {
-      data: {
-        id: 'kafka',
-        'span.type': 'messaging',
-        'span.subtype': 'kafka',
-      },
-    },
-    { data: { id: 'template', 'span.type': 'template' } },
-    {
-      data: {
-        id: 'handlebars',
-        'span.type': 'template',
-        'span.subtype': 'handlebars',
-      },
-    },
-    {
-      data: {
-        id: 'dotnet',
-        'service.name': 'dotnet service',
-        'agent.name': 'dotnet',
-      },
-    },
-    {
-      data: {
-        id: 'dotNet',
-        'service.name': 'dotNet service',
-        'agent.name': 'dotNet',
-      },
-    },
-    {
-      data: {
-        id: 'erlang',
-        'service.name': 'erlang service',
-        'agent.name': 'erlang',
-      },
-    },
-    {
-      data: {
-        id: 'go',
-        'service.name': 'go service',
-        'agent.name': 'go',
-      },
-    },
-    {
-      data: {
-        id: 'java',
-        'service.name': 'java service',
-        'agent.name': 'java',
-      },
-    },
-    {
-      data: {
-        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',
-        'service.name': 'nodejs service',
-        'agent.name': 'nodejs',
-      },
-    },
-    {
-      data: {
-        id: 'ocaml',
-        'service.name': 'ocaml service',
-        'agent.name': 'ocaml',
-      },
-    },
-    {
-      data: {
-        id: 'opentelemetry',
-        'service.name': 'OpenTelemetry service',
-        'agent.name': 'otlp',
-      },
-    },
-    {
-      data: {
-        id: 'php',
-        'service.name': 'php service',
-        'agent.name': 'php',
-      },
-    },
-    {
-      data: {
-        id: 'python',
-        'service.name': 'python service',
-        'agent.name': 'python',
-      },
-    },
-    {
-      data: {
-        id: 'ruby',
-        'service.name': 'ruby service',
-        'agent.name': 'ruby',
-      },
-    },
-  ];
-  cy.add(elements);
-
-  return (
-    <EuiFlexGroup gutterSize="l" wrap={true}>
-      {cy.nodes().map((node) => (
-        <EuiFlexItem key={node.data('id')}>
-          <EuiCard
-            description={
-              <code style={{ textAlign: 'left', whiteSpace: 'nowrap' }}>
-                agent.name: {node.data('agent.name') || 'undefined'}
-                <br />
-                span.type: {node.data('span.type') || 'undefined'}
-                <br />
-                span.subtype: {node.data('span.subtype') || 'undefined'}
-              </code>
-            }
-            icon={
-              <img
-                alt={node.data('label')}
-                src={iconForNode(node)}
-                height={80}
-                width={80}
-              />
-            }
-            title={node.data('id')}
-          />
-        </EuiFlexItem>
-      ))}
-    </EuiFlexGroup>
-  );
-}
-
 export function NodeHealthStatus() {
   const elements = [
     {

x-pack/plugins/apm/public/components/app/service_map/icons.ts

@@ -11,7 +11,7 @@ import {
   SPAN_SUBTYPE,
   SPAN_TYPE,
 } from '../../../../common/elasticsearch_fieldnames';
-import { getAgentIcon } from '../../shared/AgentIcon/get_agent_icon';
+import { getAgentIcon } from '../../shared/agent_icon/get_agent_icon';
 import { getSpanIcon } from '../../shared/span_icon/get_span_icon';
 
 export function iconForNode(node: cytoscape.NodeSingular) {

x-pack/plugins/apm/public/components/app/service_overview/service_overview_dependencies_table/index.tsx

@@ -28,7 +28,7 @@ import { ServiceDependencyItem } from '../../../../../server/lib/services/get_se
 import { useUrlParams } from '../../../../context/url_params_context/use_url_params';
 import { FETCH_STATUS, useFetcher } from '../../../../hooks/use_fetcher';
 import { px, unit } from '../../../../style/variables';
-import { AgentIcon } from '../../../shared/AgentIcon';
+import { AgentIcon } from '../../../shared/agent_icon';
 import { SparkPlot } from '../../../shared/charts/spark_plot';
 import { ImpactBar } from '../../../shared/ImpactBar';
 import { ServiceMapLink } from '../../../shared/Links/apm/ServiceMapLink';

x-pack/plugins/apm/public/components/app/service_overview/service_overview_instances_table/intance_details.tsx

@@ -29,7 +29,7 @@ import { FETCH_STATUS } from '../../../../hooks/use_fetcher';
 import { useTheme } from '../../../../hooks/use_theme';
 import { APIReturnType } from '../../../../services/rest/createCallApmApi';
 import { pct } from '../../../../style/variables';
-import { getAgentIcon } from '../../../shared/AgentIcon/get_agent_icon';
+import { getAgentIcon } from '../../../shared/agent_icon/get_agent_icon';
 import { KeyValueFilterList } from '../../../shared/key_value_filter_list';
 import { pushNewItemToKueryBar } from '../../../shared/KueryBar/utils';
 import { getCloudIcon, getContainerIcon } from '../../../shared/service_icons';

x-pack/plugins/apm/public/components/shared/agent_icon/agent_icon.stories.tsx

@@ -0,0 +1,87 @@
+/*
+ * 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 {
+  EuiCard,
+  EuiFlexGroup,
+  EuiImage,
+  EuiFlexItem,
+  EuiSpacer,
+  EuiToolTip,
+  EuiCodeBlock,
+} from '@elastic/eui';
+import React, { ComponentType } from 'react';
+import { AgentIcon } from './index';
+import { EuiThemeProvider } from '../../../../../../../src/plugins/kibana_react/common';
+import { AGENT_NAMES } from '../../../../common/agent_name';
+import { getAgentIcon } from './get_agent_icon';
+import { useTheme } from '../../../hooks/use_theme';
+
+export default {
+  title: 'shared/icons',
+  component: AgentIcon,
+  decorators: [
+    (Story: ComponentType) => (
+      <EuiThemeProvider>
+        <Story />
+      </EuiThemeProvider>
+    ),
+  ],
+};
+
+export function AgentIcons() {
+  const theme = useTheme();
+
+  return (
+    <>
+      <EuiCodeBlock language="html" isCopyable paddingSize="m">
+        {'<AgentIcon agentName="dotnet" />'}
+      </EuiCodeBlock>
+
+      <EuiSpacer />
+
+      <EuiFlexGroup gutterSize="l" wrap={true}>
+        {AGENT_NAMES.map((agentName) => {
+          return (
+            <EuiFlexItem key={agentName} grow={false}>
+              <EuiCard
+                icon={
+                  <>
+                    <p>
+                      <EuiToolTip
+                        position="top"
+                        content="Icon rendered with `EuiImage`"
+                      >
+                        <EuiImage
+                          size="s"
+                          hasShadow
+                          alt={agentName}
+                          src={getAgentIcon(agentName, theme.darkMode)}
+                        />
+                      </EuiToolTip>
+                    </p>
+                  </>
+                }
+                title={agentName}
+                description={
+                  <div>
+                    <EuiToolTip
+                      position="bottom"
+                      content="Icon rendered with `AgentIcon`"
+                    >
+                      <AgentIcon agentName={agentName} />
+                    </EuiToolTip>
+                  </div>
+                }
+              />
+            </EuiFlexItem>
+          );
+        })}
+      </EuiFlexGroup>
+    </>
+  );
+}

x-pack/plugins/apm/public/components/shared/service_icons/index.tsx

@@ -12,7 +12,7 @@ import { useTheme } from '../../../hooks/use_theme';
 import { ContainerType } from '../../../../common/service_metadata';
 import { useUrlParams } from '../../../context/url_params_context/use_url_params';
 import { FETCH_STATUS, useFetcher } from '../../../hooks/use_fetcher';
-import { getAgentIcon } from '../AgentIcon/get_agent_icon';
+import { getAgentIcon } from '../agent_icon/get_agent_icon';
 import { CloudDetails } from './cloud_details';
 import { ContainerDetails } from './container_details';
 import { IconPopover } from './icon_popover';