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={ - {node.data('label')} - } - 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}
+ + + } + /> + + ); + }); + })} + + ); +}