2 var visNodes, visEdges, visNetwork;
3 var autoupdate_timeout, force_layout_timeout;
5 var last_json_data = null
6 var last_displayed_graph = null;
9 checkbox_autoupdate: "",
10 checkbox_dynamic_layout: "",
14 common_edge_postfix: "",
22 background: '#D2FFE5',
25 background: '#D2FFE5',
29 autoupdate_interval: 5000,
35 String.prototype.startsWith = function (pattern) {
36 if (this.length < pattern.length) {
39 return pattern == this.substring(0, pattern.length);
42 String.prototype.endsWith = function (pattern) {
43 if (this.length < pattern.length) {
46 return pattern == this.substring(this.length - pattern.length);
49 function init_network() {
53 // create an array with nodes
54 visNodes = new vis.DataSet([], options);
56 // create an array with edges
57 visEdges = new vis.DataSet([], options);
60 var container = document.getElementById("networkgraph");
72 physics: settings["dynamic_layout"],
74 visNetwork = new vis.Network(container, visData, options);
78 visNetwork.on("click", graph_element_clicked);
81 function layout_nodes(element) {
82 var jsonNodes = element.nodes;
87 if (settings["ipv4"]) {
88 prefix = settings["common_node_prefix"]["ipv4"];
91 prefix = settings["common_node_prefix"]["ipv6"];
96 oldIds = visNodes.getIds()
97 for (ni = 0; ni < jsonNodes.length; ni++) {
98 var nId = jsonNodes[ni].id;
102 if (nId.startsWith(prefix)) {
103 nLabel = nId.substring(prefix.length);
107 if (jsonNodes[ni].id == element.router_id) {
108 nColor = settings["selectedColor"];
111 if (!visNodes.get(nId)) {
118 reference: jsonNodes[ni],
124 /* remove old nodes */
125 for (ni = 0; ni < oldIds.length; ni++) {
126 if (newIds.indexOf(oldIds[ni]) == -1) {
127 visNodes.remove(oldIds[ni]);
132 function layout_edges(element) {
133 var jsonEdges = element.links;
136 var undirectedEdges = {}
138 /* calculate unidirectional edges */
140 oldIds = visEdges.getIds()
141 for (ei = 0; ei < jsonEdges.length; ei++) {
142 var eFrom = jsonEdges[ei].source;
143 var eTo = jsonEdges[ei].target;
151 var uuid = eFrom + "-" + eTo;
153 var edge = undirectedEdges[uuid];
156 uuid: eFrom + "-" + eTo,
163 reference: jsonEdges[ei],
165 undirectedEdges[uuid] = edge;
168 newIds.push(edge.uuid);
170 var eLabel = jsonEdges[ei].weight.toString();
171 if (jsonEdges[ei].properties) {
172 if (jsonEdges[ei].properties["weight_txt"]) {
173 eLabel = jsonEdges[ei].properties["weight_txt"];
175 if (jsonEdges[ei].properties["outgoing_tree"] == "true") {
177 if (jsonEdges[ei].source == eFrom) {
181 edge.arrows = "from";
186 if (jsonEdges[ei].source == eFrom) {
187 edge.fromLabel = eLabel;
190 edge.toLabel = eLabel;
195 var postfix = settings["common_edge_postfix"];
196 for (ei = 0; ei < newIds.length; ei++) {
197 var edge = undirectedEdges[newIds[ei]];
200 if (edge.fromLabel == edge.toLabel) {
201 label = edge.fromLabel;
203 else if (edge.fromLabel.endsWith(postfix)
204 && edge.fromLabel.endsWith(postfix)) {
205 var flen = edge.fromLabel.length - postfix.length;
206 var tlen = edge.toLabel.length - postfix.length;
208 label = edge.fromLabel.substring(0, flen).trim() + "/"
209 + edge.toLabel.substring(0, tlen).trim()
213 label = edge.fromLabel + "/" + edge.toLabel;
216 if (visEdges.get(edge.uuid)) {
239 reference: edge.reference,
245 /* remove old edges */
246 for (ei = 0; ei < oldIds.length; ei++) {
247 if (newIds.indexOf(oldIds[ei]) == -1) {
248 visEdges.remove(oldIds[ei]);
253 function layout_json_data(obj) {
254 if (obj.type != "NetworkCollection") {
258 for (index = 0; index < obj.collection.length; index++) {
259 element = obj.collection[index];
261 if (element.type == "NetworkGraph") {
262 if (settings["ipv4"] && element.router_id.indexOf(':') != -1) {
265 if (!settings["ipv4"] && element.router_id.indexOf('.') != -1) {
269 last_displayed_graph = element;
271 layout_nodes(element);
272 layout_edges(element);
278 function xmlhttp_changed()
280 if (xmlhttp.readyState==XMLHttpRequest.DONE && xmlhttp.status==200) {
281 last_json_data = JSON.parse(xmlhttp.responseText);
282 layout_json_data(last_json_data);
284 if (settings["autoupdate"]) {
285 autoupdate_timeout = window.setTimeout(
286 send_request, settings["autoupdate_interval"]);
291 function graph_element_clicked(param) {
292 var nodes = param.nodes;
293 var edges = param.edges;
295 if (last_displayed_graph === null) {
299 var showdata = document.getElementById(settings["div_showdata"]);
300 if (showdata === null) {
304 if (nodes.length == 1) {
306 var node = visNodes.get(nodes[0]);
308 showdata.innerHTML = "<h2>Node "+node.label+"</h2>"
310 + "<li><b>router_id:</b> " + node.id + "</li>"
314 else if (edges.length == 1) {
316 var edge = visEdges.get(edges[0]);
318 showdata.innerHTML = "<h2>Edge</h2>"
320 + "<li><b>from:</b> " + edge.from + "</li>"
321 + "<li><b>to:</b> " + edge.to + "</li>"
327 function autoupdate_clicked() {
328 settings["autoupdate"] = this.checked;
329 if (this.checked === false) {
330 window.clearTimeout(autoupdate_timeout);
337 function dynamiclayout_clicked() {
338 settings["dynamic_layout"] = this.checked;
339 visNetwork.setOptions({physics:this.checked});
340 if (force_layout_timeout) {
341 window.clearTimeout(force_layout_timeout);
345 function ipv4_clicked() {
346 settings["ipv4"] = this.checked;
347 if (last_json_data !== null) {
348 layout_json_data(last_json_data);
349 if (!settings["dynamic_layout"]) {
350 visNetwork.setOptions({physics:true});
351 visNetwork.stabilize();
352 force_layout_timeout = window.setTimeout(
353 function() { visNetwork.setOptions({physics:false}); }, 500);
358 function send_request() {
359 xmlhttp.open("GET",settings["netjsonurl"],true);
363 function copy_settings(dst, src) {
365 if (dst.hasOwnProperty(p) && src.hasOwnProperty(p)) {
366 if (dst[p] !== null && typeof src[p] !== typeof dst[p]) {
370 if (src[p] !== null && typeof dst[p] === 'object' && typeof src[p] === 'object') {
371 copy_settings(dst[p], src[p]);
380 function set_checkbox_function(checkbox_id, setting_name, f) {
381 if (checkbox_id === null || settings[checkbox_id] == "") {
385 var checkbox = document.getElementById(settings[checkbox_id]);
387 checkbox.onclick = f;
388 checkbox.checked = settings[setting_name];
392 function init_netjson_viewer(custom_settings) {
393 if (custom_settings !== null) {
394 copy_settings(settings, custom_settings);
396 if (settings["netjsonurl"] === null) {
397 console.log("Netjson URL setting missing");
401 set_checkbox_function("checkbox_autoupdate", "autoupdate", autoupdate_clicked);
402 set_checkbox_function("checkbox_dynamic_layout", "dynamic_layout", dynamiclayout_clicked);
403 set_checkbox_function("checkbox_ipv4", "ipv4", ipv4_clicked);
405 xmlhttp = new XMLHttpRequest();
406 xmlhttp.onreadystatechange=xmlhttp_changed