diff --git a/packages/cp-frontend/src/components/services/list-item.js b/packages/cp-frontend/src/components/services/list-item.js index a68db966..7db0d015 100644 --- a/packages/cp-frontend/src/components/services/list-item.js +++ b/packages/cp-frontend/src/components/services/list-item.js @@ -46,7 +46,7 @@ const ServiceListItem = ({ const children = service.children ? service.children.map(service => ( @@ -125,7 +125,7 @@ const ServiceListItem = ({ collapsed={service.collapsed} flat={isChild} headed={!isChild} - key={service.uuid} + key={service.id} stacked={isChild && service.instances > 1} > {header} diff --git a/packages/cp-frontend/src/containers/deployment-groups/list.js b/packages/cp-frontend/src/containers/deployment-groups/list.js index 54c6364a..bad38ab5 100644 --- a/packages/cp-frontend/src/containers/deployment-groups/list.js +++ b/packages/cp-frontend/src/containers/deployment-groups/list.js @@ -75,7 +75,7 @@ const DeploymentGroupList = ({ DeploymentGroupList.propTypes = { deploymentGroups: PropTypes.arrayOf( PropTypes.shape({ - uuid: PropTypes.string, + id: PropTypes.string, id: PropTypes.string, name: PropTypes.string }) diff --git a/packages/cp-frontend/src/containers/instances/list.js b/packages/cp-frontend/src/containers/instances/list.js index d314cae9..2895bd51 100644 --- a/packages/cp-frontend/src/containers/instances/list.js +++ b/packages/cp-frontend/src/containers/instances/list.js @@ -31,7 +31,7 @@ class InstanceList extends Component { ? instances.map((instance, index) => ( null} /> )) diff --git a/packages/cp-frontend/src/containers/services/list.js b/packages/cp-frontend/src/containers/services/list.js index 8323ad85..393fc466 100644 --- a/packages/cp-frontend/src/containers/services/list.js +++ b/packages/cp-frontend/src/containers/services/list.js @@ -50,12 +50,12 @@ class ServiceList extends Component { const serviceList = services.map(service => ( (simNode.uuid === nodeUuid ? simNode : acc), + (acc, simNode, index) => (simNode.id === nodeId ? simNode : acc), {} ); } @@ -98,22 +98,22 @@ class Topology extends React.Component { }; } - getConstrainedNodePosition(nodeUuid, children = false) { - const node = this.findNode(nodeUuid); + getConstrainedNodePosition(nodeId, children = false) { + const node = this.findNode(nodeId); return this.constrainNodePosition(node.x, node.y, children); } - findNodeData(nodesData, nodeUuid) { + findNodeData(nodesData, nodeId) { return nodesData.reduce( - (acc, nodeData, index) => (nodeData.uuid === nodeUuid ? nodeData : acc), + (acc, nodeData, index) => (nodeData.id === nodeId ? nodeData : acc), {} ); } - setDragInfo(dragging, nodeUuid = null, position = {}) { + setDragInfo(dragging, nodeId = null, position = {}) { this.dragInfo = { dragging, - nodeUuid, + nodeId, position }; } @@ -126,7 +126,7 @@ class Topology extends React.Component { const nodesData = services.map((service, index) => { const nodePosition = service.id === 'consul' ? this.getConsulNodePosition() - : this.getConstrainedNodePosition(service.uuid, service.children); + : this.getConstrainedNodePosition(service.id, service.children); return { ...service, @@ -138,8 +138,8 @@ class Topology extends React.Component { // if it does, the height of it will be different const linksData = links .map((link, index) => ({ - source: this.findNodeData(nodesData, link.source.uuid), - target: this.findNodeData(nodesData, link.target.uuid) + source: this.findNodeData(nodesData, link.source.id), + target: this.findNodeData(nodesData, link.target.id) })) .map((linkData, index) => calculateLineLayout(linkData, index)); @@ -170,7 +170,7 @@ class Topology extends React.Component { }; const dragNodes = nodes.map((simNode, index) => { - if (simNode.uuid === this.dragInfo.nodeUuid) { + if (simNode.id === this.dragInfo.nodeId) { return { ...simNode, x: simNode.x + offset.x, @@ -186,7 +186,7 @@ class Topology extends React.Component { nodes: dragNodes }); - this.setDragInfo(true, this.dragInfo.nodeUuid, { + this.setDragInfo(true, this.dragInfo.nodeId, { x, y }); @@ -219,7 +219,7 @@ class Topology extends React.Component { const renderedNodes = this.dragInfo && this.dragInfo.dragging ? nodesData - .filter((n, index) => n.uuid !== this.dragInfo.nodeUuid) + .filter((n, index) => n.id !== this.dragInfo.nodeId) .map((n, index) => renderedNode(n, index)) : nodesData.map((n, index) => renderedNode(n, index)); @@ -227,7 +227,7 @@ class Topology extends React.Component { const renderedLinkArrows = this.dragInfo && this.dragInfo.dragging ? linksData - .filter((l, index) => l.target.uuid !== this.dragInfo.nodeUuid) + .filter((l, index) => l.target.id !== this.dragInfo.nodeId) .map((l, index) => renderedLinkArrow(l, index)) : linksData.map((l, index) => renderedLinkArrow(l, index)); @@ -235,7 +235,7 @@ class Topology extends React.Component { ? null : renderedNode( nodesData.reduce((dragNode, n, index) => { - if (n.uuid === this.dragInfo.nodeUuid) { + if (n.id === this.dragInfo.nodeId) { return n; } return dragNode; @@ -248,7 +248,7 @@ class Topology extends React.Component { ? null : renderedLinkArrow( linksData.reduce((dragLinkArrow, l, index) => { - if (l.target.uuid === this.dragInfo.nodeUuid) { + if (l.target.id === this.dragInfo.nodeId) { return l; } return dragLinkArrow; diff --git a/packages/ui-toolkit/src/topology/node/index.js b/packages/ui-toolkit/src/topology/node/index.js index 6b7293f3..be57a61c 100644 --- a/packages/ui-toolkit/src/topology/node/index.js +++ b/packages/ui-toolkit/src/topology/node/index.js @@ -56,7 +56,7 @@ const GraphNode = ({ const onStart = evt => { evt.preventDefault(); - onDragStart(evt, data.uuid); + onDragStart(evt, data.id); }; const nodeRectEvents = connected diff --git a/packages/ui-toolkit/src/topology/simulation.js b/packages/ui-toolkit/src/topology/simulation.js index 0d7d0a49..f2393ef2 100644 --- a/packages/ui-toolkit/src/topology/simulation.js +++ b/packages/ui-toolkit/src/topology/simulation.js @@ -23,7 +23,7 @@ const createLinks = services => service.connections ? acc.concat( service.connections.map((connection, index) => ({ - source: service.uuid, + source: service.id, target: connection })) ) @@ -35,7 +35,7 @@ const createSimulation = (services, svgSize, animationTicks = 0) => { // This is not going to work given that as well as the d3 layout stuff, other things might be at play too // We should pass two objects to the components - one for positioning and one for data const nodes = services.map((service, index) => ({ - uuid: service.uuid, + id: service.id, index })); @@ -46,7 +46,7 @@ const createSimulation = (services, svgSize, animationTicks = 0) => { const nodeRadius = rectRadius(Constants.nodeSizeWithChildren); const simulation = forceSimulation(nodes) - .force('link', forceLink(links).id(d => d.uuid)) + .force('link', forceLink(links).id(d => d.id)) .force('collide', forceCollide(nodeRadius)) .force('center', forceCenter(width / 2, height / 2)); @@ -71,7 +71,7 @@ const updateSimulation = ( ) => { const nodes = services.map((service, index) => { const simNode = simNodes.reduce((acc, n, i) => { - return service.uuid === n.id ? n : acc; + return service.id === n.id ? n : acc; }, null); return simNode @@ -82,7 +82,7 @@ const updateSimulation = ( index } : { - id: service.uuid, + id: service.id, index }; });