홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Simon Hunt
Committed by Gerrit Code Review
a255a2cb 1 parent e7591e56

GUI -- Added CSS classes for primary, secondary, animated, and optical links 

 - refactored showTraffic(...) to handle the updated payload.
 - created 'traffic' scenario:: run with ... webapp/index2.html#topo,traffic?local

Change-Id: I5e3a33abcbc9c82f751165b4f52807f7cd59ef03
Inline Side-by-side
Showing 23 changed files with 434 additions and 19 deletions
......@@ -2,6 +2,7 @@
"event": "requestTraffic",
"sid": 2,
"payload": {
"ids": [ "00:00:00:00:00:01/-1", "00:00:00:00:00:02/-1" ]
"ids": [ "00:00:00:00:00:01/-1", "00:00:00:00:00:02/-1" ],
"hover": ""
}
}
......
{
"event": "addLink",
"payload": {
"id": "of:0000ffffffff0003/4-of:0000ffffffffff03/1",
"type": "direct",
"linkWidth": 2,
"src": "of:0000ffffffff0003",
"srcPort": "4",
"dst": "of:0000ffffffffff03",
"dstPort": "1",
"props" : {
"BW": "90 Gb"
}
}
}
{
"event": "addLink",
"payload": {
"id": "of:0000ffffffffff08/4-of:0000ffffffffff03/1",
"type": "direct",
"linkWidth": 2,
"src": "of:0000ffffffffff08",
"srcPort": "4",
"dst": "of:0000ffffffffff03",
"dstPort": "1",
"props" : {
"BW": "90 Gb"
}
}
}
{
"event": "addHost",
"payload": {
"id": "0E:2A:69:30:13:86/-1",
"ingress": "0E:2A:69:30:13:86/-1/0-of:0000ffffffff0003/101",
"egress": "of:0000ffffffff0003/101-0E:2A:69:30:13:86/-1/0",
"cp": {
"device": "of:0000ffffffff0003",
"port": 101
},
"labels": [
"1.2.3.4",
"0E:2A:69:30:13:86"
],
"props": {}
}
}
{
"event": "addHost",
"payload": {
"id": "0E:2A:69:30:13:88/-1",
"ingress": "0E:2A:69:30:13:88/-1/0-of:0000ffffffff0007/101",
"egress": "of:0000ffffffff0007/101-0E:2A:69:30:13:86/-1/0",
"cp": {
"device": "of:0000ffffffff0007",
"port": 101
},
"labels": [
"4.5.7.6",
"0E:2A:69:30:13:88"
],
"props": {}
}
}
{
"event": "addHost",
"payload": {
"id": "0E:2A:69:30:13:aa/-1",
"ingress": "0E:2A:69:30:13:aa/-1/0-of:0000ffffffff0008/101",
"egress": "of:0000ffffffff0008/101-0E:2A:69:30:13:aa/-1/0",
"cp": {
"device": "of:0000ffffffff0008",
"port": 101
},
"labels": [
"12.13.14.15",
"0E:2A:69:30:13:aa"
],
"props": {}
}
}
{
"event": "showTraffic",
"sid": 1,
"payload": {
"paths": [
{
"intentId": "0x4321",
"links": [
"0E:2A:69:30:13:86/-1/0-of:0000ffffffff0003/101",
"0E:2A:69:30:13:aa/-1/0-of:0000ffffffff0008/101"
],
"class": "primary"
},
{
"intentId": "0xbab3",
"links": [
"of:0000ffffffff0003/4-of:0000ffffffffff03/1",
"of:0000ffffffff0008/4-of:0000ffffffffff08/1",
"of:0000ffffffffff08/4-of:0000ffffffffff03/1"
],
"class": "primary optical"
}
]
}
}
{
"event": "showTraffic",
"sid": 1,
"payload": {
"paths": [
{
"intentId": "0x4321",
"links": [
"0E:2A:69:30:13:86/-1/0-of:0000ffffffff0003/101",
"0E:2A:69:30:13:aa/-1/0-of:0000ffffffff0008/101"
],
"class": "secondary"
},
{
"intentId": "0xbab3",
"links": [
"of:0000ffffffff0003/4-of:0000ffffffffff03/1",
"of:0000ffffffff0008/4-of:0000ffffffffff08/1",
"of:0000ffffffffff08/4-of:0000ffffffffff03/1"
],
"class": "secondary optical"
}
]
}
}
{
"event": "showTraffic",
"sid": 1,
"payload": {
"paths": [
{
"intentId": "0x4321",
"links": [
"0E:2A:69:30:13:86/-1/0-of:0000ffffffff0003/101",
"0E:2A:69:30:13:aa/-1/0-of:0000ffffffff0008/101"
],
"class": "animated"
},
{
"intentId": "0xbab3",
"links": [
"of:0000ffffffff0003/4-of:0000ffffffffff03/1",
"of:0000ffffffff0008/4-of:0000ffffffffff08/1",
"of:0000ffffffffff08/4-of:0000ffffffffff03/1"
],
"class": "animated optical"
}
]
}
}
{
"event": "showTraffic",
"sid": 1,
"payload": {
"paths": [
{
"intentId": "0x1234",
"links": [
"of:0000ffffffff0008/2-of:0000ffffffff0003/1"
],
"class": "primary"
},
{
"intentId": "0x4321",
"links": [
"of:0000ffffffff0003/9-of:0000ffffffff0007/2"
],
"class": "secondary"
},
{
"intentId": "0xbabe",
"links": [
"of:0000ffffffff0008/4-of:0000ffffffff0007/1"
],
"class": "animated"
},
{
"intentId": "0xbab1",
"links": [
"of:0000ffffffff0008/4-of:0000ffffffffff08/1"
],
"class": "primary optical"
},
{
"intentId": "0xbab2",
"links": [
"of:0000ffffffff0003/4-of:0000ffffffffff03/1"
],
"class": "secondary optical"
},
{
"intentId": "0xbab3",
"links": [
"of:0000ffffffffff08/4-of:0000ffffffffff03/1"
],
"class": "animated optical"
}
]
}
}
{
"event": "showTraffic",
"sid": 1,
"payload": {
"paths": [
]
}
}
{
"event": "addDevice",
"payload": {
"id": "of:0000ffffffff0008",
"type": "switch",
"online": true,
"labels": [
"0000ffffffff0008",
"FF:FF:FF:FF:00:08",
"sw-8"
],
"metaUi": {
"x": 734,
"y": 477
}
}
}
{
"event": "addDevice",
"payload": {
"id": "of:0000ffffffff0003",
"type": "switch",
"online": true,
"labels": [
"0000ffffffff0003",
"FF:FF:FF:FF:00:03",
"sw-3"
],
"metaUi": {
"x": 282,
"y": 503
}
}
}
{
"event": "addDevice",
"payload": {
"id": "of:0000ffffffff0007",
"type": "switch",
"online": true,
"labels": [
"0000ffffffff0007",
"FF:FF:FF:FF:00:07",
"sw-7"
],
"metaUi": {
"x": 530,
"y": 330
}
}
}
{
"event": "addDevice",
"payload": {
"id": "of:0000ffffffffff08",
"type": "roadm",
"online": true,
"labels": [
"0000ffffffffff08",
"FF:FF:FF:FF:FF:08",
"opt-8"
],
"metaUi": {
"x": 734,
"y": 577
}
}
}
{
"event": "addDevice",
"payload": {
"id": "of:0000ffffffffff03",
"type": "roadm",
"online": true,
"labels": [
"0000ffffffffff03",
"FF:FF:FF:FF:FF:03",
"opt-3"
],
"metaUi": {
"x": 282,
"y": 603
}
}
}
{
"event": "addLink",
"payload": {
"id": "of:0000ffffffff0003/9-of:0000ffffffff0007/2",
"type": "direct",
"linkWidth": 2,
"src": "of:0000ffffffff0003",
"srcPort": "9",
"dst": "of:0000ffffffff0007",
"dstPort": "2",
"props" : {
"BW": "120 Gb"
}
}
}
{
"event": "addLink",
"payload": {
"id": "of:0000ffffffff0008/2-of:0000ffffffff0003/1",
"type": "direct",
"linkWidth": 2,
"src": "of:0000ffffffff0008",
"srcPort": "2",
"dst": "of:0000ffffffff0003",
"dstPort": "1",
"props" : {
"BW": "70 Gb"
}
}
}
{
"event": "addLink",
"payload": {
"id": "of:0000ffffffff0008/4-of:0000ffffffff0007/1",
"type": "direct",
"linkWidth": 2,
"src": "of:0000ffffffff0008",
"srcPort": "4",
"dst": "of:0000ffffffff0007",
"dstPort": "1",
"props" : {
"BW": "90 Gb"
}
}
}
{
"event": "addLink",
"payload": {
"id": "of:0000ffffffff0008/4-of:0000ffffffffff08/1",
"type": "direct",
"linkWidth": 2,
"src": "of:0000ffffffff0008",
"srcPort": "4",
"dst": "of:0000ffffffffff08",
"dstPort": "1",
"props" : {
"BW": "90 Gb"
}
}
}
{
"comments": [
"Stepping through showTraffic"
],
"title": "Show Traffic Scenario",
"params": {
"lastAuto": 14
},
"description": [
"Figure out primary, secondary and animated link visualizations.",
"",
"Press 'S' to load initial events.",
"",
"Press spacebar to complete the scenario..."
]
}
......@@ -108,10 +108,33 @@
opacity: .7;
}
#topo svg .link.showPath {
stroke: #f00;
#topo svg .link.primary {
stroke: #f11;
stroke-width: 6px;
}
#topo svg .link.secondary {
stroke: rgba(255,100,100,0.5);
stroke-width: 4px;
}
#topo svg .link.animated {
stroke: #f11;
stroke-width: 10px;
stroke-dasharray: 8 8
}
#topo svg .link.primary.optical {
stroke: #74f;
stroke-width: 6px;
}
#topo svg .link.secondary.optical {
stroke: rgba(128,64,255,0.5);
stroke-width: 4px;
}
#topo svg .link.animated.optical {
stroke: #74f;
stroke-width: 10px;
stroke-dasharray: 8 8
}
/* Fly-in details pane */
......
......@@ -120,9 +120,9 @@
// key bindings
var keyDispatch = {
//M: testMe, // TODO: remove (testing only)
//S: injectStartupEvents, // TODO: remove (testing only)
//space: injectTestEvent, // TODO: remove (testing only)
M: testMe, // TODO: remove (testing only)
S: injectStartupEvents, // TODO: remove (testing only)
space: injectTestEvent, // TODO: remove (testing only)
B: toggleBg,
L: cycleLabels,
......@@ -159,8 +159,8 @@
selectOrder = [],
selections = {},
hovered = null,
antTimer = null,
highlighted = null,
viewMode = 'showAll',
portLabelsOn = false;
......@@ -503,23 +503,19 @@
}
function showTraffic(data) {
// TODO: review - making sure we are handling the payload correctly.
// TODO: handle 'class' of link: primary, secondary, animated...
fnTrace('showTraffic', data.payload.id);
var paths = data.payload.paths;
// Revert any links hilighted previously.
network.links.forEach(function (d) {
d.el.classed('showPath', false);
});
link.classed('primary secondary animated optical', false);
// Now hilight all links in the paths payload.
paths.forEach(function (d) {
var links = d.links;
links.forEach(function (d, i) {
var link = network.lookup[d];
if (link) {
link.el.classed('showPath', true);
paths.forEach(function (p) {
var cls = p.class;
p.links.forEach(function (id) {
var lnk = network.lookup[id];
if (lnk) {
lnk.el.classed(cls, true);
}
});
});
......@@ -1174,8 +1170,10 @@
_send : function(message) {
if (webSock.ws) {
webSock.ws.send(message);
} else {
} else if (config.useLiveData) {
network.view.alert('no web socket open\n\n' + message);
} else {
console.log('WS Send: ' + JSON.stringify(message));
}
}
......@@ -1536,6 +1534,8 @@
d3.select(self).classed('fixed', true);
if (config.useLiveData) {
sendUpdateMeta(d);
} else {
console.log('Moving node ' + d.id + ' to [' + d.x + ',' + d.y + ']');
}
}
......@@ -1599,6 +1599,21 @@
// Load map data asynchronously; complete startup after that..
loadGeoJsonData();
// start the and timer
var dashIdx = 0;
antTimer = setInterval(function () {
// TODO: figure out how to choose Src-->Dst and Dst-->Src, per link
dashIdx = dashIdx === 0 ? 14 : dashIdx - 2;
d3.selectAll('.animated').style('stroke-dashoffset', dashIdx);
}, 35);
}
function unload(view, ctx, flags) {
if (antTimer) {
clearInterval(antTimer);
antTimer = null;
}
}
// TODO: move these to config/state portion of script
......@@ -1687,6 +1702,7 @@
onos.ui.addView('topo', {
preload: preload,
load: load,
unload: unload,
resize: resize
});
......