Permalink
Browse files

Update monitoring display

  • Loading branch information...
1 parent 700f5f3 commit 1e4be542800fddfdf62cb60f90e80640fd0cfbf1 @chamerling chamerling committed Nov 19, 2012
Showing with 184 additions and 25 deletions.
  1. +7 −3 client/index.js
  2. +35 −22 public/notify.html
  3. +142 −0 public/streamnotify.html
View
@@ -16,9 +16,9 @@ var i = 0;
var id = setInterval(function() {
var message = {
uuid: uuid.v1(),
- type: "newOutNotifyError",
+ type: "newInNotifyOutput",
topic: {
- name: "TestTopic",
+ name: "TestTopic" + random(),
ns: "http://play.ow2.org",
prefix:"play"
},
@@ -51,6 +51,10 @@ var id = setInterval(function() {
console.log('Response for request # ' + i + ' (' + diff + ' ms) : ' + response.statusCode + ' : ', body);
}
})
- }, 100);
+ }, 150);
+
+function random() {
+ return Math.floor((Math.random()*10)+1);
+}
View
@@ -87,40 +87,53 @@
<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>
+ <h3>Live Messages per Topic</h3>
+ <div class="well">
+ <div id="total"></div>
+ </div>
<div id="socketout"></div>
-</div>
+
+ <div id="debug"></div>
+
+ </div>
<script>
var socket = io.connect();
var nb = 0;
var content = document.getElementById("notify");
var count = document.getElementById("count");
+ var topics = {};
socket.on('notify', function(data) {
nb++;
+ if (nb == 1) {
+ $('#remove').remove();
+ }
+
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());
+ var notify = data.message.data;
+ var topic_name = notify.topic.ns + '/' + notify.topic.name;
+ var total = 0;
+
+ if (topics[topic_name] != undefined) {
+ topics[topic_name]++;
+ } else {
+ topics[topic_name] = 1;
+ }
+
+ var list = '<table class=\"table\"><thead><tr><th>Topic Name</th><th>Nb Notify</th></tr></thead><tbody>';
+ for(var topic in topics) {
+ 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>
View
@@ -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.