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
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 %}
|