shaba/one
1
0
Fork 0
mirror of https://github.com/OpenNebula/one.git synced 2025-03-18 02:50:09 +03:00
Code Releases Wiki Activity

Feature #2778: Remove graphs from dashboard, add simple usage bars

Browse Source
This commit is contained in:
Carlos Martín 2014-03-25 15:59:01 +01:00
parent 545567dabe
commit 5425049e68
4 changed files with 162 additions and 208 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
src/sunstone/public/js/plugins/dashboard-tab.js
View File

@ -97,28 +97,49 @@ var widgets = {
</h4>\
</div>\
</div>\
<div class="small-9 large-9 columns">\
<div class="row graph_legend text-left">\
<div class="small-4 large-4 columns">\
<h4 class="subheader text-center"><small>'+tr("CPU")+'</small></h4>\
</div>\
<div class="small-4 large-4 columns">\
<span class="label allocated radius">'+tr("Allocated")+'</span>&emsp;\
<span class="label real radius">'+tr("Real")+'</span>&emsp;\
<span class="label total radius">'+tr("Total")+'</span>\
</div>\
<div class="small-4 large-4 columns">\
<h4 class="subheader"><small>'+tr("MEMORY")+'</small></h4>\
<div class="small-4 large-4 columns">\
<div class="row graph_legend text-center">\
<div class="small-6 large-6 columns">\
<h4 class="subheader"><small>'+tr("CPU")+'</small></h4>\
</div>\
</div>\
<div class="row">\
<div class="small-6 large-6 columns">\
<div class="large-12 columns centered graph" id="dash_host_cpu_graph" style="height: 100px;">\
</div>\
<h4 class="subheader">\
<small class="subheader small-4 large-4 columns">'+tr("Allocated")+
'</small>\
</h4>\
<div class="small-8 large-8 columns" id="dash_host_allocated_cpu" >\
</div>\
</div>\
<div class="row">\
<h4 class="subheader">\
<small class="subheader small-4 large-4 columns">'+tr("Real")+
'</small>\
</h4>\
<div class="small-8 large-8 columns" id="dash_host_real_cpu" >\
</div>\
</div>\
</div>\
<div class="small-4 large-4 columns">\
<div class="row graph_legend text-center">\
<div class="small-6 large-6 columns">\
<div class="large-12 columns centered graph" id="dash_host_mem_graph" style="height: 100px;">\
</div>\
<h4 class="subheader"><small>'+tr("MEMORY")+'</small></h4>\
</div>\
</div>\
<div class="row">\
<h4 class="subheader">\
<small class="subheader small-4 large-4 columns">'+tr("Allocated")+
'</small>\
</h4>\
<div class="small-8 large-8 columns" id="dash_host_allocated_mem" >\
</div>\
</div>\
<div class="row">\
<h4 class="subheader">\
<small class="subheader small-4 large-4 columns">'+tr("Real")+
'</small>\
</h4>\
<div class="small-8 large-8 columns" id="dash_host_real_mem" >\
</div>\
</div>\
</div>\
@ -148,20 +169,23 @@ var widgets = {
<div class="small-9 large-9 columns">\
<div class="row graph_legend text-center">\
<div class="small-6 large-6 columns">\
<h4 class="subheader"><small>'+tr("NET DOWNLOAD SPEED")+'</small></h4>\
</div>\
<div class="small-6 large-6 columns">\
<h4 class="subheader"><small>'+tr("NET UPLOAD SPEED")+'</small></h4>\
<h4 class="subheader"><small>'+tr("REAL CAPACITY USAGE")+'</small></h4>\
</div>\
</div>\
<div class="row">\
<div class="small-6 large-6 columns">\
<div class="large-12 columns centered graph" id="dash_vm_net_rx_graph" style="height: 100px;">\
</div>\
</div>\
<div class="small-6 large-6 columns">\
<div class="large-12 columns centered graph" id="dash_vm_net_tx_graph" style="height: 100px;">\
<h4 class="subheader">\
<small class="subheader small-4 large-4 columns">'+tr("CPU")+
'</small>\
</h4>\
<div class="small-8 large-8 columns" id="dash_vm_real_cpu" >\
</div>\
</div>\
<div class="row">\
<h4 class="subheader">\
<small class="subheader small-4 large-4 columns">'+tr("Memory")+
'</small>\
</h4>\
<div class="small-8 large-8 columns" id="dash_vm_real_mem" >\
</div>\
</div>\
</div>\

151
src/sunstone/public/js/plugins/hosts-tab.js
View File

@ -513,113 +513,74 @@ function updateHostsView (request,host_list){
off_hosts = 0;
error_hosts = 0;
// TODO: ms to s, sunstone-util probably does s to ms
var now = new Date().getTime() / 1000;
var max_cpu = 0;
var allocated_cpu = 0;
var real_cpu = 0;
var do_host_monitoring_graphs = true;
var max_mem = 0;
var allocated_mem = 0;
var real_mem = 0;
if (typeof (last_host_monitoring_time) == 'undefined'){
last_host_monitoring_time = 0;
}
// If the refresh is too frecuent, ignore it. In seconds
if (now < last_host_monitoring_time + 60){
do_host_monitoring_graphs = false;
}
$.each(host_list,function(){
//Grab table data from the host_list
host_list_array.push(hostElementArray(this));
if (!do_host_monitoring_graphs){
max_cpu += parseInt(this.HOST.HOST_SHARE.MAX_CPU);
allocated_cpu += parseInt(this.HOST.HOST_SHARE.CPU_USAGE);
real_cpu += parseInt(this.HOST.HOST_SHARE.USED_CPU);
$.each(host_list,function(){
//Grab table data from the host_list
host_list_array.push(hostElementArray(this));
});
} else {
var empty = false;
if (typeof (host_monitoring_data) == 'undefined'){
host_monitoring_data = {};
empty = true;
}
last_host_monitoring_time = now;
var metrics = ["CPU_USAGE", "USED_CPU", "MAX_CPU", "MEM_USAGE", "USED_MEM", "MAX_MEM"];
$.each(host_list,function(){
//Grab table data from the host_list
host_list_array.push(hostElementArray(this));
// Grab monitoring data
if (host_monitoring_data[this.HOST.ID] === undefined){
host_monitoring_data[this.HOST.ID] = {};
for (var i=0; i<metrics.length; i++) {
host_monitoring_data[this.HOST.ID][metrics[i]] = [];
}
}
for (var i=0; i<metrics.length; i++) {
var mon_data = host_monitoring_data[this.HOST.ID][metrics[i]];
// The first time the pool is retrieved we add another point
// to show something in the dashboard as soon as the user
// logs in
if (empty){
mon_data.push(
[now - 60, this.HOST.HOST_SHARE[metrics[i]]] );
}
mon_data.push(
[now, this.HOST.HOST_SHARE[metrics[i]]] );
}
});
}
max_mem += parseInt(this.HOST.HOST_SHARE.MAX_MEM);
allocated_mem += parseInt(this.HOST.HOST_SHARE.MEM_USAGE);
real_mem += parseInt(this.HOST.HOST_SHARE.USED_MEM);
});
updateView(host_list_array,dataTable_hosts);
if (max_cpu > 0) {
var ratio_allocated_cpu = Math.round((allocated_cpu / max_cpu) * 100);
info_str = allocated_cpu + ' / ' + max_cpu + ' (' + ratio_allocated_cpu + '%)';
} else {
info_str = "";
}
$("#dash_host_allocated_cpu").html(usageBarHtml(allocated_cpu, max_cpu, info_str, true));
if (max_cpu > 0) {
var ratio_real_cpu = Math.round((real_cpu / max_cpu) * 100);
info_str = real_cpu + ' / ' + max_cpu + ' (' + ratio_real_cpu + '%)';
} else {
info_str = "";
}
$("#dash_host_real_cpu").html(usageBarHtml(real_cpu, max_cpu, info_str, true));
if (max_mem > 0) {
var ratio_allocated_mem = Math.round((allocated_mem / max_mem) * 100);
info_str = humanize_size(allocated_mem) + ' / ' + humanize_size(max_mem) + ' (' + ratio_allocated_mem + '%)';
} else {
info_str = humanize_size(allocated_mem) + ' / -';
}
$("#dash_host_allocated_mem").html(usageBarHtml(allocated_mem, max_mem, info_str, true));
if (max_mem > 0) {
var ratio_real_mem = Math.round((real_mem / max_mem) * 100);
info_str = humanize_size(real_mem) + ' / ' + humanize_size(max_mem) + ' (' + ratio_real_mem + '%)';
} else {
info_str = humanize_size(real_mem) + ' / -';
}
$("#dash_host_real_mem").html(usageBarHtml(real_mem, max_mem, info_str, true));
$(".total_hosts").text(host_list.length);
$(".on_hosts").text(on_hosts);
$(".off_hosts").text(off_hosts);
$(".error_hosts").text(error_hosts);
if (do_host_monitoring_graphs){
var host_dashboard_graphs = [
{
monitor_resources : "CPU_USAGE,USED_CPU,MAX_CPU",
labels : tr("Allocated")+","+tr("Real")+","+tr("Total"),
humanize_figures : false,
div_graph : $("#dash_host_cpu_graph", $dashboard)
//div_legend : $("#dash_host_cpu_legend", $dashboard)
},
{
monitor_resources : "MEM_USAGE,USED_MEM,MAX_MEM",
labels : tr("Allocated")+","+tr("Real")+","+tr("Total"),
humanize_figures : true,
div_graph : $("#dash_host_mem_graph", $dashboard),
div_legend : $("#dash_host_mem_legend", $dashboard)
}
];
var t0 = new Date().getTime();
// TODO: plot only when the dashboard is visible
for(var i=0; i<host_dashboard_graphs.length; i++) {
plot_totals(
host_monitoring_data,
host_dashboard_graphs[i]
);
}
var t1 = new Date().getTime();
// If plot takes more than 3 seconds, clear the monitoring data
if (t1 - t0 > 3000) {
host_monitoring_data = {};
}
}
}
function insert_datastores_capacity_table(host_share) {

111
src/sunstone/public/js/plugins/vms-tab.js
View File

@ -1275,106 +1275,45 @@ function updateVMachinesView(request, vmachine_list){
failed_vms = 0;
off_vms = 0;
var total_real_cpu = 0;
var total_allocated_cpu = 0;
var do_vm_monitoring_graphs = true;
var total_real_mem = 0;
var total_allocated_mem = 0;
if (!do_vm_monitoring_graphs){
$.each(vmachine_list,function(){
vmachine_list_array.push( vMachineElementArray(this));
$.each(vmachine_list,function(){
vmachine_list_array.push( vMachineElementArray(this));
});
if(this.VM.STATE == 3 && this.VM.STATE == 3){ // ACTIVE, RUNNING
total_real_cpu += parseInt(this.VM.CPU);
total_allocated_cpu += parseInt(this.VM.TEMPLATE.CPU * 100);
} else {
if (typeof (vm_monitoring_data) == 'undefined'){
vm_monitoring_data = {};
total_real_mem += parseInt(this.VM.MEMORY);
total_allocated_mem += parseInt(this.VM.TEMPLATE.MEMORY);
}
var metrics = ["NET_TX", "NET_RX"];
$.each(vmachine_list,function(){
vmachine_list_array.push( vMachineElementArray(this));
var empty = false;
var time = this.VM.LAST_POLL;
if (time != "0"){
if (vm_monitoring_data[this.VM.ID] === undefined){
empty = true;
vm_monitoring_data[this.VM.ID] = {};
for (var i=0; i<metrics.length; i++) {
vm_monitoring_data[this.VM.ID][metrics[i]] = [];
}
}
for (var i=0; i<metrics.length; i++) {
var last_time = "0";
var mon_data = vm_monitoring_data[this.VM.ID][metrics[i]];
if (!empty){
last_time = mon_data[ mon_data.length-1 ][0];
}
if (last_time != time){
mon_data.push( [time, this.VM[metrics[i]]] );
}
}
}
});
}
});
updateView(vmachine_list_array,dataTable_vMachines);
var usage = 0;
if(total_allocated_cpu != 0){
usage = parseInt(100 * total_real_cpu / total_allocated_cpu);
}
var info_str = usage+'%';
$("#dash_vm_real_cpu").html(usageBarHtml(usage, 100, info_str, true));
usage = 0;
if(total_allocated_mem != 0){
usage = parseInt(100 * total_real_mem / 1024 / total_allocated_mem);
}
info_str = usage+'%';
$("#dash_vm_real_mem").html(usageBarHtml(usage, 100, info_str, true));
$(".total_vms").text(vmachine_list.length);
$(".active_vms").text(active_vms);
$(".pending_vms").text(pending_vms);
$(".failed_vms").text(failed_vms);
$(".off_vms").text(off_vms);
if (do_vm_monitoring_graphs){
var vm_dashboard_graphs = [
{ labels : "Network transmission",
monitor_resources : "NET_TX",
humanize_figures : true,
convert_from_bytes : true,
y_sufix : "B/s",
derivative : true,
div_graph : $("#dash_vm_net_tx_graph", $dashboard)
},
{ labels : "Network reception",
monitor_resources : "NET_RX",
humanize_figures : true,
convert_from_bytes : true,
y_sufix : "B/s",
derivative : true,
div_graph : $("#dash_vm_net_rx_graph", $dashboard)
}
];
var t0 = new Date().getTime();
var vm_monitoring_data_copy = jQuery.extend(true, {}, vm_monitoring_data);
// TODO: plot only when the dashboard is visible
for(var i=0; i<vm_dashboard_graphs.length; i++) {
plot_totals(
vm_monitoring_data_copy,
vm_dashboard_graphs[i]
);
}
var t1 = new Date().getTime();
// If plot takes more than 3 seconds, clear the monitoring data
if (t1 - t0 > 3000) {
vm_monitoring_data = {};
}
}
};

30
src/sunstone/public/js/sunstone.js
View File

@ -3424,6 +3424,36 @@ function quotaBarHtml(usage, limit, info_str){
return html;
}
function usageBarHtml(usage, limit, info_str, color){
percentage = 0;
if (limit > 0){
percentage = (usage / limit) * 100;
if (percentage > 100){
percentage = 100;
}
}
info_str = info_str || ( usage+' / '+((limit > 0) ? limit : '-') );
if (color){
var r = Math.min(parseInt(255 * percentage / 50), 255);
var g = Math.min(parseInt(255 * (100 - percentage) / 50), 255);
var b = 0;
var style='width: '+percentage+'%; background: rgb('+r+','+g+','+b+') !important';
} else {
var style='width: '+percentage+'%';
}
html = '<div class="progress-container"><div class="progress secondary radius">\
<span class="meter" style="'+style+'"></span></div>\
<div class="progress-text">'+info_str+'</div></div>';
return html;
}
function quotaIntLimit(limit, default_limit){
i_limit = parseInt(limit, 10);
i_default_limit = parseInt(default_limit, 10);