diff --git a/packages/cp-frontend/package.json b/packages/cp-frontend/package.json index 3e30d091..2421ced9 100644 --- a/packages/cp-frontend/package.json +++ b/packages/cp-frontend/package.json @@ -6,6 +6,7 @@ "repository": "github:yldio/joyent-portal", "main": "src/index.js", "scripts": { + "dev": "REACT_APP_GQL_PORT=3000 PORT=3069 react-scripts start", "start": "PORT=3069 react-scripts start", "build": "react-scripts build", "lint:css": "echo 0", diff --git a/packages/cp-frontend/src/state/selectors.js b/packages/cp-frontend/src/state/selectors.js index 2e37f471..8d0b7406 100644 --- a/packages/cp-frontend/src/state/selectors.js +++ b/packages/cp-frontend/src/state/selectors.js @@ -62,13 +62,8 @@ const findService = (services, uuid) => const getService = (service, index, datacenter) => ({ index, ...service, - // Tmp for topology - metrics: [1, 2, 3].map(m => ({ - name: `${m}`, - value: `${m}` - })), - // instances: service.instances.length, - datacenter + datacenter, + isConsul: service.slug === 'consul' }); const processServices = (services, datacenter) => { @@ -88,7 +83,7 @@ const processServices = (services, datacenter) => { parent.children.push(getService(s, i, datacenter)); } else { const serviceIndex = ss.findIndex(existingS => existingS.id === s.id); - if (serviceIndex == -1) { + if (serviceIndex === -1) { ss.push(getService(s, i, datacenter)); } else { ss.splice(serviceIndex, 1, { diff --git a/packages/ui-toolkit/src/topology/constants.js b/packages/ui-toolkit/src/topology/constants.js index d489407b..14d1f177 100644 --- a/packages/ui-toolkit/src/topology/constants.js +++ b/packages/ui-toolkit/src/topology/constants.js @@ -1,5 +1,5 @@ const Lengths = { - paddingLeft: 18, + paddingLeft: 12, nodeWidth: 180 }; @@ -10,15 +10,22 @@ const Sizes = { }, contentSize: { width: Lengths.nodeWidth, - height: 101 // This is the height w/o info comp + // height: 101 // This is the height w/o info comp + height: 42 + }, + childContentSize: { + width: Lengths.nodeWidth, + height: 64 }, nodeSize: { width: Lengths.nodeWidth, - height: 156 + // height: 156 + height: 90 }, nodeSizeWithChildren: { width: Lengths.nodeWidth, - height: 276 + // height: 276 + height: 176 } }; @@ -55,6 +62,10 @@ const Rects = { ...Sizes.contentSize, ...Points.contentPosition }, + childContentRect: { + ...Sizes.childContentSize, + ...Points.contentPosition + }, // Top, bottom, left, right - from 'centre' nodeRect: { left: -Sizes.nodeSize.width / 2, diff --git a/packages/ui-toolkit/src/topology/data/big.json b/packages/ui-toolkit/src/topology/data/big.json index fd743efc..112d3c09 100644 --- a/packages/ui-toolkit/src/topology/data/big.json +++ b/packages/ui-toolkit/src/topology/data/big.json @@ -2,8 +2,9 @@ "uuid": "primary-consul", "id": "consul", "name": "Consul", - "instances": 3, + "instances": ["", "", ""], "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", + "isConsul": true, "metrics": [{ "name": "CPU", "value": "50%" @@ -20,7 +21,7 @@ "uuid": "primary-nginx", "id": "nginx", "name": "Nginx", - "instances": 1, + "instances": [""], "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "metrics": [{ "name": "CPU", @@ -87,7 +88,7 @@ "uuid": "primary-mongodb", "id": "mongodb", "name": "MongoDB", - "instances": 3, + "instances": ["", "", ""], "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "metrics": [{ "name": "CPU", @@ -105,7 +106,7 @@ "uuid": 21393, "id": "accountservice", "name": "AccountService", - "instances": 4, + "instances": ["", "", "", ""], "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "metrics": [{ "name": "CPU", @@ -124,7 +125,7 @@ "uuid": 688632, "id": "addressservice", "name": "AddressService", - "instances": 5, + "instances": ["", "", "", "", ""], "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "metrics": [{ "name": "CPU", @@ -142,7 +143,7 @@ "uuid": 3802, "id": "bloomreachservice", "name": "BloomreachService", - "instances": 5, + "instances": ["", "", "", "", ""], "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "metrics": [{ "name": "CPU", @@ -160,7 +161,7 @@ "uuid": 211054, "id": "cartservice", "name": "CartService", - "instances": 4, + "instances": ["", "", "", ""], "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "metrics": [{ "name": "CPU", @@ -178,7 +179,7 @@ "uuid": 514555, "id": "extra service reported by containerpilot: cartservice-https", "name": "Extra service reported by ContainerPilot: CartService-HTTPS", - "instances": 5, + "instances": ["", "", "", "", ""], "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "metrics": [{ "name": "CPU", @@ -196,7 +197,7 @@ "uuid": 823837, "id": "cctokenizationclientservice", "name": "CCTokenizationClientService", - "instances": 3, + "instances": ["", "", ""], "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "metrics": [{ "name": "CPU", @@ -215,7 +216,7 @@ "uuid": 728066, "id": "checkoutservice", "name": "CheckoutService", - "instances": 4, + "instances": ["", "", "", ""], "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "metrics": [{ "name": "CPU", @@ -233,7 +234,7 @@ "uuid": 626040, "id": "colorswatchservice", "name": "ColorSwatchService", - "instances": 5, + "instances": ["", "", "", "", ""], "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "metrics": [{ "name": "CPU", @@ -251,7 +252,7 @@ "uuid": 39531, "id": "emailmarketingservice", "name": "EmailMarketingService", - "instances": 4, + "instances": ["", "", "", ""], "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "metrics": [{ "name": "CPU", @@ -269,7 +270,7 @@ "uuid": 338897, "id": "favoriteservice", "name": "FavoriteService", - "instances": 4, + "instances": ["", "", "", ""], "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "metrics": [{ "name": "CPU", @@ -287,7 +288,7 @@ "uuid": 870461, "id": "findinstoreservice", "name": "FindInStoreService", - "instances": 4, + "instances": ["", "", "", ""], "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "metrics": [{ "name": "CPU", @@ -306,7 +307,7 @@ "uuid": 306578, "id": "fitpredictorservice", "name": "FitpredictorService", - "instances": 5, + "instances": ["", "", "", "", ""], "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "metrics": [{ "name": "CPU", @@ -324,7 +325,7 @@ "uuid": 557611, "id": "hidefromcatalogservice", "name": "HidefromcatalogService", - "instances": 5, + "instances": ["", "", "", "", ""], "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "metrics": [{ "name": "CPU", @@ -342,7 +343,7 @@ "uuid": 24764, "id": "internationalcheckoutservice", "name": "InternationalCheckoutService", - "instances": 5, + "instances": ["", "", "", "", ""], "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "metrics": [{ "name": "CPU", @@ -360,7 +361,7 @@ "uuid": 866947, "id": "internationalposervice", "name": "InternationalPOService", - "instances": 4, + "instances": ["", "", "", ""], "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "metrics": [{ "name": "CPU", @@ -378,7 +379,7 @@ "uuid": 521183, "id": "internationalshippingservice", "name": "InternationalShippingService", - "instances": 4, + "instances": ["", "", "", ""], "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "metrics": [{ "name": "CPU", @@ -397,7 +398,7 @@ "uuid": 920500, "id": "inventoryservice", "name": "InventoryService", - "instances": 4, + "instances": ["", "", "", ""], "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "metrics": [{ "name": "CPU", @@ -415,7 +416,7 @@ "uuid": 673424, "id": "localizationservice", "name": "LocalizationService", - "instances": 3, + "instances": ["", "", ""], "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "metrics": [{ "name": "CPU", @@ -433,7 +434,7 @@ "uuid": 752876, "id": "moreaccountservice", "name": "MoreAccountService", - "instances": 4, + "instances": ["", "", "", ""], "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "metrics": [{ "name": "CPU", @@ -451,7 +452,7 @@ "uuid": 125936, "id": "navigationservice", "name": "NavigationService", - "instances": 4, + "instances": ["", "", "", ""], "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "metrics": [{ "name": "CPU", @@ -469,7 +470,7 @@ "uuid": 195071, "id": "ordercreationjob", "name": "OrderCreationJob", - "instances": 3, + "instances": ["", "", ""], "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "metrics": [{ "name": "CPU", @@ -488,7 +489,7 @@ "uuid": 101278, "id": "orderservice", "name": "OrderService", - "instances": 3, + "instances": ["", "", ""], "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "metrics": [{ "name": "CPU", @@ -506,7 +507,7 @@ "uuid": 766252, "id": "orderservice", "name": "OrderService", - "instances": 4, + "instances": ["", "", "", ""], "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "metrics": [{ "name": "CPU", @@ -524,7 +525,7 @@ "uuid": 272044, "id": "paymentmethodservice", "name": "PaymentMethodService", - "instances": 4, + "instances": ["", "", "", ""], "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "metrics": [{ "name": "CPU", @@ -542,7 +543,7 @@ "uuid": 579947, "id": "paymentservice", "name": "PaymentService", - "instances": 3, + "instances": ["", "", ""], "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "metrics": [{ "name": "CPU", @@ -560,7 +561,7 @@ "uuid": 211151, "id": "paymentservice", "name": "PaymentService", - "instances": 3, + "instances": ["", "", ""], "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "metrics": [{ "name": "CPU", @@ -579,7 +580,7 @@ "uuid": 712793, "id": "priceservice", "name": "PriceService", - "instances": 4, + "instances": ["", "", "", ""], "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "metrics": [{ "name": "CPU", @@ -597,7 +598,7 @@ "uuid": 831906, "id": "privatesaleservice", "name": "PrivatesaleService", - "instances": 3, + "instances": ["", "", ""], "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "metrics": [{ "name": "CPU", @@ -615,7 +616,7 @@ "uuid": 897694, "id": "productarrayservice", "name": "ProductArrayService", - "instances": 5, + "instances": ["", "", "", "", ""], "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "metrics": [{ "name": "CPU", @@ -633,7 +634,7 @@ "uuid": 261116, "id": "productdetailservice", "name": "ProductDetailService", - "instances": 4, + "instances": ["", "", "", ""], "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "metrics": [{ "name": "CPU", @@ -651,7 +652,7 @@ "uuid": 246274, "id": "productservice", "name": "ProductService", - "instances": 4, + "instances": ["", "", "", ""], "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "metrics": [{ "name": "CPU", @@ -670,7 +671,7 @@ "uuid": 380300, "id": "profileservice", "name": "ProfileService", - "instances": 4, + "instances": ["", "", "", ""], "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "metrics": [{ "name": "CPU", @@ -688,7 +689,7 @@ "uuid": 299558, "id": "promoservice", "name": "PromoService", - "instances": 3, + "instances": ["", "", ""], "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "metrics": [{ "name": "CPU", @@ -706,7 +707,7 @@ "uuid": 303216, "id": "promotionservice", "name": "PromotionService", - "instances": 4, + "instances": ["", "", "", ""], "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "metrics": [{ "name": "CPU", @@ -724,7 +725,7 @@ "uuid": 974334, "id": "questionanswerservice", "name": "QuestionanswerService", - "instances": 3, + "instances": ["", "", ""], "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "metrics": [{ "name": "CPU", @@ -742,7 +743,7 @@ "uuid": 127763, "id": "redbaloonservice", "name": "RedBaloonService", - "instances": 4, + "instances": ["", "", "", ""], "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "metrics": [{ "name": "CPU", @@ -761,7 +762,7 @@ "uuid": 437955, "id": "extra service reported by containerpilot: redbaloonservice-https", "name": "Extra service reported by ContainerPilot: RedBaloonService-HTTPS", - "instances": 4, + "instances": ["", "", "", ""], "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "metrics": [{ "name": "CPU", @@ -779,7 +780,7 @@ "uuid": 143274, "id": "reviewsservice", "name": "ReviewsService", - "instances": 5, + "instances": ["", "", "", "", ""], "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "metrics": [{ "name": "CPU", @@ -797,7 +798,7 @@ "uuid": 634968, "id": "searchfacetsservice", "name": "SearchFacetsService", - "instances": 4, + "instances": ["", "", "", ""], "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "metrics": [{ "name": "CPU", @@ -815,7 +816,7 @@ "uuid": 431609, "id": "searchindexservice", "name": "SearchIndexService", - "instances": 4, + "instances": ["", "", "", ""], "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "metrics": [{ "name": "CPU", @@ -833,7 +834,7 @@ "uuid": 282549, "id": "shoprunnerservice", "name": "ShopRunnerService", - "instances": 5, + "instances": ["", "", "", "", ""], "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "metrics": [{ "name": "CPU", @@ -852,7 +853,7 @@ "uuid": 262582, "id": "taxservice", "name": "TaxService", - "instances": 4, + "instances": ["", "", "", ""], "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "metrics": [{ "name": "CPU", @@ -870,7 +871,7 @@ "uuid": 418482, "id": "toggleservice", "name": "ToggleService", - "instances": 4, + "instances": ["", "", "", ""], "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "metrics": [{ "name": "CPU", @@ -888,7 +889,7 @@ "uuid": 284724, "id": "useraccountservice", "name": "UserAccountService", - "instances": 3, + "instances": ["", "", ""], "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "metrics": [{ "name": "CPU", @@ -906,7 +907,7 @@ "uuid": 798952, "id": "userauthenticationservice", "name": "UserAuthenticationService", - "instances": 4, + "instances": ["", "", "", ""], "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "metrics": [{ "name": "CPU", @@ -924,7 +925,7 @@ "uuid": 308763, "id": "waitlistoverlayservice", "name": "WaitlistOverlayService", - "instances": 5, + "instances": ["", "", "", "", ""], "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "metrics": [{ "name": "CPU", @@ -943,7 +944,7 @@ "uuid": 111726, "id": "waitlistservice", "name": "WaitlistService", - "instances": 3, + "instances": ["", "", ""], "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "metrics": [{ "name": "CPU", @@ -957,4 +958,4 @@ }], "datacentres": 1, "healthy": true -}] \ No newline at end of file +}] diff --git a/packages/ui-toolkit/src/topology/data/wp.json b/packages/ui-toolkit/src/topology/data/wp.json index d4428e11..f70e3f61 100644 --- a/packages/ui-toolkit/src/topology/data/wp.json +++ b/packages/ui-toolkit/src/topology/data/wp.json @@ -3,7 +3,7 @@ "id": "nginx", "name": "Nginx", "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401", - "instances": 1, + "instances": [""], "metrics": [{ "name": "CPU", "value": "50%" @@ -24,7 +24,7 @@ "id": "wordpress", "name": "Wordpress", "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401", - "instances": 2, + "instances": ["", ""], "metrics": [{ "name": "CPU", "value": "50%" @@ -47,7 +47,7 @@ "id": "nfs", "name": "NFS", "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401", - "instances": 2, + "instances": ["", ""], "metrics": [{ "name": "CPU", "value": "50%" @@ -65,7 +65,7 @@ "id": "memcached", "name": "Memcached", "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401", - "instances": 2, + "instances": ["", ""], "metrics": [{ "name": "CPU", "value": "50%" @@ -83,7 +83,7 @@ "id": "percona", "name": "Percona", "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401", - "instances": 2, + "instances": ["", ""], "metrics": [{ "name": "CPU", "value": "50%" @@ -101,7 +101,8 @@ "id": "consul", "name": "Consul", "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401", - "instances": 2, + "instances": ["", ""], + "isConsul": true, "metrics": [{ "name": "CPU", "value": "50%" @@ -114,4 +115,4 @@ }], "healthy": true, "datacentres": 2 -}] \ No newline at end of file +}] diff --git a/packages/ui-toolkit/src/topology/index.js b/packages/ui-toolkit/src/topology/index.js index 099aecbc..be8e184a 100644 --- a/packages/ui-toolkit/src/topology/index.js +++ b/packages/ui-toolkit/src/topology/index.js @@ -20,6 +20,27 @@ const StyledSvg = Svg.extend` */ class Topology extends React.Component { componentWillMount() { + this.create(); + } + + componentDidMount() { + this.boundResize = this.handleResize.bind(this); + window.addEventListener('resize', this.boundResize); + } + + componentWillUnmount() { + window.removeEventListener('resize', this.boundResize); + } + + shouldComponentUpdate() { + return true; + } + + handleResize(evt) { + this.create(); + } + + create() { const services = this.getServicesWithoutConsul(); const svgSize = this.getSvgSize(); @@ -34,7 +55,7 @@ class Topology extends React.Component { getServicesWithoutConsul() { return this.props.services.reduce((acc, service, index) => { - if (service.id !== 'consul') acc.push(service); + if (!service.isConsul) acc.push(service); return acc; }, []); } @@ -123,7 +144,7 @@ class Topology extends React.Component { const { nodes, links } = this.state; const nodesData = services.map((service, index) => { - const nodePosition = service.id === 'consul' + const nodePosition = service.isConsul ? this.getConsulNodePosition() : this.getConstrainedNodePosition(service.id, service.children); @@ -204,7 +225,7 @@ class Topology extends React.Component { onDragStart={onDragStart} onNodeTitleClick={onNodeTitleClick} onQuickActions={onQuickActionsClick} - connected={n.id !== 'consul'} + connected={!n.isConsul} />; const renderedLink = (l, index) => diff --git a/packages/ui-toolkit/src/topology/node/content.js b/packages/ui-toolkit/src/topology/node/content.js index fb14c75f..459ec2aa 100644 --- a/packages/ui-toolkit/src/topology/node/content.js +++ b/packages/ui-toolkit/src/topology/node/content.js @@ -7,25 +7,26 @@ import GraphNodeInfo from './info'; import GraphNodeMetrics from './metrics'; const GraphNodeContent = ({ connected, child = false, data, index = 0 }) => { - const { x, y, width, height } = Constants.contentRect; + let { x, y, width, height } = Constants.contentRect; + if(child) height = Constants.childContentSize.height; const contentY = y + height * index; - const offset = index ? 18 : -6; + // const offset = index ? 18 : -6; const nodeInfoPos = child ? { x: Constants.infoPosition.x, - y: Constants.infoPosition.y + offset + y: Constants.infoPosition.y + 21 // offset } : Constants.infoPosition; - const nodeMetricsPos = child + /* const nodeMetricsPos = child ? { x: Constants.metricsPosition.x, y: Constants.metricsPosition.y + offset } - : Constants.metricsPosition; + : Constants.metricsPosition; */ const nodeSubtitle = child ? @@ -33,7 +34,7 @@ const GraphNodeContent = ({ connected, child = false, data, index = 0 }) => { : null; - const nodeInfo = !child || index + /* const nodeInfo = !child || index ? { connected={connected} pos={nodeInfoPos} /> - : null; + : null; */ + + const nodeInfo = + ; return ( {nodeSubtitle} {nodeInfo} - + /> */} ); }; diff --git a/packages/ui-toolkit/src/topology/node/info.js b/packages/ui-toolkit/src/topology/node/info.js index ee553a5e..aee458cf 100644 --- a/packages/ui-toolkit/src/topology/node/info.js +++ b/packages/ui-toolkit/src/topology/node/info.js @@ -6,7 +6,8 @@ import Baseline from '../../baseline'; import DataCentresIcon from './icon-data-centers.svg'; import InstancesIcon from './icon-instances.svg'; import { Point } from '../prop-types'; -import { GraphText } from './shapes'; +import { GraphText, GraphHealthyCircle } from './shapes'; +import HeartIcon from './icon-heart.svg'; const StyledInstancesIcon = styled(InstancesIcon)` fill: ${props => props.theme.secondary}; @@ -29,18 +30,22 @@ const GraphNodeInfo = ({ connected, datacenter, instances, healthy, pos }) => { return ( - + + + + + - - {`${instances} inst.`} + + {`${instances.length} inst.`} - + {/* {datacenter} - + */} ); }; diff --git a/packages/ui-toolkit/src/topology/node/shapes.js b/packages/ui-toolkit/src/topology/node/shapes.js index 40490e8c..8dabe7a4 100644 --- a/packages/ui-toolkit/src/topology/node/shapes.js +++ b/packages/ui-toolkit/src/topology/node/shapes.js @@ -22,6 +22,7 @@ export const GraphNodeRect = styled.rect` stroke: ${props => props.theme.secondaryActive}; fill: ${props => props.theme.secondary}; `}; + cursor: move; `; export const GraphShadowRect = styled.rect` @@ -46,6 +47,7 @@ export const GraphTitle = styled.text` ${is('connected')` fill: ${props => props.theme.white}; `}; + cursor: pointer; `; export const GraphSubtitle = styled.text` diff --git a/packages/ui-toolkit/src/topology/node/title.js b/packages/ui-toolkit/src/topology/node/title.js index a6450263..78087c6e 100644 --- a/packages/ui-toolkit/src/topology/node/title.js +++ b/packages/ui-toolkit/src/topology/node/title.js @@ -16,10 +16,10 @@ const GraphNodeTitle = ({ connected, data, onNodeTitleClick }) => > {data.name} - + {/* - + */} ; GraphNodeTitle.propTypes = { diff --git a/packages/ui-toolkit/src/topology/simulation.js b/packages/ui-toolkit/src/topology/simulation.js index f2393ef2..192393fe 100644 --- a/packages/ui-toolkit/src/topology/simulation.js +++ b/packages/ui-toolkit/src/topology/simulation.js @@ -22,10 +22,17 @@ const createLinks = services => (acc, service, index) => service.connections ? acc.concat( - service.connections.map((connection, index) => ({ - source: service.id, - target: connection - })) + service.connections.reduce((connections, connection, index) => { + const targetExists = services.filter(service => + service.id === connection).length; + if(targetExists) { + connections.push({ + source: service.id, + target: connection + }); + } + return connections; + }, []) ) : acc, []