diff --git a/ui/src/components/topology/graph-simulation.js b/ui/src/components/topology/graph-simulation.js
index fbed429c..c1bdba86 100644
--- a/ui/src/components/topology/graph-simulation.js
+++ b/ui/src/components/topology/graph-simulation.js
@@ -13,9 +13,19 @@ const rectRadius = (size) => {
return Math.round(hypotenuse(width, height)/2);
};
+const createLinks = (services) =>
+ services.reduce((acc, service, index) =>
+ service.connections ?
+ acc.concat(
+ service.connections.map((connection, index) => ({
+ source: service.uuid,
+ target: connection
+ }))
+ ) : acc
+ , []);
+
const createSimulation = (
- nodes,
- links,
+ services,
nodeSize,
svgSize,
onTick,
@@ -23,13 +33,12 @@ const createSimulation = (
) => {
// 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 mappedNodes = nodes.map((node, index) => ({
- id: node.id,
+ const nodes = services.map((service, index) => ({
+ id: service.uuid,
index: index
}));
- const mappedLinks = links.map((link, index) => ({
- ...link
- }));
+
+ const links = createLinks(services);
const {
width,
@@ -39,22 +48,21 @@ const createSimulation = (
const nodeRadius = rectRadius(nodeSize);
return ({
- simulation: d3.forceSimulation(mappedNodes)
- .force('link', d3.forceLink(mappedLinks).id(d => d.id))
+ simulation: d3.forceSimulation(nodes)
+ .force('link', d3.forceLink(links).id(d => d.id))
.force('collide', d3.forceCollide(nodeRadius))
.force('center', d3.forceCenter(width/2, height/2))
.on('tick', onTick)
.on('end', onEnd),
- nodes: mappedNodes,
- links: mappedLinks
+ nodes: nodes,
+ links: links
});
};
// TODO we need to kill the previous simulation
const updateSimulation = (
simulation,
- nextNodes,
- nextLinks,
+ services,
simNodes,
simLinks,
nodeSize,
@@ -62,9 +70,9 @@ const updateSimulation = (
onTick,
onEnd
) => {
- const mappedNodes = nextNodes.map((nextNode, index) => {
+ const nodes = services.map((service, index) => {
const simNode = simNodes.reduce((acc, n, i) => {
- return nextNode.id === n.id ? n : acc;
+ return service.uuid === n.id ? n : acc;
}, null);
return simNode ? {
@@ -73,14 +81,12 @@ const updateSimulation = (
// fy: simNode.y,
index: index
} : {
- id: nextNode.id,
+ id: service.uuid,
index: index
};
});
- const mappedLinks = nextLinks.map((nextLink, index) => ({
- ...nextLink
- }));
+ const links = createLinks(services);
const {
width,
@@ -90,14 +96,14 @@ const updateSimulation = (
const nodeRadius = rectRadius(nodeSize);
return ({
- simulation: d3.forceSimulation(mappedNodes)
- .force('link', d3.forceLink(mappedLinks).id(d => d.id))
+ simulation: d3.forceSimulation(nodes)
+ .force('link', d3.forceLink(links).id(d => d.id))
.force('collide', d3.forceCollide(nodeRadius))
.force('center', d3.forceCenter(width/2, height/2))
.on('tick', onTick)
.on('end', onEnd),
- nodes: mappedNodes,
- links: mappedLinks
+ nodes: nodes,
+ links: links
});
};
diff --git a/ui/src/components/topology/story-helper.js b/ui/src/components/topology/story-helper.js
index 54700e65..4d180464 100644
--- a/ui/src/components/topology/story-helper.js
+++ b/ui/src/components/topology/story-helper.js
@@ -1,6 +1,7 @@
const React = require('react');
const Styled = require('styled-components');
const composers = require('../../shared/composers');
+const fns = require('../../shared/functions');
const Input = require('../form/input');
const Select = require('../form/select');
const Topology = require('./');
@@ -10,6 +11,10 @@ const {
default: styled
} = Styled;
+const {
+ rndId
+} = fns;
+
const {
Baseline
} = composers;
@@ -51,56 +56,60 @@ class StoryHelper extends React.Component {
const target = evt.target.target.value;
const source = evt.target.source.value;
- const links = [];
+ const node = {
+ ...data[0],
+ id: rndId(),
+ uuid: rndId(),
+ name: service
+ };
+
+ delete node.connections;
+
if(target) {
- links.push({
- target: target,
- source: service
- });
+ node.connections = [
+ data.reduce((acc, s, i) => s.id === target ? s.uuid : acc, '')
+ ];
}
- if(source) {
- links.push({
- target: service,
- source: source
- });
- }
+ const d = this.state.data.map((data, index) => {
- if(links.length) {
- const data = this.state.data;
- this.setState({
- data: {
- nodes: [
- ...data.nodes,
- {
- ...data.nodes[0],
- id: service
- }
- ],
- links: [
- ...data.links,
- ...links
- ]
- }
+ if(data.id === source) {
+ const connections = data.connections ?
+ data.connections.concat(node.uuid) : [node.uuid];
+
+ return ({
+ ...data,
+ connections: connections
+ });
+ }
+
+ return ({
+ ...data
});
- }
+ });
+
+ d.push(node);
+
+ this.setState({
+ data: d
+ });
};
return (
-
+ {
-
-
+ }
+
);
}
diff --git a/ui/src/components/topology/topology-graph.js b/ui/src/components/topology/topology-graph.js
index dacfe9ca..61f5d50d 100644
--- a/ui/src/components/topology/topology-graph.js
+++ b/ui/src/components/topology/topology-graph.js
@@ -42,14 +42,10 @@ let dragInfo = {
class TopologyGraph extends React.Component {
componentWillMount() {
- const {
- nodes,
- links
- } = this.props.data;
+ const services = this.props.services;
const simulationData = createSimulation(
- nodes,
- links,
+ services,
nodeSize,
svgSize//,
//() => this.forceUpdate(),
@@ -78,25 +74,21 @@ class TopologyGraph extends React.Component {
// try freezing exisiting ones... then adding another
const {
- nodes: simNodes,
- links: simLinks
+ nodes,
+ links
} = this.state;
- const {
- nodes: nextNodes,
- links: nextLinks
- } = nextProps.data;
+ const services = nextProps.services;
+ // TODO this here means we'll need to evaluate whether to we have more links!
// this is tmp for the compare above
- if(nextNodes.length !== simNodes.length ||
- nextLinks.length !== simLinks.length) {
+ if(services !== nodes.length) {
const simulation = this.state.simulation;
const nextSimulationData = updateSimulation(
simulation,
- nextNodes,
- nextLinks,
- simNodes,
- simLinks,
+ services,
+ nodes,
+ links,
nodeSize,
svgSize,
() => this.forceUpdate(),
@@ -114,10 +106,10 @@ class TopologyGraph extends React.Component {
nextSimulation.tick();
}
- /*this.state.simulation.nodes().forEach((node, index) => {
- delete node.fx;
- delete node.fy;
- });*/
+ //this.state.simulation.nodes().forEach((node, index) => {
+ // delete node.fx;
+ // delete node.fy;
+ //});
this.setState(nextSimulationData);
}
@@ -125,26 +117,26 @@ class TopologyGraph extends React.Component {
render() {
+ const services = this.props.services;
+
const {
nodes,
links
- } = this.props.data;
+ } = this.state;
- const simulationNodes = this.state.nodes;
-
- const simulationNode = (nodeId) =>
- simulationNodes.reduce((acc, simNode, index) => {
+ const node = (nodeId) =>
+ nodes.reduce((acc, simNode, index) => {
return simNode.id === nodeId ? simNode : acc;
}, {});
- const nodesData = nodes.map((node, index) => ({
- ...node,
- ...simulationNode(node.id)
+ const nodesData = services.map((service, index) => ({
+ ...service,
+ ...node(service.uuid)
}));
const linksData = links.map((link, index) => ({
- source: simulationNode(link.source),
- target: simulationNode(link.target)
+ source: node(link.source.id),
+ target: node(link.target.id)
}));
const onDragStart = (evt, nodeId) => {
@@ -183,7 +175,7 @@ class TopologyGraph extends React.Component {
};
}
- const dragNodes = simulationNodes.map((simNode, index) => {
+ const dragNodes = nodes.map((simNode, index) => {
if(simNode.id === dragInfo.nodeId) {
return ({
...simNode,
@@ -263,10 +255,7 @@ class TopologyGraph extends React.Component {
}
TopologyGraph.propTypes = {
- data: React.PropTypes.shape({
- nodes: React.PropTypes.array,
- links: React.PropTypes.array
- })
+ services: React.PropTypes.array
};
module.exports = Baseline(