Skip to content

Instantly share code, notes, and snippets.

@h-imaoka

h-imaoka/flowlogviewer.html

Last active August 29, 2015 14:27
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save h-imaoka/502e577e18e71440c4dc to your computer and use it in GitHub Desktop.
Save h-imaoka/502e577e18e71440c4dc to your computer and use it in GitHub Desktop.
Download ZIP
AWS VPC Flowlog Viewer (AWS VPC Flowlogを読みやすくするやーつ)
Raw
flowlogviewer.html
<!doctype html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Cloud Watch Flowlog</title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/r/bs/jq-2.1.4,dt-1.10.8/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/r/bs/jq-2.1.4,dt-1.10.8/datatables.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<style type="text/css">
<!--
.container {width: 100%;}
//-->
</style>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- datetimepicker -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.15.35/css/bootstrap-datetimepicker.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/locale/ja.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.15.35/js/bootstrap-datetimepicker.min.js"></script>
<!-- AWS SDK -->
<script src="https://sdk.amazonaws.com/js/aws-sdk-2.1.45.min.js"></script>
<script>
function unixTime2Date(ts) {
var d = new Date( ts * 1000 );
var year = d.getFullYear();
var month = d.getMonth() + 1;
var day = d.getDate();
var hour = ( d.getHours() < 10 ) ? '0' + d.getHours() : d.getHours();
var min = ( d.getMinutes() < 10 ) ? '0' + d.getMinutes() : d.getMinutes();
var sec = ( d.getSeconds() < 10 ) ? '0' + d.getSeconds() : d.getSeconds();
return (year + '-' + month + '-' + day + ' ' + hour + ':' + min + ':' + sec);
}
function filterColumn ( i ) {
$('#table_id').DataTable().column( i ).search(
$('#col'+i+'_filter').val(),
$('#col'+i+'_regex').prop('checked'),
$('#col'+i+'_smart').prop('checked')
).draw();
}
function setBlobUrl(id, content) {
var json = JSON.stringify(content);
var blob = new Blob([ json ], { "type" : "application/json" });
window.URL = window.URL || window.webkitURL;
$("#" + id).attr("href", window.URL.createObjectURL(blob));
$("#" + id).attr("download", moment().format("YYYYMMDDHHmm") + "_flowlog.json");
}
function getAllEventLogs ( params, nextToken ) {
var cloudwatchlogs = new AWS.CloudWatchLogs();
if (nextToken != null) {
params.nextToken = nextToken;
}
cloudwatchlogs.getLogEvents(params, function(err, data) {
if (err) {
console.log(err, err.stack);
return;
} else {
events = data.events
if (events.length === 0) {
$('#table_id').DataTable( {
data: dataSet,
destroy: true,
columns: cols,
});
$('input.column_filter').on( 'keyup click', function () {
filterColumn( $(this).parents('tr').attr('data-column') );
} );
return;
}
for (var i=0; i < events.length; i++) {
msg = events[i].message.split(' ');
dataSet.push([
msg[3],
msg[4],
msg[5],
msg[6],
msg[7],
msg[8],
msg[9],
unixTime2Date(msg[10]),
unixTime2Date(msg[11]),
msg[12],
msg[13]
]);
}
getAllEventLogs( params, data.nextForwardToken );
}
})
}
var dataSet = [
];
var cols = [
{ title: "srcaddr", "orderData": 1 },
{ title: "dstaddr", "orderData": 2 },
{ title: "srcport", "orderData": [3, 4] },
{ title: "dstport", "orderData": [4, 3] },
{ title: "protocol" },
{ title: "packets" },
{ title: "bytes" },
{ title: "start" },
{ title: "end" },
{ title: "action" },
{ title: "log-status" },
];
$(function() {
$("#makedllink").click(function(){
setBlobUrl("dllink", dataSet);
});
$('#getLogs').click(function(e) {
AWS.config.update({accessKeyId: $('#acckey').val(),
secretAccessKey: $('#seckey').val() });
AWS.config.update({region: $('#region').val() });
dataSet = [];
var params = {
logGroupName: $('#loggroup').val() ,
logStreamName: $('#logstream').val() ,
startFromHead: true
};
if (unixts = Date.parse($('#startdt').val()) / 1000 ) {
params['startTime'] = unixts;
} else {
params['startFromHead'] = true;
}
getAllEventLogs(params,null);
$('#table_id').DataTable( {
data: dataSet,
destroy: true,
columns: cols,
});
$('input.column_filter').on( 'keyup click', function () {
filterColumn( $(this).parents('tr').attr('data-column') );
} );
})
});
$(document).ready(function(){
$('#table_id').dataTable( {
data: dataSet,
columns: cols
} );
});
</script>
</head>
<body>
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" href="#credential">Credential & LogGroup</a>
</h4>
</div>
<div id="credential" class="panel-collapse collapse in">
<div class="panel-body">
<div class="form-group">
<label>AccsessKey</label>
<input type="text" id="acckey" class="form-control">
</div>
<div class="form-group">
<label>SecretKey</label>
<input type="text" id="seckey" class="form-control">
</div>
<div class="form-group">
<select id="region" class="input-sm">
<option value="ap-northeast-1">ap-northeast-1</option>
<option value="us-west-1">us-west-1</option>
</select>
</div>
<div class="form-group">
<label>LogGroupName</label>
<input type="text" id="loggroup" class="form-control">
</div>
<div class="form-group">
<label>LogStreamName</label>
<input type="text" id="logstream" class="form-control">
</div>
<div class="form-group">
<div class="input-group date" id="dtpicker_1">
<input type="text" class="form-control" id="startdt" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#dtpicker_1').datetimepicker({
format: 'YYYY/MM/DD HH:mm',
//language: 'en',
//locale: 'ja'
});
});
</script>
<button id="getLogs" class="btn btn-primary">update</button>
<button id="makedllink" class="btn btn-default">CreateDownloadLink</button>
<a id="dllink" target="_blank">DownloadLink</a>
</div>
</div>
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" href="#query">Query</a>
</h4>
</div>
<div id="query" class="panel-collapse collapse">
<div class="panel-body">
<table cellpadding="3" cellspacing="0" border="0" style="width: 67%; margin: 0 auto 2em auto;">
<thead>
<tr>
<th>Target</th>
<th>Search text</th>
<th>Treat as regex</th>
<th>Use smart search</th>
</tr>
</thead>
<tbody>
<tr id="filter_col1" data-column="0">
<td>srcaddr</td>
<td align="center"><input type="text" class="column_filter" id="col0_filter"></td>
<td align="center"><input type="checkbox" class="column_filter" id="col0_regex"></td>
<td align="center"><input type="checkbox" class="column_filter" id="col0_smart" checked="checked"></td>
</tr>
<tr id="filter_col2" data-column="1">
<td>dstaddr</td>
<td align="center"><input type="text" class="column_filter" id="col1_filter"></td>
<td align="center"><input type="checkbox" class="column_filter" id="col1_regex"></td>
<td align="center"><input type="checkbox" class="column_filter" id="col1_smart" checked="checked"></td>
</tr>
<tr id="filter_col3" data-column="2">
<td>srcport</td>
<td align="center"><input type="text" class="column_filter" id="col2_filter"></td>
<td align="center"><input type="checkbox" class="column_filter" id="col2_regex"></td>
<td align="center"><input type="checkbox" class="column_filter" id="col2_smart" checked="checked"></td>
</tr>
<tr id="filter_col4" data-column="3">
<td>dstport</td>
<td align="center"><input type="text" class="column_filter" id="col3_filter"></td>
<td align="center"><input type="checkbox" class="column_filter" id="col3_regex"></td>
<td align="center"><input type="checkbox" class="column_filter" id="col3_smart" checked="checked"></td>
</tr>
<tr id="filter_col5" data-column="9">
<td>action</td>
<td align="center"><input type="text" class="column_filter" id="col9_filter"></td>
<td align="center"><input type="checkbox" class="column_filter" id="col9_regex"></td>
<td align="center"><input type="checkbox" class="column_filter" id="col9_smart" checked="checked"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<table id="table_id" class="table table-striped table-bordered" width="100%"></table>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment