From b79ccd2969a1e6cbd99c1a81d1bc4ffb735a1632 Mon Sep 17 00:00:00 2001
From: Mithrand <mithrand0@users.noreply.github.com>
Date: Sun, 21 Jun 2020 11:38:59 +0200
Subject: [PATCH] add cpu stats, make container list collapse by default

---
 html/index.html   | 8 ++++++--
 html/js/script.js | 4 +++-
 httpd.js          | 2 +-
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/html/index.html b/html/index.html
index b7cf037..6d79b6c 100644
--- a/html/index.html
+++ b/html/index.html
@@ -26,13 +26,13 @@
                 <div class="panel panel-default">
                     <div class="panel-heading" role="tab">
                         <h4 class="panel-title">
-                            <a role="button" data-toggle="collapse" aria-expanded="true" href="#container-list-collapse">
+                            <a role="button" data-toggle="collapse" aria-expanded="false" href="#container-list-collapse">
                                 <span id="selected-container">Containers</span>
                                 <span class="caret"></span>
                             </a>
                         </h4>
                     </div>
-                    <div class="panel-collapse collapse in" role="tabpanel" id="container-list-collapse">
+                    <div class="panel-collapse collapse" aria-expanded="false" role="tabpanel" id="container-list-collapse">
                         <div class="panel-body">
                             <table class="table" id="container-list">
                                 <thead>
@@ -67,6 +67,10 @@
                 <div class="divider"></div>
             </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>
+            
             <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>
diff --git a/html/js/script.js b/html/js/script.js
index d6c5d56..dfcb9ad 100644
--- a/html/js/script.js
+++ b/html/js/script.js
@@ -70,7 +70,7 @@
             var options = {
                 legend: { position: 'right' }
             };
-            var chart = new google.visualization.LineChart(document.getElementById(elementId));
+            var chart = new google.visualization.AreaChart(document.getElementById(elementId));
             chart.draw(data, options);
         });
     };
@@ -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');
diff --git a/httpd.js b/httpd.js
index ee04a27..def5431 100644
--- a/httpd.js
+++ b/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) {