From fbab7afc6ddcb93bcce202514f8844f4ac1ba30e Mon Sep 17 00:00:00 2001 From: Nathan L Smith Date: Wed, 24 Jun 2020 06:54:01 -0500 Subject: [PATCH] [APM] Storybook theme fixes (#69730) * [APM] Storybook theme fixes The changes adding theme support in #69362 broke some of the Storybook stories. Add decorators to wrap some of the stories in the theme context. This should be done in a global decorator, but our current storybook setup doesn't support this. It also would be nice to be able to switch between light/dark mode, but that's something we can add in the future. * Remove unused import * Adds missing decorator to cytoscape examples + adds a new real-world example Co-authored-by: Oliver Gupte Co-authored-by: Elastic Machine --- .../__stories__/Cytoscape.stories.tsx | 107 +- .../CytoscapeExampleData.stories.tsx | 434 ++-- .../example_response_one_domain_many_ips.json | 2122 +++++++++++++++++ .../index.stories.tsx | 38 +- 4 files changed, 2434 insertions(+), 267 deletions(-) create mode 100644 x-pack/plugins/apm/public/components/app/ServiceMap/__stories__/example_response_one_domain_many_ips.json diff --git a/x-pack/plugins/apm/public/components/app/ServiceMap/__stories__/Cytoscape.stories.tsx b/x-pack/plugins/apm/public/components/app/ServiceMap/__stories__/Cytoscape.stories.tsx index 28cb7a6f9d291..aee392b53298a 100644 --- a/x-pack/plugins/apm/public/components/app/ServiceMap/__stories__/Cytoscape.stories.tsx +++ b/x-pack/plugins/apm/public/components/app/ServiceMap/__stories__/Cytoscape.stories.tsx @@ -10,60 +10,63 @@ import cytoscape from 'cytoscape'; import React from 'react'; import { Cytoscape } from '../Cytoscape'; import { iconForNode } from '../icons'; +import { EuiThemeProvider } from '../../../../../../observability/public'; -storiesOf('app/ServiceMap/Cytoscape', module).add( - 'example', - () => { - const elements: cytoscape.ElementDefinition[] = [ - { - data: { - id: 'opbeans-python', - 'service.name': 'opbeans-python', - 'agent.name': 'python', - }, - }, - { - data: { - id: 'opbeans-node', - 'service.name': 'opbeans-node', - 'agent.name': 'nodejs', - }, - }, - { - data: { - id: 'opbeans-ruby', - 'service.name': 'opbeans-ruby', - 'agent.name': 'ruby', - }, - }, - { data: { source: 'opbeans-python', target: 'opbeans-node' } }, - { - data: { - bidirectional: true, - source: 'opbeans-python', - target: 'opbeans-ruby', - }, - }, - ]; - const height = 300; - const width = 1340; - const serviceName = 'opbeans-python'; - return ( - - ); - }, - { - info: { - propTables: false, - source: false, +storiesOf('app/ServiceMap/Cytoscape', module) + .addDecorator((storyFn) => {storyFn()}) + .add( + 'example', + () => { + const elements: cytoscape.ElementDefinition[] = [ + { + data: { + id: 'opbeans-python', + 'service.name': 'opbeans-python', + 'agent.name': 'python', + }, + }, + { + data: { + id: 'opbeans-node', + 'service.name': 'opbeans-node', + 'agent.name': 'nodejs', + }, + }, + { + data: { + id: 'opbeans-ruby', + 'service.name': 'opbeans-ruby', + 'agent.name': 'ruby', + }, + }, + { data: { source: 'opbeans-python', target: 'opbeans-node' } }, + { + data: { + bidirectional: true, + source: 'opbeans-python', + target: 'opbeans-ruby', + }, + }, + ]; + const height = 300; + const width = 1340; + const serviceName = 'opbeans-python'; + return ( + + ); }, - } -); + { + info: { + propTables: false, + source: false, + }, + } + ); storiesOf('app/ServiceMap/Cytoscape', module).add( 'node icons', diff --git a/x-pack/plugins/apm/public/components/app/ServiceMap/__stories__/CytoscapeExampleData.stories.tsx b/x-pack/plugins/apm/public/components/app/ServiceMap/__stories__/CytoscapeExampleData.stories.tsx index 3aced1b33dcac..44278b2846128 100644 --- a/x-pack/plugins/apm/public/components/app/ServiceMap/__stories__/CytoscapeExampleData.stories.tsx +++ b/x-pack/plugins/apm/public/components/app/ServiceMap/__stories__/CytoscapeExampleData.stories.tsx @@ -6,23 +6,25 @@ /* eslint-disable no-console */ import { + EuiButton, + EuiCodeEditor, + EuiFieldNumber, + EuiFilePicker, EuiFlexGroup, EuiFlexItem, - EuiButton, EuiForm, - EuiFieldNumber, - EuiToolTip, - EuiCodeEditor, EuiSpacer, - EuiFilePicker, + EuiToolTip, } from '@elastic/eui'; import { storiesOf } from '@storybook/react'; -import React, { useState, useEffect } from 'react'; +import React, { useEffect, useState } from 'react'; +import { EuiThemeProvider } from '../../../../../../observability/public'; import { Cytoscape } from '../Cytoscape'; -import { generateServiceMapElements } from './generate_service_map_elements'; -import exampleResponseOpbeansBeats from './example_response_opbeans_beats.json'; import exampleResponseHipsterStore from './example_response_hipster_store.json'; +import exampleResponseOpbeansBeats from './example_response_opbeans_beats.json'; import exampleResponseTodo from './example_response_todo.json'; +import exampleResponseOneDomainManyIPs from './example_response_one_domain_many_ips.json'; +import { generateServiceMapElements } from './generate_service_map_elements'; const STORYBOOK_PATH = 'app/ServiceMap/Cytoscape/Example data'; @@ -34,151 +36,155 @@ function setSessionJson(json: string) { window.sessionStorage.setItem(SESSION_STORAGE_KEY, json); } -storiesOf(STORYBOOK_PATH, module).add( - 'Generate map', - () => { - const [size, setSize] = useState(10); - const [json, setJson] = useState(''); - const [elements, setElements] = useState( - generateServiceMapElements(size) - ); - - return ( -
- - - { - setElements(generateServiceMapElements(size)); - setJson(''); - }} - > - Generate service map - - - - - setSize(e.target.valueAsNumber)} - /> - - - - { - setJson(JSON.stringify({ elements }, null, 2)); - }} - > - Get JSON - - - - - - - {json && ( - - )} -
- ); - }, - { - info: { propTables: false, source: false }, - } -); - -storiesOf(STORYBOOK_PATH, module).add( - 'Map from JSON', - () => { - const [json, setJson] = useState( - getSessionJson() || JSON.stringify(exampleResponseTodo, null, 2) - ); - const [error, setError] = useState(); - - const [elements, setElements] = useState([]); - useEffect(() => { - try { - setElements(JSON.parse(json).elements); - } catch (e) { - setError(e.message); - } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); - - return ( -
- - +storiesOf(STORYBOOK_PATH, module) + .addDecorator((storyFn) => {storyFn()}) + .add( + 'Generate map', + () => { + const [size, setSize] = useState(10); + const [json, setJson] = useState(''); + const [elements, setElements] = useState( + generateServiceMapElements(size) + ); + + return ( +
- { - setJson(value); + { + setElements(generateServiceMapElements(size)); + setJson(''); }} - /> + > + Generate service map + - - { - const item = event?.item(0); - - if (item) { - const f = new FileReader(); - f.onload = (onloadEvent) => { - const result = onloadEvent?.target?.result; - if (typeof result === 'string') { - setJson(result); - } - }; - f.readAsText(item); - } - }} + + setSize(e.target.valueAsNumber)} /> - - { - try { - setElements(JSON.parse(json).elements); - setSessionJson(json); - setError(undefined); - } catch (e) { - setError(e.message); - } - }} - > - Render JSON - - + + + + { + setJson(JSON.stringify({ elements }, null, 2)); + }} + > + Get JSON + - -
- ); - }, - { - info: { - propTables: false, - source: false, - text: ` + + + + {json && ( + + )} +
+ ); + }, + { + info: { propTables: false, source: false }, + } + ); + +storiesOf(STORYBOOK_PATH, module) + .addDecorator((storyFn) => {storyFn()}) + .add( + 'Map from JSON', + () => { + const [json, setJson] = useState( + getSessionJson() || JSON.stringify(exampleResponseTodo, null, 2) + ); + const [error, setError] = useState(); + + const [elements, setElements] = useState([]); + useEffect(() => { + try { + setElements(JSON.parse(json).elements); + } catch (e) { + setError(e.message); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + + return ( +
+ + + + + { + setJson(value); + }} + /> + + + + { + const item = event?.item(0); + + if (item) { + const f = new FileReader(); + f.onload = (onloadEvent) => { + const result = onloadEvent?.target?.result; + if (typeof result === 'string') { + setJson(result); + } + }; + f.readAsText(item); + } + }} + /> + + { + try { + setElements(JSON.parse(json).elements); + setSessionJson(json); + setError(undefined); + } catch (e) { + setError(e.message); + } + }} + > + Render JSON + + + + + +
+ ); + }, + { + info: { + propTables: false, + source: false, + text: ` Enter JSON map data into the text box or upload a file and click "Render JSON" to see the results. You can enable a download button on the service map by putting \`\`\` @@ -186,60 +192,86 @@ storiesOf(STORYBOOK_PATH, module).add( \`\`\` into the JavaScript console and reloading the page.`, + }, + } + ); + +storiesOf(STORYBOOK_PATH, module) + .addDecorator((storyFn) => {storyFn()}) + .add( + 'Todo app', + () => { + return ( +
+ +
+ ); + }, + { + info: { propTables: false, source: false }, + } + ); + +storiesOf(STORYBOOK_PATH, module) + .addDecorator((storyFn) => {storyFn()}) + .add( + 'Opbeans + beats', + () => { + return ( +
+ +
+ ); + }, + { + info: { propTables: false, source: false }, + } + ); + +storiesOf(STORYBOOK_PATH, module) + .addDecorator((storyFn) => {storyFn()}) + .add( + 'Hipster store', + () => { + return ( +
+ +
+ ); + }, + { + info: { propTables: false, source: false }, + } + ); + +storiesOf(STORYBOOK_PATH, module) + .addDecorator((storyFn) => {storyFn()}) + .add( + 'Node resolves one domain name to many IPs', + () => { + return ( +
+ +
+ ); }, - } -); - -storiesOf(STORYBOOK_PATH, module).add( - 'Todo app', - () => { - return ( -
- -
- ); - }, - { - info: { propTables: false, source: false }, - } -); - -storiesOf(STORYBOOK_PATH, module).add( - 'Opbeans + beats', - () => { - return ( -
- -
- ); - }, - { - info: { propTables: false, source: false }, - } -); - -storiesOf(STORYBOOK_PATH, module).add( - 'Hipster store', - () => { - return ( -
- -
- ); - }, - { - info: { propTables: false, source: false }, - } -); + { + info: { propTables: false, source: false }, + } + ); diff --git a/x-pack/plugins/apm/public/components/app/ServiceMap/__stories__/example_response_one_domain_many_ips.json b/x-pack/plugins/apm/public/components/app/ServiceMap/__stories__/example_response_one_domain_many_ips.json new file mode 100644 index 0000000000000..f9b8a273d8577 --- /dev/null +++ b/x-pack/plugins/apm/public/components/app/ServiceMap/__stories__/example_response_one_domain_many_ips.json @@ -0,0 +1,2122 @@ +{ + "elements": [ + { + "data": { + "source": "artifact_api", + "target": ">192.0.2.99:80", + "id": "artifact_api~>192.0.2.99:80", + "sourceData": { + "id": "artifact_api", + "service.environment": "development", + "service.name": "artifact_api", + "agent.name": "nodejs", + "service.framework.name": "express" + }, + "targetData": { + "span.subtype": "http", + "span.destination.service.resource": "192.0.2.99:80", + "span.type": "external", + "id": ">192.0.2.99:80", + "label": ">192.0.2.99:80" + } + } + }, + { + "data": { + "source": "artifact_api", + "target": ">192.0.2.47:443", + "id": "artifact_api~>192.0.2.47:443", + "sourceData": { + "id": "artifact_api", + "service.environment": "development", + "service.name": "artifact_api", + "agent.name": "nodejs", + "service.framework.name": "express" + }, + "targetData": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.47:443", + "span.type": "external", + "id": ">192.0.2.47:443", + "label": ">192.0.2.47:443" + } + } + }, + { + "data": { + "source": "artifact_api", + "target": ">192.0.2.13:443", + "id": "artifact_api~>192.0.2.13:443", + "sourceData": { + "id": "artifact_api", + "service.environment": "development", + "service.name": "artifact_api", + "agent.name": "nodejs", + "service.framework.name": "express" + }, + "targetData": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.13:443", + "span.type": "external", + "id": ">192.0.2.13:443", + "label": ">192.0.2.13:443" + } + } + }, + { + "data": { + "source": "artifact_api", + "target": ">192.0.2.106:443", + "id": "artifact_api~>192.0.2.106:443", + "sourceData": { + "id": "artifact_api", + "service.environment": "development", + "service.name": "artifact_api", + "agent.name": "nodejs", + "service.framework.name": "express" + }, + "targetData": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.106:443", + "span.type": "external", + "id": ">192.0.2.106:443", + "label": ">192.0.2.106:443" + } + } + }, + { + "data": { + "source": "artifact_api", + "target": ">192.0.2.83:443", + "id": "artifact_api~>192.0.2.83:443", + "sourceData": { + "id": "artifact_api", + "service.environment": "development", + "service.name": "artifact_api", + "agent.name": "nodejs", + "service.framework.name": "express" + }, + "targetData": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.83:443", + "span.type": "external", + "id": ">192.0.2.83:443", + "label": ">192.0.2.83:443" + } + } + }, + { + "data": { + "source": "artifact_api", + "target": ">192.0.2.111:443", + "id": "artifact_api~>192.0.2.111:443", + "sourceData": { + "id": "artifact_api", + "service.environment": "development", + "service.name": "artifact_api", + "agent.name": "nodejs", + "service.framework.name": "express" + }, + "targetData": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.111:443", + "span.type": "external", + "id": ">192.0.2.111:443", + "label": ">192.0.2.111:443" + } + } + }, + { + "data": { + "source": "artifact_api", + "target": ">192.0.2.189:443", + "id": "artifact_api~>192.0.2.189:443", + "sourceData": { + "id": "artifact_api", + "service.environment": "development", + "service.name": "artifact_api", + "agent.name": "nodejs", + "service.framework.name": "express" + }, + "targetData": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.189:443", + "span.type": "external", + "id": ">192.0.2.189:443", + "label": ">192.0.2.189:443" + } + } + }, + { + "data": { + "source": "artifact_api", + "target": ">192.0.2.148:443", + "id": "artifact_api~>192.0.2.148:443", + "sourceData": { + "id": "artifact_api", + "service.environment": "development", + "service.name": "artifact_api", + "agent.name": "nodejs", + "service.framework.name": "express" + }, + "targetData": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.148:443", + "span.type": "external", + "id": ">192.0.2.148:443", + "label": ">192.0.2.148:443" + } + } + }, + { + "data": { + "source": "artifact_api", + "target": ">192.0.2.39:443", + "id": "artifact_api~>192.0.2.39:443", + "sourceData": { + "id": "artifact_api", + "service.environment": "development", + "service.name": "artifact_api", + "agent.name": "nodejs", + "service.framework.name": "express" + }, + "targetData": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.39:443", + "span.type": "external", + "id": ">192.0.2.39:443", + "label": ">192.0.2.39:443" + } + } + }, + { + "data": { + "source": "artifact_api", + "target": ">192.0.2.42:443", + "id": "artifact_api~>192.0.2.42:443", + "sourceData": { + "id": "artifact_api", + "service.environment": "development", + "service.name": "artifact_api", + "agent.name": "nodejs", + "service.framework.name": "express" + }, + "targetData": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.42:443", + "span.type": "external", + "id": ">192.0.2.42:443", + "label": ">192.0.2.42:443" + } + } + }, + { + "data": { + "source": "artifact_api", + "target": ">192.0.2.240:443", + "id": "artifact_api~>192.0.2.240:443", + "sourceData": { + "id": "artifact_api", + "service.environment": "development", + "service.name": "artifact_api", + "agent.name": "nodejs", + "service.framework.name": "express" + }, + "targetData": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.240:443", + "span.type": "external", + "id": ">192.0.2.240:443", + "label": ">192.0.2.240:443" + } + } + }, + { + "data": { + "source": "artifact_api", + "target": ">192.0.2.156:443", + "id": "artifact_api~>192.0.2.156:443", + "sourceData": { + "id": "artifact_api", + "service.environment": "development", + "service.name": "artifact_api", + "agent.name": "nodejs", + "service.framework.name": "express" + }, + "targetData": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.156:443", + "span.type": "external", + "id": ">192.0.2.156:443", + "label": ">192.0.2.156:443" + } + } + }, + { + "data": { + "source": "artifact_api", + "target": ">192.0.2.245:443", + "id": "artifact_api~>192.0.2.245:443", + "sourceData": { + "id": "artifact_api", + "service.environment": "development", + "service.name": "artifact_api", + "agent.name": "nodejs", + "service.framework.name": "express" + }, + "targetData": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.245:443", + "span.type": "external", + "id": ">192.0.2.245:443", + "label": ">192.0.2.245:443" + } + } + }, + { + "data": { + "source": "artifact_api", + "target": ">192.0.2.198:443", + "id": "artifact_api~>192.0.2.198:443", + "sourceData": { + "id": "artifact_api", + "service.environment": "development", + "service.name": "artifact_api", + "agent.name": "nodejs", + "service.framework.name": "express" + }, + "targetData": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.198:443", + "span.type": "external", + "id": ">192.0.2.198:443", + "label": ">192.0.2.198:443" + } + } + }, + { + "data": { + "source": "artifact_api", + "target": ">192.0.2.77:443", + "id": "artifact_api~>192.0.2.77:443", + "sourceData": { + "id": "artifact_api", + "service.environment": "development", + "service.name": "artifact_api", + "agent.name": "nodejs", + "service.framework.name": "express" + }, + "targetData": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.77:443", + "span.type": "external", + "id": ">192.0.2.77:443", + "label": ">192.0.2.77:443" + } + } + }, + { + "data": { + "source": "artifact_api", + "target": ">192.0.2.8:443", + "id": "artifact_api~>192.0.2.8:443", + "sourceData": { + "id": "artifact_api", + "service.environment": "development", + "service.name": "artifact_api", + "agent.name": "nodejs", + "service.framework.name": "express" + }, + "targetData": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.8:443", + "span.type": "external", + "id": ">192.0.2.8:443", + "label": ">192.0.2.8:443" + } + } + }, + { + "data": { + "source": "artifact_api", + "target": ">192.0.2.69:443", + "id": "artifact_api~>192.0.2.69:443", + "sourceData": { + "id": "artifact_api", + "service.environment": "development", + "service.name": "artifact_api", + "agent.name": "nodejs", + "service.framework.name": "express" + }, + "targetData": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.69:443", + "span.type": "external", + "id": ">192.0.2.69:443", + "label": ">192.0.2.69:443" + } + } + }, + { + "data": { + "source": "artifact_api", + "target": ">192.0.2.5:443", + "id": "artifact_api~>192.0.2.5:443", + "sourceData": { + "id": "artifact_api", + "service.environment": "development", + "service.name": "artifact_api", + "agent.name": "nodejs", + "service.framework.name": "express" + }, + "targetData": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.5:443", + "span.type": "external", + "id": ">192.0.2.5:443", + "label": ">192.0.2.5:443" + } + } + }, + { + "data": { + "source": "artifact_api", + "target": ">192.0.2.139:443", + "id": "artifact_api~>192.0.2.139:443", + "sourceData": { + "id": "artifact_api", + "service.environment": "development", + "service.name": "artifact_api", + "agent.name": "nodejs", + "service.framework.name": "express" + }, + "targetData": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.139:443", + "span.type": "external", + "id": ">192.0.2.139:443", + "label": ">192.0.2.139:443" + } + } + }, + { + "data": { + "source": "artifact_api", + "target": ">192.0.2.113:443", + "id": "artifact_api~>192.0.2.113:443", + "sourceData": { + "id": "artifact_api", + "service.environment": "development", + "service.name": "artifact_api", + "agent.name": "nodejs", + "service.framework.name": "express" + }, + "targetData": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.113:443", + "span.type": "external", + "id": ">192.0.2.113:443", + "label": ">192.0.2.113:443" + } + } + }, + { + "data": { + "source": "artifact_api", + "target": ">192.0.2.2:443", + "id": "artifact_api~>192.0.2.2:443", + "sourceData": { + "id": "artifact_api", + "service.environment": "development", + "service.name": "artifact_api", + "agent.name": "nodejs", + "service.framework.name": "express" + }, + "targetData": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.2:443", + "span.type": "external", + "id": ">192.0.2.2:443", + "label": ">192.0.2.2:443" + } + } + }, + { + "data": { + "source": "artifact_api", + "target": ">192.0.2.213:443", + "id": "artifact_api~>192.0.2.213:443", + "sourceData": { + "id": "artifact_api", + "service.environment": "development", + "service.name": "artifact_api", + "agent.name": "nodejs", + "service.framework.name": "express" + }, + "targetData": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.213:443", + "span.type": "external", + "id": ">192.0.2.213:443", + "label": ">192.0.2.213:443" + } + } + }, + { + "data": { + "source": "artifact_api", + "target": ">192.0.2.153:443", + "id": "artifact_api~>192.0.2.153:443", + "sourceData": { + "id": "artifact_api", + "service.environment": "development", + "service.name": "artifact_api", + "agent.name": "nodejs", + "service.framework.name": "express" + }, + "targetData": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.153:443", + "span.type": "external", + "id": ">192.0.2.153:443", + "label": ">192.0.2.153:443" + } + } + }, + { + "data": { + "source": "artifact_api", + "target": ">192.0.2.36:443", + "id": "artifact_api~>192.0.2.36:443", + "sourceData": { + "id": "artifact_api", + "service.environment": "development", + "service.name": "artifact_api", + "agent.name": "nodejs", + "service.framework.name": "express" + }, + "targetData": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.36:443", + "span.type": "external", + "id": ">192.0.2.36:443", + "label": ">192.0.2.36:443" + } + } + }, + { + "data": { + "source": "artifact_api", + "target": ">192.0.2.164:443", + "id": "artifact_api~>192.0.2.164:443", + "sourceData": { + "id": "artifact_api", + "service.environment": "development", + "service.name": "artifact_api", + "agent.name": "nodejs", + "service.framework.name": "express" + }, + "targetData": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.164:443", + "span.type": "external", + "id": ">192.0.2.164:443", + "label": ">192.0.2.164:443" + } + } + }, + { + "data": { + "source": "artifact_api", + "target": ">192.0.2.190:443", + "id": "artifact_api~>192.0.2.190:443", + "sourceData": { + "id": "artifact_api", + "service.environment": "development", + "service.name": "artifact_api", + "agent.name": "nodejs", + "service.framework.name": "express" + }, + "targetData": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.190:443", + "span.type": "external", + "id": ">192.0.2.190:443", + "label": ">192.0.2.190:443" + } + } + }, + { + "data": { + "source": "artifact_api", + "target": ">192.0.2.9:443", + "id": "artifact_api~>192.0.2.9:443", + "sourceData": { + "id": "artifact_api", + "service.environment": "development", + "service.name": "artifact_api", + "agent.name": "nodejs", + "service.framework.name": "express" + }, + "targetData": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.9:443", + "span.type": "external", + "id": ">192.0.2.9:443", + "label": ">192.0.2.9:443" + } + } + }, + { + "data": { + "source": "artifact_api", + "target": ">192.0.2.210:443", + "id": "artifact_api~>192.0.2.210:443", + "sourceData": { + "id": "artifact_api", + "service.environment": "development", + "service.name": "artifact_api", + "agent.name": "nodejs", + "service.framework.name": "express" + }, + "targetData": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.210:443", + "span.type": "external", + "id": ">192.0.2.210:443", + "label": ">192.0.2.210:443" + } + } + }, + { + "data": { + "source": "artifact_api", + "target": ">192.0.2.21:443", + "id": "artifact_api~>192.0.2.21:443", + "sourceData": { + "id": "artifact_api", + "service.environment": "development", + "service.name": "artifact_api", + "agent.name": "nodejs", + "service.framework.name": "express" + }, + "targetData": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.21:443", + "span.type": "external", + "id": ">192.0.2.21:443", + "label": ">192.0.2.21:443" + } + } + }, + { + "data": { + "source": "artifact_api", + "target": ">192.0.2.176:443", + "id": "artifact_api~>192.0.2.176:443", + "sourceData": { + "id": "artifact_api", + "service.environment": "development", + "service.name": "artifact_api", + "agent.name": "nodejs", + "service.framework.name": "express" + }, + "targetData": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.176:443", + "span.type": "external", + "id": ">192.0.2.176:443", + "label": ">192.0.2.176:443" + } + } + }, + { + "data": { + "source": "artifact_api", + "target": ">192.0.2.81:443", + "id": "artifact_api~>192.0.2.81:443", + "sourceData": { + "id": "artifact_api", + "service.environment": "development", + "service.name": "artifact_api", + "agent.name": "nodejs", + "service.framework.name": "express" + }, + "targetData": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.81:443", + "span.type": "external", + "id": ">192.0.2.81:443", + "label": ">192.0.2.81:443" + } + } + }, + { + "data": { + "source": "artifact_api", + "target": ">192.0.2.118:443", + "id": "artifact_api~>192.0.2.118:443", + "sourceData": { + "id": "artifact_api", + "service.environment": "development", + "service.name": "artifact_api", + "agent.name": "nodejs", + "service.framework.name": "express" + }, + "targetData": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.118:443", + "span.type": "external", + "id": ">192.0.2.118:443", + "label": ">192.0.2.118:443" + } + } + }, + { + "data": { + "source": "artifact_api", + "target": ">192.0.2.103:443", + "id": "artifact_api~>192.0.2.103:443", + "sourceData": { + "id": "artifact_api", + "service.environment": "development", + "service.name": "artifact_api", + "agent.name": "nodejs", + "service.framework.name": "express" + }, + "targetData": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.103:443", + "span.type": "external", + "id": ">192.0.2.103:443", + "label": ">192.0.2.103:443" + } + } + }, + { + "data": { + "source": "artifact_api", + "target": ">192.0.2.3:443", + "id": "artifact_api~>192.0.2.3:443", + "sourceData": { + "id": "artifact_api", + "service.environment": "development", + "service.name": "artifact_api", + "agent.name": "nodejs", + "service.framework.name": "express" + }, + "targetData": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.3:443", + "span.type": "external", + "id": ">192.0.2.3:443", + "label": ">192.0.2.3:443" + } + } + }, + { + "data": { + "source": "artifact_api", + "target": ">192.0.2.135:443", + "id": "artifact_api~>192.0.2.135:443", + "sourceData": { + "id": "artifact_api", + "service.environment": "development", + "service.name": "artifact_api", + "agent.name": "nodejs", + "service.framework.name": "express" + }, + "targetData": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.135:443", + "span.type": "external", + "id": ">192.0.2.135:443", + "label": ">192.0.2.135:443" + } + } + }, + { + "data": { + "source": "artifact_api", + "target": ">192.0.2.26:443", + "id": "artifact_api~>192.0.2.26:443", + "sourceData": { + "id": "artifact_api", + "service.environment": "development", + "service.name": "artifact_api", + "agent.name": "nodejs", + "service.framework.name": "express" + }, + "targetData": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.26:443", + "span.type": "external", + "id": ">192.0.2.26:443", + "label": ">192.0.2.26:443" + } + } + }, + { + "data": { + "source": "artifact_api", + "target": ">192.0.2.185:443", + "id": "artifact_api~>192.0.2.185:443", + "sourceData": { + "id": "artifact_api", + "service.environment": "development", + "service.name": "artifact_api", + "agent.name": "nodejs", + "service.framework.name": "express" + }, + "targetData": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.185:443", + "span.type": "external", + "id": ">192.0.2.185:443", + "label": ">192.0.2.185:443" + } + } + }, + { + "data": { + "source": "artifact_api", + "target": ">192.0.2.173:443", + "id": "artifact_api~>192.0.2.173:443", + "sourceData": { + "id": "artifact_api", + "service.environment": "development", + "service.name": "artifact_api", + "agent.name": "nodejs", + "service.framework.name": "express" + }, + "targetData": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.173:443", + "span.type": "external", + "id": ">192.0.2.173:443", + "label": ">192.0.2.173:443" + } + } + }, + { + "data": { + "source": "artifact_api", + "target": ">192.0.2.45:443", + "id": "artifact_api~>192.0.2.45:443", + "sourceData": { + "id": "artifact_api", + "service.environment": "development", + "service.name": "artifact_api", + "agent.name": "nodejs", + "service.framework.name": "express" + }, + "targetData": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.45:443", + "span.type": "external", + "id": ">192.0.2.45:443", + "label": ">192.0.2.45:443" + } + } + }, + { + "data": { + "source": "artifact_api", + "target": ">192.0.2.144:443", + "id": "artifact_api~>192.0.2.144:443", + "sourceData": { + "id": "artifact_api", + "service.environment": "development", + "service.name": "artifact_api", + "agent.name": "nodejs", + "service.framework.name": "express" + }, + "targetData": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.144:443", + "span.type": "external", + "id": ">192.0.2.144:443", + "label": ">192.0.2.144:443" + } + } + }, + { + "data": { + "source": "artifact_api", + "target": ">192.0.2.165:443", + "id": "artifact_api~>192.0.2.165:443", + "sourceData": { + "id": "artifact_api", + "service.environment": "development", + "service.name": "artifact_api", + "agent.name": "nodejs", + "service.framework.name": "express" + }, + "targetData": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.165:443", + "span.type": "external", + "id": ">192.0.2.165:443", + "label": ">192.0.2.165:443" + } + } + }, + { + "data": { + "source": "artifact_api", + "target": ">192.0.2.119:443", + "id": "artifact_api~>192.0.2.119:443", + "sourceData": { + "id": "artifact_api", + "service.environment": "development", + "service.name": "artifact_api", + "agent.name": "nodejs", + "service.framework.name": "express" + }, + "targetData": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.119:443", + "span.type": "external", + "id": ">192.0.2.119:443", + "label": ">192.0.2.119:443" + } + } + }, + { + "data": { + "source": "artifact_api", + "target": ">192.0.2.186:443", + "id": "artifact_api~>192.0.2.186:443", + "sourceData": { + "id": "artifact_api", + "service.environment": "development", + "service.name": "artifact_api", + "agent.name": "nodejs", + "service.framework.name": "express" + }, + "targetData": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.186:443", + "span.type": "external", + "id": ">192.0.2.186:443", + "label": ">192.0.2.186:443" + } + } + }, + { + "data": { + "source": "artifact_api", + "target": ">192.0.2.54:443", + "id": "artifact_api~>192.0.2.54:443", + "sourceData": { + "id": "artifact_api", + "service.environment": "development", + "service.name": "artifact_api", + "agent.name": "nodejs", + "service.framework.name": "express" + }, + "targetData": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.54:443", + "span.type": "external", + "id": ">192.0.2.54:443", + "label": ">192.0.2.54:443" + } + } + }, + { + "data": { + "source": "artifact_api", + "target": ">192.0.2.23:443", + "id": "artifact_api~>192.0.2.23:443", + "sourceData": { + "id": "artifact_api", + "service.environment": "development", + "service.name": "artifact_api", + "agent.name": "nodejs", + "service.framework.name": "express" + }, + "targetData": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.23:443", + "span.type": "external", + "id": ">192.0.2.23:443", + "label": ">192.0.2.23:443" + } + } + }, + { + "data": { + "source": "artifact_api", + "target": ">192.0.2.34:443", + "id": "artifact_api~>192.0.2.34:443", + "sourceData": { + "id": "artifact_api", + "service.environment": "development", + "service.name": "artifact_api", + "agent.name": "nodejs", + "service.framework.name": "express" + }, + "targetData": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.34:443", + "span.type": "external", + "id": ">192.0.2.34:443", + "label": ">192.0.2.34:443" + } + } + }, + { + "data": { + "source": "artifact_api", + "target": ">192.0.2.169:443", + "id": "artifact_api~>192.0.2.169:443", + "sourceData": { + "id": "artifact_api", + "service.environment": "development", + "service.name": "artifact_api", + "agent.name": "nodejs", + "service.framework.name": "express" + }, + "targetData": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.169:443", + "span.type": "external", + "id": ">192.0.2.169:443", + "label": ">192.0.2.169:443" + } + } + }, + { + "data": { + "source": "artifact_api", + "target": ">192.0.2.226:443", + "id": "artifact_api~>192.0.2.226:443", + "sourceData": { + "id": "artifact_api", + "service.environment": "development", + "service.name": "artifact_api", + "agent.name": "nodejs", + "service.framework.name": "express" + }, + "targetData": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.226:443", + "span.type": "external", + "id": ">192.0.2.226:443", + "label": ">192.0.2.226:443" + } + } + }, + { + "data": { + "source": "artifact_api", + "target": ">192.0.2.82:443", + "id": "artifact_api~>192.0.2.82:443", + "sourceData": { + "id": "artifact_api", + "service.environment": "development", + "service.name": "artifact_api", + "agent.name": "nodejs", + "service.framework.name": "express" + }, + "targetData": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.82:443", + "span.type": "external", + "id": ">192.0.2.82:443", + "label": ">192.0.2.82:443" + } + } + }, + { + "data": { + "source": "artifact_api", + "target": ">192.0.2.132:443", + "id": "artifact_api~>192.0.2.132:443", + "sourceData": { + "id": "artifact_api", + "service.environment": "development", + "service.name": "artifact_api", + "agent.name": "nodejs", + "service.framework.name": "express" + }, + "targetData": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.132:443", + "span.type": "external", + "id": ">192.0.2.132:443", + "label": ">192.0.2.132:443" + } + } + }, + { + "data": { + "source": "artifact_api", + "target": ">192.0.2.78:443", + "id": "artifact_api~>192.0.2.78:443", + "sourceData": { + "id": "artifact_api", + "service.environment": "development", + "service.name": "artifact_api", + "agent.name": "nodejs", + "service.framework.name": "express" + }, + "targetData": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.78:443", + "span.type": "external", + "id": ">192.0.2.78:443", + "label": ">192.0.2.78:443" + } + } + }, + { + "data": { + "source": "artifact_api", + "target": ">192.0.2.71:443", + "id": "artifact_api~>192.0.2.71:443", + "sourceData": { + "id": "artifact_api", + "service.environment": "development", + "service.name": "artifact_api", + "agent.name": "nodejs", + "service.framework.name": "express" + }, + "targetData": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.71:443", + "span.type": "external", + "id": ">192.0.2.71:443", + "label": ">192.0.2.71:443" + } + } + }, + { + "data": { + "source": "artifact_api", + "target": ">192.0.2.48:443", + "id": "artifact_api~>192.0.2.48:443", + "sourceData": { + "id": "artifact_api", + "service.environment": "development", + "service.name": "artifact_api", + "agent.name": "nodejs", + "service.framework.name": "express" + }, + "targetData": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.48:443", + "span.type": "external", + "id": ">192.0.2.48:443", + "label": ">192.0.2.48:443" + } + } + }, + { + "data": { + "source": "artifact_api", + "target": ">192.0.2.107:443", + "id": "artifact_api~>192.0.2.107:443", + "sourceData": { + "id": "artifact_api", + "service.environment": "development", + "service.name": "artifact_api", + "agent.name": "nodejs", + "service.framework.name": "express" + }, + "targetData": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.107:443", + "span.type": "external", + "id": ">192.0.2.107:443", + "label": ">192.0.2.107:443" + } + } + }, + { + "data": { + "source": "artifact_api", + "target": ">192.0.2.239:443", + "id": "artifact_api~>192.0.2.239:443", + "sourceData": { + "id": "artifact_api", + "service.environment": "development", + "service.name": "artifact_api", + "agent.name": "nodejs", + "service.framework.name": "express" + }, + "targetData": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.239:443", + "span.type": "external", + "id": ">192.0.2.239:443", + "label": ">192.0.2.239:443" + } + } + }, + { + "data": { + "source": "artifact_api", + "target": ">192.0.2.209:443", + "id": "artifact_api~>192.0.2.209:443", + "sourceData": { + "id": "artifact_api", + "service.environment": "development", + "service.name": "artifact_api", + "agent.name": "nodejs", + "service.framework.name": "express" + }, + "targetData": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.209:443", + "span.type": "external", + "id": ">192.0.2.209:443", + "label": ">192.0.2.209:443" + } + } + }, + { + "data": { + "source": "artifact_api", + "target": ">192.0.2.248:443", + "id": "artifact_api~>192.0.2.248:443", + "sourceData": { + "id": "artifact_api", + "service.environment": "development", + "service.name": "artifact_api", + "agent.name": "nodejs", + "service.framework.name": "express" + }, + "targetData": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.248:443", + "span.type": "external", + "id": ">192.0.2.248:443", + "label": ">192.0.2.248:443" + } + } + }, + { + "data": { + "source": "artifact_api", + "target": ">192.0.2.18:443", + "id": "artifact_api~>192.0.2.18:443", + "sourceData": { + "id": "artifact_api", + "service.environment": "development", + "service.name": "artifact_api", + "agent.name": "nodejs", + "service.framework.name": "express" + }, + "targetData": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.18:443", + "span.type": "external", + "id": ">192.0.2.18:443", + "label": ">192.0.2.18:443" + } + } + }, + { + "data": { + "source": "artifact_api", + "target": ">192.0.2.228:443", + "id": "artifact_api~>192.0.2.228:443", + "sourceData": { + "id": "artifact_api", + "service.environment": "development", + "service.name": "artifact_api", + "agent.name": "nodejs", + "service.framework.name": "express" + }, + "targetData": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.228:443", + "span.type": "external", + "id": ">192.0.2.228:443", + "label": ">192.0.2.228:443" + } + } + }, + { + "data": { + "source": "artifact_api", + "target": ">192.0.2.145:443", + "id": "artifact_api~>192.0.2.145:443", + "sourceData": { + "id": "artifact_api", + "service.environment": "development", + "service.name": "artifact_api", + "agent.name": "nodejs", + "service.framework.name": "express" + }, + "targetData": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.145:443", + "span.type": "external", + "id": ">192.0.2.145:443", + "label": ">192.0.2.145:443" + } + } + }, + { + "data": { + "source": "artifact_api", + "target": ">192.0.2.25:443", + "id": "artifact_api~>192.0.2.25:443", + "sourceData": { + "id": "artifact_api", + "service.environment": "development", + "service.name": "artifact_api", + "agent.name": "nodejs", + "service.framework.name": "express" + }, + "targetData": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.25:443", + "span.type": "external", + "id": ">192.0.2.25:443", + "label": ">192.0.2.25:443" + } + } + }, + { + "data": { + "source": "artifact_api", + "target": ">192.0.2.162:443", + "id": "artifact_api~>192.0.2.162:443", + "sourceData": { + "id": "artifact_api", + "service.environment": "development", + "service.name": "artifact_api", + "agent.name": "nodejs", + "service.framework.name": "express" + }, + "targetData": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.162:443", + "span.type": "external", + "id": ">192.0.2.162:443", + "label": ">192.0.2.162:443" + } + } + }, + { + "data": { + "source": "artifact_api", + "target": ">192.0.2.202:443", + "id": "artifact_api~>192.0.2.202:443", + "sourceData": { + "id": "artifact_api", + "service.environment": "development", + "service.name": "artifact_api", + "agent.name": "nodejs", + "service.framework.name": "express" + }, + "targetData": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.202:443", + "span.type": "external", + "id": ">192.0.2.202:443", + "label": ">192.0.2.202:443" + } + } + }, + { + "data": { + "source": "artifact_api", + "target": ">192.0.2.60:443", + "id": "artifact_api~>192.0.2.60:443", + "sourceData": { + "id": "artifact_api", + "service.environment": "development", + "service.name": "artifact_api", + "agent.name": "nodejs", + "service.framework.name": "express" + }, + "targetData": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.60:443", + "span.type": "external", + "id": ">192.0.2.60:443", + "label": ">192.0.2.60:443" + } + } + }, + { + "data": { + "source": "artifact_api", + "target": ">192.0.2.59:443", + "id": "artifact_api~>192.0.2.59:443", + "sourceData": { + "id": "artifact_api", + "service.environment": "development", + "service.name": "artifact_api", + "agent.name": "nodejs", + "service.framework.name": "express" + }, + "targetData": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.59:443", + "span.type": "external", + "id": ">192.0.2.59:443", + "label": ">192.0.2.59:443" + } + } + }, + { + "data": { + "source": "artifact_api", + "target": ">192.0.2.114:443", + "id": "artifact_api~>192.0.2.114:443", + "sourceData": { + "id": "artifact_api", + "service.environment": "development", + "service.name": "artifact_api", + "agent.name": "nodejs", + "service.framework.name": "express" + }, + "targetData": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.114:443", + "span.type": "external", + "id": ">192.0.2.114:443", + "label": ">192.0.2.114:443" + } + } + }, + { + "data": { + "source": "artifact_api", + "target": ">192.0.2.215:443", + "id": "artifact_api~>192.0.2.215:443", + "sourceData": { + "id": "artifact_api", + "service.environment": "development", + "service.name": "artifact_api", + "agent.name": "nodejs", + "service.framework.name": "express" + }, + "targetData": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.215:443", + "span.type": "external", + "id": ">192.0.2.215:443", + "label": ">192.0.2.215:443" + } + } + }, + { + "data": { + "source": "artifact_api", + "target": ">192.0.2.238:443", + "id": "artifact_api~>192.0.2.238:443", + "sourceData": { + "id": "artifact_api", + "service.environment": "development", + "service.name": "artifact_api", + "agent.name": "nodejs", + "service.framework.name": "express" + }, + "targetData": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.238:443", + "span.type": "external", + "id": ">192.0.2.238:443", + "label": ">192.0.2.238:443" + } + } + }, + { + "data": { + "source": "artifact_api", + "target": ">192.0.2.160:443", + "id": "artifact_api~>192.0.2.160:443", + "sourceData": { + "id": "artifact_api", + "service.environment": "development", + "service.name": "artifact_api", + "agent.name": "nodejs", + "service.framework.name": "express" + }, + "targetData": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.160:443", + "span.type": "external", + "id": ">192.0.2.160:443", + "label": ">192.0.2.160:443" + } + } + }, + { + "data": { + "source": "artifact_api", + "target": ">192.0.2.70:443", + "id": "artifact_api~>192.0.2.70:443", + "sourceData": { + "id": "artifact_api", + "service.environment": "development", + "service.name": "artifact_api", + "agent.name": "nodejs", + "service.framework.name": "express" + }, + "targetData": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.70:443", + "span.type": "external", + "id": ">192.0.2.70:443", + "label": ">192.0.2.70:443" + } + } + }, + { + "data": { + "id": "artifact_api", + "service.environment": "development", + "service.name": "artifact_api", + "agent.name": "nodejs", + "service.framework.name": "express" + } + }, + { + "data": { + "span.subtype": "http", + "span.destination.service.resource": "192.0.2.99:80", + "span.type": "external", + "id": ">192.0.2.99:80", + "label": ">192.0.2.99:80" + } + }, + { + "data": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.186:443", + "span.type": "external", + "id": ">192.0.2.186:443", + "label": ">192.0.2.186:443" + } + }, + { + "data": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.78:443", + "span.type": "external", + "id": ">192.0.2.78:443", + "label": ">192.0.2.78:443" + } + }, + { + "data": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.226:443", + "span.type": "external", + "id": ">192.0.2.226:443", + "label": ">192.0.2.226:443" + } + }, + { + "data": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.245:443", + "span.type": "external", + "id": ">192.0.2.245:443", + "label": ">192.0.2.245:443" + } + }, + { + "data": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.77:443", + "span.type": "external", + "id": ">192.0.2.77:443", + "label": ">192.0.2.77:443" + } + }, + { + "data": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.2:443", + "span.type": "external", + "id": ">192.0.2.2:443", + "label": ">192.0.2.2:443" + } + }, + { + "data": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.198:443", + "span.type": "external", + "id": ">192.0.2.198:443", + "label": ">192.0.2.198:443" + } + }, + { + "data": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.113:443", + "span.type": "external", + "id": ">192.0.2.113:443", + "label": ">192.0.2.113:443" + } + }, + { + "data": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.39:443", + "span.type": "external", + "id": ">192.0.2.39:443", + "label": ">192.0.2.39:443" + } + }, + { + "data": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.83:443", + "span.type": "external", + "id": ">192.0.2.83:443", + "label": ">192.0.2.83:443" + } + }, + { + "data": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.5:443", + "span.type": "external", + "id": ">192.0.2.5:443", + "label": ">192.0.2.5:443" + } + }, + { + "data": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.165:443", + "span.type": "external", + "id": ">192.0.2.165:443", + "label": ">192.0.2.165:443" + } + }, + { + "data": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.156:443", + "span.type": "external", + "id": ">192.0.2.156:443", + "label": ">192.0.2.156:443" + } + }, + { + "data": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.132:443", + "span.type": "external", + "id": ">192.0.2.132:443", + "label": ">192.0.2.132:443" + } + }, + { + "data": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.240:443", + "span.type": "external", + "id": ">192.0.2.240:443", + "label": ">192.0.2.240:443" + } + }, + { + "data": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.54:443", + "span.type": "external", + "id": ">192.0.2.54:443", + "label": ">192.0.2.54:443" + } + }, + { + "data": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.213:443", + "span.type": "external", + "id": ">192.0.2.213:443", + "label": ">192.0.2.213:443" + } + }, + { + "data": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.81:443", + "span.type": "external", + "id": ">192.0.2.81:443", + "label": ">192.0.2.81:443" + } + }, + { + "data": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.176:443", + "span.type": "external", + "id": ">192.0.2.176:443", + "label": ">192.0.2.176:443" + } + }, + { + "data": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.82:443", + "span.type": "external", + "id": ">192.0.2.82:443", + "label": ">192.0.2.82:443" + } + }, + { + "data": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.23:443", + "span.type": "external", + "id": ">192.0.2.23:443", + "label": ">192.0.2.23:443" + } + }, + { + "data": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.189:443", + "span.type": "external", + "id": ">192.0.2.189:443", + "label": ">192.0.2.189:443" + } + }, + { + "data": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.190:443", + "span.type": "external", + "id": ">192.0.2.190:443", + "label": ">192.0.2.190:443" + } + }, + { + "data": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.119:443", + "span.type": "external", + "id": ">192.0.2.119:443", + "label": ">192.0.2.119:443" + } + }, + { + "data": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.169:443", + "span.type": "external", + "id": ">192.0.2.169:443", + "label": ">192.0.2.169:443" + } + }, + { + "data": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.210:443", + "span.type": "external", + "id": ">192.0.2.210:443", + "label": ">192.0.2.210:443" + } + }, + { + "data": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.148:443", + "span.type": "external", + "id": ">192.0.2.148:443", + "label": ">192.0.2.148:443" + } + }, + { + "data": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.26:443", + "span.type": "external", + "id": ">192.0.2.26:443", + "label": ">192.0.2.26:443" + } + }, + { + "data": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.139:443", + "span.type": "external", + "id": ">192.0.2.139:443", + "label": ">192.0.2.139:443" + } + }, + { + "data": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.111:443", + "span.type": "external", + "id": ">192.0.2.111:443", + "label": ">192.0.2.111:443" + } + }, + { + "data": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.13:443", + "span.type": "external", + "id": ">192.0.2.13:443", + "label": ">192.0.2.13:443" + } + }, + { + "data": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.36:443", + "span.type": "external", + "id": ">192.0.2.36:443", + "label": ">192.0.2.36:443" + } + }, + { + "data": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.69:443", + "span.type": "external", + "id": ">192.0.2.69:443", + "label": ">192.0.2.69:443" + } + }, + { + "data": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.173:443", + "span.type": "external", + "id": ">192.0.2.173:443", + "label": ">192.0.2.173:443" + } + }, + { + "data": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.144:443", + "span.type": "external", + "id": ">192.0.2.144:443", + "label": ">192.0.2.144:443" + } + }, + { + "data": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.135:443", + "span.type": "external", + "id": ">192.0.2.135:443", + "label": ">192.0.2.135:443" + } + }, + { + "data": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.21:443", + "span.type": "external", + "id": ">192.0.2.21:443", + "label": ">192.0.2.21:443" + } + }, + { + "data": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.118:443", + "span.type": "external", + "id": ">192.0.2.118:443", + "label": ">192.0.2.118:443" + } + }, + { + "data": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.42:443", + "span.type": "external", + "id": ">192.0.2.42:443", + "label": ">192.0.2.42:443" + } + }, + { + "data": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.106:443", + "span.type": "external", + "id": ">192.0.2.106:443", + "label": ">192.0.2.106:443" + } + }, + { + "data": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.3:443", + "span.type": "external", + "id": ">192.0.2.3:443", + "label": ">192.0.2.3:443" + } + }, + { + "data": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.34:443", + "span.type": "external", + "id": ">192.0.2.34:443", + "label": ">192.0.2.34:443" + } + }, + { + "data": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.185:443", + "span.type": "external", + "id": ">192.0.2.185:443", + "label": ">192.0.2.185:443" + } + }, + { + "data": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.153:443", + "span.type": "external", + "id": ">192.0.2.153:443", + "label": ">192.0.2.153:443" + } + }, + { + "data": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.9:443", + "span.type": "external", + "id": ">192.0.2.9:443", + "label": ">192.0.2.9:443" + } + }, + { + "data": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.164:443", + "span.type": "external", + "id": ">192.0.2.164:443", + "label": ">192.0.2.164:443" + } + }, + { + "data": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.47:443", + "span.type": "external", + "id": ">192.0.2.47:443", + "label": ">192.0.2.47:443" + } + }, + { + "data": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.45:443", + "span.type": "external", + "id": ">192.0.2.45:443", + "label": ">192.0.2.45:443" + } + }, + { + "data": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.8:443", + "span.type": "external", + "id": ">192.0.2.8:443", + "label": ">192.0.2.8:443" + } + }, + { + "data": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.103:443", + "span.type": "external", + "id": ">192.0.2.103:443", + "label": ">192.0.2.103:443" + } + }, + { + "data": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.60:443", + "span.type": "external", + "id": ">192.0.2.60:443", + "label": ">192.0.2.60:443" + } + }, + { + "data": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.202:443", + "span.type": "external", + "id": ">192.0.2.202:443", + "label": ">192.0.2.202:443" + } + }, + { + "data": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.70:443", + "span.type": "external", + "id": ">192.0.2.70:443", + "label": ">192.0.2.70:443" + } + }, + { + "data": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.114:443", + "span.type": "external", + "id": ">192.0.2.114:443", + "label": ">192.0.2.114:443" + } + }, + { + "data": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.25:443", + "span.type": "external", + "id": ">192.0.2.25:443", + "label": ">192.0.2.25:443" + } + }, + { + "data": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.209:443", + "span.type": "external", + "id": ">192.0.2.209:443", + "label": ">192.0.2.209:443" + } + }, + { + "data": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.248:443", + "span.type": "external", + "id": ">192.0.2.248:443", + "label": ">192.0.2.248:443" + } + }, + { + "data": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.18:443", + "span.type": "external", + "id": ">192.0.2.18:443", + "label": ">192.0.2.18:443" + } + }, + { + "data": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.107:443", + "span.type": "external", + "id": ">192.0.2.107:443", + "label": ">192.0.2.107:443" + } + }, + { + "data": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.160:443", + "span.type": "external", + "id": ">192.0.2.160:443", + "label": ">192.0.2.160:443" + } + }, + { + "data": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.228:443", + "span.type": "external", + "id": ">192.0.2.228:443", + "label": ">192.0.2.228:443" + } + }, + { + "data": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.215:443", + "span.type": "external", + "id": ">192.0.2.215:443", + "label": ">192.0.2.215:443" + } + }, + { + "data": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.162:443", + "span.type": "external", + "id": ">192.0.2.162:443", + "label": ">192.0.2.162:443" + } + }, + { + "data": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.238:443", + "span.type": "external", + "id": ">192.0.2.238:443", + "label": ">192.0.2.238:443" + } + }, + { + "data": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.145:443", + "span.type": "external", + "id": ">192.0.2.145:443", + "label": ">192.0.2.145:443" + } + }, + { + "data": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.239:443", + "span.type": "external", + "id": ">192.0.2.239:443", + "label": ">192.0.2.239:443" + } + }, + { + "data": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.59:443", + "span.type": "external", + "id": ">192.0.2.59:443", + "label": ">192.0.2.59:443" + } + }, + { + "data": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.71:443", + "span.type": "external", + "id": ">192.0.2.71:443", + "label": ">192.0.2.71:443" + } + }, + { + "data": { + "span.subtype": "https", + "span.destination.service.resource": "192.0.2.48:443", + "span.type": "external", + "id": ">192.0.2.48:443", + "label": ">192.0.2.48:443" + } + }, + { + "data": { + "service.name": "graphics-worker", + "agent.name": "nodejs", + "service.environment": null, + "service.framework.name": null, + "id": "graphics-worker" + } + } + ] +} diff --git a/x-pack/plugins/apm/public/components/app/Settings/AgentConfigurations/AgentConfigurationCreateEdit/index.stories.tsx b/x-pack/plugins/apm/public/components/app/Settings/AgentConfigurations/AgentConfigurationCreateEdit/index.stories.tsx index 7c69fb28d668f..920ef39e84ca3 100644 --- a/x-pack/plugins/apm/public/components/app/Settings/AgentConfigurations/AgentConfigurationCreateEdit/index.stories.tsx +++ b/x-pack/plugins/apm/public/components/app/Settings/AgentConfigurations/AgentConfigurationCreateEdit/index.stories.tsx @@ -21,13 +21,13 @@ import { ApmPluginContext, ApmPluginContextValue, } from '../../../../../context/ApmPluginContext'; +import { EuiThemeProvider } from '../../../../../../../observability/public'; storiesOf( 'app/Settings/AgentConfigurations/AgentConfigurationCreateEdit', module -).add( - 'with config', - () => { +) + .addDecorator((storyFn) => { const httpMock = {}; // mock @@ -40,10 +40,21 @@ storiesOf( }, }, }; + return ( - + + + {storyFn()} + + + ); + }) + .add( + 'with config', + () => { + return ( - - ); - }, - { - info: { - source: false, + ); }, - } -); + { + info: { + source: false, + }, + } + );