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

src/sunstone/public/js/plugins/dashboard-tab.js

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

src/sunstone/public/js/plugins/hosts-tab.js

@@ -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) {

src/sunstone/public/js/plugins/vms-tab.js

@@ -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 = {};
-        }
-    }
 };
 
 

src/sunstone/public/js/sunstone.js

@@ -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);