Merge pull request #10 from glebarez/master

Various enhancements (see description)

README.md

@@ -11,6 +11,7 @@ docker run \
         --volume=/var/run/docker.sock:/var/run/docker.sock:ro \
         --volume=/home/docker/storage/stats/db:/opt/docker-stats/db \
         --name stats \
+        -e STATS_UPDATE_INTERVAL=10 \
         virtualzone/docker-container-stats
 ```
 
@@ -24,6 +25,8 @@ services:
     container_name: 'stats'
     ports:
       - '8080:8080'
+    environment:
+      STATS_UPDATE_INTERVAL: 10
     volumes:
       - '/var/lib/docker/:/var/lib/docker:ro'
       - '/var/run/docker.sock:/var/run/docker.sock:ro'

html/css/style.css

@@ -37,6 +37,6 @@ footer {
 
 @media (min-width: 768px) {
     .container {
-        max-width: 730px;
+        max-width: 100%;
     }
-}
+}

html/index.html

@@ -66,12 +66,17 @@
                 </table>
                 <div class="divider"></div>
             </div>
-            
+
             <h4>Mem</h4>
             <div id="mem-chart" class="chart"></div>
             <div class="alert alert-warning chart-warn" id="mem-chart-warn" role="alert">No data for specified zoom level.</div>
             <div class="divider"></div>
             
+            <h4>CPU</h4>
+            <div id="cpu-chart" class="chart"></div>
+            <div class="alert alert-warning chart-warn" id="cpu-chart-warn" role="alert">No data for specified zoom level.</div>
+            <div class="divider"></div>
+            
             <h4>Net In</h4>
             <div id="net-in-chart" class="chart"></div>
             <div class="alert alert-warning chart-warn" id="net-in-chart-warn" role="alert">No data for specified zoom level.</div>

html/js/script.js

@@ -78,6 +78,7 @@
     var renderContainerStats = function(id) {
         console.log('Rendering stats for container ' + id);
         renderLatestStats(id);
+        renderChart('cpu-chart', id, 'cpu');
         renderChart('mem-chart', id, 'mem');
         renderChart('net-in-chart', id, 'net_in');
         renderChart('net-out-chart', id, 'net_out');
@@ -95,6 +96,7 @@
 
     var renderAllContainerStats = function() {
         console.log('Rendering all container stats');
+        renderChart('cpu-chart', null, 'cpu');
         renderChart('mem-chart', null, 'mem');
         renderChart('net-in-chart', null, 'net_in');
         renderChart('net-out-chart', null, 'net_out');
@@ -161,4 +163,5 @@
     };
 
     $(document).ready(init);
+    setInterval(reRenderCharts, 3000);
 }());

httpd.js

@@ -9,7 +9,7 @@ var app = express();
 var db = new sqlite3.Database(DB_FILE, sqlite3.OPEN_READONLY);
 
 var isValidChart = function(s) {
-    return /^(net_in|net_out|block_in|block_out|mem)$/.test(s);
+    return /^(net_in|net_out|block_in|block_out|mem|cpu)$/.test(s);
 };
 
 var isValidZoom = function(s) {
@@ -83,7 +83,7 @@ app.get("/rs/container/:id/:chart/:zoom", function(req, res) {
     }
     var minDate = getMinDate(zoom);
     db.all("SELECT ts, "+chart+" FROM stats WHERE id = ? AND ts >= ? ORDER BY ts ASC", req.params.id, minDate, function(err, rows) {
-        var json = [['Time', 'Bytes']];
+        var json = [['Time', chart == 'cpu' ? 'CPU %' : 'Bytes']];
         var prev = 0;
         for (var i=0; i<rows.length; i++) {
             json.push([rows[i].ts, (!rows[i][chart] ? prev : rows[i][chart])]);

stats.js

@@ -1,6 +1,6 @@
 var DB_FILE = 'db/stats.db';
 var DOCKER = '/usr/bin/docker';
-var INTERVAL = 60;
+var INTERVAL = process.env.STATS_UPDATE_INTERVAL || 60;
 var TEST = false;
 
 var sqlite3 = require('sqlite3').verbose();