<!DOCTYPE html> <html>
<head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script> <script src="../js/jquery.tmpl.min.js"></script> <style type="text/css"> #radiator { margin-top: 1em; padding-left:10px; padding-right:10px; font-size: 120%; border-top: 1px solid black; width: 100%; } #radiator .entry:nth-child(2n) { background-color: #C4FFC6; } #radiator .timestamp { white-space: nowrap; text-align: left; vertical-align: top; font-family: monospace; font-size: 75%; padding-right: 1em; width: 14em; border-right: 1px solid grey; } #radiator .message { font-family: monospace; //text-indent: -2em; //padding-left: 3em; } </style> </head> <body> <h1> logstash information radiator </h1> New log data will be streamed here in real-time as logstash receives it. <table id="radiator"></table> <script id="message-template" type="text/x-jquery-tmpl"><![CDATA[ <tr> <td class="timestamp">${$item.data["@timestamp"]}</td> <td class="message">${$item.data["@message"]}</td> </tr> ]]></script> <script> $(document).ready(function() { var ws = new WebSocket("ws://" + document.location.hostname + ":3232"); ws.onopen = function(event) { //console.log(["WebSocket open", ws]) }; ws.onmessage = function(event) { var data = JSON.parse(event.data); var el = $("#message-template").tmpl(data, { "message": data["@message"], "timestamp": data["@timestamp"] }); //.css("display", "none") //.fadeIn() el.addClass("message") .appendTo($("#radiator")) //.delay(10000) //.hide(2000, function() { //$(this).remove(); //}); setTimeout(function() { $(el).remove() }, 12000) //.fadeOut(2000, function() { }; }); </script> </body>
</html>