dnmapper/bgpdata/templates/bgpdata/map.html

{% extends "base.html" %}
{% block head %}
{% load static from staticfiles %}
<script src="{% static "js/d3.js" %}" charset="utf-8"></script>
<style>
.node {
  stroke: #fff;
  stroke-width: 1.5px;
}

.link {
  stroke: #999;
  stroke-opacity: .6;
}
</style>
{% endblock %}
{% block body %}
<div class="page-header">
	<h3>Crawl run {{crawl.pk}} from {{crawl.startTime}}</h3>
</div>

<div id="plotwin" class="container"></div>
<div id="infowin"><div class="alert alert-info" role="alert">Click on a node for more information</div></div>
<script type="text/javascript" charset="utf-8">

var asdata = [
{% for AS in ASses %}
	{id: {{AS.pk}}, nodetype: "AS", asnumber: {{AS.number}}, label: "{{AS.number}}", neighbors: {{AS.getPeerings.count}}, crawled: {%if AS.directlyCrawled%}true{%else%}false{%endif%}, online: {%if AS.online%}true{%else%}false{%endif%}, lastSeenDate: "{{AS.lastSeen}}", lastSeen: {%if AS.lastSeen%}{{AS.lastSeen.pk}}{%else%}null{%endif%}}{%if not forloop.last%},{%endif%}
{%endfor%}
];

var asdict = {
{% for AS in ASses %}
	{{AS.number}}: {{forloop.counter0}}{%if not forloop.last%},{%endif%}
{% endfor %}
};

var peerings = [
{% for p in peerings %}
	{
		source: asdict[{{p.as1.number}}],
		target: asdict[{{p.as2.number}}],

		id: {{p.pk}},
		as1id: {{p.as1.id}},
		as1number: {{p.as1.number}},
		as2id: {{p.as2.id}},
		as2number: {{p.as2.number}},

		origin: "{{p.get_origin_display}}"
	}{%if not forloop.last%},{%endif%}
{%endfor%}
];


var width = 960,
    height = 700;

var svg = d3.select('#plotwin')
			.append('svg')
//			.attr("preserveAspectRatio", "xMidYMid meet")
//			.attr("viewBox", "0 0 " + width + " " + height );
			.attr('width', width)
			.attr('height', height);

console.log(asdata);
var force = d3.layout.force()
	.nodes(asdata)
	.links(peerings)
    .charge(-500)
//	.chargeDistance(300)
//    .linkDistance(70)
	.linkStrength(0.65)
	.linkDistance(function(l) {
		console.log(l);
		neighs = Math.min(l.source.neighbors, l.target.neighbors);
		console.log(neighs, "neighbors");
		switch(neighs) {
			case 0: return 40;
			case 1: 
			case 2: return 120;
			case 3:
			case 4: return 200;
			default: return 250;
		}
	})
    .size([width, height])
	.start();


var link = svg.selectAll(".link")
			.data(peerings)
			.enter()
			.append("line")
			.attr("class", "link")
			.style("stroke-width", function(l) {
				neighs = Math.min(l.source.neighbors, l.target.neighbors);
				return 1 + Math.min(5, neighs);
			});
			//.style("stroke-width", 3);

var node = svg.selectAll('.node')
			.data(asdata)
			.enter()
			.append("g")
			.call(force.drag);

node.append("ellipse")
	.attr("rx", 40)
	.attr("ry", 20)
	.attr("fill", function(d) {
		if(d.crawled)
			return "#94FF70";
		else if(d.online)
			return "#D1FFC2";
			// return "#F0FFEB";
		else
			return "#FFCCCC";
	})
	.attr("stroke", "black")
	.attr("stroke-width", "1px");

node.append('text')
	.attr("font-family", "sans-serif")
	.attr("font-size", "13px")
	.attr("font-weight", "bold")
	.attr("dy", "4")
	.attr("text-anchor", "middle")
	.text(function(d) { return d.label; });

force.on("tick", function() {
	//node.attr('cx', function(d) { return d.x; })
	//	.attr('cy', function(d) { return d.y; });
	node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

	link.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 lastNode = null;
function click(d) {
	if(d3.event.defaultPrevented) return;
	if(lastNode)
		console.log("last time you clicked on another node", d);
	$("#infowin").fadeOut('fast', function() {
		// set progress bar
		$("#infowin").html('<div class="progress"><div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%"><span class="sr-only">Loading...</span></div></div>');



		console.log("fading done");
		var content = '';
		if(d.nodetype == 'AS' && d.crawled) {
			console.log("doing javascript...");
			$.ajax({url: "/map/api/borderrouter/?AS__crawl={{crawl.pk}}&AS__number=" + d.asnumber, success: function(result) {
				console.log("SUCCESS", result);
				$("#infowin").html('');
				$("#infowin").fadeIn('fast', function() {});
				for(var i=0; i<result.objects.length; i++) {
					(function(currRouter) {
						$.ajax({url:"/map/api/announcement/?router="+currRouter.id, success: function(result2) {
							console.log("Current router on success", currRouter);
							astable  = 'Table for AS'+d.asnumber+' router ID ' + currRouter.routerID;
							astable += '<table class="table table-bordered">';
							astable += '<tr><th>Network</th><th>Next Hop</th><th>AS Path</th></tr>';
							for(var j=0; j<result2.objects.length; j++) {
								ann = result2.objects[j];
								astable += '<tr><td>'+ann.ip+'/'+ann.prefix+'</td><td>'+ann.nextHop+'</td><td>'+ann.ASPath+'</td></tr>';
							}
							astable += '</table>';
							console.log("Sending stuff for", currRouter.id, "aka", currRouter.routerID);
							$('#infowin').append(astable);
						}});
					})(result.objects[i]);
				}

			}});
			astable = '<table class="table table-bordered table-hover">';
			astable += '<tr><th scope="row">AS</th><td>'+ d.asnumber +'<td></tr>';
			astable += '<tr><th>Directly crawled</th><td><td></tr>';
			astable += '<tr><th>Online</th><td><td></tr>';
			astable += '<tr><th></th><td><td></tr>';
				
			astable += '</table><div id="announcement"></div>';


		} else {
			$("#infowin").html('');
			$("#infowin").fadeIn('fast', function() {});
		}
	});
	console.log("Single click on", d);
	lastNode = d;
}
node.on("click", click)

force.start();


</script>

{% endblock %}