Adding and removing elements
diff --git a/views/ngXosViews/mcordTopology/src/js/main.js b/views/ngXosViews/mcordTopology/src/js/main.js
index f0605c3..82836a6 100644
--- a/views/ngXosViews/mcordTopology/src/js/main.js
+++ b/views/ngXosViews/mcordTopology/src/js/main.js
@@ -24,12 +24,12 @@
bindToController: true,
controllerAs: 'vm',
template: '',
- controller: function($element, $window, XosApi, lodash, TopologyElements, NodeDrawer){
+ controller: function($element, $interval, XosApi, lodash, TopologyElements, NodeDrawer){
const el = $element[0];
- let nodes = TopologyElements.nodes;
- let links = TopologyElements.links;
+ let nodes = [];
+ let links = [];
const filterBBU = (instances) => {
return lodash.filter(instances, i => i.name.indexOf('BBU') >= 0);
@@ -44,15 +44,24 @@
};
// retrieving instances list
- XosApi.Instance_List_GET()
- .then((instances) => {
- addBbuNodes(filterBBU(instances));
- addOtherNodes(filterOthers(instances));
- draw(svg, nodes, links);
- })
- .catch((e) => {
- throw new Error(e);
- });
+ const getData = () => {
+
+ nodes = TopologyElements.nodes;
+ links = TopologyElements.links;
+ console.log('-----------------------------');
+ console.log(`Fabric Links: ${links.length}`);
+
+ XosApi.Instance_List_GET()
+ .then((instances) => {
+ addBbuNodes(filterBBU(instances));
+ addOtherNodes(filterOthers(instances));
+
+ draw(svg, nodes, links);
+ })
+ .catch((e) => {
+ throw new Error(e);
+ });
+ };
const force = d3.layout.force();
@@ -68,13 +77,15 @@
// replace human readable ids with d3 ids
const buildLinks = (links, nodes) => {
- return links.map((l) => {
+ console.log(`links: ${links.length}`);
+ return links.map((l, i) => {
let source = lodash.findIndex(nodes, {id: l.source});
let target = lodash.findIndex(nodes, {id: l.target});
return {
source: source,
target: target,
- value: 1
+ value: 1,
+ id: `link-${i++}`
};
});
@@ -137,6 +148,9 @@
})
nodes = nodes.concat(bbuNodes);
+
+ console.log(`bbuLinks: ${bbuLinks.length}`);
+
links = links.concat(bbuLinks);
};
@@ -164,11 +178,13 @@
};
});
+ console.log(`otherLinks: ${otherLinks.length}`);
+
nodes = nodes.concat(otherNodes);
links = links.concat(otherLinks);
}
- // NOTE nodes get dublicated
+ // NOTE links get duplicated
const draw = (svg, nodes, links) => {
links = buildLinks(links, nodes);
@@ -188,12 +204,24 @@
// draw links
var link = svg.selectAll('.link')
- .data(links)
- .enter().append('line')
+ .data(links, d => d.id);
+
+ link.enter().append('line')
.attr({
class: 'link',
+ id: d => d.id,
+ opacity: 0
+ })
+ .transition()
+ .duration(1000)
+ // .delay((d, i) => 50 * i)
+ .attr({
+ opacity: 1
});
+ link.exit()
+ .remove();
+
//draw nodes
var node = svg.selectAll('.node')
.data(nodes, d => {
@@ -204,15 +232,15 @@
var enter = node.enter()
.append('g', d => d.interfaceCfgIdentifier)
.attr({
- class: d => d.type,
+ class: d => `${d.type} node`,
transform: d => `translate(${d.x}, ${d.y})`
});
// draw nodes
- NodeDrawer.drawBbus(node.filter('.bbu'))
- NodeDrawer.drawRrus(node.filter('.rru'))
- NodeDrawer.drawFabric(node.filter('.fabric'))
- NodeDrawer.drawOthers(node.filter(d => {
+ NodeDrawer.drawBbus(enter.filter('.bbu'))
+ NodeDrawer.drawRrus(enter.filter('.rru'))
+ NodeDrawer.drawFabric(enter.filter('.fabric'))
+ NodeDrawer.drawOthers(enter.filter(d => {
return (
d.type === 'MME' ||
d.type === 'SGW' ||
@@ -220,6 +248,11 @@
)
}));
+ // remove nodes
+ var exit = node.exit();
+
+ NodeDrawer.removeElements(exit);
+
force.on('tick', function() {
link
.attr('x1', d => d.source.x )
@@ -231,7 +264,12 @@
});
};
- // draw(svg, TopologyElements.nodes, TopologyElements.links);
+ $interval(() => {
+ getData();
+ }, 5000);
+ getData();
+
+
}
};
});
\ No newline at end of file