[APM] Add AWS and Azure icons for additional services #101901
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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) | ||
|
There was a problem hiding this comment. @sqren we have a story for node icons: https://github.com/smith/kibana/blob/b307cee64e3bee0cb7bcda742c3f94f17d5d8efe/x-pack/plugins/apm/public/components/app/service_map/__stories__/Cytoscape.stories.tsx#L73-L296, so maybe we should delete that one. Also we should prefer using Component Story Format over the legacy API. There was a problem hiding this comment. From the Cytoscape story, I can't tell if we are show-casing the span icons (in which case it should just be deleted), or it's meant to show how it looks in the service map, in which case we should keep it. It also looks like it's showing the agent icons via Perhaps we can trim the cytoscape story down to not include every icon but just a few important ones. There was a problem hiding this comment. Okay, I see now that's it's simply a grid, similar to the one I made
There was a problem hiding this comment. Actually, notice how "aws" is empty. It works under the story I added: There seems to be a bug here. Interesting! |
||
| .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} />  {' '} | ||
| <small>{id}</small> | ||
| </EuiPanel> | ||
| )} | ||
| </EuiCopy> | ||
| </EuiFlexItem> | ||
| ); | ||
| })} | ||
| </> | ||
| ); | ||
| })} | ||
| </EuiFlexGrid> | ||
| </> | ||
| ); | ||
| }, | ||
| {} | ||
| ); | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Maybe since you're repeating
logoAWSandlogoAzuremultiple times, would be a good idea to create a constant for them.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Would it make sense to invert it like:
So we'd call
<SpanIcon type="servicename" subtype="aws" />There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think the better solution is that EUI exports this as a constant, so it can be used like:
I've created an issue for this in the eui repo elastic/eui#4877