fix flow drawing in geo layout
diff --git a/web/ons-demo/css/skin.default.css b/web/ons-demo/css/skin.default.css
index 9ecc00f..843fa4a 100644
--- a/web/ons-demo/css/skin.default.css
+++ b/web/ons-demo/css/skin.default.css
@@ -150,8 +150,16 @@
path.iperfdata {
fill: none;
- stroke-width: 2px;
- stroke: rgba(255, 255, 255, .75);
+ stroke-width: 1px;
+ stroke: #ccc;
+}
+
+.iperf {
+ background-color: #222;
+}
+
+#selectedFlowsHeader .iperf {
+ background-color: black;
}
#flowChooser {
diff --git a/web/ons-demo/js/flows.js b/web/ons-demo/js/flows.js
index ae148e7..6975c29 100644
--- a/web/ons-demo/js/flows.js
+++ b/web/ons-demo/js/flows.js
@@ -7,7 +7,7 @@
}
});
- var flows = d3.select('svg').selectAll('.flow').data(topologyFlows);
+ var flows = flowLayer.selectAll('.flow').data(topologyFlows);
flows.enter().append("svg:path").attr('class', 'flow')
.attr('stroke-dasharray', '4, 10')
@@ -34,13 +34,17 @@
var pt1 = document.querySelector('svg').createSVGPoint();
pt1.x = s1.attr('x');
pt1.y = s1.attr('y');
- pt1 = pt1.matrixTransform(s1[0][0].getCTM());
+ if (drawingRings) {
+ pt1 = pt1.matrixTransform(s1[0][0].getCTM());
+ }
pts.push(pt1);
var pt2 = document.querySelector('svg').createSVGPoint();
pt2.x = s2.attr('x');
pt2.y = s2.attr('y');
- pt2 = pt2.matrixTransform(s2[0][0].getCTM());
+ if (drawingRings) {
+ pt2 = pt2.matrixTransform(s2[0][0].getCTM());
+ }
pts.push(pt2);
} else if (d.dataPath && d.dataPath.flowEntries) {
@@ -51,7 +55,9 @@
var pt = document.querySelector('svg').createSVGPoint();
pt.x = s.attr('x');
pt.y = s.attr('y');
- pt = pt.matrixTransform(s[0][0].getCTM());
+ if (drawingRings) {
+ pt = pt.matrixTransform(s[0][0].getCTM());
+ }
pts.push(pt);
} else {
console.log('flow refers to non-existent switch: ' + flowEntry.dpid.value);
@@ -197,12 +203,12 @@
var i;
for (i=0; i < pointsToDisplay; ++i) {
var sample = flow.iperfData.samples[i];
- var height = 30 * sample/1000000;
- if (height > 30)
- height = 30;
+ var height = 28 * sample/1000000;
+ if (height > 28)
+ height = 28;
pts.push({
x: i * 1000/(pointsToDisplay-1),
- y: 32 - height
+ y: 30 - height
})
}
return pts;
@@ -299,7 +305,10 @@
}
updateSelectedFlowsTable();
- updateSelectedFlowsTopology();
+ // on app init, the table is updated before the svg is constructed
+ if (flowLayer) {
+ updateSelectedFlowsTopology();
+ }
}
function selectFlow(flow) {
diff --git a/web/ons-demo/js/globals.js b/web/ons-demo/js/globals.js
index 7681957..2063ba5 100644
--- a/web/ons-demo/js/globals.js
+++ b/web/ons-demo/js/globals.js
@@ -43,4 +43,15 @@
/***************************************************************************************************
a mapping from controller name to color used for color coding the topology and ONOS nodes views
***************************************************************************************************/
-var controllerColorMap = {};
\ No newline at end of file
+var controllerColorMap = {};
+
+/***************************************************************************************************
+defined by rings.js or map.js this is where the flows are drawn.
+***************************************************************************************************/
+var flowLayer;
+
+/***************************************************************************************************
+hack to make the old ring drawing code compatible with the shared flow drawing code
+will be obsoleted once the ring drawing code is disposed of
+***************************************************************************************************/
+var drawingRings;
\ No newline at end of file
diff --git a/web/ons-demo/js/map.js b/web/ons-demo/js/map.js
index d40c9cb..35ca77d 100644
--- a/web/ons-demo/js/map.js
+++ b/web/ons-demo/js/map.js
@@ -111,6 +111,8 @@
switchLayer = topology.append('g');
labelsLayer = topology.append('g');
linksLayer = topology.append('g');
+ flowLayer = topology.append('g');
+
cb();
});
diff --git a/web/ons-demo/js/rings.js b/web/ons-demo/js/rings.js
index 29907f6..979d28b 100644
--- a/web/ons-demo/js/rings.js
+++ b/web/ons-demo/js/rings.js
@@ -13,6 +13,11 @@
topology = svg.append('svg:svg').attr('id', 'viewBox').attr('viewBox', '0 0 1000 1000').attr('preserveAspectRatio', 'none').
attr('id', 'viewbox').append('svg:g').attr('id', 'topology').attr('transform', 'translate(500 500)');
+ flowLayer = d3.select('svg');
+
+ // hack to make the shared flow drawing code work
+ drawingRings = true;
+
cb();
}
diff --git a/web/ons-demo/js/utils.js b/web/ons-demo/js/utils.js
index d907225..be7cf53 100644
--- a/web/ons-demo/js/utils.js
+++ b/web/ons-demo/js/utils.js
@@ -80,7 +80,25 @@
***************************************************************************************************/
function updateHeader() {
d3.select('#lastUpdate').text(new Date());
- d3.select('#activeSwitches').text(model.edgeSwitches.length + model.aggregationSwitches.length + model.coreSwitches.length);
+
+ var count = 0;
+ model.edgeSwitches.forEach(function (s) {
+ if (s.state === 'ACTIVE') {
+ count += 1;
+ }
+ });
+ model.aggregationSwitches.forEach(function (s) {
+ if (s.state === 'ACTIVE') {
+ count += 1;
+ }
+ });
+ model.coreSwitches.forEach(function (s) {
+ if (s.state === 'ACTIVE') {
+ count += 1;
+ }
+ });
+
+ d3.select('#activeSwitches').text(count);
d3.select('#activeFlows').text(model.flows.length);
}