// "port": {"source": "00000003", "target": "00000002"}, "value": 4},
// ...
// ]}
+function displayMessage(msg) {
+ var $x = $("#snackbar");
+ $x.text(msg)
+ $x.toggleClass("show");
+ setTimeout(function () { $x.toggleClass("show"); }, 3000);
+}
+
+
function toGraph(top) {
var nodes = [];
var links = [];
var lst = top.switches;
+
for (var i = 0; i < lst.length; i++) {
nodes.push({ "id": lst[i].dpid, "type": "switch" });
}
}
lst = top.hosts;
+ console.log(top.hosts);
for (var i = 0; i < lst.length; i++) {
- nodes.push({ "id": lst[i].mac, "type": "host" });
+ nodes.push({ "id": lst[i].mac, "type": "host","ip": lst[i].ipv4});
links.push({
"source": lst[i].port.dpid, "target": lst[i].mac, "value": 2,
"port": { "source": lst[i].port.port_no, "target": 0 }
node.append("image")
.attr("xlink:href", function (d) {
if (d.type === "switch") {
- return "/home/img/switch.svg"
+ return "img/switch.png"
} else if (d.type === "cloud") {
- return "/home/img/cloud.svg"
+ return "img/cloud.svg"
} else {
- return "/home/img/pc.svg"
+ return "img/pc.svg"
}
})
.on("mouseover", handleMouseOver)
.attr("class", "label")
.attr("dy", size + 14)
.text(function (d) { return d.id; });
+
+
+ node.append("text")
+ .attr("class", "label")
+ .attr("dy", size + 26)
+ .text(function (d) { if (d.type === "host")return (d.ip); });
// .text(function (d) { return d.id.replace(/^0+/, ''); });
function getTopology() {
tabObj.buildTabs("#main", ["Graph", "Tables"], "Nothing to show!");
- var $svg = $('<svg width="1116" height="600"></svg>');
+ var $svg = $('<svg width="800" height="600"></svg>');
var $data = $('<div id="data"></div>');
tabObj.buildContent('Graph', $svg);
tabObj.buildContent('Tables', $data);
-
+// La funcion jsonget fue creada para sustituir el metodo json de D3
function jsonget() {
- const url = "http://"+location.hostname+":8080/topology"
let xhr = new XMLHttpRequest();
- xhr.open('GET', url , true);
+ xhr.open('GET', "/gettopo" , true);
//console.log(xhr); //para ver en la consola
xhr.onload = function() {
if (xhr.status == 200) { //can use this.status instead
//console.log(xhr.responseText);// para ver en la consola
- data = JSON.parse(xhr.responseText)
- listTopology(data)
- plotGraph(toGraph(data));
+ if(xhr.response === null || xhr.response === ""){
+ displayMessage("No response from controller")
+ }
+ plotGraph(toGraph(JSON.parse(xhr.responseText)));
}
}
xhr.send();
}
-
- jsonget();
+ jsonget();