Showing live traffic in topology view
diff --git a/views/ngXosViews/mcordTopology/gulp/server.js b/views/ngXosViews/mcordTopology/gulp/server.js
index 7605294..162bc97 100644
--- a/views/ngXosViews/mcordTopology/gulp/server.js
+++ b/views/ngXosViews/mcordTopology/gulp/server.js
@@ -23,6 +23,10 @@
target: conf.host || 'http://0.0.0.0:9999'
});
+var traffic = httpProxy.createProxyServer({
+ target: 'http://10.128.13.3'
+});
+
proxy.on('error', function(error, req, res) {
res.writeHead(500, {
@@ -64,6 +68,10 @@
}
proxy.web(req, res);
}
+ else if(req.url.indexOf('videoLocal') !== -1){
+ console.log('traffic: ', req.url);
+ traffic.web(req, res);
+ }
else{
next();
}
diff --git a/views/ngXosViews/mcordTopology/src/css/mcord.css b/views/ngXosViews/mcordTopology/src/css/mcord.css
index 7ef1d47..8fb7540 100644
--- a/views/ngXosViews/mcordTopology/src/css/mcord.css
+++ b/views/ngXosViews/mcordTopology/src/css/mcord.css
@@ -11,7 +11,7 @@
line {
stroke: blue;
- stroke-width: 1;
+ /*stroke-width: 1;*/
}
line.big{
diff --git a/views/ngXosViews/mcordTopology/src/js/main.js b/views/ngXosViews/mcordTopology/src/js/main.js
index 544482e..4b66991 100644
--- a/views/ngXosViews/mcordTopology/src/js/main.js
+++ b/views/ngXosViews/mcordTopology/src/js/main.js
@@ -17,6 +17,16 @@
.config(function($httpProvider){
$httpProvider.interceptors.push('NoHyperlinks');
})
+.service('Traffic', function($http, $q){
+ this.get = () => {
+ var deferred = $q.defer();
+ $http.get('videoLocal.txt')
+ .then(res => {
+ deferred.resolve(res.data);
+ });
+ return deferred.promise;
+ }
+})
.directive('mCordTopology', function(){
return {
restrict: 'E',
@@ -24,12 +34,14 @@
bindToController: true,
controllerAs: 'vm',
template: '',
- controller: function($element, $interval, XosApi, lodash, TopologyElements, NodeDrawer){
+ controller: function($element, $interval, $rootScope, XosApi, lodash, TopologyElements, NodeDrawer, Traffic){
const el = $element[0];
let nodes = [];
let links = [];
+ let traffic = 0;
+ let linkWidth = 1;
const filterBBU = (instances) => {
return lodash.filter(instances, i => i.name.indexOf('BBU') >= 0);
@@ -49,7 +61,19 @@
nodes = TopologyElements.nodes;
links = TopologyElements.links;
- XosApi.Instance_List_GET()
+ Traffic.get()
+ .then((_traffic) => {
+ let delta = (_traffic - traffic);
+ traffic = _traffic
+ linkWidth = _traffic / (delta || traffic);
+
+ if(linkWidth < 1){
+ linkWidth = 1;
+ }
+
+ console.log(`traffic: ${_traffic}`, `linkWidth: ${linkWidth}`);
+ return XosApi.Instance_List_GET()
+ })
.then((instances) => {
addBbuNodes(filterBBU(instances));
addOtherNodes(filterOthers(instances));
@@ -228,18 +252,25 @@
link.enter().append('line')
.attr({
- // class: 'link',
+ class: d => `link ${d.type}`,
+ 'stroke-width': linkWidth,
id: d => d.id,
- opacity: 0,
- class: d => `link ${d.type}`
+ opacity: 0
})
.transition()
.duration(1000)
- // .delay((d, i) => 50 * i)
.attr({
opacity: 1
});
+ link
+ .transition()
+ .duration(1000)
+ .attr({
+ 'stroke-width': linkWidth,
+ opacity: 1
+ });
+
link.exit()
.remove();
@@ -289,7 +320,7 @@
$interval(() => {
getData();
- }, 5000);
+ }, 3000);
getData();
diff --git a/xos/core/xoslib/static/css/xosMcordTopology.css b/xos/core/xoslib/static/css/xosMcordTopology.css
index 62c259b..55da618 100644
--- a/xos/core/xoslib/static/css/xosMcordTopology.css
+++ b/xos/core/xoslib/static/css/xosMcordTopology.css
@@ -1 +1 @@
-#xosMcordTopology{height:700px}[ui-view],m-cord-topology{width:100%;height:100%;display:block}line{stroke:blue;stroke-width:1}line.big{stroke-width:2}circle,rect{fill:#fff;stroke-width:1}.fabric{stroke:none;fill:#123456;fill-rule:evenodd}.fabric-container{fill:transparent;stroke:#000;stroke-width:1}.bbu{stroke:black;fill:#ff7f0e}.rru{stroke:#000;fill:#ffbb78}.rru.antenna{stroke:#000;fill:brown}.rru-shadow{fill:#ffbb78;opacity:.4}.MME,.SGW,.PGW{fill:purple;stroke:#000}rect.MME,rect.SGW,rect.PGW,rect.bbu{fill:#fff;stroke:#fff}.bbu text,.MME text,.SGW text,.PGW text{font-size:10px;stroke-width:0;fill:#000}
\ No newline at end of file
+#xosMcordTopology{height:700px}[ui-view],m-cord-topology{width:100%;height:100%;display:block}line{stroke:blue}line.big{stroke-width:2}circle,rect{fill:#fff;stroke-width:1}.fabric{stroke:none;fill:#123456;fill-rule:evenodd}.fabric-container{fill:transparent;stroke:#000;stroke-width:1}.bbu{stroke:black;fill:#ff7f0e}.rru{stroke:#000;fill:#ffbb78}.rru.antenna{stroke:#000;fill:brown}.rru-shadow{fill:#ffbb78;opacity:.4}.MME,.SGW,.PGW,.Vid{fill:purple;stroke:#000}rect.MME,rect.SGW,rect.PGW,rect.bbu,rect.Vid{fill:#fff;stroke:#fff}.bbu text,.MME text,.SGW text,.PGW text,.Vid text{font-size:10px;stroke-width:0;fill:#000}
\ No newline at end of file
diff --git a/xos/core/xoslib/static/js/xosMcordTopology.js b/xos/core/xoslib/static/js/xosMcordTopology.js
index 26cf44c..d6b2afc 100644
--- a/xos/core/xoslib/static/js/xosMcordTopology.js
+++ b/xos/core/xoslib/static/js/xosMcordTopology.js
@@ -8,6 +8,14 @@
});
}]).config(["$httpProvider", function ($httpProvider) {
$httpProvider.interceptors.push('NoHyperlinks');
+}]).service('Traffic', ["$http", "$q", function ($http, $q) {
+ this.get = function () {
+ var deferred = $q.defer();
+ $http.get('videoLocal.txt').then(function (res) {
+ deferred.resolve(res.data);
+ });
+ return deferred.promise;
+ };
}]).directive('mCordTopology', function () {
return {
restrict: 'E',
@@ -15,12 +23,14 @@
bindToController: true,
controllerAs: 'vm',
template: '',
- controller: ["$element", "$interval", "XosApi", "lodash", "TopologyElements", "NodeDrawer", function controller($element, $interval, XosApi, lodash, TopologyElements, NodeDrawer) {
+ controller: ["$element", "$interval", "$rootScope", "XosApi", "lodash", "TopologyElements", "NodeDrawer", "Traffic", function controller($element, $interval, $rootScope, XosApi, lodash, TopologyElements, NodeDrawer, Traffic) {
var el = $element[0];
var nodes = [];
var links = [];
+ var traffic = 0;
+ var linkWidth = 1;
var filterBBU = function filterBBU(instances) {
return lodash.filter(instances, function (i) {
@@ -29,9 +39,7 @@
};
var filterOthers = function filterOthers(instances) {
- return lodash.filter(instances, function (i) {
- return i.name.indexOf('MME') >= 0 || i.name.indexOf('SGW') >= 0 || i.name.indexOf('PGW') >= 0;
- });
+ return TopologyElements.fakedInstance;
};
// retrieving instances list
@@ -42,7 +50,18 @@
nodes = TopologyElements.nodes;
links = TopologyElements.links;
- XosApi.Instance_List_GET().then(function (instances) {
+ Traffic.get().then(function (_traffic) {
+ var delta = _traffic - traffic;
+ traffic = _traffic;
+ linkWidth = _traffic / (delta || traffic);
+
+ if (linkWidth < 1) {
+ linkWidth = 1;
+ }
+
+ console.log('traffic: ' + _traffic, 'linkWidth: ' + linkWidth);
+ return XosApi.Instance_List_GET();
+ }).then(function (instances) {
addBbuNodes(filterBBU(instances));
addOtherNodes(filterOthers(instances));
@@ -201,17 +220,20 @@
});
link.enter().append('line').attr({
- // class: 'link',
+ 'class': function _class(d) {
+ return 'link ' + d.type;
+ },
+ 'stroke-width': linkWidth,
id: function id(d) {
return d.id;
},
- opacity: 0,
- 'class': function _class(d) {
- return 'link ' + d.type;
- }
- }).transition().duration(1000)
- // .delay((d, i) => 50 * i)
- .attr({
+ opacity: 0
+ }).transition().duration(1000).attr({
+ opacity: 1
+ });
+
+ link.transition().duration(1000).attr({
+ 'stroke-width': linkWidth,
opacity: 1
});
@@ -239,7 +261,8 @@
NodeDrawer.drawRrus(enter.filter('.rru'));
NodeDrawer.drawFabric(enter.filter('.fabric'));
NodeDrawer.drawOthers(enter.filter(function (d) {
- return d.type === 'MME' || d.type === 'SGW' || d.type === 'PGW';
+ console.log(d.type);
+ return d.type === 'MME' || d.type === 'SGW' || d.type === 'PGW' || d.type === 'Vid';
}));
// remove nodes
@@ -266,7 +289,7 @@
$interval(function () {
getData();
- }, 5000);
+ }, 3000);
getData();
}]
};
@@ -316,6 +339,19 @@
source: 'fabric3',
target: 'fabric2'
}],
+ fakedInstance: [{
+ humanReadableName: 'MME',
+ name: 'MME'
+ }, {
+ humanReadableName: 'PGW',
+ name: 'PGW'
+ }, {
+ humanReadableName: 'SGW',
+ name: 'SGW'
+ }, {
+ humanReadableName: 'Video Server',
+ name: 'Video Server'
+ }],
icons: {
bbu: 'M11.08,4.66H24.76l6.81,6.82H4.23Z M4.24,18.34V13.21H31.6v5.13H4.24Zm25.64-1.72V14.94H28.19v1.69h1.68Zm-13.65-1.7v1.69h1.69V14.93H16.22Zm-3.42,0v1.69h1.68V14.93H12.8Zm-3.42,0v1.69h1.68V14.93H9.38ZM6,14.93v1.69H7.64V14.93H6Z M32.8,33.23H3V11.42l0,0c1.17-1.16,2.54-2.5,3.87-3.8S9.59,5,10.72,3.87l0,0H25.08l0,0C26.25,5,27.6,6.32,28.9,7.61s2.68,2.63,3.83,3.78l0,0v0.06ZM3.3,33H32.53l0-21.43C31.36,10.39,30,9.07,28.71,7.8S26.09,5.22,25,4.1H10.86C9.75,5.21,8.41,6.52,7.12,7.77s-2.67,2.61-3.83,3.76V33Z M4.24,25.18V20.05H31.6v5.13H4.24Zm24-1.73h1.68V21.78H28.19v1.67Zm-12,0H17.9V21.78H16.21v1.68Zm-1.73-1.68H12.81v1.67h1.68V21.78Zm-3.43,1.68V21.78H9.38v1.69h1.68ZM6,23.46H7.64V21.78H6v1.68Z M31.6,26.89V32H4.24V26.89H31.6Zm-3.4,1.72V30.3h1.68V28.61H28.19Zm-10.28,0H16.22V30.3h1.68V28.62Zm-3.43,1.69V28.62H12.8v1.69h1.68Zm-3.42,0V28.62H9.38v1.69h1.68ZM7.65,28.62H6v1.67H7.65V28.62Z',
// bbu: `M15,100a5,5,0,0,1-5-5v-65a5,5,0,0,1,5-5h80a5,5,0,0,1,5,5v65a5,5,0,0,1-5,5zM14,22.5l11-11a10,3,0,0,1,10-2h40a10,3,0,0,1,10,2l11,11zM16,35a5,5,0,0,1,10,0a5,5,0,0,1-10,0z`,
@@ -499,7 +535,7 @@
x: -12,
opacity: 0
}).text(function (d) {
- return d.type;
+ return d.name.toUpperCase();
}).transition().duration(duration * 2).attr({
opacity: 1
});