Drawing fabric
diff --git a/views/ngXosViews/mcordTopology/src/css/mcord.css b/views/ngXosViews/mcordTopology/src/css/mcord.css
index 7d3db3d..567318f 100644
--- a/views/ngXosViews/mcordTopology/src/css/mcord.css
+++ b/views/ngXosViews/mcordTopology/src/css/mcord.css
@@ -6,10 +6,14 @@
}
line {
- stroke: red;
+ stroke: blue;
stroke-width: 1;
}
+line.big{
+ stroke-width: 2;
+}
+
circle,
rect {
fill: #fff;
@@ -17,30 +21,42 @@
}
.fabric {
- stroke: green;
+ stroke: #000;
+ fill: #1F77B4;
+}
+
+.fabric-container {
+ fill: #fff;
+ stroke: #000;
+ stroke-width: 1;
}
.bbu {
- stroke: blue;
+ stroke: black;
+ fill: #FF7F0E;
}
.bbu text {
- font-size: 9px;
+ font-size: 10px;
+ stroke: #000;
}
.rru {
- stroke: blue;
- fill: blue;
+ stroke: #000;
+ fill: #FFBB78;
}
.rru-shadow {
- fill: lightblue;
+ fill: #FFBB78;
+ opacity: .4
}
.MME, .SGW, .PGW {
- stroke: purple;
+ fill: purple;
+ stroke: #000;
}
.MME text, .SGW text, .PGW text {
font-size: 10px;
+ stroke: #000;
}
\ No newline at end of file
diff --git a/views/ngXosViews/mcordTopology/src/js/bbu.js b/views/ngXosViews/mcordTopology/src/js/bbu.js
index 07ad474..cdea2c6 100644
--- a/views/ngXosViews/mcordTopology/src/js/bbu.js
+++ b/views/ngXosViews/mcordTopology/src/js/bbu.js
@@ -5,6 +5,28 @@
const duration = 500;
+ this.drawFabricBox = (svg, hStep, vStep) => {
+ let fabric = svg.append('g')
+ .attr({
+ transform: `translate(${hStep - 25}, ${vStep - 25})`
+ });
+
+ fabric.append('rect')
+ .attr({
+ width: hStep + 50,
+ height: vStep + 50,
+ class: 'fabric-container'
+ });
+
+ fabric.append('text')
+ .text('Fabric')
+ .attr({
+ 'text-anchor': 'middle',
+ x: ((hStep + 50) / 2),
+ y: -10
+ });
+ };
+
this.drawBbus = (nodes) => {
nodes.append('circle')
@@ -23,8 +45,9 @@
nodes.append('text')
.attr({
- 'text-anchor': 'middle',
- y: 4,
+ 'text-anchor': 'start',
+ y: 17,
+ x: 17,
opacity: 0
})
.text(d => `BBU ${d.name.substr(d.name.length - 1, 1)}`)
@@ -72,16 +95,16 @@
class: d => d.type,
width: 0,
height: 0,
- x: -10,
- y: -10,
+ x: -15,
+ y: -15,
opacity: 0
})
.transition()
.duration(duration)
// .delay((d, i) => i * (duration / 2))
.attr({
- width: 20,
- height: 20,
+ width: 30,
+ height: 30,
opacity: 1
});
};
@@ -103,8 +126,9 @@
nodes.append('text')
.attr({
- 'text-anchor': 'middle',
- y: 4,
+ 'text-anchor': 'start',
+ y: 17,
+ x: 17,
opacity: 0
})
.text(d => d.type)
@@ -115,7 +139,7 @@
});
};
-
+
this.removeElements = (nodes) => {
nodes
.transition()
diff --git a/views/ngXosViews/mcordTopology/src/js/main.js b/views/ngXosViews/mcordTopology/src/js/main.js
index 82836a6..613f758 100644
--- a/views/ngXosViews/mcordTopology/src/js/main.js
+++ b/views/ngXosViews/mcordTopology/src/js/main.js
@@ -48,8 +48,6 @@
nodes = TopologyElements.nodes;
links = TopologyElements.links;
- console.log('-----------------------------');
- console.log(`Fabric Links: ${links.length}`);
XosApi.Instance_List_GET()
.then((instances) => {
@@ -72,20 +70,22 @@
.style('height', `${el.clientHeight}px`);
- let hStep = el.clientWidth / 3;
- let vStep = el.clientHeight / 5;
// replace human readable ids with d3 ids
+ // NOTE now ids are not manatined on update...
const buildLinks = (links, nodes) => {
- console.log(`links: ${links.length}`);
- return links.map((l, i) => {
+ return links.map((l) => {
+
+
let source = lodash.findIndex(nodes, {id: l.source});
let target = lodash.findIndex(nodes, {id: l.target});
+ // console.log(`link-${source}-${target}`, source, target);
return {
source: source,
target: target,
value: 1,
- id: `link-${i++}`
+ id: `link-${source}-${target}`,
+ type: l.source.indexOf('fabric') >= 0 ? 'big':'small'
};
});
@@ -149,7 +149,6 @@
nodes = nodes.concat(bbuNodes);
- console.log(`bbuLinks: ${bbuLinks.length}`);
links = links.concat(bbuLinks);
};
@@ -178,19 +177,27 @@
};
});
- console.log(`otherLinks: ${otherLinks.length}`);
nodes = nodes.concat(otherNodes);
links = links.concat(otherLinks);
}
- // NOTE links get duplicated
+ let hStep, vStep;
+
+ hStep = el.clientWidth / 3;
+ vStep = el.clientHeight / 5;
+
const draw = (svg, nodes, links) => {
+ hStep = el.clientWidth / 3;
+ vStep = el.clientHeight / 5;
+
links = buildLinks(links, nodes);
nodes = positionFabricNodes(nodes);
+ NodeDrawer.drawFabricBox(svg, hStep, vStep);
+
// start force layout
force
.nodes(nodes)
@@ -208,9 +215,10 @@
link.enter().append('line')
.attr({
- class: 'link',
+ // class: 'link',
id: d => d.id,
- opacity: 0
+ opacity: 0,
+ class: d => `link ${d.type}`
})
.transition()
.duration(1000)