mirror of
https://github.com/OpenNebula/one.git
synced 2025-03-16 22:50:10 +03:00
Feature #2778: Remove graphs from dashboard, add simple usage bars
This commit is contained in:
parent
545567dabe
commit
5425049e68
@ -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> \
|
||||
<span class="label real radius">'+tr("Real")+'</span> \
|
||||
<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>\
|
||||
|
@ -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) {
|
||||
|
@ -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 = {};
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
@ -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);
|
||||
|
Loading…
x
Reference in New Issue
Block a user