support for vmstat from multiple hosts

web/index.html

@@ -10,15 +10,20 @@
 <script src="js/chroma.min.js"></script>
 <script src="stats.js"></script>
 
-<main id="charts">
-  <section class="chart template">
-    <h2 class="title"></h2>
-    <canvas width="600" height="80"></canvas>
-    <ul class="stats">
-        <li class="stat template">
-            <span class="stat-name"></span>
-            <span class="stat-value"></span>
-        </li>
-    </ul>
+<main id="servers">
+  <section class="server template">
+    <h2 class="hostname"></h2>
+    <section class="charts">
+      <section class="chart template">
+        <h2 class="title"></h2>
+        <canvas width="600" height="80"></canvas>
+        <ul class="stats">
+            <li class="stat template">
+                <span class="stat-name"></span>
+                <span class="stat-value"></span>
+            </li>
+        </ul>
+      </section>
+    </section>
   </section>
 </main>

web/stats.css

@@ -13,12 +13,13 @@ h2 {
     margin: 40px 0 0 0;
     font-weight: 300;
 }
-main {
-    width: 600px;
-    margin: auto;
+.server {
+  float: left;
+  margin-left: 10px;
+  opacity: 0.1;
 }
-section {
-    clear: left;
+.server.connected {
+  opacity: 1;
 }
 .stats {
     margin: 0;

web/stats.js

@@ -1,5 +1,3 @@
-var allTimeSeries = {};
-var allValueLabels = {};
 var descriptions = {
     'Processes': {
         'r': 'Number of processes waiting for run time',
@@ -31,19 +29,27 @@ var descriptions = {
     }
 }
 
-function streamStats() {
+function ServerStats(host) {
+    this.host = host;
+    this.allTimeSeries = {};
+    this.allValueLabels = {};
+}
 
-    var ws = new ReconnectingWebSocket('ws://' + location.host + '/');
+ServerStats.prototype.streamStats = function(host) {
+    var self = this;
+    var ws = new ReconnectingWebSocket('ws://' + this.host + '/');
     var lineCount;
     var colHeadings;
 
     ws.onopen = function() {
         console.log('connect');
         lineCount = 0;
+        self.server.addClass('connected');
     };
 
     ws.onclose = function() {
         console.log('disconnect');
+        self.server.removeClass('connected');
     };
 
     ws.onmessage = function(e) {
@@ -61,14 +67,18 @@ function streamStats() {
                 for (var i = 0; i < colHeadings.length; i++) {
                     stats[colHeadings[i]] = parseInt(colValues[i]);
                 }
-                receiveStats(stats);
+                self.receiveStats(stats);
         }
     };
 }
 
-function initCharts() {
+ServerStats.prototype.initCharts = function() {
+    var self = this;
+    self.server = $('.server.template').clone().removeClass('template').appendTo('#servers');
+    self.server.find('.hostname').text(this.host.split(/:/)[0]);
+
     Object.each(descriptions, function(sectionName, values) {
-        var section = $('.chart.template').clone().removeClass('template').appendTo('#charts');
+        var section = self.server.find('.chart.template').clone().removeClass('template').appendTo(self.server.find('.charts'));
 
         section.find('.title').text(sectionName);
 
@@ -97,27 +107,36 @@ function initCharts() {
                 fillStyle: chroma(color).darken().alpha(0.5).css(),
                 lineWidth: 3
             });
-            allTimeSeries[name] = timeSeries;
+            self.allTimeSeries[name] = timeSeries;
 
             var statLine = section.find('.stat.template').clone().removeClass('template').appendTo(section.find('.stats'));
             statLine.attr('title', valueDescription).css('color', color);
             statLine.find('.stat-name').text(name);
-            allValueLabels[name] = statLine.find('.stat-value');
+            self.allValueLabels[name] = statLine.find('.stat-value');
         });
     });
 }
 
-function receiveStats(stats) {
+ServerStats.prototype.receiveStats = function(stats) {
+    var self = this;
     Object.each(stats, function(name, value) {
-        var timeSeries = allTimeSeries[name];
+        var timeSeries = self.allTimeSeries[name];
         if (timeSeries) {
             timeSeries.append(Date.now(), value);
-            allValueLabels[name].text(value);
+            self.allValueLabels[name].text(value);
         }
     });
 }
 
 $(function() {
-    initCharts();
-    streamStats();
+    var hosts = [
+      location.host
+    ];
+
+    Object.each(hosts, function(i, host) {
+      var stats = new ServerStats(host);
+      stats.initCharts();
+      stats.streamStats();
+    });
+
 });