Generate and add complex services data for topology

frontend/src/containers/services/topology.js

@@ -2,10 +2,9 @@ import React from 'react';
 import { connect } from 'react-redux';
 import styled from 'styled-components';
 import PropTypes from '@root/prop-types';
-import { colors, breakpoints } from '@ui/shared/constants';
+import { colors } from '@ui/shared/constants';
 import { unitcalc } from '@ui/shared/functions';
 import { TopologyGraph } from '@ui/components/topology';
-import { LayoutContainer } from '@components/layout';
 import ServicesTooltip from '@components/services/tooltip';
 
 import { toggleTooltip } from '@state/actions';
@@ -21,13 +20,9 @@ const StyledBackground = styled.div`
   background-color: ${colors.base.whiteActive};
 `;
 
-const StyledContainer = styled(LayoutContainer)`
+const StyledContainer = styled.div`
   position: relative;
-  padding: ${unitcalc(4)} 2rem;
+  padding: ${unitcalc(4)};
-
-  ${breakpoints.large`
-    padding: ${unitcalc(4)} 0;
-  `}
 `;
 
 const Services = (props) => {

frontend/src/mock-states/shared/services-wp.js

@@ -0,0 +1,140 @@
+/*eslint-disable */
+export const wpServices = [{
+  "uuid": "081a792c-47e0-4439-924b-2efa9788ae9e",
+  "id": "nginx",
+  "name": "Nginx",
+  "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+  "instances": 1,
+  "metrics": [{
+    "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
+    "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+  }, {
+    "type": "dca08514-72e5-46ce-ad91-e68b3b0914d9",
+    "dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
+  }, {
+    "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
+    "dataset": "6e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
+  }],
+  "connections": [
+    "be227788-74f1-4e5b-a85f-b5c71cbae8d8"
+  ]
+}, {
+  "uuid": "be227788-74f1-4e5b-a85f-b5c71cbae8d8",
+  "id": "wordpress",
+  "name": "Wordpress",
+  "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+  "instances": 1,
+  "metrics": [{
+    "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
+    "dataset": "crazy-cpu"
+  }, {
+    "type": "dca08514-72e5-46ce-ad91-e68b3b0914d9",
+    "dataset": "crazy-disk"
+  }, {
+    "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
+    "dataset": "crazy-memory"
+  }],
+  "connections": [
+    "6a0eee76-c019-413b-9d5f-44712b55b993",
+    "6d31aff4-de1e-4042-a983-fbd23d5c530c",
+    "4ee4103e-1a52-4099-a48e-01588f597c70"
+  ]
+}, {
+  "uuid": "6a0eee76-c019-413b-9d5f-44712b55b993",
+  "id": "nfs",
+  "name": "NFS",
+  "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+  "instances": 1,
+  "metrics": [{
+    "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
+    "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+  }, {
+    "type": "dca08514-72e5-46ce-ad91-e68b3b0914d9",
+    "dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
+  }, {
+    "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
+    "dataset": "6e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
+  }]
+}, {
+  "uuid": "6d31aff4-de1e-4042-a983-fbd23d5c530c",
+  "id": "memcached",
+  "name": "Memcached",
+  "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+  "instances": 5,
+  "metrics": [{
+    "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
+    "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+  }, {
+    "type": "dca08514-72e5-46ce-ad91-e68b3b0914d9",
+    "dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
+  }, {
+    "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
+    "dataset": "6e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
+  }]
+}, {
+  "uuid": "4ee4103e-1a52-4099-a48e-01588f597c70",
+  "id": "percona",
+  "name": "Percona",
+  "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+  "instances": 5,
+  "metrics": [{
+    "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
+    "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+  }, {
+    "type": "dca08514-72e5-46ce-ad91-e68b3b0914d9",
+    "dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
+  }, {
+    "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
+    "dataset": "6e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
+  }]
+}, {
+  "uuid": "9572d367-c4ae-4fb1-8ad5-f5e3830e7034",
+  "id": "primary",
+  "name": "Primary",
+  "parent": "4ee4103e-1a52-4099-a48e-01588f597c70",
+  "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+  "instances": 1,
+  "metrics": [{
+    "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
+    "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+  }, {
+    "type": "dca08514-72e5-46ce-ad91-e68b3b0914d9",
+    "dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
+  }, {
+    "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
+    "dataset": "6e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
+  }]
+}, {
+  "uuid": "c8411ef0-ab39-42cb-a704-d20b170eff31",
+  "id": "secondaries",
+  "name": "Secondaries",
+  "parent": "4ee4103e-1a52-4099-a48e-01588f597c70",
+  "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+  "instances": 4,
+  "metrics": [{
+    "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
+    "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+  }, {
+    "type": "dca08514-72e5-46ce-ad91-e68b3b0914d9",
+    "dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
+  }, {
+    "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
+    "dataset": "6e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
+  }]
+}, {
+  "uuid": "97c68055-db88-45c9-ad49-f26da4264777",
+  "id": "consul",
+  "name": "Consul",
+  "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+  "instances": 1,
+  "metrics": [{
+    "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
+    "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+  }, {
+    "type": "dca08514-72e5-46ce-ad91-e68b3b0914d9",
+    "dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
+  }, {
+    "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
+    "dataset": "6e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
+  }]
+}];

frontend/src/mock-states/shared/services.js

@@ -1,4 +1,8 @@
 /*eslint-disable */
+
+import { complexServices } from './services-complex';
+import { wpServices } from './services-wp';
+
 export const services = {
   "ui": {
     "collapsed": [],
@@ -16,143 +20,5 @@ export const services = {
       "show": false
     }
   },
-  "data": [{
+  "data": wpServices.concat(complexServices)
-    "uuid": "081a792c-47e0-4439-924b-2efa9788ae9e",
-    "id": "nginx",
-    "name": "Nginx",
-    "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
-    "instances": 1,
-    "metrics": [{
-      "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
-      "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
-    }, {
-      "type": "dca08514-72e5-46ce-ad91-e68b3b0914d9",
-      "dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
-    }, {
-      "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
-      "dataset": "6e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
-    }],
-    "connections": [
-      "be227788-74f1-4e5b-a85f-b5c71cbae8d8"
-    ]
-  }, {
-    "uuid": "be227788-74f1-4e5b-a85f-b5c71cbae8d8",
-    "id": "wordpress",
-    "name": "Wordpress",
-    "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
-    "instances": 1,
-    "metrics": [{
-      "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
-      "dataset": "crazy-cpu"
-    }, {
-      "type": "dca08514-72e5-46ce-ad91-e68b3b0914d9",
-      "dataset": "crazy-disk"
-    }, {
-      "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
-      "dataset": "crazy-memory"
-    }],
-    "connections": [
-      "6a0eee76-c019-413b-9d5f-44712b55b993",
-      "6d31aff4-de1e-4042-a983-fbd23d5c530c",
-      "4ee4103e-1a52-4099-a48e-01588f597c70"
-    ]
-  }, {
-    "uuid": "6a0eee76-c019-413b-9d5f-44712b55b993",
-    "id": "nfs",
-    "name": "NFS",
-    "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
-    "instances": 1,
-    "metrics": [{
-      "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
-      "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
-    }, {
-      "type": "dca08514-72e5-46ce-ad91-e68b3b0914d9",
-      "dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
-    }, {
-      "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
-      "dataset": "6e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
-    }]
-  }, {
-    "uuid": "6d31aff4-de1e-4042-a983-fbd23d5c530c",
-    "id": "memcached",
-    "name": "Memcached",
-    "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
-    "instances": 5,
-    "metrics": [{
-      "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
-      "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
-    }, {
-      "type": "dca08514-72e5-46ce-ad91-e68b3b0914d9",
-      "dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
-    }, {
-      "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
-      "dataset": "6e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
-    }]
-  }, {
-    "uuid": "4ee4103e-1a52-4099-a48e-01588f597c70",
-    "id": "percona",
-    "name": "Percona",
-    "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
-    "instances": 5,
-    "metrics": [{
-      "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
-      "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
-    }, {
-      "type": "dca08514-72e5-46ce-ad91-e68b3b0914d9",
-      "dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
-    }, {
-      "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
-      "dataset": "6e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
-    }]
-  }, {
-    "uuid": "9572d367-c4ae-4fb1-8ad5-f5e3830e7034",
-    "id": "primary",
-    "name": "Primary",
-    "parent": "4ee4103e-1a52-4099-a48e-01588f597c70",
-    "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
-    "instances": 1,
-    "metrics": [{
-      "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
-      "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
-    }, {
-      "type": "dca08514-72e5-46ce-ad91-e68b3b0914d9",
-      "dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
-    }, {
-      "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
-      "dataset": "6e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
-    }]
-  }, {
-    "uuid": "c8411ef0-ab39-42cb-a704-d20b170eff31",
-    "id": "secondaries",
-    "name": "Secondaries",
-    "parent": "4ee4103e-1a52-4099-a48e-01588f597c70",
-    "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
-    "instances": 4,
-    "metrics": [{
-      "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
-      "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
-    }, {
-      "type": "dca08514-72e5-46ce-ad91-e68b3b0914d9",
-      "dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
-    }, {
-      "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
-      "dataset": "6e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
-    }]
-  }, {
-    "uuid": "97c68055-db88-45c9-ad49-f26da4264777",
-    "id": "consul",
-    "name": "Consul",
-    "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
-    "instances": 1,
-    "metrics": [{
-      "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
-      "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
-    }, {
-      "type": "dca08514-72e5-46ce-ad91-e68b3b0914d9",
-      "dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
-    }, {
-      "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
-      "dataset": "6e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
-    }]
-  }]
 }

spikes/utils/generate-services-data/generate.js

@@ -0,0 +1,144 @@
+// Please feel free to either duplicate this
+// ...or make it more dynamic to suit your purposes :)
+
+const primaryList = `Consul
+Nginx
+MongoDB`;
+
+const list = `AccountService
+AddressService
+BloomreachService
+CartService
+Extra service reported by ContainerPilot: CartService-HTTPS
+CCTokenizationClientService
+CheckoutService
+ColorSwatchService
+EmailMarketingService
+FavoriteService
+FindInStoreService
+FitpredictorService
+HidefromcatalogService
+InternationalCheckoutService
+InternationalPOService
+InternationalShippingService
+InventoryService
+LocalizationService
+MoreAccountService
+NavigationService
+OrderCreationJob
+OrderService
+OrderService
+PaymentMethodService
+PaymentService
+PaymentService
+PriceService
+PrivatesaleService
+ProductArrayService
+ProductDetailService
+ProductService
+ProfileService
+PromoService
+PromotionService
+QuestionanswerService
+RedBaloonService
+Extra service reported by ContainerPilot: RedBaloonService-HTTPS
+ReviewsService
+SearchFacetsService
+SearchIndexService
+ShopRunnerService
+TaxService
+ToggleService
+UserAccountService
+UserAuthenticationService
+WaitlistOverlayService
+WaitlistService`;
+
+const primaryServices = primaryList.split('\n');
+const servicesList = list.split('\n');
+
+/*
+{
+    "uuid": "be227788-74f1-4e5b-a85f-b5c71cbae8d8",
+    "id": "wordpress",
+    "name": "Wordpress",
+    "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+    "instances": 1,
+    "metrics": [{
+      "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
+      "dataset": "crazy-cpu"
+    }, {
+      "type": "dca08514-72e5-46ce-ad91-e68b3b0914d9",
+      "dataset": "crazy-disk"
+    }, {
+      "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
+      "dataset": "crazy-memory"
+    }],
+    "connections": [
+      "6a0eee76-c019-413b-9d5f-44712b55b993",
+      "6d31aff4-de1e-4042-a983-fbd23d5c530c",
+      "4ee4103e-1a52-4099-a48e-01588f597c70"
+    ]
+  }
+*/
+
+const mappedServicesList = servicesList.map((service, index) => {
+  const uuid = Math.round(Math.random()*1000000);
+  const connections = index%5 ? null : ['primary-mongodb'];
+  const instances = 3 + Math.round(Math.random()*2);
+
+  const s = {
+    uuid: uuid,
+    id: service.toLowerCase(),
+    name: service,
+    instances: instances,
+    project: '9fcb374d-a267-4c2a-9d9c-ba469b804639',
+    'metrics': [{
+      "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
+      "dataset": "crazy-cpu"
+    }, {
+      "type": "dca08514-72e5-46ce-ad91-e68b3b0914d9",
+      "dataset": "crazy-disk"
+    }, {
+      "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
+      "dataset": "crazy-memory"
+    }]
+  };
+
+  if(connections) {
+    s.connections = connections;
+  }
+  return s;
+});
+
+const mappedPrimaryServicesList = primaryServices.map((service, index) => {
+  const uuid = `primary-${service.toLowerCase()}`;
+  const connections = uuid === 'primary-nginx' ?
+    mappedServicesList.map(s => s.uuid) : null;
+  const instances = uuid === 'primary-nginx' ? 1 : 3;
+
+  const s = {
+    uuid: uuid,
+    id: service.toLowerCase(),
+    name: service,
+    instances: instances,
+    project: '9fcb374d-a267-4c2a-9d9c-ba469b804639',
+    'metrics': [{
+      "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
+      "dataset": "crazy-cpu"
+    }, {
+      "type": "dca08514-72e5-46ce-ad91-e68b3b0914d9",
+      "dataset": "crazy-disk"
+    }, {
+      "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
+      "dataset": "crazy-memory"
+    }]
+  };
+  if(connections) {
+    s.connections = connections;
+  }
+  return s;
+});
+
+const meow = mappedPrimaryServicesList.concat(mappedServicesList);
+
+console.log('meow = ', JSON.stringify(meow));

ui/src/components/topology/topology-graph.js

@@ -11,12 +11,12 @@ import React from 'react';
 
 const StyledSvg = styled.svg`
   width: 100%;
-  height: 860px;
+  height: 1400px;
 `;
 
 const svgSize = {
-  width: 1024,
+  width: 2400,
-  height: 860
+  height: 1400
 };
 
 let dragInfo = {