<!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>