1
0
mirror of https://github.com/OpenNebula/one.git synced 2025-01-08 21:17:43 +03:00

feature #3264: Include showback in cloud view

This commit is contained in:
Daniel Molina 2014-11-06 18:03:21 +01:00
parent e30d372045
commit f990a66e09
5 changed files with 453 additions and 17 deletions

View File

@ -391,6 +391,29 @@ class SunstoneServer < CloudServer
return [200, rc.to_json]
end
def get_vm_showback(options)
pool = VirtualMachinePool.new(@client)
filter_flag = options[:userfilter] ? options[:userfilter].to_i : VirtualMachinePool::INFO_ALL
start_time = options[:start_time] ? options[:start_time].to_i : -1
end_time = options[:end_time] ? options[:end_time].to_i : -1
acct_options = {
:start_time => start_time,
:end_time => end_time,
:group => options[:group]
}
rc = pool.showback(filter_flag, acct_options)
if OpenNebula.is_error?(rc)
error = Error.new(rc.message)
return [500, error.to_json]
end
return [200, rc.to_json]
end
private

View File

@ -639,6 +639,31 @@ var OpenNebula = {
}
});
},
"showback": function(params, resource, path){
var callback = params.success;
var callback_error = params.error;
var data = params.data;
var method = "showback";
var request = OpenNebula.Helper.request(resource,method, data);
var url = path ? path : resource.toLowerCase() + "/showback";
$.ajax({
url: url,
type: "GET",
data: data,
dataType: "json",
success: function(response){
return callback ? callback(request, response) : null;
},
error: function(response){
return callback_error ?
callback_error(request, OpenNebula.Error(response)) : null;
}
});
}
},
"Auth": {
@ -1045,6 +1070,9 @@ var OpenNebula = {
"accounting": function(params){
OpenNebula.Action.accounting(params,OpenNebula.VM.resource);
},
"showback": function(params){
OpenNebula.Action.showback(params,OpenNebula.VM.resource);
}
},
"Group": {

View File

@ -825,9 +825,10 @@ var provision_user_info = '<div id="provision_user_info" class="hidden section_c
'<div class="row">'+
'<div class="large-12 large-centered columns">'+
'<dl class="tabs text-center" data-tab style="width: 100%">'+
'<dd class="active" style="width: 34%;"><a href="#provision_info_settings"><i class="fa fa-fw fa-lg fa-cogs"/>&emsp;'+ tr("Settings") +'</a></dd>'+
'<dd style="width: 33%;"><a href="#provision_info_acct"><i class="fa fa-fw fa-lg fa-bar-chart-o"/>&emsp;'+ tr("Accounting") +'</a></dd>'+
'<dd style="width: 33%;"><a href="#provision_info_quotas"><i class="fa fa-fw fa-lg fa-align-left"/>&emsp;'+ tr("Quotas") +'</a></dd>'+
'<dd class="active" style="width: 25%;"><a href="#provision_info_settings"><i class="fa fa-fw fa-lg fa-cogs"/>&emsp;'+ tr("Settings") +'</a></dd>'+
'<dd style="width: 25%;"><a href="#provision_info_showback"><i class="fa fa-fw fa-lg fa-money"/>&emsp;'+ tr("Showback") +'</a></dd>'+
'<dd style="width: 25%;"><a href="#provision_info_acct"><i class="fa fa-fw fa-lg fa-bar-chart-o"/>&emsp;'+ tr("Accounting") +'</a></dd>'+
'<dd style="width: 25%;"><a href="#provision_info_quotas"><i class="fa fa-fw fa-lg fa-align-left"/>&emsp;'+ tr("Quotas") +'</a></dd>'+
'</dl>'+
'<br>'+
'</div>'+
@ -839,6 +840,12 @@ var provision_user_info = '<div id="provision_user_info" class="hidden section_c
'</div>'+
'</div>'+
'</div>'+
'<div class="content" id="provision_info_showback">'+
'<div class="row">'+
'<div id="provision_user_info_showback_div" class="large-12 large-centered columns">'+
'</div>'+
'</div>'+
'</div>'+
'<div class="content" id="provision_info_quotas">'+
'<div class="row">'+
'<div id="provision_user_info_quotas_div" class="large-9 large-centered columns quotas">'+
@ -2715,6 +2722,10 @@ function show_provision_user_info_callback(request, response) {
$("#provision_user_info_acct_div"),
{ fixed_user: info.ID,
fixed_group_by: "vm" });
showbackGraphs(
$("#provision_user_info_showback_div"),
{ fixed_user: info.ID});
}

View File

@ -47,6 +47,19 @@ var top_interval_ids = {};
var QUOTA_LIMIT_DEFAULT = "-1";
var QUOTA_LIMIT_UNLIMITED = "-2";
function tr(str){
var tmp = locale[str];
if ( tmp == null || tmp == "" ) {
//console.debug("Missing translation: "+str);
tmp = str;
}
return tmp;
};
var $months = new Array(
tr("January"),tr("February"),tr("March"),tr("April"),tr("May"),
tr("June"),tr("July"),tr("August"),tr("September"),tr("October"),
tr("November"),tr("December"));
//Sunstone configuration is formed by predifined "actions", main tabs
//and "info_panels". Each tab has "content" and "buttons". Each
//"info_panel" has "tabs" with "content".
@ -1202,11 +1215,7 @@ function pretty_time_runtime(time){
function _format_date(unix_timestamp) {
var difference_in_seconds = (Math.round((new Date()).getTime() / 1000)) - unix_timestamp,
current_date = new Date(unix_timestamp * 1000), minutes, hours,
months = new Array(
'January','February','March','April','May',
'June','July','August','September','October',
'November','December');
current_date = new Date(unix_timestamp * 1000), minutes, hours;
if(difference_in_seconds < 60) {
return difference_in_seconds + "s" + " ago";
@ -1218,9 +1227,9 @@ function _format_date(unix_timestamp) {
return hours + "h" + " ago";
} else if (difference_in_seconds > 60*60*24){
if(current_date.getYear() !== new Date().getYear())
return current_date.getDay() + " " + months[current_date.getMonth()].substr(0,3) + " " + _fourdigits(current_date.getYear());
return current_date.getDay() + " " + $months[current_date.getMonth()].substr(0,3) + " " + _fourdigits(current_date.getYear());
else {
return current_date.getDay() + " " + months[current_date.getMonth()].substr(0,3);
return current_date.getDay() + " " + $months[current_date.getMonth()].substr(0,3);
}
}
@ -4747,6 +4756,364 @@ function time_UTC(time){
return d.getUTCFullYear() + '/' + (d.getUTCMonth()+1) + '/' + d.getUTCDate();
}
// div is a jQuery selector
// The following options can be set:
// fixed_user fix an owner user ID
// fixed_group fix an owner group ID
// init_group_by "user", "group", "vm". init the group-by selector
// fixed_group_by "user", "group", "vm". set a fixed group-by selector
function showbackGraphs(div, opt){
if(div.html() != ""){
return false;
}
div.html(
'<div class="row">\
<div id="showback_start_time_container" class="left columns">\
<label for="showback_start_time">'+tr("Start time")+'</label>\
<input id="showback_start_time" type="date" placeholder="2013/12/30"/>\
</div>\
<div id="showback_end_time_container" class="left columns">\
<label for="showback_end_time">'+tr("End time")+'</label>\
<input id="showback_end_time" type="date" placeholder="'+tr("Today")+'"/>\
</div>\
<div id="showback_owner_container" class="left columns">\
<label for="showback_owner">' + tr("Filter") + '</label>\
<div class="row">\
<div class="large-5 columns">\
<select id="showback_owner" name="showback_owner">\
<option value="showback_owner_all">' + tr("All") + '</option>\
<option value="showback_owner_group">' + tr("Group") + '</option>\
<option value="showback_owner_user">' + tr("User") + '</option>\
</select>\
</div>\
<div class="large-7 columns">\
<div id="showback_owner_select"/>\
</div>\
</div>\
</div>\
<div id="showback_button_container" class="left columns" style="margin-top: 15px">\
<button class="button radius success large-12" id="showback_submit" type="button">'+tr("Get Showback")+'</button>\
</div>\
</div>\
<br>\
<div id="showback_placeholder">\
<div class="row">\
<div class="large-8 large-centered columns">\
<div class="text-center">\
<span class="fa-stack fa-5x" style="color: #dfdfdf">\
<i class="fa fa-cloud fa-stack-2x"></i>\
<i class="fa fa-money fa-stack-1x fa-inverse"></i>\
</span>\
<div id="showback_no_data" class="hidden">\
<br>\
<p style="font-size: 18px; color: #999">'+
tr("There are no showback records")+
'</p>\
</div>\
</div>\
</div>\
</div>\
</div>\
<div id="showback_content" class="hidden">\
<div class="row showback_table">\
<div class="large-12 columns graph_legend">\
<h3 class="subheader">'+tr("Showback")+'</h3>\
</div>\
<div class="large-6 columns" style="overflow:auto">\
<table id="showback_datatable" class="datatable twelve">\
<thead>\
<tr>\
<th>'+tr("dateint")+'</th>\
<th>'+tr("Year")+'</th>\
<th>'+tr("Month")+'</th>\
<th>'+tr("Date")+'</th>\
<th>'+tr("Cost")+'</th>\
</tr>\
</thead>\
<tbody id="tbody_showback_datatable">\
</tbody>\
</table>\
</div>\
<div class="large-6 columns">\
<div class="large-12 columns centered graph" id="showback_graph" style="height: 200px;">\
</div>\
</div>\
</div>\
<div class="row showback_vms_table hidden">\
<div class="large-12 columns graph_legend">\
<h3 class="subheader" id="showback_vms_title">'+tr("VMs")+'</h3>\
</div>\
<div class="large-12 columns" style="overflow:auto">\
<table id="showback_vms_datatable" class="datatable twelve">\
<thead>\
<tr>\
<th>'+tr("ID")+'</th>\
<th>'+tr("Name")+'</th>\
<th>'+tr("Hours")+'</th>\
<th>'+tr("Cost")+'</th>\
</tr>\
</thead>\
<tbody id="tbody_showback_datatable">\
</tbody>\
</table>\
</div>\
</div>\
</div>');
if (opt == undefined){
opt = {};
}
//--------------------------------------------------------------------------
// Set column width
//--------------------------------------------------------------------------
var n_columns = 3; // start, end time, button
if (opt.fixed_user == undefined && opt.fixed_group == undefined){
n_columns += 1; //acct_owner_container
}
if (n_columns > 4){
// In this case the first row will have 4 inputs, and the
// get accounting button will overflow to the second row
n_columns = 4;
}
var width = parseInt(12 / n_columns);
$("#showback_start_time_container", div).addClass("large-"+width);
$("#showback_end_time_container", div).addClass("large-"+width);
$("#showback_owner_container", div).addClass("large-"+width);
$("#showback_button_container", div).addClass("large-"+width);
//--------------------------------------------------------------------------
// VM owner: all, group, user
//--------------------------------------------------------------------------
if (opt.fixed_user != undefined || opt.fixed_group != undefined){
$("#showback_owner_container", div).hide();
} else {
$("select#showback_owner", div).change(function(){
var value = $(this).val();
switch (value){
case "showback_owner_all":
$("#showback_owner_select", div).hide();
break;
case "showback_owner_group":
$("#showback_owner_select", div).show();
insertSelectOptions("#showback_owner_select", div, "Group");
break;
case "showback_owner_user":
$("#showback_owner_select", div).show();
insertSelectOptions("#showback_owner_select", div, "User", -1, false,
'<option value="-1">'+tr("<< me >>")+'</option>');
break;
}
});
}
showback_dataTable = $("#showback_datatable",div).dataTable({
"bSortClasses" : false,
"bDeferRender": true,
"iDisplayLength": 6,
"sDom": "t<'row collapse'<'small-6 columns'><'small-6 columns'p>>",
"aoColumnDefs": [
{ "bSortable": false, "aTargets": ['_all'] },
{ "bVisible": false, "aTargets": [0,1,2]}
]
});
showback_vms_dataTable = $("#showback_vms_datatable",div).dataTable({
"bSortClasses" : false,
"bDeferRender": true,
"aoColumnDefs": [
{ "bSortable": false, "aTargets": ['_all'] },
]
});
showback_dataTable.on("click", "tr", function(){
var cells = showback_dataTable.fnGetData(this);
var year = cells[1];
var month = cells[2];
showback_vms_dataTable.fnClearTable();
showback_vms_dataTable.fnAddData(showback_dataTable.data("vms_per_date")[year][month].VMS)
$("#showback_vms_title").text($months[month] + " " + year + " " + tr("VMs"))
$(".showback_vms_table").show();
})
//--------------------------------------------------------------------------
// Submit request
//--------------------------------------------------------------------------
$("#showback_submit", div).on("click", function(){
var start_time = -1;
var end_time = -1;
var v = $("#showback_start_time", div).val();
if (v != ""){
start_time = Date.parse(v+' UTC');
if (isNaN(start_time)){
notifyError(tr("Time range start is not a valid date. It must be YYYY/MM/DD"));
return false;
}
// ms to s
start_time = start_time / 1000;
}
var v = $("#showback_end_time", div).val();
if (v != ""){
end_time = Date.parse(v+' UTC');
if (isNaN(end_time)){
notifyError(tr("Time range end is not a valid date. It must be YYYY/MM/DD"));
return false;
}
// ms to s
end_time = end_time / 1000;
}
var options = {
"start_time": start_time,
"end_time": end_time
};
if (opt.fixed_user != undefined){
options.userfilter = opt.fixed_user;
} else if (opt.fixed_group != undefined){
options.group = opt.fixed_group;
} else {
var select_val = $("#showback_owner_select .resource_list_select", div).val();
switch ($("select#showback_owner", div).val()){
case "showback_owner_all":
break;
case "showback_owner_group":
if(select_val != ""){
options.group = select_val;
}
break;
case "showback_owner_user":
if(select_val != ""){
options.userfilter = select_val;
}
break;
}
}
OpenNebula.VM.showback({
// timeout: true,
success: function(req, response){
console.log(response)
fillShowback(div, req, response);
},
error: onError,
data: options
});
return false;
});
}
function fillShowback(div, req, response) {
$("#showback_no_data", div).hide();
if(response.SHOWBACK_RECORDS == undefined){
$("#showback_placeholder", div).show();
$("#showback_content", div).hide();
$("#showback_no_data", div).show();
return false;
}
var vms_per_date = {};
$.each(response.SHOWBACK_RECORDS.SHOWBACK, function(index, showback){
if (vms_per_date[showback.YEAR] == undefined) {
vms_per_date[showback.YEAR] = {}
}
if (vms_per_date[showback.YEAR][showback.MONTH] == undefined) {
vms_per_date[showback.YEAR][showback.MONTH] = {
"VMS": [],
"TOTAL": 0
}
}
vms_per_date[showback.YEAR][showback.MONTH].VMS.push([showback.VMID, showback.VMNAME, showback.HOURS, showback.COST]);
vms_per_date[showback.YEAR][showback.MONTH].TOTAL += parseInt(showback.COST);
});
var series = []
var showback_data = [];
$.each(vms_per_date, function(year, months){
$.each(months, function(month, value){
series.push([""+year+month, year, month, $months[month] + " " + year, value.TOTAL])
showback_data.push([(new Date(year, month)), value.TOTAL])
})
})
showback_dataTable.fnClearTable();
if (series.length > 0) {
showback_dataTable.data("vms_per_date", vms_per_date)
showback_dataTable.fnAddData(series);
}
var showback_plot_series = [];
showback_plot_series.push(
{
label: tr("Showback"),
data: showback_data
});
var options = {
// colors: [ "#cdebf5", "#2ba6cb", "#6f6f6f" ]
colors: [ "#2ba6cb", "#707D85", "#AC5A62" ],
legend: {
show: false
},
xaxis : {
mode: "time",
color: "#efefef",
size: 8,
minTickSize: [1, "month"]
},
yaxis : {
show: false
},
series: {
lines: {
show: true,
lineWidth: 0,
fill: true,
align: "center"
}
},
grid: {
borderWidth: 1,
borderColor: "#efefef"
}
};
var showback_plot = $.plot($("#showback_graph", div), showback_plot_series, options);
$("#showback_placeholder", div).hide();
$("#showback_content", div).show();
}
// div is a jQuery selector
// The following options can be set:
// fixed_user fix an owner user ID

View File

@ -446,6 +446,13 @@ get '/vm/accounting' do
@SunstoneServer.get_vm_accounting(params)
end
##############################################################################
# Showback
##############################################################################
get '/vm/showback' do
@SunstoneServer.get_vm_showback(params)
end
##############################################################################
# Marketplace