From f3fc5a2ffd59a663bc595c22a6350e8633208f37 Mon Sep 17 00:00:00 2001
From: George Prekas <prekgeo@yahoo.com>
Date: Tue, 15 Dec 2015 11:45:55 +0100
Subject: [PATCH 1/2] show vmstat from multiple hosts

---
 web/index.html | 25 +++++++++++++++----------
 web/stats.css  |  8 +++-----
 web/stats.js   | 45 +++++++++++++++++++++++++++++++--------------
 3 files changed, 49 insertions(+), 29 deletions(-)

diff --git a/web/index.html b/web/index.html
index c020abe..16563e4 100644
--- a/web/index.html
+++ b/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>
diff --git a/web/stats.css b/web/stats.css
index 674da9f..506f3a1 100644
--- a/web/stats.css
+++ b/web/stats.css
@@ -13,12 +13,10 @@ h2 {
     margin: 40px 0 0 0;
     font-weight: 300;
 }
-main {
-    width: 600px;
-    margin: auto;
+.server {
+  float: left;
+  margin-left: 10px;
 }
-section {
-    clear: left;
 }
 .stats {
     margin: 0;
diff --git a/web/stats.js b/web/stats.js
index 61d8071..a8ac119 100644
--- a/web/stats.js
+++ b/web/stats.js
@@ -1,5 +1,3 @@
-var allTimeSeries = {};
-var allValueLabels = {};
 var descriptions = {
     'Processes': {
         'r': 'Number of processes waiting for run time',
@@ -31,9 +29,15 @@ 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;
 
@@ -61,14 +65,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 +105,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();
+    });
+
 });

From cab1fc6cf7c4f4b7060096a167059f7af56e039a Mon Sep 17 00:00:00 2001
From: George Prekas <prekgeo@yahoo.com>
Date: Tue, 15 Dec 2015 11:50:11 +0100
Subject: [PATCH 2/2] reduce opacity for unconnected hosts

---
 web/stats.css | 3 +++
 web/stats.js  | 2 ++
 2 files changed, 5 insertions(+)

diff --git a/web/stats.css b/web/stats.css
index 506f3a1..3634749 100644
--- a/web/stats.css
+++ b/web/stats.css
@@ -16,7 +16,10 @@ h2 {
 .server {
   float: left;
   margin-left: 10px;
+  opacity: 0.1;
 }
+.server.connected {
+  opacity: 1;
 }
 .stats {
     margin: 0;
diff --git a/web/stats.js b/web/stats.js
index a8ac119..d25ecc9 100644
--- a/web/stats.js
+++ b/web/stats.js
@@ -44,10 +44,12 @@ ServerStats.prototype.streamStats = function(host) {
     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) {