client.onClose() and css tweaks

mcgridl.js

@@ -116,10 +116,12 @@ function clearClients() {
   }
 }
 
-clearClients();
+function makeClients(servers, concurrency) {
+  // Clear old clients.
+  //
+  clearClients();
 
-function makeClients(servers) {
-  // Expand parameters for the new servers.
+  // Expand parameters for the new clients.
   //
   var params = [];
 
@@ -130,10 +132,8 @@ function makeClients(servers) {
     }
   }
 
-  // Clear old clients and create new ones, if needed.
+  // Create new clients, if needed.
   //
-  clearClients();
-
   if (params.length > 0) {
     for (var i = 0; i < params.length; i++) {
       clients.item[i] = mcgridl_util.startAsciiItemClient(params[i].host,
@@ -161,10 +161,6 @@ function makeClients(servers) {
 
 // ----------------------------------------------------
 
-makeClients(servers);
-
-// ----------------------------------------------------
-
 http.createServer(function(request, response) {
     var u = url.parse(request.url);
 
@@ -255,5 +251,9 @@ function serveStats(response, contentType) {
   }
 }
 
+// ----------------------------------------------------
+
+makeClients(servers, concurrency);
+
 sys.log('your mcgridl is ready at http://*:' + port + '/index.html');
 

mcgridl_util.js

@@ -25,6 +25,7 @@ exports.startAsciiItemClient = function(host, port, id, opts) {
   opts = opts || {};
   opts.dbg         = opts.dbg || false;
   opts.paused      = opts.paused || false;
+  opts.onClose     = opts.onClose || function() {};
   opts.maxInflight = opts.maxInFlight || 1;
   opts.maxGoodKey  = opts.maxGoodKey || 1000;
   opts.setRatio    = opts.setRatio || 0.10;
@@ -40,21 +41,17 @@ exports.startAsciiItemClient = function(host, port, id, opts) {
 
   var stream = net.createConnection(port, host);
   if (stream == null) {
-    return false;
+    return null;
   }
 
   var paused = opts.paused;
   var inflight = 0;
   var nextGoodKey = 0;
 
   stream.setEncoding('binary');
-
+  stream.addListener('close', opts.onClose);
   stream.addListener('connect', writeMore);
   stream.addListener('drain', writeMore);
-  stream.addListener('error',
-    function(ex) {
-      dbg('EX: ' + ex);
-    });
   stream.addListener('data',
     function(data) {
       dbg(data);
@@ -163,6 +160,7 @@ exports.startAsciiStatsClient = function(host, port, opts) {
   opts = opts || {};
   opts.dbg                 = opts.dbg || false;
   opts.paused              = opts.paused || false;
+  opts.onClose             = opts.onClose || function() {};
   opts.onStatsResult       = opts.onStatsResult || null;
   opts.statsSubCommand     = opts.statsSubCommand || null;
   opts.statsIntervalMillis = opts.statsIntervalMillis || 100;
@@ -179,10 +177,11 @@ exports.startAsciiStatsClient = function(host, port, opts) {
 
   var stream = net.createConnection(port, host);
   if (stream == null) {
-    return false;
+    return null;
   }
 
   stream.setEncoding('binary');
+  stream.addListener('close', opts.onClose);
 
   var paused = opts.paused;
   var inflight = 0;
@@ -260,6 +259,7 @@ exports.startBinaryStatsClient = function(host, port, opts) {
   opts = opts || {};
   opts.dbg                 = opts.dbg || false;
   opts.paused              = opts.paused || false;
+  opts.onClose             = opts.onClose || function() {};
   opts.onStatsResult       = opts.onStatsResult || null;
   opts.statsSubCommand     = opts.statsSubCommand || null;
   opts.statsIntervalMillis = opts.statsIntervalMillis || 100;
@@ -273,10 +273,11 @@ exports.startBinaryStatsClient = function(host, port, opts) {
 
   var stream = net.createConnection(port, host);
   if (stream == null) {
-    return false;
+    return null;
   }
 
   stream.setEncoding('binary');
+  stream.addListener('close', opts.onClose);
 
   var paused = opts.paused;
   var inflight = 0;

static/css/screen.css

@@ -32,7 +32,9 @@ h2 {
 }
 
 .servers ul {
-  margin: 5px 0 0 20px;
+  margin: 10px 0 0 20px;
+  font-size: 8px;
+  color: #999;
 }
 
 .graph {
@@ -70,7 +72,7 @@ ul.barGraph {
   border: 1px solid #333;
   padding: 0;
   position: relative;
-  height: 100px;
+  height: 80px;
 }
 
 ul.barGraph li {
@@ -86,8 +88,13 @@ ul.barGraph li {
   background-color: #aaeecc;
 }
 
+.vBucket .servers ul {
+  display: none;
+}
+
 .vBucketPanel {
   margin: 10px 0 40px 0;
+  overflow: hidden;
 }
 
 .vBuckets {

static/index.html

@@ -121,6 +121,8 @@ <h1>mcgridl</h1>
       if (m) {
         for (var key in m) {
           statsVBuckets[key] = m[key];
+
+          $('.main').addClass('vBucket');
         }
       }
 
@@ -228,6 +230,7 @@ <h1>mcgridl</h1>
       var widthTable = 600;
       var widthCell  = Math.ceil(widthTable / numVBucket);
       var h = [];
+
       for (var key in drawVBucketCurr) {
         h.push('<div class="vBucketServer">' +
                   '<label>' + key + '</label>' +