diff --git a/src/sunstone/public/js/opennebula.js b/src/sunstone/public/js/opennebula.js index d08c89e43a..cc74ec6087 100644 --- a/src/sunstone/public/js/opennebula.js +++ b/src/sunstone/public/js/opennebula.js @@ -471,6 +471,39 @@ var OpenNebula = { } } }); + }, + + "monitor" : function(params){ + var callback = params.success; + var callback_error = params.error; + var id = params.data.id; + var resource = OpenNebula.Host.resource; + var data = params.data; + + var method = "monitor"; + var action = OpenNebula.Helper.action(method); + var request = OpenNebula.Helper.request(resource,method, data); + + $.ajax({ + url: "host/"+id+"/monitor", + type: "GET", + data: data['monitor'], + dataType: "json", + success: function(response) + { + if (callback) + { + callback(request,response); + } + }, + error: function(response) + { + if (callback_error) + { + callback_error(request, OpenNebula.Error(response)); + } + } + }); } }, @@ -1303,8 +1336,41 @@ var OpenNebula = { } } }); + }, + + "monitor" : function(params){ + var callback = params.success; + var callback_error = params.error; + var id = params.data.id; + var resource = OpenNebula.VM.resource; + var data = params.data; + + var method = "monitor"; + var action = OpenNebula.Helper.action(method); + var request = OpenNebula.Helper.request(resource,method, data); + + $.ajax({ + url: "vm/"+id+"/monitor", + type: "GET", + data: data['monitor'], + dataType: "json", + success: function(response) + { + if (callback) + { + callback(request,response); + } + }, + error: function(response) + { + if (callback_error) + { + callback_error(request, OpenNebula.Error(response)); + } + } + }); } - + }, "Cluster": { diff --git a/src/sunstone/public/js/plugins/hosts-tab.js b/src/sunstone/public/js/plugins/hosts-tab.js index 17c005fb62..c952f6f600 100644 --- a/src/sunstone/public/js/plugins/hosts-tab.js +++ b/src/sunstone/public/js/plugins/hosts-tab.js @@ -16,6 +16,8 @@ /*Host tab plugin*/ +var HOST_HISTORY_LENGTH = 40; + var hosts_tab_content = '
\
\ @@ -198,7 +200,29 @@ var host_actions = { OpenNebula.Cluster.list({success: updateClustersView, error: onError}); } }, - + + "Host.monitor" : { + type: "monitor", + call : OpenNebula.Host.monitor, + callback: function(req,response) { + var info = req.request.data[0]; + var label = info.monitor.monitor_res; + + //remove spinner + $('#host_monitoring_tab .loading_img').parent().remove(); + + plot_graph(response,'#host_monitoring_tab', + 'host_monitor_'+label,label); + }, + error: onError + }, + + "Host.monitor_all" : { + type: "monitor_global", + call: OpenNebula.Host.monitor_all, + error: onError + }, + "Cluster.create" : { type: "create", call : OpenNebula.Cluster.create, @@ -208,7 +232,7 @@ var host_actions = { error : onError, notify: true }, - + "Cluster.create_dialog" : { type: "custom", call: popUpCreateClusterDialog @@ -327,6 +351,10 @@ var host_info_panel = { "host_template_tab" : { title: "Host template", content: "" + }, + "host_monitoring_tab": { + title: "Monitoring information", + content: "" } }; @@ -533,7 +561,7 @@ function updateHostInfo(request,host){ '+host_info.HOST_SHARE.USED_CPU+'\ \ \ - Used CPU(allocated)\ + Used CPU (allocated)\ '+host_info.HOST_SHARE.CPU_USAGE+'\ \ \ @@ -552,11 +580,22 @@ function updateHostInfo(request,host){ prettyPrintJSON(host_info.TEMPLATE)+ '' } - + + var monitor_tab = { + title: "Monitoring information", + content : generateMonitoringDivs(["cpu_usage","mem_usage"],"host_monitor_") + } + //Sunstone.updateInfoPanelTab(info_panel_name,tab_name, new tab object); Sunstone.updateInfoPanelTab("host_info_panel","host_info_tab",info_tab); Sunstone.updateInfoPanelTab("host_info_panel","host_template_tab",template_tab); + Sunstone.updateInfoPanelTab("host_info_panel","host_monitoring_tab",monitor_tab); + Sunstone.popUpInfoPanel("host_info_panel"); + //pop up panel while we retrieve the graphs + Sunstone.runAction("Host.monitor",host_info.ID,{history_length: HOST_HISTORY_LENGTH, monitor_res: "cpu_usage"}); + Sunstone.runAction("Host.monitor",host_info.ID,{history_length: HOST_HISTORY_LENGTH, monitor_res: "mem_usage"}); + } diff --git a/src/sunstone/public/js/sunstone-util.js b/src/sunstone/public/js/sunstone-util.js index ca9ca9eabc..f1e0ce50ab 100644 --- a/src/sunstone/public/js/sunstone-util.js +++ b/src/sunstone/public/js/sunstone-util.js @@ -478,10 +478,36 @@ function escapeDoubleQuotes(string){ return string.replace(/"/g,'\\"'); } +function generateMonitoringDivs(labels, id_prefix){ + str = '
'+spinner+'
'; + var width = ($(window).width()-129)*40/100; + $.each(labels,function(){ + str+='
'; + }); + + return str; +} + +function plot_graph(data,context,id,label){ + + var serie = { + label : label, + data : data + }; + + var options = { + legend : { show : true }, + xaxis : { mode: "time", timeformat: "%h:%M" }, + yaxis : { labelWidth: 30 } + } + + $.plot($('#'+id, context),[serie],options); +} + //functions that used as true and false conditions for testing mainly function True(){ return true; } function False(){ return false; -} +} diff --git a/src/sunstone/public/js/sunstone.js b/src/sunstone/public/js/sunstone.js index 4492c40038..7645edf194 100644 --- a/src/sunstone/public/js/sunstone.js +++ b/src/sunstone/public/js/sunstone.js @@ -187,6 +187,8 @@ var Sunstone = { // * "create" calls to opennebula.js // * "single" element calls to opennebula.js // * "list" (get the pool of elements) calls to opennebula.js + // * "monitor_global" (returns monitoring information from a pool of elements + // * "monitor_single" (returns monitoring information from 1 element to create graphs) // * "multiple" - actions to be run on a given list of elements // (with maybe an extra parameter). // * The default actions. Simple call the the pre-defined "call" @@ -203,6 +205,13 @@ var Sunstone = { case "list": call({success: callback, error:err}); break; + case "monitor_global": + call({success: callback, error:err, data: {monitor: extra_param}}); + break; + case "monitor": + case "monitor_single": + call({success: callback, error:err, data: {id:data_arg, monitor: extra_param}}); + break; case "multiple": //run on the list of nodes that come on the data $.each(data_arg,function(){