[APM] Add AWS and Azure icons for additional services (#101901) (#102082

)

Co-authored-by: Søren Louv-Jansen <sorenlouv@gmail.com>

x-pack/plugins/apm/public/components/shared/span_icon/get_span_icon.ts

@@ -6,7 +6,6 @@
  */
 
 import { maybe } from '../../../../common/utils/maybe';
-import awsIcon from './icons/aws.svg';
 import cassandraIcon from './icons/cassandra.svg';
 import databaseIcon from './icons/database.svg';
 import defaultIcon from './icons/default.svg';
@@ -33,12 +32,14 @@ const defaultTypeIcons: { [key: string]: string } = {
   resource: globeIcon,
 };
 
-const typeIcons: { [key: string]: { [key: string]: string } } = {
+export const typeIcons: { [type: string]: { [subType: string]: string } } = {
   aws: {
-    servicename: awsIcon,
+    servicename: 'logoAWS',
   },
   db: {
     cassandra: cassandraIcon,
+    cosmosdb: 'logoAzure',
+    dynamodb: 'logoAWS',
     elasticsearch: elasticsearchIcon,
     mongodb: mongodbIcon,
     mysql: mysqlIcon,
@@ -51,8 +52,18 @@ const typeIcons: { [key: string]: { [key: string]: string } } = {
     websocket: websocketIcon,
   },
   messaging: {
+    azurequeue: 'logoAzure',
+    azureservicebus: 'logoAzure',
     jms: javaIcon,
     kafka: kafkaIcon,
+    sns: 'logoAWS',
+    sqs: 'logoAWS',
+  },
+  storage: {
+    azureblob: 'logoAzure',
+    azurefile: 'logoAzure',
+    azuretable: 'logoAzure',
+    s3: 'logoAWS',
   },
   template: {
     handlebars: handlebarsIcon,

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

@@ -0,0 +1,73 @@
+/*
+ * 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 {
+  EuiFlexGrid,
+  EuiFlexItem,
+  EuiCopy,
+  EuiPanel,
+  EuiSpacer,
+  EuiCodeBlock,
+} from '@elastic/eui';
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { EuiThemeProvider } from '../../../../../../../src/plugins/kibana_react/common';
+import { SpanIcon } from './index';
+import { typeIcons } from './get_span_icon';
+
+const types = Object.keys(typeIcons);
+
+storiesOf('shared/span_icon/span_icon', module)
+  .addDecorator((storyFn) => <EuiThemeProvider>{storyFn()}</EuiThemeProvider>)
+  .add(
+    'Span icon',
+    () => {
+      return (
+        <>
+          <EuiCodeBlock language="html" isCopyable paddingSize="m">
+            {'<SpanIcon type="db" subtype="cassandra" />'}
+          </EuiCodeBlock>
+
+          <EuiSpacer />
+          <EuiFlexGrid direction="column" columns={3}>
+            {types.map((type) => {
+              const subTypes = Object.keys(typeIcons[type]);
+              return (
+                <>
+                  {subTypes.map((subType) => {
+                    const id = `${type}.${subType}`;
+                    return (
+                      <EuiFlexItem key={id}>
+                        <EuiCopy
+                          display="block"
+                          textToCopy={id}
+                          afterMessage={`${id} copied`}
+                        >
+                          {(copy) => (
+                            <EuiPanel
+                              hasShadow={false}
+                              hasBorder={false}
+                              onClick={copy}
+                              paddingSize="s"
+                            >
+                              <SpanIcon type={type} subType={subType} /> &emsp;{' '}
+                              <small>{id}</small>
+                            </EuiPanel>
+                          )}
+                        </EuiCopy>
+                      </EuiFlexItem>
+                    );
+                  })}
+                </>
+              );
+            })}
+          </EuiFlexGrid>
+        </>
+      );
+    },
+    {}
+  );