2013-01-05 14:10:01 -05:00
|
|
|
<!doctype html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
|
|
|
<title>DBMonitor</title>
|
|
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="css/style.css">
|
|
|
|
|
|
|
|
|
|
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
|
|
|
|
|
<script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/0.9.10/socket.io.min.js"></script>
|
|
|
|
|
<script src="//cdnjs.cloudflare.com/ajax/libs/coffee-script/1.3.3/coffee-script.min.js"></script>
|
|
|
|
|
<script src="//cdnjs.cloudflare.com/ajax/libs/mustache.js/0.5.0-dev/mustache.min.js"></script>
|
2013-02-02 15:28:04 -05:00
|
|
|
<script src="/js/jquery.mustache.js"></script>
|
2013-01-05 14:10:01 -05:00
|
|
|
|
|
|
|
|
<script type="text/coffeescript">
|
|
|
|
|
$.Mustache.load('./templates/views.html')
|
|
|
|
|
|
2013-02-02 15:28:04 -05:00
|
|
|
socket = io.connect '/', {
|
2013-01-05 14:10:01 -05:00
|
|
|
'reconnect': true,
|
|
|
|
|
'reconnection_delay': 500,
|
|
|
|
|
'max reconnection attempts': 25
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
socket.on 'connect', () ->
|
|
|
|
|
$('#disconnected').hide()
|
|
|
|
|
if $('#container tbody').children().length == 0
|
|
|
|
|
$('#empty').show()
|
|
|
|
|
|
|
|
|
|
socket.on 'disconnect', () ->
|
|
|
|
|
$('#disconnected').show()
|
|
|
|
|
$('#empty').hide()
|
|
|
|
|
|
|
|
|
|
socket.on 'error', (reason) ->
|
|
|
|
|
console.log 'Socket.io error', reason
|
|
|
|
|
|
|
|
|
|
socket.on 'update', (data) ->
|
|
|
|
|
if $('#container thead').children().length == 0
|
|
|
|
|
$('#container thead').html($.Mustache.render('header', getKeys(data)))
|
|
|
|
|
$('#empty').hide()
|
|
|
|
|
|
|
|
|
|
$('#container tbody').html($.Mustache.render('row', getValues(data)) + $('#container tbody').html())
|
|
|
|
|
|
|
|
|
|
while $('#container tbody').children().length > 20
|
|
|
|
|
$('#container tbody tr:last').remove()
|
|
|
|
|
|
|
|
|
|
getKeys = (data) ->
|
|
|
|
|
keys = []
|
|
|
|
|
keys.push key for key, value of data
|
|
|
|
|
{ 'labels': keys }
|
|
|
|
|
|
|
|
|
|
getValues = (data) ->
|
|
|
|
|
values = []
|
|
|
|
|
values.push value for key, value of data
|
|
|
|
|
{ 'values': values }
|
|
|
|
|
</script>
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
<div id="disconnected" class="down text-center">Not connected to the server. Retrying...</div>
|
|
|
|
|
<div id="empty" class="down text-center">Waiting to receive data from the server.</div>
|
|
|
|
|
<table id="container">
|
|
|
|
|
<thead></thead>
|
|
|
|
|
<tbody></tbody>
|
|
|
|
|
</table>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
