Added port numbers to port labels. Still needs fine tuning, but good enough for the demo.
diff --git a/web/gui/src/main/webapp/network.js b/web/gui/src/main/webapp/network.js
index 2af2e2b..9ac7241 100644
--- a/web/gui/src/main/webapp/network.js
+++ b/web/gui/src/main/webapp/network.js
@@ -89,9 +89,9 @@
marginLR: 3,
marginTB: 2,
port: {
- gap: 2,
- width: 12,
- height: 12
+ gap: 3,
+ width: 18,
+ height: 14
}
},
icons: {
@@ -315,6 +315,7 @@
portLabelsOn = !portLabelsOn;
var portVis = portLabelsOn ? 'visible' : 'hidden';
d3.selectAll('.port').style('visibility', portVis);
+ d3.selectAll('.portText').style('visibility', portVis);
}
function unpin() {
@@ -577,30 +578,46 @@
class: 'portLayer'
});
- var portVis = portLabelsOn ? 'visible' : 'hidden';
+ var portVis = portLabelsOn ? 'visible' : 'hidden',
+ pw = config.labels.port.width,
+ ph = config.labels.port.height;
network.link.filter('.infra').each(function(d, i) {
network.linkSrcPort.append('rect').attr({
id: 'srcPort-' + d.id,
class: 'port',
- width: 12,
- height: 12,
+ width: pw,
+ height: ph,
x: i * 20,
y: 0
})
- .style('visibility', portVis)
- .append('text').text(d.srcPort);
+ .style('visibility', portVis);
network.linkTgtPort.append('rect').attr({
id: 'tgtPort-' + d.id,
class: 'port',
- width: 12,
- height: 12,
+ width: pw,
+ height: ph,
x: i * 20,
y: 20
})
.style('visibility', portVis);
+ network.linkSrcPort.append('text').attr({
+ id: 'srcText-' + d.id,
+ class: 'portText',
+ x: i * 20,
+ y:0
+ }).text(d.srcPort)
+ .style('visibility', portVis);
+
+ network.linkTgtPort.append('text').attr({
+ id: 'tgtText-' + d.id,
+ class: 'portText',
+ x: i * 20,
+ y:20
+ }).text(d.tgtPort)
+ .style('visibility', portVis);
});
// ...............................................................
@@ -982,6 +999,15 @@
.attr('x', pxt - portHalfW)
.attr('y', pyt - portHalfH);
+ // TODO: fit label rect to size of port number.
+ d3.select('#srcText-' + d.id)
+ .attr('x', pxs - 5)
+ .attr('y', pys + 3);
+
+ d3.select('#tgtText-' + d.id)
+ .attr('x', pxt - 5)
+ .attr('y', pyt + 3);
+
});
// position each node by translating the node (group) by x,y
diff --git a/web/gui/src/main/webapp/onos.css b/web/gui/src/main/webapp/onos.css
index 15dd6b4..143f2b0 100644
--- a/web/gui/src/main/webapp/onos.css
+++ b/web/gui/src/main/webapp/onos.css
@@ -112,6 +112,14 @@
fill: white;
}
+svg g.portLayer text {
+ stroke: #888;
+ font-size: 8pt;
+ text-align: center;
+ font-weight: normal;
+ pointer-events: none;
+}
+
svg .node.device rect {
stroke-width: 1.5px;