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

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