Making a Topology Graph With OpenDaylight REST API, Python, And Javascript _ My Notes

5/23/2018 Making a Topology Graph With OpenDaylight REST API, Python, And Javascript _ My No...

http:///reader/full/making-a-topology-graph-with-opendaylight-rest-api-python-an

6/4/2014 Making a topology g raph with OpenDaylig ht 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/

My Notes

Notes on stuff I'm interested in: computer science,networking, OpenFlow, Open Stack

Making a topology graph withOpenDaylight REST API, Python,

and Javascript

The controller as it currently stands already has a nice topology view ofthe network, but I thought it would be a good exercise to try and makea web page showing the topology using the API. To do this Ive writtena short Python script leveraging the NetworkX(http://networkx.github.io/) library (which will later allow me to dothings like use Dijkstras algorithm to find the shortest path betweentwo links), D3.js (http://d3js.org/) for visualization, and the REST APIfrom the controller.

First I grabbed all the topology data from the controller. This was just afew simple API calls, followed by some stuff to parse through the JSONdata:
http://fredhsu.wordpress.com/http://d3js.org/http://networkx.github.io/http://fredhsu.wordpress.com/





baseUrl = 'http://localhost:8080/controller/nb/v2/'

containerName = 'default/'

h = httplib2.Http(".cache")

h.add_credentials('admin', 'admin')

# Get all the edges/linksresp, content = h.request(baseUrl + 'topology/' + c

edgeProperties = json.loads(content)

odlEdges = edgeProperties['edgeProperties']

# Get all the nodes/switches

resp, content = h.request(baseUrl + 'switchmanager/

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 takethat array and assign it to odlEdges. Here is an example of an edgeobject:





{

"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 associatedports. This implies that there are two edges for every link, one in eachdirection.





I also get an array Node objects called nodeProperties. The last line of theabove code takes that array and assigns it to odlNodes, here is anexample 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 asimpler format with just the info that I need:





# 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']['@

graph.add_edge(*e)

Im not really making much use of NetworkX in this example, but onething I can do is export this simplified graph to a number of differentgraph formats, or plot the graph. Since I wanted to try and make a webapp, 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": "

I decided to leave the graph as undirected to just show a single linkbetween the nodes. Now I can write some Javacript to graph everythingwith D3.js. Im using a force-directed(http://en.wikipedia.org/wiki/Force-directed_graph_drawing) algorithmto lay everything out:

12345678

varw =400,

h =400,

fill =d3.scale.category20();

varsvg =d3.select("#chart")

.append("svg:svg")

.attr("width", w)

.attr("height", h);
http://en.wikipedia.org/wiki/Force-directed_graph_drawing





9101112131415

16171819202122232425

262728293031323334

35363738394041424344

454647484950515253

d3.json("topo.json", function(json) {

vartopo =d3.layout.force()

.charge(-300)

.linkDistance(100)

.nodes(json.nodes)

.links(json.links)

.size([w, h]) .start();

varlink =svg.append("svg:g").selectAll("line.li

.data(json.links)

.enter().append("svg:line")

.attr("class", "link")

.style("stroke-width", function(d) { returnMat

.attr("x1", function(d) { returnd.source.x; })

.attr("y1", function(d) { returnd.source.y; })

.attr("x2", function(d) { returnd.target.x; }) .attr("y2", function(d) { returnd.target.y; })

varnode =svg.append("svg:g").selectAll("circle.

.data(json.nodes)

.enter().append("svg:circle")

.attr("class", "node")

.attr("r", 15)

.style("fill", function(d) { returnfill(d.grou

.attr("cx",function

(d) {return

d.x; }) .attr("cy", function(d) { returnd.y; })

.call(topo.drag);

vartext =svg.append("svg:g").selectAll("g")

.data(topo.nodes())

.enter().append("svg:g");

text.append("svg:text")

.text(function(d) { returnd.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) { returnd.source.x





54555657585960

616263646566

.attr("y1", function(d) { returnd.source.y; })

.attr("x2", function(d) { returnd.target.x; })

.attr("y2", function(d) { returnd.target.y; })

//text.attr("x", function(d) { return d.x; })

//.attr("y", function(d) { return d.y; });

text.attr("transform", function(d) { return"tr

node.attr("cx", function(d) { returnd.x; })

.attr("cy", function(d) { returnd.y; });

});

});

view rawtopo.jshosted withby 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 mewith 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)
https://github.com/fredhsu/odl-scripts/tree/master/python/topohttp://fredhsu.files.wordpress.com/2013/06/screen-shot-2013-06-03-at-1-42-57-pm.pnghttps://github.com/https://gist.github.com/fredhsu/5701360#file-topo-jshttps://gist.github.com/fredhsu/5701360/raw/topo.js





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 tutorialSo, Could you tell me how to run your code in ODP?

Thank you so much

REPLY NOVEMBER 5, 2013 AT 10:25 PMfredhsu 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 againstyour install.

REPLY NOVEMBER 10, 2013 AT 2:48 PM2. AMP says:

Hi Fredhsu,

Thank you for the article and I did some test on this. Now it looksthere is change on REST API for nodes like below.

About these ads (http://en.wordpress.com/about-these-ads/)
http://fredhsu.wordpress.com/http://en.wordpress.com/about-these-ads/http://fredhsu.wordpress.com/http://gravatar.com/giangnvbkhttp://fredhsu.wordpress.com/tag/sdk/http://fredhsu.wordpress.com/tag/python/http://fredhsu.wordpress.com/tag/openflow-2/http://fredhsu.wordpress.com/tag/opendaylight-2/http://fredhsu.wordpress.com/tag/odl/http://fredhsu.wordpress.com/tag/networkx/http://fredhsu.wordpress.com/tag/javascript/http://fredhsu.wordpress.com/tag/d3-js/http://fredhsu.wordpress.com/author/fredhsu/http://fredhsu.wordpress.com/2013/06/04/making-a-topology-graph-with-opendaylight-rest-api-python-and-javascript/http://fredhsu.wordpress.com/2013/06/04/making-a-topology-graph-with-opendaylight-rest-api-python-and-javascript/?replytocom=80#respondhttp://fredhsu.wordpress.com/2013/06/04/making-a-topology-graph-with-opendaylight-rest-api-python-and-javascript/?replytocom=77#respondhttp://www.huffingtonpost.com/2014/04/08/ukraine-climbing-video_n_5112726.htmlhttp://www.huffingtonpost.com/2014/04/08/ukraine-climbing-video_n_5112726.html





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 AMfredhsu 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
http://wordpress.com/signup/?ref=lofhttp://void%280%29/http://theme.wordpress.com/themes/sorbet/http://wordpress.com/?ref=footer_bloghttp://fredhsu.wordpress.com/http://fredhsu.wordpress.com/2013/06/04/making-a-topology-graph-with-opendaylight-rest-api-python-and-javascript/?replytocom=152#respondhttp://fredhsu.wordpress.com/2013/06/04/making-a-topology-graph-with-opendaylight-rest-api-python-and-javascript/?replytocom=151#respond

Documents

Making a Topology Graph With OpenDaylight REST API, Python, And Javascript _ My Notes