6/4/2014 Making a topology graph with OpenDaylight REST API, Python, and Javascript | My Notes

http://fredhsu.wordpress.com/2013/06/04/making-a-topology-graph-with-opendaylight-rest-api-python-and-javascript/ 1/9
My Notes
Notes on stuff I'm interested in: computer science,
networking, OpenFlow, Open Stack

Making a topology graph with
OpenDaylight REST API, Python,
and Javascript
The controller as it currently stands already has a nice topology view of
the network, but I thought it would be a good exercise to try and make
a web page showing the topology using the API. To do this Ive written
a short Python script leveraging the NetworkX
(http://networkx.github.io/) library (which will later allow me to do
things like use Dijkstras algorithm to find the shortest path between
two links), D3.js (http://d3js.org/) for visualization, and the REST API
from the controller.
First I grabbed all the topology data from the controller. This was just a
few simple API calls, followed by some stuff to parse through the JSON
data:
6/4/2014 Making a topology graph with OpenDaylight REST API, Python, and Javascript | My Notes
http://fredhsu.wordpress.com/2013/06/04/making-a-topology-graph-with-opendaylight-rest-api-python-and-javascript/ 2/9
baseUrl = 'http://localhost:8080/controller/nb/v2/'
containerName = 'default/'
h = httplib2.Http(".cache")
h.add_credentials('admin', 'admin')
# Get all the edges/links
resp, content = h.request(baseUrl + 'topology/' + containerName, "GET")
edgeProperties = json.loads(content)
odlEdges = edgeProperties['edgeProperties']
# Get all the nodes/switches
resp, content = h.request(baseUrl + 'switchmanager/' + containerName + 'nodes/', "GET")
nodeProperties = json.loads(content)
odlNodes = nodeProperties['nodeProperties']
Youll see we grabbed a list of all the edges (links) and all the nodes
(switches). The edges are given in an array called edgeProperties. I take
that array and assign it to odlEdges. Here is an example of an edge
object:
6/4/2014 Making a topology graph with OpenDaylight REST API, Python, and Javascript | My Notes
http://fredhsu.wordpress.com/2013/06/04/making-a-topology-graph-with-opendaylight-rest-api-python-and-javascript/ 3/9
{
"edge": {
"tailNodeConnector": {
"node": {
"@id": "00:00:00:00:00:00:00:06",
"@type": "OF"
},
"@id": "3",
"@type": "OF"
},
"headNodeConnector": {
"node": {
"@id": "00:00:00:00:00:00:00:05",
"@type": "OF"
},
"@id": "1",
"@type": "OF"
}
},
"properties": {
"timeStamp": {
"timestamp": "1370292151090",
"timestampName": "creation"
},
"state": {
"stateValue": "1"
},
"config": {
"configValue": "1"
},
"name": {
"nameValue": "s5-eth1"
},
"bandwidth": {
"bandwidthValue": "10000000000"
}
}
}
Youll see that an edge has a head node, tail node, and the associated
ports. This implies that there are two edges for every link, one in each
direction.
6/4/2014 Making a topology graph with OpenDaylight REST API, Python, and Javascript | My Notes
http://fredhsu.wordpress.com/2013/06/04/making-a-topology-graph-with-opendaylight-rest-api-python-and-javascript/ 4/9
I also get an array Node objects called nodeProperties. The last line of the
above code takes that array and assigns it to odlNodes, here is an
example node:
{
"node": {
"@id": "00:00:00:00:00:00:00:07",
"@type": "OF"
},
"properties": {
"macAddress": {
"nodeMacAddress": "AAAAAAAH",
"controllerMacAddress": "aKhtCMic"
},
"tables": {
"tablesValue": "-1"
},
"timeStamp": {
"timestamp": "1370292150118",
"timestampName": "connectedSince"
},
"capabilities": {
"capabilitiesValue": "199"
},
"actions": {
"actionsValue": "4095"
},
"property": null,
"buffers": {
"buffersValue": "256"
}
}
}
Next I take all those nodes/edges, and send them to NetworkX in a
simpler format with just the info that I need:
6/4/2014 Making a topology graph with OpenDaylight REST API, Python, and Javascript | My Notes
http://fredhsu.wordpress.com/2013/06/04/making-a-topology-graph-with-opendaylight-rest-api-python-and-javascript/ 5/9
# Put nodes and edges into a graph
graph = nx.Graph()
for node in odlNodes:
graph.add_node(node['node']['@id'])
for edge in odlEdges:
e = (edge['edge']['headNodeConnector']['node']['@id'], edge['edge']['tailNodeConnector']['node']['@id'])
graph.add_edge(*e)
Im not really making much use of NetworkX in this example, but one
thing I can do is export this simplified graph to a number of different
graph formats, or plot the graph. Since I wanted to try and make a web
app, I chose to dump it as JSON, then send it over to D3.js for graphing.
d = json_graph.node_link_data(graph)
json.dump(d, open('topo.json','w'))
print('Wrote node-link JSON data')
Here is what the output file ends up looking like:
{"directed": false, "graph": [], "nodes": [{"id": "00:00:00:00:00:00:00:01"}, {"id": "00:00:00:00:00:00:00:03"}, {"id": "00:00:00:00:00:00:00:02"}, {"id": "00:00:00:00:00:00:00:05"}, {"id": "00:00:00:00:00:00:00:04"}, {"id": "00:00:00:00:00:00:00:07"}, {"id": "00:00:00:00:00:00:00:06"}], "links": [{"source": 0, "target": 2}, {"source": 0, "target": 3}, {"source": 1, "target": 2}, {"source": 2, "target": 4}, {"source": 3, "target": 5}, {"source": 3, "target": 6}], "multigraph": false}
I decided to leave the graph as undirected to just show a single link
between the nodes. Now I can write some Javacript to graph everything
with D3.js. Im using a force-directed
(http://en.wikipedia.org/wiki/Force-directed_graph_drawing) algorithm
to lay everything out:
1
2
3
4
5
6
7
8
var w = 400,
h = 400,
fill = d3.scale.category20();

var svg = d3.select("#chart")
.append("svg:svg")
.attr("width", w)
.attr("height", h);
6/4/2014 Making a topology graph with OpenDaylight REST API, Python, and Javascript | My Notes
http://fredhsu.wordpress.com/2013/06/04/making-a-topology-graph-with-opendaylight-rest-api-python-and-javascript/ 6/9
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

d3.json("topo.json", function(json) {
var topo = d3.layout.force()
.charge(-300)
.linkDistance(100)
.nodes(json.nodes)
.links(json.links)
.size([w, h])
.start();

var link = svg.append("svg:g").selectAll("line.link")
.data(json.links)
.enter().append("svg:line")
.attr("class", "link")
.style("stroke-width", function(d) { return Math.sqrt(d.value); })
.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });

var node = svg.append("svg:g").selectAll("circle.node")
.data(json.nodes)
.enter().append("svg:circle")
.attr("class", "node")
.attr("r", 15)
.style("fill", function(d) { return fill(d.group); })
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.call(topo.drag);

var text = svg.append("svg:g").selectAll("g")
.data(topo.nodes())
.enter().append("svg:g");

text.append("svg:text")
.text(function(d) { return d.id; });
//.attr("x", function(d) { return d.x; })
//.attr("y", function(d) { return d.y; })

svg.style("opacity", 1e-6)
.transition()
.duration(1000)
.style("opacity", 1);

topo.on("tick", function() {
link.attr("x1", function(d) { return d.source.x; })
6/4/2014 Making a topology graph with OpenDaylight REST API, Python, and Javascript | My Notes
http://fredhsu.wordpress.com/2013/06/04/making-a-topology-graph-with-opendaylight-rest-api-python-and-javascript/ 7/9
54
55
56
57
58
59
60
61
62
63
64
65
66
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });

//text.attr("x", function(d) { return d.x; })
//.attr("y", function(d) { return d.y; });
text.attr("transform", function(d) { return "translate(" + d.x + "," +

node.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
});
});
view raw topo.js hosted with by GitHub
Now we can wrap it up in HTML and see our graph.
(http://fredhsu.files.wordpress.com/2013/06/screen-shot-2013-06-03-at-1-
42-57-pm.png)
This ended up being a pretty easy one, but it did help familiarize me
with how the topology API works. You can find all the code here:
https://github.com/fredhsu/odl-scripts/tree/master/python/topo
(https://github.com/fredhsu/odl-scripts/tree/master/python/topo)
6/4/2014 Making a topology graph with OpenDaylight REST API, Python, and Javascript | My Notes
http://fredhsu.wordpress.com/2013/06/04/making-a-topology-graph-with-opendaylight-rest-api-python-and-javascript/ 8/9
You May Like
1.
Mustang Wanted Multitasks: Daredevil
Releases New Video... a month ago
JUNE 4, 2013 FRED HSU D3.JS, JAVASCRIPT,
NETWORKX, ODL, OPENDAYLIGHT, OPENFLOW, PYTHON,
SDK
4 thoughts on Making a topology
graph with OpenDaylight REST API,
Python, and Javascript
1. giangnvbk says:
Hello Fredhsu
Thank you for your great tutorial
So, Could you tell me how to run your code in ODP?
Thank you so much
REPLY NOVEMBER 5, 2013 AT 10:25 PM
fredhsu says:
Can you be more specific? If you have ODL running you should
be able to just check out the code from github and run it against
your install.
REPLY NOVEMBER 10, 2013 AT 2:48 PM
2. AMP says:
Hi Fredhsu,
Thank you for the article and I did some test on this. Now it looks
there is change on REST API for nodes like below.
old : resp, content = h.request(baseUrl + switch/ + containerName +
About these ads (http://en.wordpress.com/about-these-ads/)
6/4/2014 Making a topology graph with OpenDaylight REST API, Python, and Javascript | My Notes
http://fredhsu.wordpress.com/2013/06/04/making-a-topology-graph-with-opendaylight-rest-api-python-and-javascript/ 9/9
old : resp, content = h.request(baseUrl + switch/ + containerName +
nodes/, GET)
new : resp, content = h.request(baseUrl + switchmanager/ +
containerName + nodes/, GET)
Regards,
REPLY MAY 4, 2014 AT 8:04 AM
fredhsu says:
Thanks! Ill update the example code.
REPLY MAY 5, 2014 AT 8:47 PM
BLOG AT WORDPRESS.COM. | THE SORBET THEME.
Follow
Follow My Notes
Powered by WordPress.com