diff --git a/web/gui/src/main/webapp/json/ev/simple/ev_14_onos.json b/web/gui/src/main/webapp/json/ev/simple/ev_14_onos.json new file mode 100644 index 0000000000..9df9d6137f --- /dev/null +++ b/web/gui/src/main/webapp/json/ev/simple/ev_14_onos.json @@ -0,0 +1,22 @@ +{ + "event": "removeDevice", + "payload": { + "id": "of:0000ffffffff0003", + "type": "switch", + "online": false, + "location": { + "type": "latlng", + "lat": 40.7127, + "lng": -74.0059 + }, + "labels": [ + "", + "sw-3", + "0000ffffffff0003" + ], + "metaUi": { + "x": 800, + "y": 280 + } + } +} diff --git a/web/gui/src/main/webapp/json/ev/simple/ev_5_onos.json b/web/gui/src/main/webapp/json/ev/simple/ev_5_onos.json index 6f390b5ac1..755255a2e0 100644 --- a/web/gui/src/main/webapp/json/ev/simple/ev_5_onos.json +++ b/web/gui/src/main/webapp/json/ev/simple/ev_5_onos.json @@ -3,6 +3,7 @@ "payload": { "id": "of:0000ffffffff0003/21-of:0000ffffffff0008/20", "type": "direct", + "online": true, "linkWidth": 2, "src": "of:0000ffffffff0003", "srcPort": "21", diff --git a/web/gui/src/main/webapp/json/ev/simple/scenario.json b/web/gui/src/main/webapp/json/ev/simple/scenario.json index 4f2ae60838..524377c808 100644 --- a/web/gui/src/main/webapp/json/ev/simple/scenario.json +++ b/web/gui/src/main/webapp/json/ev/simple/scenario.json @@ -24,6 +24,7 @@ "10. update link (increase width, update props)", "11. update link (reduce width, update props)", "12. remove link", - "13. remove host (10.0.0.17)" + "13. remove host (10.0.0.17)", + "13. remove device [3]" ] } diff --git a/web/gui/src/main/webapp/topo.js b/web/gui/src/main/webapp/topo.js index 5b46e3d6d8..1620048aed 100644 --- a/web/gui/src/main/webapp/topo.js +++ b/web/gui/src/main/webapp/topo.js @@ -145,6 +145,7 @@ D: [toggleDetails, 'Disable / enable details pane'], B: [toggleBg, 'Toggle background image'], H: [toggleHosts, 'Toggle host visibility'], + M: [toggleOffline, 'Toggle offline visibility'], L: [cycleLabels, 'Cycle device labels'], P: togglePorts, U: [unpin, 'Unpin node (hover mouse over)'], @@ -203,6 +204,7 @@ cat7 = d3u.cat7(), colorAffinity = false, showHosts = false, + showOffline = true, useDetails = true, haveDetails = false; @@ -330,6 +332,12 @@ flash('Hosts ' + visVal(showHosts)); } + function toggleOffline() { + showOffline = !showOffline; + updateOfflineVisibility(); + flash('Offline devices ' + visVal(showOffline)); + } + function cycleLabels() { deviceLabelIndex = (deviceLabelIndex === 2) ? 0 : deviceLabelIndex + 1; @@ -711,13 +719,20 @@ evTrace(data); var device = data.payload, id = device.id, - d = network.lookup[id]; + d = network.lookup[id], + wasOnline; + if (d) { + wasOnline = d.online; $.extend(d, device); if (positionNode(d, true)) { sendUpdateMeta(d, true); } updateNodes(); + if (wasOnline !== d.online) { + findAttachedLinks(d.id).forEach(restyleLinkElement); + updateOfflineVisibility(d); + } } else { logicError('updateDevice lookup fail. ID = "' + id + '"'); } @@ -742,7 +757,10 @@ d = network.lookup[id]; if (d) { $.extend(d, host); - updateHostState(d); + if (positionNode(d, true)) { + sendUpdateMeta(d, true); + } + updateNodes(d); } else { logicError('updateHost lookup fail. ID = "' + id + '"'); } @@ -1339,8 +1357,10 @@ class: 'link', type: function () { return 'hostLink'; }, - // TODO: ideally, we should see if our edge switch is online... - online: function () { return true; }, + online: function () { + // hostlink target is edge switch + return lnk.target.online; + }, linkWidth: function () { return 1; } }); return lnk; @@ -1366,8 +1386,9 @@ }, online: function () { var s = lnk.fromSource, - t = lnk.fromTarget; - return (s && s.online) || (t && t.online); + t = lnk.fromTarget, + both = lnk.source.online && lnk.target.online; + return both && ((s && s.online) || (t && t.online)); }, linkWidth: function () { var s = lnk.fromSource, @@ -1435,12 +1456,12 @@ // operate on exiting links: link.exit() - .attr('stroke-dasharray', '3, 3') + .attr('stroke-dasharray', '3 3') .style('opacity', 0.5) .transition() .duration(1500) .attr({ - 'stroke-dasharray': '3, 12', + 'stroke-dasharray': '3 12', stroke: config.topo.linkOutColor, 'stroke-width': config.topo.linkOutWidth }) @@ -1575,8 +1596,6 @@ node.fixed = true; node.px = node.x = x; node.py = node.y = y; - //node.px = x; - //node.py = y; return; } @@ -1586,8 +1605,6 @@ node.fixed = true; node.px = node.x = coord[0]; node.py = node.y = coord[1]; - //node.x = coord[0]; - //node.y = coord[1]; return true; } @@ -1726,15 +1743,8 @@ } function updateHostLabel(d) { - var label = hostLabel(d), - host = d.el; - - host.select('text').text(label); - } - - // FIXME : fold this into updateNodes. - function updateHostState(hostData) { - updateHostLabel(hostData); + var label = trimLabel(hostLabel(d)); + d.el.select('text').text(label); } function updateHostVisibility() { @@ -1743,6 +1753,53 @@ linkG.selectAll('.hostLink').style('visibility', v); } + function findOfflineNodes() { + var a = []; + network.nodes.forEach(function (d) { + if (d.class === 'device' && !d.online) { + a.push(d); + } + }); + return a; + } + + function updateOfflineVisibility(dev) { + var so = showOffline, + sh = showHosts, + vb = 'visibility', + v, off, al, ah, db, b; + + function updAtt(show) { + al.forEach(function (d) { + b = show && ((d.type() !== 'hostLink') || sh); + d.el.style(vb, visVal(b)); + }); + ah.forEach(function (d) { + b = show && sh; + d.el.style(vb, visVal(b)); + }); + } + + if (dev) { + // updating a specific device that just toggled off/on-line + db = dev.online || so; + dev.el.style(vb, visVal(db)); + al = findAttachedLinks(dev.id); + ah = findAttachedHosts(dev.id); + updAtt(db); + } else { + // updating all offline devices + v = visVal(so); + off = findOfflineNodes(); + off.forEach(function (d) { + d.el.style(vb, v); + al = findAttachedLinks(d.id); + ah = findAttachedHosts(d.id); + updAtt(so); + }); + } + } + function nodeMouseOver(d) { hovered = d; requestTrafficForMode(); @@ -1779,8 +1836,8 @@ }); node.filter('.host').each(function (d) { - var node = d.el; - // TODO: appropriate update of host visuals + updateHostLabel(d); + positionNode(d, true); }); // operate on entering nodes: