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

On 04/24/2014 08:04 AM, Adam King wrote: > 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(a)linux.vnet.ibm.com&gt; > --- > ui/js/src/kimchi.api.js | 18 ++++++- > ui/js/src/kimchi.host.js | 124 > ++++++++++++++++++++++++++----------------- > ui/pages/tabs/host.html.tmpl | 8 --- > 3 files changed, 92 insertions(+), 58 deletions(-) > > diff --git a/ui/js/src/kimchi.api.js b/ui/js/src/kimchi.api.js > index e96a67a..4bcf072 100644 > --- a/ui/js/src/kimchi.api.js > +++ b/ui/js/src/kimchi.api.js > @@ -78,7 +78,7 @@ var kimchi = { > }, > > /** > - * Get the dynamic host stats (usually used for monitoring). > + * Get the dynamic host stats (usually used for monitoring. The right parenthesis is lost.

> */ > getHostStats : function(suc, err) { > kimchi.requestJSON({ > @@ -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..1835bfd 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); We need (SIZE + 1) points here, so it should be: 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']); > + } > + > + } What's the case of multiple memory status? Is it for physical and logical memories?

> + 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>