Adding and removing elements
diff --git a/views/ngXosViews/mcordTopology/mocks/data/instances.json b/views/ngXosViews/mcordTopology/mocks/data/instances.json
index 67029ac..572c775 100644
--- a/views/ngXosViews/mcordTopology/mocks/data/instances.json
+++ b/views/ngXosViews/mcordTopology/mocks/data/instances.json
@@ -18,24 +18,6 @@
"ip": "130.127.133.92"
},
{
- "id": 3,
- "humanReadableName": "BBU_service_instance-3",
- "instance_id": "instance-00000001",
- "instance_uuid": "42b75cb7-7205-4a68-9100-b2c1e3ea69b5",
- "name": "BBU_service_instance-3",
- "instance_name": "mysite_BBU-3",
- "ip": "130.127.133.93"
- },
- {
- "id": 4,
- "humanReadableName": "BBU_service_instance-4",
- "instance_id": "instance-00000004",
- "instance_uuid": "44b75cb7-7405-4a68-9400-b4c4e3ea69b5",
- "name": "BBU_service_instance-4",
- "instance_name": "mysite_BBU-4",
- "ip": "130.127.133.94"
- },
- {
"id": 5,
"humanReadableName": "vsg_service_instance-4",
"instance_id": "instance-00000004",
diff --git a/views/ngXosViews/mcordTopology/mocks/mcord.conf.json b/views/ngXosViews/mcordTopology/mocks/mcord.conf.json
index 17f8d01..7246775 100644
--- a/views/ngXosViews/mcordTopology/mocks/mcord.conf.json
+++ b/views/ngXosViews/mcordTopology/mocks/mcord.conf.json
@@ -2,7 +2,7 @@
{
"url": "instances",
"base": "xos/",
- "methods": ["GET"],
+ "methods": ["GET", "POST"],
"param": "id"
}
]
\ No newline at end of file
diff --git a/views/ngXosViews/mcordTopology/src/css/mcord.css b/views/ngXosViews/mcordTopology/src/css/mcord.css
index 54854ef..7d3db3d 100644
--- a/views/ngXosViews/mcordTopology/src/css/mcord.css
+++ b/views/ngXosViews/mcordTopology/src/css/mcord.css
@@ -25,7 +25,7 @@
}
.bbu text {
- font-size: 10px;
+ font-size: 9px;
}
.rru {
diff --git a/views/ngXosViews/mcordTopology/src/js/bbu.js b/views/ngXosViews/mcordTopology/src/js/bbu.js
index 1192c1d..07ad474 100644
--- a/views/ngXosViews/mcordTopology/src/js/bbu.js
+++ b/views/ngXosViews/mcordTopology/src/js/bbu.js
@@ -2,19 +2,37 @@
angular.module('xos.mcordTopology')
.service('NodeDrawer', function(){
+
+ const duration = 500;
+
this.drawBbus = (nodes) => {
+
nodes.append('circle')
.attr({
class: d => d.type,
- r: 15
+ r: 0,
+ opacity: 0
+ })
+ .transition()
+ .duration(duration)
+ // .delay((d, i) => i * (duration / 2))
+ .attr({
+ r: 15,
+ opacity: 1
});
nodes.append('text')
.attr({
'text-anchor': 'middle',
- y: 4
+ y: 4,
+ opacity: 0
})
- .text('BBU')
+ .text(d => `BBU ${d.name.substr(d.name.length - 1, 1)}`)
+ .transition()
+ .duration(duration * 2)
+ .attr({
+ opacity: 1
+ });
};
this.drawRrus = (nodes) => {
@@ -22,13 +40,29 @@
nodes.append('circle')
.attr({
class: d => `${d.type}-shadow`,
- r: 30
+ r: 0,
+ opacity: 0
+ })
+ .transition()
+ .duration(duration * 2)
+ // .delay((d, i) => i * (duration / 2))
+ .attr({
+ r: 30,
+ opacity: 1
});
-
+
nodes.append('circle')
.attr({
class: d => d.type,
- r: 10
+ r: 0,
+ opacity: 0
+ })
+ .transition()
+ .duration(duration)
+ // .delay((d, i) => i * (duration / 2))
+ .attr({
+ r: 10,
+ opacity: 1
});
};
@@ -36,10 +70,19 @@
nodes.append('rect')
.attr({
class: d => d.type,
+ width: 0,
+ height: 0,
+ x: -10,
+ y: -10,
+ opacity: 0
+ })
+ .transition()
+ .duration(duration)
+ // .delay((d, i) => i * (duration / 2))
+ .attr({
width: 20,
height: 20,
- x: -10,
- y: -10
+ opacity: 1
});
};
@@ -47,14 +90,39 @@
nodes.append('circle')
.attr({
class: d => d.type,
- r: 15
+ r: 0,
+ opacity: 0
+ })
+ .transition()
+ .duration(duration)
+ // .delay((d, i) => i * (duration / 2))
+ .attr({
+ r: 15,
+ opacity: 1
});
nodes.append('text')
.attr({
'text-anchor': 'middle',
- y: 4
+ y: 4,
+ opacity: 0
})
.text(d => d.type)
+ .transition()
+ .duration(duration * 2)
+ .attr({
+ opacity: 1
+ });
+
+ };
+
+ this.removeElements = (nodes) => {
+ nodes
+ .transition()
+ .duration(duration)
+ .attr({
+ opacity: 0
+ })
+ .remove();
};
});
\ No newline at end of file
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