feat(cp-frontend, ui-toolkit): Resize nodes and topolgy

This commit is contained in:
JUDIT GRESKOVITS 2017-06-27 17:19:27 +01:00 committed by Sérgio Ramos
parent 5dab93e59e
commit 8e90dbfa56
11 changed files with 148 additions and 94 deletions

View File

@ -6,6 +6,7 @@
"repository": "github:yldio/joyent-portal", "repository": "github:yldio/joyent-portal",
"main": "src/index.js", "main": "src/index.js",
"scripts": { "scripts": {
"dev": "REACT_APP_GQL_PORT=3000 PORT=3069 react-scripts start",
"start": "PORT=3069 react-scripts start", "start": "PORT=3069 react-scripts start",
"build": "react-scripts build", "build": "react-scripts build",
"lint:css": "echo 0", "lint:css": "echo 0",

View File

@ -62,13 +62,8 @@ const findService = (services, uuid) =>
const getService = (service, index, datacenter) => ({ const getService = (service, index, datacenter) => ({
index, index,
...service, ...service,
// Tmp for topology datacenter,
metrics: [1, 2, 3].map(m => ({ isConsul: service.slug === 'consul'
name: `${m}`,
value: `${m}`
})),
// instances: service.instances.length,
datacenter
}); });
const processServices = (services, datacenter) => { const processServices = (services, datacenter) => {
@ -88,7 +83,7 @@ const processServices = (services, datacenter) => {
parent.children.push(getService(s, i, datacenter)); parent.children.push(getService(s, i, datacenter));
} else { } else {
const serviceIndex = ss.findIndex(existingS => existingS.id === s.id); const serviceIndex = ss.findIndex(existingS => existingS.id === s.id);
if (serviceIndex == -1) { if (serviceIndex === -1) {
ss.push(getService(s, i, datacenter)); ss.push(getService(s, i, datacenter));
} else { } else {
ss.splice(serviceIndex, 1, { ss.splice(serviceIndex, 1, {

View File

@ -1,5 +1,5 @@
const Lengths = { const Lengths = {
paddingLeft: 18, paddingLeft: 12,
nodeWidth: 180 nodeWidth: 180
}; };
@ -10,15 +10,22 @@ const Sizes = {
}, },
contentSize: { contentSize: {
width: Lengths.nodeWidth, 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: { nodeSize: {
width: Lengths.nodeWidth, width: Lengths.nodeWidth,
height: 156 // height: 156
height: 90
}, },
nodeSizeWithChildren: { nodeSizeWithChildren: {
width: Lengths.nodeWidth, width: Lengths.nodeWidth,
height: 276 // height: 276
height: 176
} }
}; };
@ -55,6 +62,10 @@ const Rects = {
...Sizes.contentSize, ...Sizes.contentSize,
...Points.contentPosition ...Points.contentPosition
}, },
childContentRect: {
...Sizes.childContentSize,
...Points.contentPosition
},
// Top, bottom, left, right - from 'centre' // Top, bottom, left, right - from 'centre'
nodeRect: { nodeRect: {
left: -Sizes.nodeSize.width / 2, left: -Sizes.nodeSize.width / 2,

View File

@ -2,8 +2,9 @@
"uuid": "primary-consul", "uuid": "primary-consul",
"id": "consul", "id": "consul",
"name": "Consul", "name": "Consul",
"instances": 3, "instances": ["", "", ""],
"project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639",
"isConsul": true,
"metrics": [{ "metrics": [{
"name": "CPU", "name": "CPU",
"value": "50%" "value": "50%"
@ -20,7 +21,7 @@
"uuid": "primary-nginx", "uuid": "primary-nginx",
"id": "nginx", "id": "nginx",
"name": "Nginx", "name": "Nginx",
"instances": 1, "instances": [""],
"project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639",
"metrics": [{ "metrics": [{
"name": "CPU", "name": "CPU",
@ -87,7 +88,7 @@
"uuid": "primary-mongodb", "uuid": "primary-mongodb",
"id": "mongodb", "id": "mongodb",
"name": "MongoDB", "name": "MongoDB",
"instances": 3, "instances": ["", "", ""],
"project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639",
"metrics": [{ "metrics": [{
"name": "CPU", "name": "CPU",
@ -105,7 +106,7 @@
"uuid": 21393, "uuid": 21393,
"id": "accountservice", "id": "accountservice",
"name": "AccountService", "name": "AccountService",
"instances": 4, "instances": ["", "", "", ""],
"project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639",
"metrics": [{ "metrics": [{
"name": "CPU", "name": "CPU",
@ -124,7 +125,7 @@
"uuid": 688632, "uuid": 688632,
"id": "addressservice", "id": "addressservice",
"name": "AddressService", "name": "AddressService",
"instances": 5, "instances": ["", "", "", "", ""],
"project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639",
"metrics": [{ "metrics": [{
"name": "CPU", "name": "CPU",
@ -142,7 +143,7 @@
"uuid": 3802, "uuid": 3802,
"id": "bloomreachservice", "id": "bloomreachservice",
"name": "BloomreachService", "name": "BloomreachService",
"instances": 5, "instances": ["", "", "", "", ""],
"project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639",
"metrics": [{ "metrics": [{
"name": "CPU", "name": "CPU",
@ -160,7 +161,7 @@
"uuid": 211054, "uuid": 211054,
"id": "cartservice", "id": "cartservice",
"name": "CartService", "name": "CartService",
"instances": 4, "instances": ["", "", "", ""],
"project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639",
"metrics": [{ "metrics": [{
"name": "CPU", "name": "CPU",
@ -178,7 +179,7 @@
"uuid": 514555, "uuid": 514555,
"id": "extra service reported by containerpilot: cartservice-https", "id": "extra service reported by containerpilot: cartservice-https",
"name": "Extra service reported by ContainerPilot: CartService-HTTPS", "name": "Extra service reported by ContainerPilot: CartService-HTTPS",
"instances": 5, "instances": ["", "", "", "", ""],
"project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639",
"metrics": [{ "metrics": [{
"name": "CPU", "name": "CPU",
@ -196,7 +197,7 @@
"uuid": 823837, "uuid": 823837,
"id": "cctokenizationclientservice", "id": "cctokenizationclientservice",
"name": "CCTokenizationClientService", "name": "CCTokenizationClientService",
"instances": 3, "instances": ["", "", ""],
"project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639",
"metrics": [{ "metrics": [{
"name": "CPU", "name": "CPU",
@ -215,7 +216,7 @@
"uuid": 728066, "uuid": 728066,
"id": "checkoutservice", "id": "checkoutservice",
"name": "CheckoutService", "name": "CheckoutService",
"instances": 4, "instances": ["", "", "", ""],
"project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639",
"metrics": [{ "metrics": [{
"name": "CPU", "name": "CPU",
@ -233,7 +234,7 @@
"uuid": 626040, "uuid": 626040,
"id": "colorswatchservice", "id": "colorswatchservice",
"name": "ColorSwatchService", "name": "ColorSwatchService",
"instances": 5, "instances": ["", "", "", "", ""],
"project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639",
"metrics": [{ "metrics": [{
"name": "CPU", "name": "CPU",
@ -251,7 +252,7 @@
"uuid": 39531, "uuid": 39531,
"id": "emailmarketingservice", "id": "emailmarketingservice",
"name": "EmailMarketingService", "name": "EmailMarketingService",
"instances": 4, "instances": ["", "", "", ""],
"project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639",
"metrics": [{ "metrics": [{
"name": "CPU", "name": "CPU",
@ -269,7 +270,7 @@
"uuid": 338897, "uuid": 338897,
"id": "favoriteservice", "id": "favoriteservice",
"name": "FavoriteService", "name": "FavoriteService",
"instances": 4, "instances": ["", "", "", ""],
"project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639",
"metrics": [{ "metrics": [{
"name": "CPU", "name": "CPU",
@ -287,7 +288,7 @@
"uuid": 870461, "uuid": 870461,
"id": "findinstoreservice", "id": "findinstoreservice",
"name": "FindInStoreService", "name": "FindInStoreService",
"instances": 4, "instances": ["", "", "", ""],
"project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639",
"metrics": [{ "metrics": [{
"name": "CPU", "name": "CPU",
@ -306,7 +307,7 @@
"uuid": 306578, "uuid": 306578,
"id": "fitpredictorservice", "id": "fitpredictorservice",
"name": "FitpredictorService", "name": "FitpredictorService",
"instances": 5, "instances": ["", "", "", "", ""],
"project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639",
"metrics": [{ "metrics": [{
"name": "CPU", "name": "CPU",
@ -324,7 +325,7 @@
"uuid": 557611, "uuid": 557611,
"id": "hidefromcatalogservice", "id": "hidefromcatalogservice",
"name": "HidefromcatalogService", "name": "HidefromcatalogService",
"instances": 5, "instances": ["", "", "", "", ""],
"project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639",
"metrics": [{ "metrics": [{
"name": "CPU", "name": "CPU",
@ -342,7 +343,7 @@
"uuid": 24764, "uuid": 24764,
"id": "internationalcheckoutservice", "id": "internationalcheckoutservice",
"name": "InternationalCheckoutService", "name": "InternationalCheckoutService",
"instances": 5, "instances": ["", "", "", "", ""],
"project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639",
"metrics": [{ "metrics": [{
"name": "CPU", "name": "CPU",
@ -360,7 +361,7 @@
"uuid": 866947, "uuid": 866947,
"id": "internationalposervice", "id": "internationalposervice",
"name": "InternationalPOService", "name": "InternationalPOService",
"instances": 4, "instances": ["", "", "", ""],
"project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639",
"metrics": [{ "metrics": [{
"name": "CPU", "name": "CPU",
@ -378,7 +379,7 @@
"uuid": 521183, "uuid": 521183,
"id": "internationalshippingservice", "id": "internationalshippingservice",
"name": "InternationalShippingService", "name": "InternationalShippingService",
"instances": 4, "instances": ["", "", "", ""],
"project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639",
"metrics": [{ "metrics": [{
"name": "CPU", "name": "CPU",
@ -397,7 +398,7 @@
"uuid": 920500, "uuid": 920500,
"id": "inventoryservice", "id": "inventoryservice",
"name": "InventoryService", "name": "InventoryService",
"instances": 4, "instances": ["", "", "", ""],
"project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639",
"metrics": [{ "metrics": [{
"name": "CPU", "name": "CPU",
@ -415,7 +416,7 @@
"uuid": 673424, "uuid": 673424,
"id": "localizationservice", "id": "localizationservice",
"name": "LocalizationService", "name": "LocalizationService",
"instances": 3, "instances": ["", "", ""],
"project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639",
"metrics": [{ "metrics": [{
"name": "CPU", "name": "CPU",
@ -433,7 +434,7 @@
"uuid": 752876, "uuid": 752876,
"id": "moreaccountservice", "id": "moreaccountservice",
"name": "MoreAccountService", "name": "MoreAccountService",
"instances": 4, "instances": ["", "", "", ""],
"project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639",
"metrics": [{ "metrics": [{
"name": "CPU", "name": "CPU",
@ -451,7 +452,7 @@
"uuid": 125936, "uuid": 125936,
"id": "navigationservice", "id": "navigationservice",
"name": "NavigationService", "name": "NavigationService",
"instances": 4, "instances": ["", "", "", ""],
"project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639",
"metrics": [{ "metrics": [{
"name": "CPU", "name": "CPU",
@ -469,7 +470,7 @@
"uuid": 195071, "uuid": 195071,
"id": "ordercreationjob", "id": "ordercreationjob",
"name": "OrderCreationJob", "name": "OrderCreationJob",
"instances": 3, "instances": ["", "", ""],
"project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639",
"metrics": [{ "metrics": [{
"name": "CPU", "name": "CPU",
@ -488,7 +489,7 @@
"uuid": 101278, "uuid": 101278,
"id": "orderservice", "id": "orderservice",
"name": "OrderService", "name": "OrderService",
"instances": 3, "instances": ["", "", ""],
"project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639",
"metrics": [{ "metrics": [{
"name": "CPU", "name": "CPU",
@ -506,7 +507,7 @@
"uuid": 766252, "uuid": 766252,
"id": "orderservice", "id": "orderservice",
"name": "OrderService", "name": "OrderService",
"instances": 4, "instances": ["", "", "", ""],
"project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639",
"metrics": [{ "metrics": [{
"name": "CPU", "name": "CPU",
@ -524,7 +525,7 @@
"uuid": 272044, "uuid": 272044,
"id": "paymentmethodservice", "id": "paymentmethodservice",
"name": "PaymentMethodService", "name": "PaymentMethodService",
"instances": 4, "instances": ["", "", "", ""],
"project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639",
"metrics": [{ "metrics": [{
"name": "CPU", "name": "CPU",
@ -542,7 +543,7 @@
"uuid": 579947, "uuid": 579947,
"id": "paymentservice", "id": "paymentservice",
"name": "PaymentService", "name": "PaymentService",
"instances": 3, "instances": ["", "", ""],
"project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639",
"metrics": [{ "metrics": [{
"name": "CPU", "name": "CPU",
@ -560,7 +561,7 @@
"uuid": 211151, "uuid": 211151,
"id": "paymentservice", "id": "paymentservice",
"name": "PaymentService", "name": "PaymentService",
"instances": 3, "instances": ["", "", ""],
"project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639",
"metrics": [{ "metrics": [{
"name": "CPU", "name": "CPU",
@ -579,7 +580,7 @@
"uuid": 712793, "uuid": 712793,
"id": "priceservice", "id": "priceservice",
"name": "PriceService", "name": "PriceService",
"instances": 4, "instances": ["", "", "", ""],
"project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639",
"metrics": [{ "metrics": [{
"name": "CPU", "name": "CPU",
@ -597,7 +598,7 @@
"uuid": 831906, "uuid": 831906,
"id": "privatesaleservice", "id": "privatesaleservice",
"name": "PrivatesaleService", "name": "PrivatesaleService",
"instances": 3, "instances": ["", "", ""],
"project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639",
"metrics": [{ "metrics": [{
"name": "CPU", "name": "CPU",
@ -615,7 +616,7 @@
"uuid": 897694, "uuid": 897694,
"id": "productarrayservice", "id": "productarrayservice",
"name": "ProductArrayService", "name": "ProductArrayService",
"instances": 5, "instances": ["", "", "", "", ""],
"project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639",
"metrics": [{ "metrics": [{
"name": "CPU", "name": "CPU",
@ -633,7 +634,7 @@
"uuid": 261116, "uuid": 261116,
"id": "productdetailservice", "id": "productdetailservice",
"name": "ProductDetailService", "name": "ProductDetailService",
"instances": 4, "instances": ["", "", "", ""],
"project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639",
"metrics": [{ "metrics": [{
"name": "CPU", "name": "CPU",
@ -651,7 +652,7 @@
"uuid": 246274, "uuid": 246274,
"id": "productservice", "id": "productservice",
"name": "ProductService", "name": "ProductService",
"instances": 4, "instances": ["", "", "", ""],
"project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639",
"metrics": [{ "metrics": [{
"name": "CPU", "name": "CPU",
@ -670,7 +671,7 @@
"uuid": 380300, "uuid": 380300,
"id": "profileservice", "id": "profileservice",
"name": "ProfileService", "name": "ProfileService",
"instances": 4, "instances": ["", "", "", ""],
"project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639",
"metrics": [{ "metrics": [{
"name": "CPU", "name": "CPU",
@ -688,7 +689,7 @@
"uuid": 299558, "uuid": 299558,
"id": "promoservice", "id": "promoservice",
"name": "PromoService", "name": "PromoService",
"instances": 3, "instances": ["", "", ""],
"project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639",
"metrics": [{ "metrics": [{
"name": "CPU", "name": "CPU",
@ -706,7 +707,7 @@
"uuid": 303216, "uuid": 303216,
"id": "promotionservice", "id": "promotionservice",
"name": "PromotionService", "name": "PromotionService",
"instances": 4, "instances": ["", "", "", ""],
"project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639",
"metrics": [{ "metrics": [{
"name": "CPU", "name": "CPU",
@ -724,7 +725,7 @@
"uuid": 974334, "uuid": 974334,
"id": "questionanswerservice", "id": "questionanswerservice",
"name": "QuestionanswerService", "name": "QuestionanswerService",
"instances": 3, "instances": ["", "", ""],
"project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639",
"metrics": [{ "metrics": [{
"name": "CPU", "name": "CPU",
@ -742,7 +743,7 @@
"uuid": 127763, "uuid": 127763,
"id": "redbaloonservice", "id": "redbaloonservice",
"name": "RedBaloonService", "name": "RedBaloonService",
"instances": 4, "instances": ["", "", "", ""],
"project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639",
"metrics": [{ "metrics": [{
"name": "CPU", "name": "CPU",
@ -761,7 +762,7 @@
"uuid": 437955, "uuid": 437955,
"id": "extra service reported by containerpilot: redbaloonservice-https", "id": "extra service reported by containerpilot: redbaloonservice-https",
"name": "Extra service reported by ContainerPilot: RedBaloonService-HTTPS", "name": "Extra service reported by ContainerPilot: RedBaloonService-HTTPS",
"instances": 4, "instances": ["", "", "", ""],
"project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639",
"metrics": [{ "metrics": [{
"name": "CPU", "name": "CPU",
@ -779,7 +780,7 @@
"uuid": 143274, "uuid": 143274,
"id": "reviewsservice", "id": "reviewsservice",
"name": "ReviewsService", "name": "ReviewsService",
"instances": 5, "instances": ["", "", "", "", ""],
"project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639",
"metrics": [{ "metrics": [{
"name": "CPU", "name": "CPU",
@ -797,7 +798,7 @@
"uuid": 634968, "uuid": 634968,
"id": "searchfacetsservice", "id": "searchfacetsservice",
"name": "SearchFacetsService", "name": "SearchFacetsService",
"instances": 4, "instances": ["", "", "", ""],
"project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639",
"metrics": [{ "metrics": [{
"name": "CPU", "name": "CPU",
@ -815,7 +816,7 @@
"uuid": 431609, "uuid": 431609,
"id": "searchindexservice", "id": "searchindexservice",
"name": "SearchIndexService", "name": "SearchIndexService",
"instances": 4, "instances": ["", "", "", ""],
"project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639",
"metrics": [{ "metrics": [{
"name": "CPU", "name": "CPU",
@ -833,7 +834,7 @@
"uuid": 282549, "uuid": 282549,
"id": "shoprunnerservice", "id": "shoprunnerservice",
"name": "ShopRunnerService", "name": "ShopRunnerService",
"instances": 5, "instances": ["", "", "", "", ""],
"project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639",
"metrics": [{ "metrics": [{
"name": "CPU", "name": "CPU",
@ -852,7 +853,7 @@
"uuid": 262582, "uuid": 262582,
"id": "taxservice", "id": "taxservice",
"name": "TaxService", "name": "TaxService",
"instances": 4, "instances": ["", "", "", ""],
"project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639",
"metrics": [{ "metrics": [{
"name": "CPU", "name": "CPU",
@ -870,7 +871,7 @@
"uuid": 418482, "uuid": 418482,
"id": "toggleservice", "id": "toggleservice",
"name": "ToggleService", "name": "ToggleService",
"instances": 4, "instances": ["", "", "", ""],
"project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639",
"metrics": [{ "metrics": [{
"name": "CPU", "name": "CPU",
@ -888,7 +889,7 @@
"uuid": 284724, "uuid": 284724,
"id": "useraccountservice", "id": "useraccountservice",
"name": "UserAccountService", "name": "UserAccountService",
"instances": 3, "instances": ["", "", ""],
"project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639",
"metrics": [{ "metrics": [{
"name": "CPU", "name": "CPU",
@ -906,7 +907,7 @@
"uuid": 798952, "uuid": 798952,
"id": "userauthenticationservice", "id": "userauthenticationservice",
"name": "UserAuthenticationService", "name": "UserAuthenticationService",
"instances": 4, "instances": ["", "", "", ""],
"project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639",
"metrics": [{ "metrics": [{
"name": "CPU", "name": "CPU",
@ -924,7 +925,7 @@
"uuid": 308763, "uuid": 308763,
"id": "waitlistoverlayservice", "id": "waitlistoverlayservice",
"name": "WaitlistOverlayService", "name": "WaitlistOverlayService",
"instances": 5, "instances": ["", "", "", "", ""],
"project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639",
"metrics": [{ "metrics": [{
"name": "CPU", "name": "CPU",
@ -943,7 +944,7 @@
"uuid": 111726, "uuid": 111726,
"id": "waitlistservice", "id": "waitlistservice",
"name": "WaitlistService", "name": "WaitlistService",
"instances": 3, "instances": ["", "", ""],
"project": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "project": "9fcb374d-a267-4c2a-9d9c-ba469b804639",
"metrics": [{ "metrics": [{
"name": "CPU", "name": "CPU",

View File

@ -3,7 +3,7 @@
"id": "nginx", "id": "nginx",
"name": "Nginx", "name": "Nginx",
"project": "e0ea0c02-55cc-45fe-8064-3e5176a59401", "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
"instances": 1, "instances": [""],
"metrics": [{ "metrics": [{
"name": "CPU", "name": "CPU",
"value": "50%" "value": "50%"
@ -24,7 +24,7 @@
"id": "wordpress", "id": "wordpress",
"name": "Wordpress", "name": "Wordpress",
"project": "e0ea0c02-55cc-45fe-8064-3e5176a59401", "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
"instances": 2, "instances": ["", ""],
"metrics": [{ "metrics": [{
"name": "CPU", "name": "CPU",
"value": "50%" "value": "50%"
@ -47,7 +47,7 @@
"id": "nfs", "id": "nfs",
"name": "NFS", "name": "NFS",
"project": "e0ea0c02-55cc-45fe-8064-3e5176a59401", "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
"instances": 2, "instances": ["", ""],
"metrics": [{ "metrics": [{
"name": "CPU", "name": "CPU",
"value": "50%" "value": "50%"
@ -65,7 +65,7 @@
"id": "memcached", "id": "memcached",
"name": "Memcached", "name": "Memcached",
"project": "e0ea0c02-55cc-45fe-8064-3e5176a59401", "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
"instances": 2, "instances": ["", ""],
"metrics": [{ "metrics": [{
"name": "CPU", "name": "CPU",
"value": "50%" "value": "50%"
@ -83,7 +83,7 @@
"id": "percona", "id": "percona",
"name": "Percona", "name": "Percona",
"project": "e0ea0c02-55cc-45fe-8064-3e5176a59401", "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
"instances": 2, "instances": ["", ""],
"metrics": [{ "metrics": [{
"name": "CPU", "name": "CPU",
"value": "50%" "value": "50%"
@ -101,7 +101,8 @@
"id": "consul", "id": "consul",
"name": "Consul", "name": "Consul",
"project": "e0ea0c02-55cc-45fe-8064-3e5176a59401", "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
"instances": 2, "instances": ["", ""],
"isConsul": true,
"metrics": [{ "metrics": [{
"name": "CPU", "name": "CPU",
"value": "50%" "value": "50%"

View File

@ -20,6 +20,27 @@ const StyledSvg = Svg.extend`
*/ */
class Topology extends React.Component { class Topology extends React.Component {
componentWillMount() { 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 services = this.getServicesWithoutConsul();
const svgSize = this.getSvgSize(); const svgSize = this.getSvgSize();
@ -34,7 +55,7 @@ class Topology extends React.Component {
getServicesWithoutConsul() { getServicesWithoutConsul() {
return this.props.services.reduce((acc, service, index) => { return this.props.services.reduce((acc, service, index) => {
if (service.id !== 'consul') acc.push(service); if (!service.isConsul) acc.push(service);
return acc; return acc;
}, []); }, []);
} }
@ -123,7 +144,7 @@ class Topology extends React.Component {
const { nodes, links } = this.state; const { nodes, links } = this.state;
const nodesData = services.map((service, index) => { const nodesData = services.map((service, index) => {
const nodePosition = service.id === 'consul' const nodePosition = service.isConsul
? this.getConsulNodePosition() ? this.getConsulNodePosition()
: this.getConstrainedNodePosition(service.id, service.children); : this.getConstrainedNodePosition(service.id, service.children);
@ -204,7 +225,7 @@ class Topology extends React.Component {
onDragStart={onDragStart} onDragStart={onDragStart}
onNodeTitleClick={onNodeTitleClick} onNodeTitleClick={onNodeTitleClick}
onQuickActions={onQuickActionsClick} onQuickActions={onQuickActionsClick}
connected={n.id !== 'consul'} connected={!n.isConsul}
/>; />;
const renderedLink = (l, index) => const renderedLink = (l, index) =>

View File

@ -7,25 +7,26 @@ import GraphNodeInfo from './info';
import GraphNodeMetrics from './metrics'; import GraphNodeMetrics from './metrics';
const GraphNodeContent = ({ connected, child = false, data, index = 0 }) => { 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 contentY = y + height * index;
const offset = index ? 18 : -6; // const offset = index ? 18 : -6;
const nodeInfoPos = child const nodeInfoPos = child
? { ? {
x: Constants.infoPosition.x, x: Constants.infoPosition.x,
y: Constants.infoPosition.y + offset y: Constants.infoPosition.y + 21 // offset
} }
: Constants.infoPosition; : Constants.infoPosition;
const nodeMetricsPos = child /* const nodeMetricsPos = child
? { ? {
x: Constants.metricsPosition.x, x: Constants.metricsPosition.x,
y: Constants.metricsPosition.y + offset y: Constants.metricsPosition.y + offset
} }
: Constants.metricsPosition; : Constants.metricsPosition; */
const nodeSubtitle = child const nodeSubtitle = child
? <GraphSubtitle {...Constants.subtitlePosition} connected={connected}> ? <GraphSubtitle {...Constants.subtitlePosition} connected={connected}>
@ -33,7 +34,7 @@ const GraphNodeContent = ({ connected, child = false, data, index = 0 }) => {
</GraphSubtitle> </GraphSubtitle>
: null; : null;
const nodeInfo = !child || index /* const nodeInfo = !child || index
? <GraphNodeInfo ? <GraphNodeInfo
datacenter={data.datacenter} datacenter={data.datacenter}
instances={data.instances} instances={data.instances}
@ -41,18 +42,27 @@ const GraphNodeContent = ({ connected, child = false, data, index = 0 }) => {
connected={connected} connected={connected}
pos={nodeInfoPos} pos={nodeInfoPos}
/> />
: null; : null; */
const nodeInfo =
<GraphNodeInfo
datacenter={data.datacenter}
instances={data.instances}
healthy
connected={connected}
pos={nodeInfoPos}
/>;
return ( return (
<g transform={`translate(${x}, ${contentY})`}> <g transform={`translate(${x}, ${contentY})`}>
<GraphLine x1={0} y1={0} x2={width} y2={0} connected={connected} /> <GraphLine x1={0} y1={0} x2={width} y2={0} connected={connected} />
{nodeSubtitle} {nodeSubtitle}
{nodeInfo} {nodeInfo}
<GraphNodeMetrics {/* <GraphNodeMetrics
metrics={data.metrics} metrics={data.metrics}
connected={connected} connected={connected}
pos={nodeMetricsPos} pos={nodeMetricsPos}
/> /> */}
</g> </g>
); );
}; };

View File

@ -6,7 +6,8 @@ import Baseline from '../../baseline';
import DataCentresIcon from './icon-data-centers.svg'; import DataCentresIcon from './icon-data-centers.svg';
import InstancesIcon from './icon-instances.svg'; import InstancesIcon from './icon-instances.svg';
import { Point } from '../prop-types'; import { Point } from '../prop-types';
import { GraphText } from './shapes'; import { GraphText, GraphHealthyCircle } from './shapes';
import HeartIcon from './icon-heart.svg';
const StyledInstancesIcon = styled(InstancesIcon)` const StyledInstancesIcon = styled(InstancesIcon)`
fill: ${props => props.theme.secondary}; fill: ${props => props.theme.secondary};
@ -29,18 +30,22 @@ const GraphNodeInfo = ({ connected, datacenter, instances, healthy, pos }) => {
return ( return (
<g transform={`translate(${x}, ${y})`}> <g transform={`translate(${x}, ${y})`}>
<g transform={'translate(0, 2)'}> <g transform={`translate(0, 0)`}>
<GraphHealthyCircle cx={9} cy={9} r={9} />
<HeartIcon />
</g>
<g transform={'translate(30, 4.5)'}>
<StyledInstancesIcon connected={connected} /> <StyledInstancesIcon connected={connected} />
</g> </g>
<GraphText x={23} y={12} connected={connected}> <GraphText x={54} y={14} connected={connected}>
{`${instances} inst.`} {`${instances.length} inst.`}
</GraphText> </GraphText>
<g transform={'translate(82, 0)'}> {/* <g transform={'translate(82, 0)'}>
<StyledDataCentresIcon connected={connected} /> <StyledDataCentresIcon connected={connected} />
</g> </g>
<GraphText x={96} y={12} connected={connected}> <GraphText x={96} y={12} connected={connected}>
{datacenter} {datacenter}
</GraphText> </GraphText> */}
</g> </g>
); );
}; };

View File

@ -22,6 +22,7 @@ export const GraphNodeRect = styled.rect`
stroke: ${props => props.theme.secondaryActive}; stroke: ${props => props.theme.secondaryActive};
fill: ${props => props.theme.secondary}; fill: ${props => props.theme.secondary};
`}; `};
cursor: move;
`; `;
export const GraphShadowRect = styled.rect` export const GraphShadowRect = styled.rect`
@ -46,6 +47,7 @@ export const GraphTitle = styled.text`
${is('connected')` ${is('connected')`
fill: ${props => props.theme.white}; fill: ${props => props.theme.white};
`}; `};
cursor: pointer;
`; `;
export const GraphSubtitle = styled.text` export const GraphSubtitle = styled.text`

View File

@ -16,10 +16,10 @@ const GraphNodeTitle = ({ connected, data, onNodeTitleClick }) =>
> >
{data.name} {data.name}
</GraphTitle> </GraphTitle>
<g transform={`translate(${115}, ${15})`}> {/* <g transform={`translate(${115}, ${15})`}>
<GraphHealthyCircle cx={9} cy={9} r={9} /> <GraphHealthyCircle cx={9} cy={9} r={9} />
<HeartIcon /> <HeartIcon />
</g> </g> */}
</g>; </g>;
GraphNodeTitle.propTypes = { GraphNodeTitle.propTypes = {

View File

@ -22,10 +22,17 @@ const createLinks = services =>
(acc, service, index) => (acc, service, index) =>
service.connections service.connections
? acc.concat( ? acc.concat(
service.connections.map((connection, index) => ({ service.connections.reduce((connections, connection, index) => {
source: service.id, const targetExists = services.filter(service =>
target: connection service.id === connection).length;
})) if(targetExists) {
connections.push({
source: service.id,
target: connection
});
}
return connections;
}, [])
) )
: acc, : acc,
[] []