Skip to content

Commit

Permalink
Update monitoring display
Browse files Browse the repository at this point in the history
  • Loading branch information
chamerling committed Nov 19, 2012
1 parent 700f5f3 commit 1e4be54
Show file tree
Hide file tree
Showing 3 changed files with 184 additions and 25 deletions.
10 changes: 7 additions & 3 deletions client/index.js
Expand Up @@ -16,9 +16,9 @@ var i = 0;
var id = setInterval(function() { var id = setInterval(function() {
var message = { var message = {
uuid: uuid.v1(), uuid: uuid.v1(),
type: "newOutNotifyError", type: "newInNotifyOutput",
topic: { topic: {
name: "TestTopic", name: "TestTopic" + random(),
ns: "http://play.ow2.org", ns: "http://play.ow2.org",
prefix:"play" prefix:"play"
}, },
Expand Down Expand Up @@ -51,6 +51,10 @@ var id = setInterval(function() {
console.log('Response for request # ' + i + ' (' + diff + ' ms) : ' + response.statusCode + ' : ', body); console.log('Response for request # ' + i + ' (' + diff + ' ms) : ' + response.statusCode + ' : ', body);
} }
}) })
}, 100); }, 150);

function random() {
return Math.floor((Math.random()*10)+1);
}




57 changes: 35 additions & 22 deletions public/notify.html
Expand Up @@ -87,40 +87,53 @@
<button type="button" class="close" data-dismiss="alert">×</button> <button type="button" class="close" data-dismiss="alert">×</button>
<div id="waiting">Waiting message...</div> <div id="waiting">Waiting message...</div>
</div> </div>

<h3>Live Stats</h3>
<div id="stats" class="well">
<b>Last update : </b><b id="meanlast">-</b><br>
<b>FPS since start : </b><b id="meanstart">-</b><br>
<b>FPS in the last ten seconds : </b><b id="meanten">-</b>
</div>


<h3>Messages</h3> <h3>Live Messages per Topic</h3>
<div class="well">
<div id="total"></div>
</div>
<div id="socketout"></div> <div id="socketout"></div>
</div>
<div id="debug"></div>

</div>


<script> <script>
var socket = io.connect(); var socket = io.connect();
var nb = 0; var nb = 0;
var content = document.getElementById("notify"); var content = document.getElementById("notify");
var count = document.getElementById("count"); var count = document.getElementById("count");
var topics = {};


socket.on('notify', function(data) { socket.on('notify', function(data) {
nb++; nb++;
if (nb == 1) {
$('#remove').remove();
}

var receivedAt = new Date(); var receivedAt = new Date();
$('#socketout').prepend('<div class=\"alert alert-info\">New message #' + nb + ' at ' + receivedAt.toGMTString() + '</div><pre><code>' + JSON.stringify(data.message, null, 4) + '' + '</code></pre><br><br>'); var notify = data.message.data;

var topic_name = notify.topic.ns + '/' + notify.topic.name;
$('#remove').remove(); var total = 0;
});

if (topics[topic_name] != undefined) {
socket.on('average_since_start', function(data) { topics[topic_name]++;
$('#meanstart').html(data.message); } else {
$('#meanlast').html('' + new Date()); topics[topic_name] = 1;
}); }


socket.on('average_last_ten', function(data) { var list = '<table class=\"table\"><thead><tr><th>Topic Name</th><th>Nb Notify</th></tr></thead><tbody>';
$('#meanten').html(data.message); for(var topic in topics) {
$('#meanlast').html('' + new Date()); total += topics[topic];
var badge = ' badge-success';
if (topic === topic_name){
badge = ' badge-important';
}
list += '<tr><td><a href=\"'+topic+'\">' + topic + '</a></td><td><span class=\"badge'+badge+'\">' + topics[topic] + '</span></td></tr>';
}
list += '</tbody></table>'
$('#socketout').html(list);
$('#total').html('Nb of messages : ' + total + ', last at ' + new Date().toGMTString());
}); });


</script> </script>
Expand Down
142 changes: 142 additions & 0 deletions public/streamnotify.html
@@ -0,0 +1,142 @@
<html>
<head>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.css">
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}

.sidebar-nav {
padding: 9px 0;
}
</style>
<link href="assets/bootstrap/css/bootstrap-responsive.css" rel="stylesheet">

<script src="/socket.io/socket.io.js"></script>
</head>
<body>

<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse"
data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="/">PLAY.mon</a>
<div class="nav-collapse" id="main-menu">
<ul class="nav" id="main-menu-left">
<li class="dropdown"><a class="dropdown-toggle"
data-toggle="dropdown" href="#">Live <b class="caret"></b></a>
<ul class="dropdown-menu" id="swatch-menu">
<li><a href="/notify.html">Notify</a></li>
<li><a href="/streamerror.html">Errors</a></li>
<li><a href="/streamsubscribe.html">Subscribes</a></li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle"
data-toggle="dropdown" href="#">Charts <b class="caret"></b></a>
<ul class="dropdown-menu" id="swatch-menu">
<li><a href="/livecharts.html" target="_blank">Live</a></li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle"
data-toggle="dropdown" href="#">WSN <b class="caret"></b></a>
<ul class="dropdown-menu" id="swatch-menu">
<li><a href="/errors.html">Subscribers Errors</a></li>
<li><a href="/wsninout.html">In Out</a></li>
<li><a href="/wsnstore.html">Last</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">API <b class="caret"></b></a>
<ul class="dropdown-menu" id="swatch-menu">
<li><a href="/api/v1/stats" target="_blank">Stats</a></li>
</ul>
</li>

<!--
<li class="dropdown"><a class="dropdown-toggle"
data-toggle="dropdown" href="#">Services <b class="caret"></b></a>
<ul class="dropdown-menu" id="swatch-menu">
<li><a href="@{RegistryController.services()}">List</a></li>
<li><a href="@{RegistryController.load()}">Load</a></li>
</ul>
</li>
-->
</ul>
<ul class="nav pull-right" id="main-menu-right">
<li class="dropdown" id="preview-menu">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Admin <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#"><b>Connect...</b></a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>

<div class="container">

<div id="remove" class="alert alert-success">
<button type="button" class="close" data-dismiss="alert">×</button>
<div id="waiting">Waiting message...</div>
</div>

<h3>Live Stats</h3>
<div id="stats" class="well">
<b>Last update : </b><b id="meanlast">-</b><br>
<b>FPS since start : </b><b id="meanstart">-</b><br>
<b>FPS in the last ten seconds : </b><b id="meanten">-</b>
</div>

<h3>Messages</h3>
<div id="socketout"></div>
</div>

<script>
var socket = io.connect();
var nb = 0;
var content = document.getElementById("notify");
var count = document.getElementById("count");

socket.on('notify', function(data) {
nb++;
var receivedAt = new Date();
$('#socketout').prepend('<div class=\"alert alert-info\">New message #' + nb + ' at ' + receivedAt.toGMTString() + '</div><pre><code>' + JSON.stringify(data.message, null, 4) + '' + '</code></pre><br><br>');

$('#remove').remove();
});

socket.on('average_since_start', function(data) {
$('#meanstart').html(data.message);
$('#meanlast').html('' + new Date());
});

socket.on('average_last_ten', function(data) {
$('#meanten').html(data.message);
$('#meanlast').html('' + new Date());
});

</script>
<script src="assets/javascript/jquery-1.7.2.js"></script>
<script src="assets/bootstrap/js/bootstrap-transition.js"></script>
<script src="assets/bootstrap/js/bootstrap-alert.js"></script>
<script src="assets/bootstrap/js/bootstrap-modal.js"></script>
<script src="assets/bootstrap/js/bootstrap-dropdown.js"></script>
<script src="assets/bootstrap/js/bootstrap-scrollspy.js"></script>
<script src="assets/bootstrap/js/bootstrap-tab.js"></script>
<script src="assets/bootstrap/js/bootstrap-tooltip.js"></script>
<script src="assets/bootstrap/js/bootstrap-popover.js"></script>
<script src="assets/bootstrap/js/bootstrap-button.js"></script>
<script src="assets/bootstrap/js/bootstrap-collapse.js"></script>
<script src="assets/bootstrap/js/bootstrap-carousel.js"></script>
<script src="assets/bootstrap/js/bootstrap-typeahead.js"></script>

</body>
</html>

0 comments on commit 1e4be54

Please sign in to comment.