You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

280 lines
7.4 KiB

{% 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|date:"d.m.Y H:i"}}</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.formatLastSeen}}", lastSeen: {%if AS.lastSeen%}{{AS.lastSeen.pk}}{%else%}null{%endif%}, dismiss: true, announcements: [{% for a in AS.getAnnouncedPrefixes %}"{{a}}"{%if not forloop.last%},{%endif%}{%endfor%}]}{%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);
var force = d3.layout.force()
.nodes(asdata)
.links(peerings)
.charge(-500)
// .chargeDistance(300)
// .linkDistance(70)
.linkStrength(0.65)
.linkDistance(function(l) {
neighs = Math.min(l.source.neighbors, l.target.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")
.attr("id", function(d) { return "node-" + d.id; })
.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; });
var lastMouseNode = null;
node.on("mouseover", function(d) {
if(lastMouseNode) {
if(!d.dismiss && lastMouseNode.id == d.id)
return;
else
$("#node-"+lastMouseNode.id).tipsy("hide");
}
d.dismiss = true;
$("#node-"+d.id).tipsy("show");
lastMouseNode = d;
})
.on("mouseout", function(d) {
if(d.dismiss)
$("#node-"+d.id).tipsy("hide");
});
$('svg g').tipsy({
gravity: 'e',
offset: 20,
html: true,
trigger: 'manual',
title: function() {
var d = this.__data__;
var content = '';
if(d.nodetype == 'AS') {
var state = null;
if(d.online)
state = '<span class="label label-success">Online</span>';
else if(d.lastSeen)
state = '<span class="label label-danger">Offline</span>';
else
state = '<span class="label label-default">Never seen</span>';
content = '<b>AS '+d.asnumber+'</b><br>';
content += '<table style="opacity: 1.0" class="table table-bordered" id="node-popup-'+d.id+'">';
content += '<tr><th>State</th><td>'+state+'</td>';
if(d.lastSeen) {
content += '<tr><th>Last seen</th><td><a href="/map/'+d.lastSeen+'/">Crawl '+d.lastSeen+'<br>'+d.lastSeenDate+'</a></td></tr>';
}
if(d.crawled) {
content += '<tr><th>Note</th><td>Directly crawled</td></tr>';
}
if(d.announcements.length > 0) {
content += '<tr><th>Netw.</th><td>';
content += d.announcements.join(", ")
content += '</td></tr>';
}
content += '</table>';
//(function(node) {
// $.ajax({url: "/map/api/borderrouter/?crawl={{crawl.id}}&AS="+node.id, success: function(result) {
// $('#node-popup-'+node.id).append("<tr><th>Javascript</th><td>I FUCKING HATE IT</td></tr>");
// console.log($('#node-popup-'+node.id));
// console.log(result);
// }
// });
//})(d);
}
return content;
}
});
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)
// $("#node-" + lastNode.id).tipsy("hide");
d.dismiss = false;
//$("#node-" + d.id).tipsy("show");
$("#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>');
var content = '';
if(d.nodetype == 'AS') {
//$("#node-"+d.id).popover({content: "Hallo Katze! :)"});
//$("#node-"+d.id).popover('show');
//console.log("My element", $("#node-"+d.id));
//$("#node-"+d.id).tipsy({
// gravity: 'e',
// html: true,
// //trigger: 'focus',
// trigger: 'hover',
// title: function() {
// var d = this.__data__;
// astable = '<table class="table table-bordered"><tr><td>FOOO</td><td>bar</td></table>';
// return astable;
// }
//});
if(d.crawled) {
$.ajax({url: "/api/v1/borderrouter/?AS__crawl={{crawl.pk}}&AS__number=" + d.asnumber, success: function(result) {
$("#infowin").html('');
$("#infowin").fadeIn('fast', function() {});
for(var i=0; i<result.objects.length; i++) {
(function(currRouter) {
$.ajax({url:"/api/v1/announcement/?router="+currRouter.id, success: function(result2) {
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>';
$('#infowin').append(astable);
}});
})(result.objects[i]);
}
}});
}
} else {
$("#infowin").html('');
$("#infowin").fadeIn('fast', function() {});
}
});
lastNode = d;
}
node.on("click", click);
force.start();
</script>
{% endblock %}