[Kimchi-devel] [PATCH v2] Display historical host statistical info on the host tab

Adam King rak at linux.vnet.ibm.com
Thu Apr 24 14:09:44 UTC 2014


Update the host tab statistics graphs to make use of the newly available historical data.
Removed option to continue collecting data while the host tab is out of view, as the server
always has the historcal data available.

Signed-off-by: Adam King <rak at linux.vnet.ibm.com>
---
 ui/js/src/kimchi.api.js      |  16 ++++++
 ui/js/src/kimchi.host.js     | 124 ++++++++++++++++++++++++++-----------------
 ui/pages/tabs/host.html.tmpl |   8 ---
 3 files changed, 91 insertions(+), 57 deletions(-)

diff --git a/ui/js/src/kimchi.api.js b/ui/js/src/kimchi.api.js
index e96a67a..8dfa473 100644
--- a/ui/js/src/kimchi.api.js
+++ b/ui/js/src/kimchi.api.js
@@ -94,6 +94,22 @@ var kimchi = {
     },
 
     /**
+     * Get the historic host stats.
+     */
+    getHostStatsHistory : function(suc, err) {
+        kimchi.requestJSON({
+            url : kimchi.url + 'host/stats/history',
+            type : 'GET',
+            resend: true,
+            contentType : 'application/json',
+            headers: {'Kimchi-Robot': 'kimchi-robot'},
+            dataType : 'json',
+            success : suc,
+            error: err
+        });
+    },
+
+    /**
      *
      * Create a new Virtual Machine. Usage: kimchi.createVM({ name: 'MyUbuntu',
      * template: '/templates/ubuntu_base' }, creationSuc, creationErr);
diff --git a/ui/js/src/kimchi.host.js b/ui/js/src/kimchi.host.js
index 966ee54..9337a3b 100644
--- a/ui/js/src/kimchi.host.js
+++ b/ui/js/src/kimchi.host.js
@@ -448,12 +448,6 @@ kimchi.host_main = function() {
             });
         });
 
-        var keepMonitoringCheckbox = $('#keep-monitoring-checkbox');
-        keepMonitoringCheckbox.prop('checked', kimchi.keepMonitoringHost === true);
-        keepMonitoringCheckbox.on('change', function(event) {
-            kimchi.keepMonitoringHost = this['checked'];
-        });
-
         kimchi.getCapabilities(function(capabilities) {
             kimchi.host.capabilities=capabilities;
             if((capabilities['repo_mngt_tool']) && (capabilities['repo_mngt_tool']!="None")) {
@@ -566,9 +560,17 @@ kimchi.host_main = function() {
                     var max = item[metrics]['max'];
                     var unifiedMetrics = statsArray[key][metrics];
                     var ps = unifiedMetrics['points'];
-                    ps.push(value);
-                    ps.length > SIZE + 1 &&
-                        ps.shift();
+                    if(!Array.isArray(value)){
+                        ps.push(value);
+                        if(ps.length > SIZE + 1) {
+                            ps.shift();
+                        }
+                    }
+                    else{
+                        ps=ps.concat(value);
+                        ps.splice(0, ps.length-SIZE-1);
+                        unifiedMetrics['points']=ps;
+                    }
                     if(max !== undefined) {
                         unifiedMetrics['max'] = max;
                     }
@@ -645,47 +647,76 @@ kimchi.host_main = function() {
       };
 
       var self = this;
-      var track = function() {
-          kimchi.getHostStats(function(stats) {
-              var unifiedStats = {
-                  cpu: {
-                      u: {
-                          v: stats['cpu_utilization']
-                      }
-                  },
-                  memory: {
-                      u: {
-                          v: stats['memory']['avail'],
-                          max: stats['memory']['total']
-                      }
+
+      var UnifyStats = function(stats) {
+          var result= {
+              cpu: {
+                  u: {
+                      v: stats['cpu_utilization']
+                  }
+              },
+              memory: {
+                  u: {
+                  }
+              },
+              diskIO: {
+                  r: {
+                      v: stats['disk_read_rate']
                   },
-                  diskIO: {
-                      r: {
-                          v: stats['disk_read_rate']
-                      },
-                      w: {
-                          v: stats['disk_write_rate']
-                      }
+                  w: {
+                      v: stats['disk_write_rate']
+                  }
+              },
+              networkIO: {
+                  r: {
+                      v: stats['net_recv_rate']
                   },
-                  networkIO: {
-                      r: {
-                          v: stats['net_recv_rate']
-                      },
-                      s: {
-                          v: stats['net_sent_rate']
-                      }
+                  s: {
+                      v: stats['net_sent_rate']
                   }
-              };
+              }
+          };
+          if(Array.isArray(stats['memory'])){
+              result.memory.u['v']=[];
+              result.memory.u['max']=-Infinity;
+              for(var i=0;i<stats['memory'].length;i++){
+                  result.memory.u['v'].push(stats['memory'][i]['avail']);
+                  result.memory.u['max']=Math.max(result.memory.u['max'],stats['memory'][i]['total']);
+              }
+              
+          }
+          else {
+              result.memory.u['v']=stats['memory']['avail'],
+              result.memory.u['max']=stats['memory']['total']
+          }
+          return(result);
+      };
+
+
+      var statsCallback = function(stats) {
+              var unifiedStats = UnifyStats(stats);
               statsPool.add(unifiedStats);
               for(var key in charts) {
                   var chart = charts[key];
                   chart.updateUI(statsPool.get(key));
               }
               timer = setTimeout(function() {
-                  track();
+                  continueTrack();
               }, 1000);
-          }, function() {
-          });
+          };
+          
+      var track = function() {
+          kimchi.getHostStatsHistory(statsCallback,
+            function() {
+                continueTrack();
+            });
+      };
+      
+      var continueTrack = function() {
+          kimchi.getHostStats(statsCallback,
+            function() {
+                continueTrack();
+            });
       };
 
       var destroy = function() {
@@ -702,11 +733,8 @@ kimchi.host_main = function() {
 
     var initTracker = function() {
         // TODO: Extend tabs with onUnload event to unregister timers.
-        if(!kimchi.keepMonitoringHost && kimchi.hostTimer) {
-            var timer = kimchi.hostTimer;
-            timer.stop();
-            timer = null;
-            kimchi.hostTimer = null;
+        if(kimchi.hostTimer) {
+            kimchi.hostTimer.stop();
             delete kimchi.hostTimer;
         }
 
@@ -743,12 +771,10 @@ kimchi.host_main = function() {
     };
 
     $('#host-root-container').on('remove', function() {
-        if(!kimchi.keepMonitoringHost && kimchi.hostTimer) {
+        if(kimchi.hostTimer) {
             kimchi.hostTimer.stop();
-            kimchi.hostTimer = null;
-            kimchi.hostTimer = null;
             delete kimchi.hostTimer;
-        }
+            }
 
         repositoriesGrid && repositoriesGrid.destroy();
         kimchi.topic('kimchi/repositoryAdded')
diff --git a/ui/pages/tabs/host.html.tmpl b/ui/pages/tabs/host.html.tmpl
index e59513b..75cf54d 100644
--- a/ui/pages/tabs/host.html.tmpl
+++ b/ui/pages/tabs/host.html.tmpl
@@ -87,14 +87,6 @@
                 </h3>
                 <div id="content-sys-statistics" class="section-content">
                     <div class="section-row">
-                        <div class="section-label"></div>
-                        <div class="section-value">
-                            <input id="keep-monitoring-checkbox" type="checkbox" value="" />
-                            <label for="keep-monitoring-checkbox">$_("Collecting data after leaving this page")</label>
-                        </div>
-                    </div>
-
-                    <div class="section-row">
                         <div class="section-label">$_("CPU")</div>
                         <div class="section-value">
                             <div id="container-chart-cpu" class="inline-block"></div>
-- 
1.9.0




More information about the Kimchi-devel mailing list