1 // Copyright (c) 2018 Maen Artimy
3 // Licensed under the Apache License, Version 2.0 (the "License");
4 // you may not use this file except in compliance with the License.
5 // You may obtain a copy of the License at
7 // http://www.apache.org/licenses/LICENSE-2.0
9 // Unless required by applicable law or agreed to in writing, software
10 // distributed under the License is distributed on an "AS IS" BASIS,
11 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 // See the License for the specific language governing permissions and
13 // limitations under the License.
16 const tabObj = Tabs('topology');
20 // Define the div for the tooltip
21 const div = d3.select("body").append("div")
22 .attr("class", "tooltip")
25 function add_prefix(obj) {
26 return String(obj).replace(/^0+/, "Switch_");
29 function trim_zeros(obj) {
30 return String(obj).replace(/^0+/, "");
33 // Takes JSON data and convert to a graph format that D3 understands:
36 // {"id": "0000000000000001", "type": "switch"},
37 // {"id": "0000000000000002", "type": "switch"},
38 // {"id": "16:18:83:a8:4d:1c", "type": "host"},
42 // {"source": "0000000000000002", "target": "0000000000000003",
43 // "port": {"source": "00000003", "target": "00000002"}, "value": 4},
46 function toGraph(top) {
50 var lst = top.switches;
52 for (var i = 0; i < lst.length; i++) {
53 nodes.push({ "id": lst[i].dpid, "type": "switch" });
56 if (top.links.length > 0) {
58 for (var i = 0; i < lst.length; i++) {
59 if (lst[i].src.dpid < lst[i].dst.dpid) { // prevent duplicate links
61 "source": lst[i].src.dpid, "target": lst[i].dst.dpid, "value": 4,
62 "port": { "source": lst[i].src.port_no, "target": lst[i].dst.port_no }
66 } else if (top.switches.length > 1) { // represent the network with a cloud
67 nodes.push({ "id": 0, "type": "cloud" });
68 for (var i = 0; i < lst.length; i++) {
70 "source": 0, "target": lst[i].dpid, "value": 4,
71 "port": { "source": 0, "target": 0 }
77 for (var i = 0; i < lst.length; i++) {
78 nodes.push({ "id": lst[i].mac, "type": "host" });
80 "source": lst[i].port.dpid, "target": lst[i].mac, "value": 2,
81 "port": { "source": lst[i].port.port_no, "target": 0 }
85 return { "nodes": nodes, "links": links };
88 // Plot the topology using D3.js
89 // Many online tutorials explain how this works. Example: www.puzzlr.org/force-graphs-with-d3
90 function plotGraph(graph) {
91 var svg = d3.select("svg");
92 var width = +svg.attr("width");
93 var height = +svg.attr("height");
95 //custom force to put everything in a box
96 function box_force() {
98 for (var i = 0, n = graph.nodes.length; i < n; ++i) {
99 curr_node = graph.nodes[i];
100 curr_node.x = Math.max(radius, Math.min(width - radius, curr_node.x));
101 curr_node.y = Math.max(radius, Math.min(height - radius, curr_node.y));
105 // Create a force layout simulation
107 // Link: attraction force
108 // chanrge: repulsion force
109 // x: attracts the nodes to the horizontal centre
110 // y: attracts the hosts the bottom while other nodes are attrcated to the top
111 // centre: atracts to the centre
112 // collision: avoids node collision
113 // box: keeps all nodes inside
114 var simulation = d3.forceSimulation()
116 .force("link", d3.forceLink(graph.links).id(function (d) { return d.id; }).distance(size * 2))
117 .force("charge", d3.forceManyBody().strength(-size * 30))
118 .force("x", d3.forceX(width / 2))
119 .force("y", d3.forceY(function (d) {
120 if (d.type === "host") {
121 return 3 * height / 4
123 return 1 * height / 4
126 .force("centre", d3.forceCenter(width / 2, height / 2))
127 .force("collision", d3.forceCollide().radius(35))
128 .force("box", box_force);
130 // Create nodes with image and text
131 var node = svg.append("g")
132 .attr("class", "nodes")
136 // .attr("id", function (d) { return "N" + d.id; })
137 .attr("class", "node");
140 .attr("xlink:href", function (d) {
141 if (d.type === "switch") {
142 return "img/switch.svg"
143 } else if (d.type === "cloud") {
144 return "img/cloud.svg"
149 .on("mouseover", handleMouseOver)
150 .on("mouseout", handleMouseOut)
153 .attr("class", "label")
154 .attr("dy", size + 14)
155 .text(function (d) { return d.id; });
156 // .text(function (d) { return d.id.replace(/^0+/, ''); });
159 // Create links with lines, circles, and text
160 var link = svg.append("g")
161 .attr("class", "links")
165 .attr("class", "link");
168 .attr("stroke-width", function (d) { return d.value; });
170 link.append("circle")
171 .attr("class", "start")
174 link.append("circle")
175 .attr("class", "end")
179 .attr("class", "start")
180 .text(function (d) { return trim_zeros(d.port.source); })
183 .attr("class", "end")
184 .text(function (d) { return trim_zeros(d.port.target); })
187 function tickActions() {
189 return Math.sqrt((d.target.x - d.source.x) ** 2 + (d.target.y - d.source.y) ** 2);
193 .attr("transform", function (d) { return "translate(" + (d.x - size / 2) + "," + (d.y - size / 2) + ")"; });
195 .attr("transform", function (d) { return "translate(" + d.source.x + "," + d.source.y + ")"; });
197 link.selectAll("line")
198 .attr("x1", function (d) { return (d.target.x - d.source.x) * size / 2 / norm(d); })
199 .attr("y1", function (d) { return (d.target.y - d.source.y) * size / 2 / norm(d); })
200 .attr("x2", function (d) { return (d.target.x - d.source.x) * (1 - size / 2 / norm(d)); })
201 .attr("y2", function (d) { return (d.target.y - d.source.y) * (1 - size / 2 / norm(d)); })
203 // position of the link start port
204 link.selectAll("circle.start")
205 .attr("cx", function (d) { return (d.target.x - d.source.x) * size / 2 / norm(d); })
206 .attr("cy", function (d) { return (d.target.y - d.source.y) * size / 2 / norm(d); })
208 // psotion of the link end port
209 link.selectAll("circle.end")
210 .attr("cx", function (d) { return (d.target.x - d.source.x) * (1 - size / 2 / norm(d)); })
211 .attr("cy", function (d) { return (d.target.y - d.source.y) * (1 - size / 2 / norm(d)); })
213 link.selectAll("text.start")
214 .attr("dx", function (d) { return (d.target.x - d.source.x) * size / 2 / norm(d); })
215 .attr("dy", function (d) { return (d.target.y - d.source.y) * size / 2 / norm(d); })
217 link.selectAll("text.end")
218 .attr("dx", function (d) { return (d.target.x - d.source.x) * (1 - size / 2 / norm(d)); })
219 .attr("dy", function (d) { return (d.target.y - d.source.y) * (1 - size / 2 / norm(d)); })
223 // Handling mouse drag
225 .on("start", drag_start)
226 .on("drag", drag_drag)
227 .on("end", drag_end));
229 function drag_start(d) {
230 if (!d3.event.active) simulation.alphaTarget(0.3).restart();
235 function drag_drag(d) {
240 function drag_end(d) {
241 if (!d3.event.active) simulation.alphaTarget(0);
246 // Handling mouse over
247 function handleMouseOver(d) {
250 .style("opacity", .9);
251 div.html(d.type + ": " + d.id)
252 .style("left", (d3.event.pageX) + "px")
253 .style("top", (d3.event.pageY - 28) + "px");
256 function handleMouseOut(d) {
259 .style("opacity", 0);
262 // drag_handler(node);
264 // run tickActions in every simulation step
265 simulation.on("tick", tickActions);
269 // Display the raw topology data
270 function listTopology(network) {
271 data = "<h1>Switches</h1>" + JSON.stringify(network.switches) + "<br>";
272 data += "<h1>Links</h1>" + JSON.stringify(network.links) + "<br>";
273 data += "<h1>Hosts</h1>" + JSON.stringify(network.hosts) + "<br>";
274 $('#data').html(data);
277 function getTopology() {
278 tabObj.buildTabs("#main", ["Graph", "Tables"], "Nothing to show!");
279 var $svg = $('<svg width="1616" height="900"></svg>');
280 var $data = $('<div id="data"></div>');
281 tabObj.buildContent('Graph', $svg);
282 tabObj.buildContent('Tables', $data);
287 // La funcion jsonget fue creada para sustituir el metodo json de D3
291 let xhr = new XMLHttpRequest();
292 xhr.open('GET', "/gettopo" , true);
293 //console.log(xhr); //para ver en la consola
294 xhr.onload = function() {
295 if (xhr.status == 200) { //can use this.status instead
296 //console.log(xhr.responseText);// para ver en la consola
298 listTopology(JSON.parse(xhr.responseText));
299 plotGraph(toGraph(JSON.parse(xhr.responseText)));
311 // d3.json(location.hostname+":8080/topology").then(function (data) {
312 // listTopology(data)
313 // plotGraph(toGraph(data));
318 // When the refresh button is clicked, clear the page and start over
319 $('.refresh').on('click', function () {