<html>
<head>
<style rel="stylesheet" type="text/css">
#popupAlert {
z-index : 100;
display : none;
position : absolute;
border : 1px solid #000;
background-color : #89ffa7;
color : #000;
opacity : 0.6;
padding : 5px;
}
#alertInfo {
display : none;
border : 1px solid #888;
padding : 3px;
height : 150px;
}
#alertInfoTable {
font : Fixed;
font-size : 12px;
width : 100%;
}
a {
color : #22dd22;
}
</style>
<script type="text/javascript" src="js/raphael.js"></script>
<script type="text/javascript" src="js/dracula_graffle.js"></script>
<script type="text/javascript" src="js/dracula_graph.js"></script>
<script type="text/javascript">
<!--
redraw = null;
width = 0;
height = 0;
layouter = null;
renderer = null;
json = [];
window.onload = function() {
var req = new XMLHttpRequest();
if ( navigator.appName.indexOf('Microsoft') != -1 )
{
width = (document.body.offsetWidth > 20) ?
document.body.offsetWidth - 20 : 20;
height = (document.body.offsetHeight > 200 ) ?
document.body.offsetHeight - 200 : 200;
} else {
width = (window.innerWidth > 20) ?
window.innerWidth - 20 : 20;
height = (window.innerHeight > 200) ?
window.innerHeight - 200 : 200;
}
req.open ( 'GET', 'http://' + window.location.host + '/correlation_graph.json', true );
req.onreadystatechange = function() {
if ( req.readyState == 4 && req.status == 200 )
{
var g = new Graph();
var connections = [];
json = JSON.parse ( req.responseText );
for ( var i=0; i < json.length; i++ )
{
g.addNode ( json[i].id, { label: json[i].label });
if ( json[i].connectedTo )
{
for ( var j=0; j < json[i].connectedTo.length; j++ )
{
connections.push ({
"from": json[i].id,
"to" : json[i].connectedTo[j].id
});
}
}
}
for ( var i=0; i < connections.length; i++ )
{
g.addEdge ( connections[i].from, connections[i].to, { directed: true });
}
var canvas = document.getElementById ( 'canvas' );
canvas.style.width = width;
canvas.style.height = height;
var layouter = new Graph.Layout.Spring ( g );
layouter.layout();
var renderer = new Graph.Renderer.Raphael ( 'canvas', g, width, height );
renderer.draw();
redraw = function() {
layouter.layout();
renderer.draw();
};
for ( var i=0; i < json.length; i++ )
{
var node = document.getElementById ( 'alert' + json[i].id );
if ( node )
{
node.onclick = function() {
var div = document.getElementById ( 'alertInfo' );
if ( div )
{
var id = this.id.replace ( /^alert/, "" );
var json_element = null;
for ( var i=0; i < json.length; i++ )
{
if ( json[i].id == id )
{
json_element = json[i];
break;
}
}
div.style.display = 'block';
var content =
'<table id="alertInfoTable" cellspacing="5"><tr style="background-color:#99ff99">' +
'<td><b>Type</b></td><td><b>From</b></td>' +
'<td><b>To</b></td><td><b>Date</b></td></tr>' +
'<tr><td>' + json_element.label;
if ( json_element.packets )
{
content += ' (<a href="http://' + window.location.host + '/pcap.cgi?packets=' +
json_element.packets.length;
for ( var j=0; j < json_element.packets.length; j++ )
{
json_element.packets[j].match ( /^.*(=*)$/ );
var pad = RegExp.$1;
var len = parseInt ( json_element.packets[j].length * 3 / 4 ) - pad.length;
json_element.date.match ( /[a-zA-Z]+\s+([a-zA-Z]+)\s+([0-9]+)\s+([0-9]+):([0-9]+):([0-9]+)\s+([0-9]+)/ );
var month = RegExp.$1;
var day = RegExp.$2;
var hour = RegExp.$3;
var min = RegExp.$4;
var sec = RegExp.$5;
var year = RegExp.$6;
switch ( month )
{
case 'Jan': month = 1; break;
case 'Feb': month = 2; break;
case 'Mar': month = 3; break;
case 'Apr': month = 4; break;
case 'May': month = 5; break;
case 'Jun': month = 6; break;
case 'Jul': month = 7; break;
case 'Ago': month = 8; break;
case 'Sep': month = 9; break;
case 'Oct': month = 10; break;
case 'Nov': month = 11; break;
case 'Dec': month = 12; break;
default : month = 1; break;
}
var timestamp = new Date ( year, month, day, hour, min, sec).getTime().toString();
timestamp = timestamp.replace ( /0{3}$/, "" );
content += '&packet_len' + j + '=' + len +
'&time' + j + '=' + timestamp +
'&packet' + j + '=' + escape ( json_element.packets[j] );
}
content += '">save as pcap file</a>)';
}
content += '</td><td>' +
json_element.from + '</td><td>' + json_element.to + '</td>' +
'<td>' + json_element.date + '</td></tr>';
if ( json_element.clusteredAlerts )
{
for ( var j=0; j < json_element.clusteredAlerts.length; j++ )
{
content +=
'<tr><td>' + json_element.clusteredAlerts[j].label;
if ( json_element.clusteredAlerts[j].packets )
{
content += ' (<a href="http://' + window.location.host + '/pcap.cgi?packets=' +
json_element.clusteredAlerts[j].packets.length;
for ( var k=0; k < json_element.clusteredAlerts[j].packets.length; k++ )
{
var unescaped = unescape ( json_element.clusteredAlerts[j].packets[k] );
unescaped.match ( /(=+)/ );
var pad = RegExp.$1;
var len = parseInt ( json_element.clusteredAlerts[j].packets[k].length * 3 / 4 ) - pad.length;
json_element.clusteredAlerts[j].date.match ( /[a-zA-Z]+\s+([a-zA-Z]+)\s+([0-9]+)\s+([0-9]+):([0-9]+):([0-9]+)\s+([0-9]+)/ );
var month = RegExp.$1;
var day = RegExp.$2;
var hour = RegExp.$3;
var min = RegExp.$4;
var sec = RegExp.$5;
var year = RegExp.$6;
switch ( month )
{
case 'Jan': month = 1; break;
case 'Feb': month = 2; break;
case 'Mar': month = 3; break;
case 'Apr': month = 4; break;
case 'May': month = 5; break;
case 'Jun': month = 6; break;
case 'Jul': month = 7; break;
case 'Ago': month = 8; break;
case 'Sep': month = 9; break;
case 'Oct': month = 10; break;
case 'Nov': month = 11; break;
case 'Dec': month = 12; break;
default : month = 1; break;
}
var timestamp = new Date ( year, month, day, hour, min, sec).getTime().toString();
timestamp = timestamp.replace ( /0{3}$/, "" );
content += '&packet_len' + k + '=' + len +
'&time' + k + '=' + timestamp +
'&packet' + k + '=' + escape ( json_element.clusteredAlerts[j].packets[k] );
}
content += '">save as pcap file</a>)';
}
content += '</td>' +
'<td>' + json_element.clusteredAlerts[j].from + '</td>' +
'<td>' + json_element.clusteredAlerts[j].to + '</td>' +
'<td>' + json_element.clusteredAlerts[j].date + '</td></tr>';
}
}
content += '</table>';
div.innerHTML = content;
}
};
}
}
}
};
req.send ( null );
};
-->
</script>
</head>
<body>
<div id="canvas" style="border: 1px solid #000"></div>
<button id="redraw" onclick="redraw();">Redraw</button>
<div id="popupAlert"></div>
<div id="alertInfo"></div>
</body>
</html>