From 17e264e55e95d09ce87548e1571b16117bc55d39 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=B8ren=20Louv-Jansen?=
Date: Thu, 17 Jun 2021 12:24:39 +0200
Subject: [PATCH] [APM] Fix SVG rendered agent icon in Service Map, and improve
storybook for icons (#102182)
---
.../service_inventory/ServiceList/index.tsx | 2 +-
.../__stories__/Cytoscape.stories.tsx | 227 ------------------
.../components/app/service_map/icons.ts | 2 +-
.../index.tsx | 2 +-
.../intance_details.tsx | 2 +-
.../shared/agent_icon/agent_icon.stories.tsx | 87 +++++++
.../get_agent_icon.test.ts | 0
.../get_agent_icon.ts | 0
.../icons/dot-net.svg | 0
.../icons/erlang.svg | 0
.../{AgentIcon => agent_icon}/icons/go.svg | 0
.../{AgentIcon => agent_icon}/icons/ios.svg | 0
.../icons/ios_dark.svg | 0
.../{AgentIcon => agent_icon}/icons/java.svg | 0
.../icons/nodejs.svg | 0
.../{AgentIcon => agent_icon}/icons/ocaml.svg | 0
.../icons/opentelemetry.svg | 0
.../{AgentIcon => agent_icon}/icons/php.svg | 0
.../icons/php_dark.svg | 0
.../icons/python.svg | 0
.../{AgentIcon => agent_icon}/icons/ruby.svg | 0
.../{AgentIcon => agent_icon}/icons/rumjs.svg | 0
.../icons/rumjs_dark.svg | 0
.../{AgentIcon => agent_icon}/icons/rust.svg | 0
.../icons/rust_dark.svg | 0
.../{AgentIcon => agent_icon}/index.tsx | 0
.../components/shared/service_icons/index.tsx | 2 +-
.../shared/span_icon/get_span_icon.ts | 36 +--
.../shared/span_icon/icons/azure.svg | 11 +
.../shared/span_icon/span_icon.stories.tsx | 136 ++++++-----
30 files changed, 205 insertions(+), 302 deletions(-)
create mode 100644 x-pack/plugins/apm/public/components/shared/agent_icon/agent_icon.stories.tsx
rename x-pack/plugins/apm/public/components/shared/{AgentIcon => agent_icon}/get_agent_icon.test.ts (100%)
rename x-pack/plugins/apm/public/components/shared/{AgentIcon => agent_icon}/get_agent_icon.ts (100%)
rename x-pack/plugins/apm/public/components/shared/{AgentIcon => agent_icon}/icons/dot-net.svg (100%)
rename x-pack/plugins/apm/public/components/shared/{AgentIcon => agent_icon}/icons/erlang.svg (100%)
rename x-pack/plugins/apm/public/components/shared/{AgentIcon => agent_icon}/icons/go.svg (100%)
rename x-pack/plugins/apm/public/components/shared/{AgentIcon => agent_icon}/icons/ios.svg (100%)
rename x-pack/plugins/apm/public/components/shared/{AgentIcon => agent_icon}/icons/ios_dark.svg (100%)
rename x-pack/plugins/apm/public/components/shared/{AgentIcon => agent_icon}/icons/java.svg (100%)
rename x-pack/plugins/apm/public/components/shared/{AgentIcon => agent_icon}/icons/nodejs.svg (100%)
rename x-pack/plugins/apm/public/components/shared/{AgentIcon => agent_icon}/icons/ocaml.svg (100%)
rename x-pack/plugins/apm/public/components/shared/{AgentIcon => agent_icon}/icons/opentelemetry.svg (100%)
rename x-pack/plugins/apm/public/components/shared/{AgentIcon => agent_icon}/icons/php.svg (100%)
rename x-pack/plugins/apm/public/components/shared/{AgentIcon => agent_icon}/icons/php_dark.svg (100%)
rename x-pack/plugins/apm/public/components/shared/{AgentIcon => agent_icon}/icons/python.svg (100%)
rename x-pack/plugins/apm/public/components/shared/{AgentIcon => agent_icon}/icons/ruby.svg (100%)
rename x-pack/plugins/apm/public/components/shared/{AgentIcon => agent_icon}/icons/rumjs.svg (100%)
rename x-pack/plugins/apm/public/components/shared/{AgentIcon => agent_icon}/icons/rumjs_dark.svg (100%)
rename x-pack/plugins/apm/public/components/shared/{AgentIcon => agent_icon}/icons/rust.svg (100%)
rename x-pack/plugins/apm/public/components/shared/{AgentIcon => agent_icon}/icons/rust_dark.svg (100%)
rename x-pack/plugins/apm/public/components/shared/{AgentIcon => agent_icon}/index.tsx (100%)
create mode 100644 x-pack/plugins/apm/public/components/shared/span_icon/icons/azure.svg
diff --git a/x-pack/plugins/apm/public/components/app/service_inventory/ServiceList/index.tsx b/x-pack/plugins/apm/public/components/app/service_inventory/ServiceList/index.tsx
index 5bd34c689b61f7..6c40639594adf5 100644
--- a/x-pack/plugins/apm/public/components/app/service_inventory/ServiceList/index.tsx
+++ b/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';
diff --git a/x-pack/plugins/apm/public/components/app/service_map/__stories__/Cytoscape.stories.tsx b/x-pack/plugins/apm/public/components/app/service_map/__stories__/Cytoscape.stories.tsx
index c3f3c09e10e4f8..dbab10d7b93b60 100644
--- a/x-pack/plugins/apm/public/components/app/service_map/__stories__/Cytoscape.stories.tsx
+++ b/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 (
-
- {cy.nodes().map((node) => (
-
-
- agent.name: {node.data('agent.name') || 'undefined'}
-
- span.type: {node.data('span.type') || 'undefined'}
-
- span.subtype: {node.data('span.subtype') || 'undefined'}
-
- }
- icon={
-
- }
- title={node.data('id')}
- />
-
- ))}
-
- );
-}
-
export function NodeHealthStatus() {
const elements = [
{
diff --git a/x-pack/plugins/apm/public/components/app/service_map/icons.ts b/x-pack/plugins/apm/public/components/app/service_map/icons.ts
index da676fd6492938..3f6f7cb893024b 100644
--- a/x-pack/plugins/apm/public/components/app/service_map/icons.ts
+++ b/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) {
diff --git a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_dependencies_table/index.tsx b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_dependencies_table/index.tsx
index 55da021e046877..b1a4d5ca5fda78 100644
--- a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_dependencies_table/index.tsx
+++ b/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';
diff --git a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_instances_table/intance_details.tsx b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_instances_table/intance_details.tsx
index 5c2bbd9e20c59e..35cecc49e293b7 100644
--- a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_instances_table/intance_details.tsx
+++ b/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';
diff --git a/x-pack/plugins/apm/public/components/shared/agent_icon/agent_icon.stories.tsx b/x-pack/plugins/apm/public/components/shared/agent_icon/agent_icon.stories.tsx
new file mode 100644
index 00000000000000..bc41fd58ea5d24
--- /dev/null
+++ b/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) => (
+
+
+
+ ),
+ ],
+};
+
+export function AgentIcons() {
+ const theme = useTheme();
+
+ return (
+ <>
+
+ {''}
+
+
+
+
+
+ {AGENT_NAMES.map((agentName) => {
+ return (
+
+
+
+
+
+
+
+ >
+ }
+ title={agentName}
+ description={
+
+ }
+ />
+
+ );
+ })}
+
+ >
+ );
+}
diff --git a/x-pack/plugins/apm/public/components/shared/AgentIcon/get_agent_icon.test.ts b/x-pack/plugins/apm/public/components/shared/agent_icon/get_agent_icon.test.ts
similarity index 100%
rename from x-pack/plugins/apm/public/components/shared/AgentIcon/get_agent_icon.test.ts
rename to x-pack/plugins/apm/public/components/shared/agent_icon/get_agent_icon.test.ts
diff --git a/x-pack/plugins/apm/public/components/shared/AgentIcon/get_agent_icon.ts b/x-pack/plugins/apm/public/components/shared/agent_icon/get_agent_icon.ts
similarity index 100%
rename from x-pack/plugins/apm/public/components/shared/AgentIcon/get_agent_icon.ts
rename to x-pack/plugins/apm/public/components/shared/agent_icon/get_agent_icon.ts
diff --git a/x-pack/plugins/apm/public/components/shared/AgentIcon/icons/dot-net.svg b/x-pack/plugins/apm/public/components/shared/agent_icon/icons/dot-net.svg
similarity index 100%
rename from x-pack/plugins/apm/public/components/shared/AgentIcon/icons/dot-net.svg
rename to x-pack/plugins/apm/public/components/shared/agent_icon/icons/dot-net.svg
diff --git a/x-pack/plugins/apm/public/components/shared/AgentIcon/icons/erlang.svg b/x-pack/plugins/apm/public/components/shared/agent_icon/icons/erlang.svg
similarity index 100%
rename from x-pack/plugins/apm/public/components/shared/AgentIcon/icons/erlang.svg
rename to x-pack/plugins/apm/public/components/shared/agent_icon/icons/erlang.svg
diff --git a/x-pack/plugins/apm/public/components/shared/AgentIcon/icons/go.svg b/x-pack/plugins/apm/public/components/shared/agent_icon/icons/go.svg
similarity index 100%
rename from x-pack/plugins/apm/public/components/shared/AgentIcon/icons/go.svg
rename to x-pack/plugins/apm/public/components/shared/agent_icon/icons/go.svg
diff --git a/x-pack/plugins/apm/public/components/shared/AgentIcon/icons/ios.svg b/x-pack/plugins/apm/public/components/shared/agent_icon/icons/ios.svg
similarity index 100%
rename from x-pack/plugins/apm/public/components/shared/AgentIcon/icons/ios.svg
rename to x-pack/plugins/apm/public/components/shared/agent_icon/icons/ios.svg
diff --git a/x-pack/plugins/apm/public/components/shared/AgentIcon/icons/ios_dark.svg b/x-pack/plugins/apm/public/components/shared/agent_icon/icons/ios_dark.svg
similarity index 100%
rename from x-pack/plugins/apm/public/components/shared/AgentIcon/icons/ios_dark.svg
rename to x-pack/plugins/apm/public/components/shared/agent_icon/icons/ios_dark.svg
diff --git a/x-pack/plugins/apm/public/components/shared/AgentIcon/icons/java.svg b/x-pack/plugins/apm/public/components/shared/agent_icon/icons/java.svg
similarity index 100%
rename from x-pack/plugins/apm/public/components/shared/AgentIcon/icons/java.svg
rename to x-pack/plugins/apm/public/components/shared/agent_icon/icons/java.svg
diff --git a/x-pack/plugins/apm/public/components/shared/AgentIcon/icons/nodejs.svg b/x-pack/plugins/apm/public/components/shared/agent_icon/icons/nodejs.svg
similarity index 100%
rename from x-pack/plugins/apm/public/components/shared/AgentIcon/icons/nodejs.svg
rename to x-pack/plugins/apm/public/components/shared/agent_icon/icons/nodejs.svg
diff --git a/x-pack/plugins/apm/public/components/shared/AgentIcon/icons/ocaml.svg b/x-pack/plugins/apm/public/components/shared/agent_icon/icons/ocaml.svg
similarity index 100%
rename from x-pack/plugins/apm/public/components/shared/AgentIcon/icons/ocaml.svg
rename to x-pack/plugins/apm/public/components/shared/agent_icon/icons/ocaml.svg
diff --git a/x-pack/plugins/apm/public/components/shared/AgentIcon/icons/opentelemetry.svg b/x-pack/plugins/apm/public/components/shared/agent_icon/icons/opentelemetry.svg
similarity index 100%
rename from x-pack/plugins/apm/public/components/shared/AgentIcon/icons/opentelemetry.svg
rename to x-pack/plugins/apm/public/components/shared/agent_icon/icons/opentelemetry.svg
diff --git a/x-pack/plugins/apm/public/components/shared/AgentIcon/icons/php.svg b/x-pack/plugins/apm/public/components/shared/agent_icon/icons/php.svg
similarity index 100%
rename from x-pack/plugins/apm/public/components/shared/AgentIcon/icons/php.svg
rename to x-pack/plugins/apm/public/components/shared/agent_icon/icons/php.svg
diff --git a/x-pack/plugins/apm/public/components/shared/AgentIcon/icons/php_dark.svg b/x-pack/plugins/apm/public/components/shared/agent_icon/icons/php_dark.svg
similarity index 100%
rename from x-pack/plugins/apm/public/components/shared/AgentIcon/icons/php_dark.svg
rename to x-pack/plugins/apm/public/components/shared/agent_icon/icons/php_dark.svg
diff --git a/x-pack/plugins/apm/public/components/shared/AgentIcon/icons/python.svg b/x-pack/plugins/apm/public/components/shared/agent_icon/icons/python.svg
similarity index 100%
rename from x-pack/plugins/apm/public/components/shared/AgentIcon/icons/python.svg
rename to x-pack/plugins/apm/public/components/shared/agent_icon/icons/python.svg
diff --git a/x-pack/plugins/apm/public/components/shared/AgentIcon/icons/ruby.svg b/x-pack/plugins/apm/public/components/shared/agent_icon/icons/ruby.svg
similarity index 100%
rename from x-pack/plugins/apm/public/components/shared/AgentIcon/icons/ruby.svg
rename to x-pack/plugins/apm/public/components/shared/agent_icon/icons/ruby.svg
diff --git a/x-pack/plugins/apm/public/components/shared/AgentIcon/icons/rumjs.svg b/x-pack/plugins/apm/public/components/shared/agent_icon/icons/rumjs.svg
similarity index 100%
rename from x-pack/plugins/apm/public/components/shared/AgentIcon/icons/rumjs.svg
rename to x-pack/plugins/apm/public/components/shared/agent_icon/icons/rumjs.svg
diff --git a/x-pack/plugins/apm/public/components/shared/AgentIcon/icons/rumjs_dark.svg b/x-pack/plugins/apm/public/components/shared/agent_icon/icons/rumjs_dark.svg
similarity index 100%
rename from x-pack/plugins/apm/public/components/shared/AgentIcon/icons/rumjs_dark.svg
rename to x-pack/plugins/apm/public/components/shared/agent_icon/icons/rumjs_dark.svg
diff --git a/x-pack/plugins/apm/public/components/shared/AgentIcon/icons/rust.svg b/x-pack/plugins/apm/public/components/shared/agent_icon/icons/rust.svg
similarity index 100%
rename from x-pack/plugins/apm/public/components/shared/AgentIcon/icons/rust.svg
rename to x-pack/plugins/apm/public/components/shared/agent_icon/icons/rust.svg
diff --git a/x-pack/plugins/apm/public/components/shared/AgentIcon/icons/rust_dark.svg b/x-pack/plugins/apm/public/components/shared/agent_icon/icons/rust_dark.svg
similarity index 100%
rename from x-pack/plugins/apm/public/components/shared/AgentIcon/icons/rust_dark.svg
rename to x-pack/plugins/apm/public/components/shared/agent_icon/icons/rust_dark.svg
diff --git a/x-pack/plugins/apm/public/components/shared/AgentIcon/index.tsx b/x-pack/plugins/apm/public/components/shared/agent_icon/index.tsx
similarity index 100%
rename from x-pack/plugins/apm/public/components/shared/AgentIcon/index.tsx
rename to x-pack/plugins/apm/public/components/shared/agent_icon/index.tsx
diff --git a/x-pack/plugins/apm/public/components/shared/service_icons/index.tsx b/x-pack/plugins/apm/public/components/shared/service_icons/index.tsx
index 7889320342902e..d7fde5671d0ce2 100644
--- a/x-pack/plugins/apm/public/components/shared/service_icons/index.tsx
+++ b/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';
diff --git a/x-pack/plugins/apm/public/components/shared/span_icon/get_span_icon.ts b/x-pack/plugins/apm/public/components/shared/span_icon/get_span_icon.ts
index e2e1391a2f842d..5f4fe5df502466 100644
--- a/x-pack/plugins/apm/public/components/shared/span_icon/get_span_icon.ts
+++ b/x-pack/plugins/apm/public/components/shared/span_icon/get_span_icon.ts
@@ -6,6 +6,8 @@
*/
import { maybe } from '../../../../common/utils/maybe';
+import awsIcon from './icons/aws.svg';
+import azureIcon from './icons/azure.svg';
import cassandraIcon from './icons/cassandra.svg';
import databaseIcon from './icons/database.svg';
import defaultIcon from './icons/default.svg';
@@ -21,9 +23,9 @@ import mysqlIcon from './icons/mysql.svg';
import postgresqlIcon from './icons/postgresql.svg';
import redisIcon from './icons/redis.svg';
import websocketIcon from './icons/websocket.svg';
-import javaIcon from '../../shared/AgentIcon/icons/java.svg';
+import javaIcon from '../../shared/agent_icon/icons/java.svg';
-const defaultTypeIcons: { [key: string]: string } = {
+const defaultSpanTypeIcons: { [key: string]: string } = {
cache: databaseIcon,
db: databaseIcon,
ext: globeIcon,
@@ -32,14 +34,16 @@ const defaultTypeIcons: { [key: string]: string } = {
resource: globeIcon,
};
-export const typeIcons: { [type: string]: { [subType: string]: string } } = {
+export const spanTypeIcons: {
+ [type: string]: { [subType: string]: string };
+} = {
aws: {
- servicename: 'logoAWS',
+ servicename: awsIcon,
},
db: {
cassandra: cassandraIcon,
- cosmosdb: 'logoAzure',
- dynamodb: 'logoAWS',
+ cosmosdb: azureIcon,
+ dynamodb: awsIcon,
elasticsearch: elasticsearchIcon,
mongodb: mongodbIcon,
mysql: mysqlIcon,
@@ -52,18 +56,18 @@ export const typeIcons: { [type: string]: { [subType: string]: string } } = {
websocket: websocketIcon,
},
messaging: {
- azurequeue: 'logoAzure',
- azureservicebus: 'logoAzure',
+ azurequeue: azureIcon,
+ azureservicebus: azureIcon,
jms: javaIcon,
kafka: kafkaIcon,
- sns: 'logoAWS',
- sqs: 'logoAWS',
+ sns: awsIcon,
+ sqs: awsIcon,
},
storage: {
- azureblob: 'logoAzure',
- azurefile: 'logoAzure',
- azuretable: 'logoAzure',
- s3: 'logoAWS',
+ azureblob: azureIcon,
+ azurefile: azureIcon,
+ azuretable: azureIcon,
+ s3: awsIcon,
},
template: {
handlebars: handlebarsIcon,
@@ -75,10 +79,10 @@ export function getSpanIcon(type?: string, subtype?: string) {
return defaultIcon;
}
- const types = maybe(typeIcons[type]);
+ const types = maybe(spanTypeIcons[type]);
if (subtype && types && subtype in types) {
return types[subtype];
}
- return defaultTypeIcons[type] || defaultIcon;
+ return defaultSpanTypeIcons[type] || defaultIcon;
}
diff --git a/x-pack/plugins/apm/public/components/shared/span_icon/icons/azure.svg b/x-pack/plugins/apm/public/components/shared/span_icon/icons/azure.svg
new file mode 100644
index 00000000000000..2dec48f8622a04
--- /dev/null
+++ b/x-pack/plugins/apm/public/components/shared/span_icon/icons/azure.svg
@@ -0,0 +1,11 @@
+
diff --git a/x-pack/plugins/apm/public/components/shared/span_icon/span_icon.stories.tsx b/x-pack/plugins/apm/public/components/shared/span_icon/span_icon.stories.tsx
index 951d3e61f18460..b053f441e9632b 100644
--- a/x-pack/plugins/apm/public/components/shared/span_icon/span_icon.stories.tsx
+++ b/x-pack/plugins/apm/public/components/shared/span_icon/span_icon.stories.tsx
@@ -6,68 +6,96 @@
*/
import {
- EuiFlexGrid,
+ EuiImage,
+ EuiCard,
+ EuiFlexGroup,
EuiFlexItem,
- EuiCopy,
- EuiPanel,
EuiSpacer,
EuiCodeBlock,
+ EuiToolTip,
} from '@elastic/eui';
-import React from 'react';
-import { storiesOf } from '@storybook/react';
+import React, { ComponentType } from 'react';
import { EuiThemeProvider } from '../../../../../../../src/plugins/kibana_react/common';
import { SpanIcon } from './index';
-import { typeIcons } from './get_span_icon';
+import { getSpanIcon } from './get_span_icon';
+import { spanTypeIcons } from './get_span_icon';
-const types = Object.keys(typeIcons);
+const spanTypes = Object.keys(spanTypeIcons);
-storiesOf('shared/span_icon/span_icon', module)
- .addDecorator((storyFn) => {storyFn()})
- .add(
- 'Span icon',
- () => {
- return (
- <>
-
- {''}
-
+export default {
+ title: 'shared/icons',
+ component: SpanIcon,
+ decorators: [
+ (Story: ComponentType) => (
+
+
+
+ ),
+ ],
+};
-
-
- {types.map((type) => {
- const subTypes = Object.keys(typeIcons[type]);
- return (
- <>
- {subTypes.map((subType) => {
- const id = `${type}.${subType}`;
- return (
-
-
+
+ {''}
+
+
+
+
+
+ {spanTypes.map((type) => {
+ const subTypes = Object.keys(spanTypeIcons[type]);
+ return subTypes.map((subType) => {
+ const id = `${type}.${subType}`;
+
+ return (
+
+
+
+
+
+
+ }
+ title={id}
+ description={
+ <>
+
+
- {(copy) => (
-
- {' '}
- {id}
-
- )}
-
-
- );
- })}
- >
- );
- })}
-
- >
- );
- },
- {}
+
+
+
+
+
+ span.type: {type}
+ span.subtype: {subType}
+
+ >
+ }
+ />
+
+ );
+ });
+ })}
+
+ >
);
+}