first cut at edges. not quite working yet.
diff --git a/web/ons-demo/css/layout.default.css b/web/ons-demo/css/layout.default.css
index 647763c..b9a5ebe 100644
--- a/web/ons-demo/css/layout.default.css
+++ b/web/ons-demo/css/layout.default.css
@@ -37,12 +37,34 @@
}
/* tmp */
-#controllers, #selectedFlows {
+#selectedFlows {
display: -webkit-box;
-webkit-box-align: center;
-webkit-box-pack: center;
}
+#controllers {
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+}
+
+#controllers .header {
+ -webkit-box-pack: center;
+ border-bottom: 1px solid white;
+}
+
+#controllerList {
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ -webkit-box-flex: 1.0;
+ overflow: scroll;
+}
+
+.controller {
+ margin: .25em;
+ background-color: blue;
+}
+
#svg-container {
position: absolute;
top: 0px;
diff --git a/web/ons-demo/css/skin.default.css b/web/ons-demo/css/skin.default.css
index f6f125d..951fbb1 100644
--- a/web/ons-demo/css/skin.default.css
+++ b/web/ons-demo/css/skin.default.css
@@ -36,37 +36,45 @@
height: 50px;
}
-#left .header {
- background-color: lightgreen;
-}
#right .header {
- background-color: lightblue;
font-size: 12px;
padding-right: .25em;
-webkit-box-sizing: border-box;
}
-#controllers {
- background-color: darkgreen;
+#controllers, #selectedFlows {
+ border-top: 1px solid white;
}
-#topology {
- background-color: blue;
+#selectedFlows {
+ border-bottom: 1px solid white;
}
+#controllers {
+ border-right: 1px solid white;
+}
+
+
#logo {
height: 50px;
}
.edge {
- fill: lightgray;
stroke: black;
stroke-width: 1.5px;
}
+path {
+ stroke: white;
+ stroke-width: 1px;
+}
+
.aggregation {
- fill: darkgrey;
stroke: black;
stroke-width: 2px;
}
+
+#traceButton {
+ visibility: hidden
+}
diff --git a/web/ons-demo/data/wm_core_topology_links_json.json b/web/ons-demo/data/wm_core_topology_links_json.json
index 81edcf7..3fd7bf0 100644
--- a/web/ons-demo/data/wm_core_topology_links_json.json
+++ b/web/ons-demo/data/wm_core_topology_links_json.json
@@ -211,7 +211,7 @@
},
{
"dst-port": 5,
- "dst-switch": "00:00:00:00:00:0d:00:d2",
+ "dst-switch": "00:00:00:00:ba:5e:ba:11",
"src-port": 21,
"src-switch": "00:00:00:00:00:00:02:00"
},
@@ -325,15 +325,15 @@
},
{
"dst-port": 3,
- "dst-switch": "00:00:00:00:00:0d:00:d2",
+ "dst-switch": "00:00:00:00:ba:5e:ba:11",
"src-port": 2,
- "src-switch": "00:00:00:00:00:0d:00:d5"
+ "src-switch": "00:00:00:00:ba:5e:ba:13"
},
{
"dst-port": 3,
- "dst-switch": "00:00:00:00:00:0d:00:d6",
+ "dst-switch": "00:00:20:4e:7f:51:8a:35",
"src-port": 3,
- "src-switch": "00:00:00:00:00:0d:00:d5"
+ "src-switch": "00:00:00:00:ba:5e:ba:13"
},
{
"dst-port": 45,
@@ -361,21 +361,21 @@
},
{
"dst-port": 3,
- "dst-switch": "00:00:00:00:00:0d:00:d1",
+ "dst-switch": "00:00:00:16:97:08:9a:46",
"src-port": 2,
- "src-switch": "00:00:00:00:00:0d:00:d3"
+ "src-switch": "00:00:00:08:a2:08:f9:01"
},
{
"dst-port": 3,
- "dst-switch": "00:00:00:00:00:0d:00:d4",
+ "dst-switch": "00:00:00:00:00:00:ba:12",
"src-port": 3,
- "src-switch": "00:00:00:00:00:0d:00:d3"
+ "src-switch": "00:00:00:08:a2:08:f9:01"
},
{
"dst-port": 21,
"dst-switch": "00:00:00:00:00:00:03:00",
"src-port": 4,
- "src-switch": "00:00:00:00:00:0d:00:d3"
+ "src-switch": "00:00:00:08:a2:08:f9:01"
},
{
"dst-port": 6,
@@ -403,15 +403,15 @@
},
{
"dst-port": 4,
- "dst-switch": "00:00:00:00:00:0d:00:d4",
+ "dst-switch": "00:00:00:00:00:00:ba:12",
"src-port": 2,
- "src-switch": "00:00:00:00:00:0d:00:d6"
+ "src-switch": "00:00:20:4e:7f:51:8a:35"
},
{
"dst-port": 3,
- "dst-switch": "00:00:00:00:00:0d:00:d5",
+ "dst-switch": "00:00:00:00:ba:5e:ba:13",
"src-port": 3,
- "src-switch": "00:00:00:00:00:0d:00:d6"
+ "src-switch": "00:00:20:4e:7f:51:8a:35"
},
{
"dst-port": 4,
@@ -529,21 +529,21 @@
},
{
"dst-port": 4,
- "dst-switch": "00:00:00:00:00:0d:00:d2",
+ "dst-switch": "00:00:00:00:ba:5e:ba:11",
"src-port": 2,
- "src-switch": "00:00:00:00:00:0d:00:d4"
+ "src-switch": "00:00:00:00:00:00:ba:12"
},
{
"dst-port": 3,
- "dst-switch": "00:00:00:00:00:0d:00:d3",
+ "dst-switch": "00:00:00:08:a2:08:f9:01",
"src-port": 3,
- "src-switch": "00:00:00:00:00:0d:00:d4"
+ "src-switch": "00:00:00:00:00:00:ba:12"
},
{
"dst-port": 2,
- "dst-switch": "00:00:00:00:00:0d:00:d6",
+ "dst-switch": "00:00:20:4e:7f:51:8a:35",
"src-port": 4,
- "src-switch": "00:00:00:00:00:0d:00:d4"
+ "src-switch": "00:00:00:00:00:00:ba:12"
},
{
"dst-port": 2,
@@ -643,7 +643,7 @@
},
{
"dst-port": 4,
- "dst-switch": "00:00:00:00:00:0d:00:d3",
+ "dst-switch": "00:00:00:08:a2:08:f9:01",
"src-port": 21,
"src-switch": "00:00:00:00:00:00:03:00"
},
@@ -889,7 +889,7 @@
},
{
"dst-port": 4,
- "dst-switch": "00:00:00:00:00:0d:00:d1",
+ "dst-switch": "00:00:00:16:97:08:9a:46",
"src-port": 51,
"src-switch": "00:00:00:00:00:00:01:00"
},
@@ -1069,21 +1069,21 @@
},
{
"dst-port": 2,
- "dst-switch": "00:00:00:00:00:0d:00:d2",
+ "dst-switch": "00:00:00:00:ba:5e:ba:11",
"src-port": 2,
- "src-switch": "00:00:00:00:00:0d:00:d1"
+ "src-switch": "00:00:00:16:97:08:9a:46"
},
{
"dst-port": 2,
- "dst-switch": "00:00:00:00:00:0d:00:d3",
+ "dst-switch": "00:00:00:08:a2:08:f9:01",
"src-port": 3,
- "src-switch": "00:00:00:00:00:0d:00:d1"
+ "src-switch": "00:00:00:16:97:08:9a:46"
},
{
"dst-port": 51,
"dst-switch": "00:00:00:00:00:00:01:00",
"src-port": 4,
- "src-switch": "00:00:00:00:00:0d:00:d1"
+ "src-switch": "00:00:00:16:97:08:9a:46"
},
{
"dst-port": 50,
@@ -1125,25 +1125,25 @@
"dst-port": 21,
"dst-switch": "00:00:00:00:00:00:02:00",
"src-port": 5,
- "src-switch": "00:00:00:00:00:0d:00:d2"
+ "src-switch": "00:00:00:00:ba:5e:ba:11"
},
{
"dst-port": 2,
- "dst-switch": "00:00:00:00:00:0d:00:d1",
+ "dst-switch": "00:00:00:16:97:08:9a:46",
"src-port": 2,
- "src-switch": "00:00:00:00:00:0d:00:d2"
+ "src-switch": "00:00:00:00:ba:5e:ba:11"
},
{
"dst-port": 2,
- "dst-switch": "00:00:00:00:00:0d:00:d5",
+ "dst-switch": "00:00:00:00:ba:5e:ba:13",
"src-port": 3,
- "src-switch": "00:00:00:00:00:0d:00:d2"
+ "src-switch": "00:00:00:00:ba:5e:ba:11"
},
{
"dst-port": 2,
- "dst-switch": "00:00:00:00:00:0d:00:d4",
+ "dst-switch": "00:00:00:00:00:00:ba:12",
"src-port": 4,
- "src-switch": "00:00:00:00:00:0d:00:d2"
+ "src-switch": "00:00:00:00:ba:5e:ba:11"
},
{
"dst-port": 42,
diff --git a/web/ons-demo/data/wm_core_topology_switches_all_json.json b/web/ons-demo/data/wm_core_topology_switches_all_json.json
index d527a3b..cf23703 100644
--- a/web/ons-demo/data/wm_core_topology_switches_all_json.json
+++ b/web/ons-demo/data/wm_core_topology_switches_all_json.json
@@ -744,7 +744,7 @@
"state": "ACTIVE"
},
{
- "dpid": "00:00:00:00:00:0d:00:d5",
+ "dpid": "00:00:00:00:ba:5e:ba:13",
"ports": [
{
"desc": "swd5-eth2",
@@ -840,7 +840,7 @@
"state": "ACTIVE"
},
{
- "dpid": "00:00:00:00:00:0d:00:d3",
+ "dpid": "00:00:00:08:a2:08:f9:01",
"ports": [
{
"desc": "swd3-eth2",
@@ -942,7 +942,7 @@
"state": "ACTIVE"
},
{
- "dpid": "00:00:00:00:00:0d:00:d6",
+ "dpid": "00:00:20:4e:7f:51:8a:35",
"ports": [
{
"desc": "swd6-eth2",
@@ -1308,7 +1308,7 @@
"state": "ACTIVE"
},
{
- "dpid": "00:00:00:00:00:0d:00:d4",
+ "dpid": "00:00:00:00:00:00:ba:12",
"ports": [
{
"desc": "swd4-eth2",
@@ -2088,7 +2088,7 @@
"state": "ACTIVE"
},
{
- "dpid": "00:00:00:00:00:0d:00:d1",
+ "dpid": "00:00:00:16:97:08:9a:46",
"ports": [
{
"desc": "swd1-eth2",
@@ -2226,7 +2226,7 @@
"state": "ACTIVE"
},
{
- "dpid": "00:00:00:00:00:0d:00:d2",
+ "dpid": "00:00:00:00:ba:5e:ba:11",
"ports": [
{
"desc": "tapd1",
diff --git a/web/ons-demo/data/wm_flow_getall_json.json b/web/ons-demo/data/wm_flow_getall_json.json
index 39e6af4..95b4fb0 100644
--- a/web/ons-demo/data/wm_flow_getall_json.json
+++ b/web/ons-demo/data/wm_flow_getall_json.json
@@ -727,7 +727,7 @@
},
{
"dpid": {
- "value": "00:00:00:00:00:0d:00:d3"
+ "value": "00:00:00:08:a2:08:f9:01"
},
"flowEntryActions": [
{
@@ -792,7 +792,7 @@
},
{
"dpid": {
- "value": "00:00:00:00:00:0d:00:d1"
+ "value": "00:00:00:16:97:08:9a:46"
},
"flowEntryActions": [
{
@@ -1730,7 +1730,7 @@
},
{
"dpid": {
- "value": "00:00:00:00:00:0d:00:d1"
+ "value": "00:00:00:16:97:08:9a:46"
},
"flowEntryActions": [
{
@@ -1795,7 +1795,7 @@
},
{
"dpid": {
- "value": "00:00:00:00:00:0d:00:d3"
+ "value": "00:00:00:08:a2:08:f9:01"
},
"flowEntryActions": [
{
@@ -2733,7 +2733,7 @@
},
{
"dpid": {
- "value": "00:00:00:00:00:0d:00:d1"
+ "value": "00:00:00:16:97:08:9a:46"
},
"flowEntryActions": [
{
@@ -2798,7 +2798,7 @@
},
{
"dpid": {
- "value": "00:00:00:00:00:0d:00:d3"
+ "value": "00:00:00:08:a2:08:f9:01"
},
"flowEntryActions": [
{
@@ -3736,7 +3736,7 @@
},
{
"dpid": {
- "value": "00:00:00:00:00:0d:00:d3"
+ "value": "00:00:00:08:a2:08:f9:01"
},
"flowEntryActions": [
{
@@ -3801,7 +3801,7 @@
},
{
"dpid": {
- "value": "00:00:00:00:00:0d:00:d1"
+ "value": "00:00:00:16:97:08:9a:46"
},
"flowEntryActions": [
{
diff --git a/web/ons-demo/data/wm_registry_switches_json.json b/web/ons-demo/data/wm_registry_switches_json.json
index 6ae9a63..da2e5aa 100644
--- a/web/ons-demo/data/wm_registry_switches_json.json
+++ b/web/ons-demo/data/wm_registry_switches_json.json
@@ -989,32 +989,32 @@
"controllerId": "onos10vpc"
}
],
- "00:00:00:00:00:0d:00:d1": [
+ "00:00:00:16:97:08:9a:46": [
{
"controllerId": "onos12vpc"
}
],
- "00:00:00:00:00:0d:00:d2": [
+ "00:00:00:00:ba:5e:ba:11": [
{
"controllerId": "onos12vpc"
}
],
- "00:00:00:00:00:0d:00:d3": [
+ "00:00:00:08:a2:08:f9:01": [
{
"controllerId": "onos12vpc"
}
],
- "00:00:00:00:00:0d:00:d4": [
+ "00:00:00:00:00:00:ba:12": [
{
"controllerId": "onos12vpc"
}
],
- "00:00:00:00:00:0d:00:d5": [
+ "00:00:00:00:ba:5e:ba:13": [
{
"controllerId": "onos12vpc"
}
],
- "00:00:00:00:00:0d:00:d6": [
+ "00:00:20:4e:7f:51:8a:35": [
{
"controllerId": "onos12vpc"
}
diff --git a/web/ons-demo/index.html b/web/ons-demo/index.html
index 532992f..9016b63 100644
--- a/web/ons-demo/index.html
+++ b/web/ons-demo/index.html
@@ -14,7 +14,10 @@
<div class='header'>
<img id='logo' src='assets/logo.png'></img>
</div>
- <div id='controllers'>Controllers</div>
+ <div id='controllers'>
+ <div class='header'>Controllers</div>
+ <div id='controllerList'></div>
+ </div>
</div>
<div id='right'>
diff --git a/web/ons-demo/js/app.js b/web/ons-demo/js/app.js
index e578ba8..ce5752c 100644
--- a/web/ons-demo/js/app.js
+++ b/web/ons-demo/js/app.js
@@ -1,11 +1,33 @@
/*global d3*/
+
+var colors = [
+ '#EC0033',
+ '#FFBA00',
+ '#3714B0',
+ '#B12C49',
+ '#BF9830',
+ '#402C84',
+ '#990021',
+ '#A67900',
+ '#F53D65',
+ '#1F0772',
+ '#F56E8B',
+ '#FFCB40',
+ '#6949D7',
+ '#FFD973'
+]
+
+var controllerColorMap = {};
+
+
+
function createTopologyView() {
- return d3.select('#svg-container').append('svg:svg').attr('viewBox', '0 0 1000 1000').attr('preserveAspectRatio', 'none').
+ return d3.select('#svg-container').append('svg:svg').append('svg:svg').attr('id', 'viewBox').attr('viewBox', '0 0 1000 1000').attr('preserveAspectRatio', 'none').
attr('id', 'viewbox').append('svg:g').attr('transform', 'translate(500 500)');
}
-function drawHeader(model) {
+function updateHeader(model) {
d3.select('#lastUpdate').text(model.timestamp);
d3.select('#activeSwitches').text(model.edgeSwitches.length + model.aggregationSwitches.length + model.coreSwitches.length);
d3.select('#activeFlows').text(model.flows.length);
@@ -15,21 +37,22 @@
return angle * (Math.PI / 180);
}
-function drawTopology(svg, model) {
+function updateTopology(svg, model) {
+ // DRAW THE NODES
var rings = [{
radius: 3,
width: 4,
switches: model.edgeSwitches,
className: 'edge'
}, {
- radius: 1.5,
- width: 32,
+ radius: 2.25,
+ width: 8,
switches: model.aggregationSwitches,
className: 'aggregation'
}, {
- radius: 1,
- width: 32,
+ radius: .75,
+ width: 16,
switches: model.coreSwitches,
className: 'core'
}];
@@ -47,7 +70,7 @@
}))
.enter().append("svg:g")
.attr("id", function (_, i) {
- return data.className + i;
+ return data.switches[i].dpid;
})
.attr("transform", function(_, i) {
return "rotate(" + i * k + ")translate(" + data.radius * 150 + ")rotate(" + (-i * k) + ")";
@@ -55,7 +78,7 @@
.append("svg:circle")
.attr('class', data.className)
.attr("transform", function(_, i) {
- var m = document.querySelector('svg').getTransformToElement().inverse();
+ var m = document.querySelector('#viewbox').getTransformToElement().inverse();
if (data.scale) {
m = m.scale(data.scale);
}
@@ -63,9 +86,10 @@
})
.attr("x", -data.width / 2)
.attr("y", -data.width / 2)
- // .attr("width", data.width)
- // .attr("height", data.width)
- .attr("r", data.width)
+ .attr("r", data.width)
+ .attr("fill", function (_, i) {
+ return controllerColorMap[data.switches[i].controller]
+ })
}
var ring = svg.selectAll("g")
@@ -74,37 +98,73 @@
.attr("class", "ring")
.each(ringEnter);
- function zoom(d, i) {
- model.edgeSwitches.forEach(function (s) {
- s.scale = 1;
- });
- d.scale = 2;
-
+ function zoom(data, index) {
svg.selectAll('.edge').data(model.edgeSwitches).transition().duration(100)
- // .attr("transform", function(data, i) {
- // var m = document.querySelector('svg').getTransformToElement().inverse();
- // m = m.scale(data.scale);
- // return "matrix( " + m.a + " " + m.b + " " + m.c + " " + m.d + " " + m.e + " " + m.f + " )";
- // })
.attr("r", function (data, i) {
- return rings[0].width * data.scale;
+ return rings[0].width * (index == i ? 2 : 1);
})
}
svg.selectAll('.edge').on('mouseover', zoom);
svg.selectAll('.edge').on('mousedown', zoom);
+
+ // DRAW THE LINKS
+ var line = d3.svg.line()
+ .x(function(d) {
+ return d.x;
+ })
+ .y(function(d) {
+ return d.y;
+ })
+ .interpolate("basis");
+
+ d3.select('svg').selectAll('path').data(model.links).enter().append("svg:path").attr("d", function (d) {
+ var src = d3.select(document.getElementById(d['src-switch']));
+ var dst = d3.select(document.getElementById(d['dst-switch']));
+
+ var srcPt = document.querySelector('svg').createSVGPoint();
+ srcPt.x = src.attr('x');
+ srcPt.y = src.attr('y');
+
+ var dstPt = document.querySelector('svg').createSVGPoint();
+ dstPt.x = dst.attr('x');
+ dstPt.y = dst.attr('y');
+
+ return line([srcPt.matrixTransform(src[0][0].getCTM()), dstPt.matrixTransform(dst[0][0].getCTM())]);
+ });
+}
+
+function updateControllers(model) {
+ var controllers = d3.select('#controllerList').selectAll('.controller').data(model.controllers);
+ controllers.enter().append('div').attr('class', 'controller')
+ .attr('style', function (d) {
+ var color = controllerColorMap[d];
+ if (!color) {
+ color = controllerColorMap[d] = colors.pop();
+ }
+ return 'background-color:' + color;
+ });
+ controllers.text(function (d) {
+ return d;
+ });
+ controllers.exit().remove();
+
+ controllers.on('click', function (data, index) {
+
+ });
}
function sync(svg) {
updateModel(function (model) {
- drawHeader(model);
- drawTopology(svg, model);
+ updateHeader(model);
+ updateControllers(model);
+ updateTopology(svg, model);
// do it again in 1s
setTimeout(function () {
sync(svg)
- }, 5000);
+ }, 1000);
});
}
diff --git a/web/ons-demo/js/model.js b/web/ons-demo/js/model.js
index 3a19190..e16565c 100644
--- a/web/ons-demo/js/model.js
+++ b/web/ons-demo/js/model.js
@@ -5,7 +5,9 @@
edgeSwitches: [],
aggregationSwitches: [],
coreSwitches: [],
- flows: results.flows
+ flows: results.flows,
+ controllers: results.controllers,
+ links: results.links
}
@@ -21,6 +23,8 @@
});
results.switches.forEach(function (s) {
+ s.controller = results.mapping[s.dpid][0].controllerId
+
if (coreSwitchDPIDs[s.dpid]) {
model.coreSwitches.push(s);
} else if (aggregationSwitchDPIDs[s.dpid]) {