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

Feature #407: Code clean up

Browse Source 
Tabs removed, whitespaces removed, corrected indentation etc...
This commit is contained in:
Hector Sanjuan 2011-06-13 18:02:43 +02:00 committed by Ruben S. Montero
parent 72fafbdb3f
commit 683429affa
10 changed files with 1471 additions and 1467 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -184,23 +184,26 @@ function plot_global_graph(data,info){
};
var options = {
legend : { show : true,
noColumns: labels_arr.length,
container: $('#'+id+'_legend')},
xaxis : { mode: "time",
timeformat: "%h:%M"
},
legend : {
show : true,
noColumns: labels_arr.length,
container: $('#'+id+'_legend')
},
xaxis : {
mode: "time",
timeformat: "%h:%M"
},
yaxis : { labelWidth: 40 }
}
switch (id){
case "graph3":
case "graph5":
options["yaxis"]["tickFormatter"] = function(val,axis) { return humanize_size(val); }
options["yaxis"]["tickFormatter"] = function(val,axis) {
return humanize_size(val);
}
}
$.plot($('#'+id+'_graph'),series,options);
}

69
src/sunstone/public/js/plugins/groups-tab.js
View File

@ -19,7 +19,7 @@ var group_list_json = {};
var dataTable_groups;
var groups_tab_content =
var groups_tab_content =
'<form id="group_form" action="" action="javascript:alert(\'js error!\');">\
<div class="action_blocks">\
</div>\
@ -40,16 +40,16 @@ var groups_tab_content =
var create_group_tmpl =
'<form id="create_group_form" action="">\
<fieldset style="border:none;">\
<div>\
<label for="name">Group name:</label>\
<input type="text" name="name" id="name" /><br />\
</div>\
<div>\
<label for="name">Group name:</label>\
<input type="text" name="name" id="name" /><br />\
</div>\
</fieldset>\
<fieldset>\
<div class="form_buttons">\
<button class="button" id="create_group_submit" value="Group.create">Create</button>\
<button class="button" type="reset" value="reset">Reset</button>\
</div>\
<div class="form_buttons">\
<button class="button" id="create_group_submit" value="Group.create">Create</button>\
<button class="button" type="reset" value="reset">Reset</button>\
</div>\
</fieldset>\
</form>';
@ -67,7 +67,7 @@ var group_actions = {
type: "custom",
call: popUpCreateGroupDialog
},
"Group.list" : {
type: "list",
call: OpenNebula.Group.list,
@ -79,7 +79,7 @@ var group_actions = {
// type: "custom",
// call: updateGroupInfo
// },
"Group.autorefresh" : {
type: "custom",
call: function () {
@ -97,7 +97,7 @@ var group_actions = {
error: onError,
notify: false
},
"Group.delete" : {
type: "multiple",
call : OpenNebula.Group.delete,
@ -106,7 +106,7 @@ var group_actions = {
elements: function() { return getSelectedNodes(dataTable_groups); },
notify:true
},
"Group.chown" : {
type: "multiple",
call : OpenNebula.Group.chown,
@ -115,7 +115,7 @@ var group_actions = {
error : onError,
notify:true
},
}
var group_buttons = {
@ -157,24 +157,25 @@ Sunstone.addMainTab('groups_tab',groups_tab);
function groupElementArray(group_json){
var group = group_json.GROUP;
return [ '<input type="checkbox" id="group_'+group.ID+'" name="selected_items" value="'+group.ID+'"/>',
group.ID,
getUserName(group.UID),
group.NAME ];
return [
'<input type="checkbox" id="group_'+group.ID+'" name="selected_items" value="'+group.ID+'"/>',
group.ID,
getUserName(group.UID),
group.NAME ];
}
function groupInfoListener(){
$('#tbodygroups tr').live("click",function(e){
//do nothing if we are clicking a checkbox!
if ($(e.target).is('input')) {return true;}
var aData = dataTable_groups.fnGetData(this);
var id = $(aData[0]).val();
//do nothing if we are clicking a checkbox!
if ($(e.target).is('input')) {return true;}
var aData = dataTable_groups.fnGetData(this);
var id = $(aData[0]).val();
Sunstone.runAction("Group.showinfo",id);
return false;
return false;
});
}
function updateGroupSelect(){
function updateGroupSelect(){
groups_select = makeSelectOptions(dataTable_groups,1,3,-1,"",-1);
}
@ -216,19 +217,19 @@ function setupCreateGroupDialog(){
$('div#dialogs').append('<div title="Create group" id="create_group_dialog"></div>');
$('#create_group_dialog').html(create_group_tmpl);
$('#create_group_dialog').dialog({
autoOpen: false,
modal: true,
width: 400
autoOpen: false,
modal: true,
width: 400
});
$('#create_group_dialog button').button();
$('#create_group_form').submit(function(){
var name=$('#name',this).val();
var group_json = { "group" : { "name" : name }};
var name=$('#name',this).val();
var group_json = { "group" : { "name" : name }};
Sunstone.runAction("Group.create",group_json);
$('#create_group_dialog').dialog('close');
return false;
$('#create_group_dialog').dialog('close');
return false;
});
}
@ -273,5 +274,3 @@ $(document).ready(function(){
initCheckAllBoxes(dataTable_groups);
tableCheckboxesListener(dataTable_groups);
})

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

@ -33,8 +33,7 @@ var host_graphs = [
]
var hosts_tab_content =
var hosts_tab_content =
'<form id="form_hosts" action="javascript:alert(\'js errors?!\')">\
<div class="action_blocks">\
</div>\
@ -64,37 +63,37 @@ var create_host_tmpl =
<h3>Drivers</h3>\
<fieldset>\
<div class="manager clear" id="vmm_mads">\
<label>Virtualization Manager:</label>\
<select id="vmm_mad" name="vmm">\
<option value="vmm_kvm">KVM</option>\
<option value="vmm_xen">XEN</option>\
<option value="vmm_ec2">EC2</option>\
<option value="vmm_dummy">Dummy</option>\
</select>\
<label>Virtualization Manager:</label>\
<select id="vmm_mad" name="vmm">\
<option value="vmm_kvm">KVM</option>\
<option value="vmm_xen">XEN</option>\
<option value="vmm_ec2">EC2</option>\
<option value="vmm_dummy">Dummy</option>\
</select>\
</div>\
<div class="manager clear" id="im_mads">\
<label>Information Manager:</label>\
<select id="im_mad" name="im">\
<option value="im_kvm">KVM</option>\
<option value="im_xen">XEN</option>\
<option value="im_ec2">EC2</option>\
<option value="im_dummy">Dummy</option>\
</select>\
<option value="im_kvm">KVM</option>\
<option value="im_xen">XEN</option>\
<option value="im_ec2">EC2</option>\
<option value="im_dummy">Dummy</option>\
</select>\
</div>\
<div class="manager clear" id="tm_mads">\
<label>Transfer Manager:</label>\
<select id="tm_mad" name="tm">\
<option value="tm_nfs">NFS</option>\
<option value="tm_ssh">SSH</option>\
<option value="tm_dummy">Dummy</option>\
</select>\
<option value="tm_nfs">NFS</option>\
<option value="tm_ssh">SSH</option>\
<option value="tm_dummy">Dummy</option>\
</select>\
</div>\
</fieldset>\
<fieldset>\
<div class="form_buttons">\
<div><button class="button" id="create_host_submit" value="OpenNebula.Host.create">Create</button>\
<button class="button" type="reset" value="reset">Reset</button></div>\
</div>\
<div><button class="button" id="create_host_submit" value="OpenNebula.Host.create">Create</button>\
<button class="button" type="reset" value="reset">Reset</button></div>\
</div>\
</fieldset>\
</form></div>';
@ -104,7 +103,7 @@ var dataTable_hosts;
//Setup actions
var host_actions = {
"Host.create" : {
type: "create",
call : OpenNebula.Host.create,
@ -245,7 +244,7 @@ var host_info_panel = {
title: "Host information",
content:""
},
"host_template_tab" : {
title: "Host template",
content: ""
@ -262,17 +261,16 @@ var hosts_tab = {
content: hosts_tab_content,
buttons: host_buttons,
condition: True
}
}
Sunstone.addActions(host_actions);
Sunstone.addMainTab('hosts_tab',hosts_tab);
Sunstone.addInfoPanel("host_info_panel",host_info_panel);
//Creates an array to be added to the dataTable from the JSON of a host.
function hostElementArray(host_json){
var host = host_json.HOST;
//Calculate some values
@ -314,26 +312,27 @@ function hostElementArray(host_json){
</div>';
return [ '<input type="checkbox" id="host_'+host.ID+'" name="selected_items" value="'+host.ID+'"/>',
host.ID,
host.NAME,
host.HOST_SHARE.RUNNING_VMS, //rvm
pb_cpu,
pb_mem,
OpenNebula.Helper.resource_state("host_simple",host.STATE) ];
return [
'<input type="checkbox" id="host_'+host.ID+'" name="selected_items" value="'+host.ID+'"/>',
host.ID,
host.NAME,
host.HOST_SHARE.RUNNING_VMS, //rvm
pb_cpu,
pb_mem,
OpenNebula.Helper.resource_state("host_simple",host.STATE) ];
}
//Listen to clicks on the tds of the tables and shows the info dialogs.
function hostInfoListener(){
$('#tbodyhosts tr').live("click",function(e){
//do nothing if we are clicking a checkbox!
if ($(e.target).is('input')) {return true;}
//do nothing if we are clicking a checkbox!
if ($(e.target).is('input')) {return true;}
popDialogLoading();
var aData = dataTable_hosts.fnGetData(this);
var id = $(aData[0]).val();
var aData = dataTable_hosts.fnGetData(this);
var id = $(aData[0]).val();
Sunstone.runAction("Host.showinfo",id);
return false;
return false;
});
}
@ -370,8 +369,8 @@ function updateHostsView (request,host_list){
var host_list_array = [];
$.each(host_list,function(){
//Grab table data from the host_list
host_list_array.push(hostElementArray(this));
//Grab table data from the host_list
host_list_array.push(hostElementArray(this));
});
updateView(host_list_array,dataTable_hosts);
@ -482,30 +481,33 @@ function setupCreateHostDialog(){
$('div#dialogs').append('<div title="Create host" id="create_host_dialog"></div>');
$('div#create_host_dialog').html(create_host_tmpl);
$('#create_host_dialog').dialog({
autoOpen: false,
modal: true,
width: 500
});
autoOpen: false,
modal: true,
width: 500
});
$('#create_host_dialog button').button();
//Handle the form submission
$('#create_host_form').submit(function(){
if (!($('#name',this).val().length)){
notifyError("Host name missing!");
return false;
}
var host_json = { "host": { "name": $('#name',this).val(),
"tm_mad": $('#tm_mad :selected',this).val(),
"vm_mad": $('#vmm_mad :selected',this).val(),
"im_mad": $('#im_mad :selected',this).val()}}
var host_json = {
"host": {
"name": $('#name',this).val(),
"tm_mad": $('#tm_mad :selected',this).val(),
"vm_mad": $('#vmm_mad :selected',this).val(),
"im_mad": $('#im_mad :selected',this).val()
}
}
//Create the OpenNebula.Host.
//If it's successfull we refresh the list.
//Create the OpenNebula.Host.
//If it's successfull we refresh the list.
Sunstone.runAction("Host.create",host_json);
//OpenNebula.Host.create({data: host_json, success: addHostElement, error: onError});
$('#create_host_dialog').dialog('close');
return false;
$('#create_host_dialog').dialog('close');
return false;
});
}
@ -527,35 +529,35 @@ function setHostAutorefresh() {
}
//This is executed after the sunstone.js ready() is run.
//Here we can basicly init the host datatable, preload it
//Here we can basicly init the host datatable, preload it
//and add specific listeners
$(document).ready(function(){
//prepare host datatable
dataTable_hosts = $("#datatable_hosts").dataTable({
"bJQueryUI": true,
"bSortClasses": false,
"bAutoWidth":false,
"sPaginationType": "full_numbers",
"aoColumnDefs": [
{ "bSortable": false, "aTargets": ["check"] },
{ "sWidth": "60px", "aTargets": [0,4] },
{ "sWidth": "35px", "aTargets": [1] },
{ "sWidth": "200px", "aTargets": [5,6] }
]
"bJQueryUI": true,
"bSortClasses": false,
"bAutoWidth":false,
"sPaginationType": "full_numbers",
"aoColumnDefs": [
{ "bSortable": false, "aTargets": ["check"] },
{ "sWidth": "60px", "aTargets": [0,3] },
{ "sWidth": "35px", "aTargets": [1] },
{ "sWidth": "200px", "aTargets": [4,5] }
]
});
//preload it
dataTable_hosts.fnClearTable();
addElement([
spinner,
'','','','','',''],dataTable_hosts);
Sunstone.runAction("Host.list");
setupCreateHostDialog();
setHostAutorefresh();
initCheckAllBoxes(dataTable_hosts);
tableCheckboxesListener(dataTable_hosts);
hostInfoListener();

425
src/sunstone/public/js/plugins/images-tab.js
View File

@ -47,111 +47,111 @@ var create_image_tmpl =
<li><a href="#img_manual">Advanced mode</a></li>\
</ul>\
<div id="img_easy">\
<form id="create_image_form_easy" action="">\
<p style="font-size:0.8em;text-align:right;"><i>Fields marked with <span style="display:inline-block;" class="ui-icon ui-icon-alert" /> are mandatory</i><br />\
<fieldset>\
<div class="img_param img_man">\
<label for="img_name">Name:</label>\
<input type="text" name="img_name" id="img_name" />\
<div class="tip">Name that the Image will get. Every image must have a unique name.</div>\
</div>\
<div class="img_param">\
<label for="img_desc">Description:</label>\
<textarea name="img_desc" id="img_desc" style="height:4em"></textarea>\
<div class="tip">Human readable description of the image for other users.</div>\
</div>\
</fieldset>\
<fieldset>\
<div class="img_param">\
<label for="img_type">Type:</label>\
<select name="img_type" id="img_type">\
<option value="OS">OS</option>\
<option value="CDROM">CD-ROM</option>\
<option value="DATABLOCK">Datablock</option>\
</select>\
<div class="tip">Type of the image, explained in detail in the following section. If omitted, the default value is the one defined in oned.conf (install default is OS).</div>\
</div>\
<div class="img_param">\
<label for="img_public">Public:</label>\
<input type="checkbox" id="img_public" name="img_public" value="YES" />\
<div class="tip">Public scope of the image</div>\
</div>\
<div class="img_param">\
<label for="img_persistent">Persistent:</label>\
<input type="checkbox" id="img_persistent" name="img_persistent" value="YES" />\
<div class="tip">Persistence of the image</div>\
</div>\
<div class="img_param">\
<label for="img_dev_prefix">Device prefix:</label>\
<input type="text" name="img_dev_prefix" id="img_dev_prefix" />\
<div class="tip">Prefix for the emulated device this image will be mounted at. For instance, “hd”, “sd”. If omitted, the default value is the one defined in oned.conf (installation default is “hd”).</div>\
</div>\
<div class="img_param">\
<label for="img_bus">Bus:</label>\
<select name="img_bus" id="img_bus">\
<option value="IDE">IDE</option>\
<option value="SCSI">SCSI</option>\
<option value="virtio">Virtio (KVM)</option>\
</select>\
<div class="tip">Type of disk device to emulate.</div>\
</div>\
</fieldset>\
<fieldset>\
<div class="" id="src_path_select">\
<label style="height:3em;">Path vs. source:</label>\
<input type="radio" name="src_path" id="path_img" value="path" />\
<label style="float:none">Provide a path</label><br />\
<input type="radio" name="src_path" id="source_img" value="source" />\
<label style="float:none">Provide a source</label><br />\
<input type="radio" name="src_path" id="datablock_img" value="datablock" />\
<label style="float:none;vertical-align:top">Create an empty datablock</label>\
<div class="tip">Please choose path if you have a file-based image. Choose source otherwise or create an empty datablock disk.</div><br />\
</div>\
<div class="img_param">\
<label for="img_path">Path:</label>\
<input type="text" name="img_path" id="img_path" />\
<div class="tip">Path to the original file that will be copied to the image repository. If not specified for a DATABLOCK type image, an empty image will be created.</div>\
</div>\
<div class="img_param">\
<label for="img_source">Source:</label>\
<input type="text" name="img_source" id="img_source" />\
<div class="tip">Source to be used in the DISK attribute. Useful for not file-based images.</div>\
</div>\
<div class="img_size">\
<label for="img_size">Size:</label>\
<input type="text" name="img_size" id="img_size" />\
<div class="tip">Size of the datablock in MB.</div>\
</div>\
<div class="img_param">\
<label for="img_fstype">FS type:</label>\
<input type="text" name="img_fstype" id="img_fstype" />\
<div class="tip">Type of file system to be built. This can be any value understood by mkfs unix command.</div>\
</div>\
</fieldset>\
<fieldset>\
<div class="form_buttons">\
<button class="button" id="create_image_submit" value="user/create">Create</button>\
<button class="button" type="reset" value="reset">Reset</button>\
</div>\
</fieldset>\
</form>\
</div>\
<div id="img_manual">\
<form id="create_image_form_manual" action="">\
<fieldset style="border-top:none;">\
<h3 style="margin-bottom:10px;">Write the image template here</h3>\
<textarea id="template" rows="15" style="width:100%;">\
</textarea>\
<form id="create_image_form_easy" action="">\
<p style="font-size:0.8em;text-align:right;"><i>Fields marked with <span style="display:inline-block;" class="ui-icon ui-icon-alert" /> are mandatory</i><br />\
<fieldset>\
<div class="img_param img_man">\
<label for="img_name">Name:</label>\
<input type="text" name="img_name" id="img_name" />\
<div class="tip">Name that the Image will get. Every image must have a unique name.</div>\
</div>\
<div class="img_param">\
<label for="img_desc">Description:</label>\
<textarea name="img_desc" id="img_desc" style="height:4em"></textarea>\
<div class="tip">Human readable description of the image for other users.</div>\
</div>\
</fieldset>\
<fieldset>\
<div class="form_buttons">\
<button class="button" id="create_vn_submit_manual" value="vn/create">\
Create\
</button>\
<div class="img_param">\
<label for="img_type">Type:</label>\
<select name="img_type" id="img_type">\
<option value="OS">OS</option>\
<option value="CDROM">CD-ROM</option>\
<option value="DATABLOCK">Datablock</option>\
</select>\
<div class="tip">Type of the image, explained in detail in the following section. If omitted, the default value is the one defined in oned.conf (install default is OS).</div>\
</div>\
<div class="img_param">\
<label for="img_public">Public:</label>\
<input type="checkbox" id="img_public" name="img_public" value="YES" />\
<div class="tip">Public scope of the image</div>\
</div>\
<div class="img_param">\
<label for="img_persistent">Persistent:</label>\
<input type="checkbox" id="img_persistent" name="img_persistent" value="YES" />\
<div class="tip">Persistence of the image</div>\
</div>\
<div class="img_param">\
<label for="img_dev_prefix">Device prefix:</label>\
<input type="text" name="img_dev_prefix" id="img_dev_prefix" />\
<div class="tip">Prefix for the emulated device this image will be mounted at. For instance, “hd”, “sd”. If omitted, the default value is the one defined in oned.conf (installation default is “hd”).</div>\
</div>\
<div class="img_param">\
<label for="img_bus">Bus:</label>\
<select name="img_bus" id="img_bus">\
<option value="IDE">IDE</option>\
<option value="SCSI">SCSI</option>\
<option value="virtio">Virtio (KVM)</option>\
</select>\
<div class="tip">Type of disk device to emulate.</div>\
</div>\
</fieldset>\
<fieldset>\
<div class="" id="src_path_select">\
<label style="height:3em;">Path vs. source:</label>\
<input type="radio" name="src_path" id="path_img" value="path" />\
<label style="float:none">Provide a path</label><br />\
<input type="radio" name="src_path" id="source_img" value="source" />\
<label style="float:none">Provide a source</label><br />\
<input type="radio" name="src_path" id="datablock_img" value="datablock" />\
<label style="float:none;vertical-align:top">Create an empty datablock</label>\
<div class="tip">Please choose path if you have a file-based image. Choose source otherwise or create an empty datablock disk.</div><br />\
</div>\
<div class="img_param">\
<label for="img_path">Path:</label>\
<input type="text" name="img_path" id="img_path" />\
<div class="tip">Path to the original file that will be copied to the image repository. If not specified for a DATABLOCK type image, an empty image will be created.</div>\
</div>\
<div class="img_param">\
<label for="img_source">Source:</label>\
<input type="text" name="img_source" id="img_source" />\
<div class="tip">Source to be used in the DISK attribute. Useful for not file-based images.</div>\
</div>\
<div class="img_size">\
<label for="img_size">Size:</label>\
<input type="text" name="img_size" id="img_size" />\
<div class="tip">Size of the datablock in MB.</div>\
</div>\
<div class="img_param">\
<label for="img_fstype">FS type:</label>\
<input type="text" name="img_fstype" id="img_fstype" />\
<div class="tip">Type of file system to be built. This can be any value understood by mkfs unix command.</div>\
</div>\
</fieldset>\
<fieldset>\
<div class="form_buttons">\
<button class="button" id="create_image_submit" value="user/create">Create</button>\
<button class="button" type="reset" value="reset">Reset</button>\
</div>\
</fieldset>\
</form>\
</div>\
</fieldset>\
</form>\
</div>\
<div id="img_manual">\
<form id="create_image_form_manual" action="">\
<fieldset style="border-top:none;">\
<h3 style="margin-bottom:10px;">Write the image template here</h3>\
<textarea id="template" rows="15" style="width:100%;">\
</textarea>\
</fieldset>\
<fieldset>\
<div class="form_buttons">\
<button class="button" id="create_vn_submit_manual" value="vn/create">\
Create\
</button>\
<button class="button" type="reset" value="reset">Reset</button>\
</div>\
</fieldset>\
</form>\
</div>\
</div>';
@ -244,9 +244,9 @@ var image_actions = {
elements: function() { return getSelectedNodes(dataTable_images); },
error: onError,
notify: true
},
},
"Image.disable" : {
"Image.disable" : {
type: "multiple",
call: OpenNebula.Image.disable,
callback: function (req) {
@ -255,9 +255,9 @@ var image_actions = {
elements: function() { return getSelectedNodes(dataTable_images); },
error: onError,
notify: true
},
},
"Image.persistent" : {
"Image.persistent" : {
type: "multiple",
call: OpenNebula.Image.persistent,
callback: function (req) {
@ -266,9 +266,9 @@ var image_actions = {
elements: function() { return getSelectedNodes(dataTable_images); },
error: onError,
notify: true
},
},
"Image.nonpersistent" : {
"Image.nonpersistent" : {
type: "multiple",
call: OpenNebula.Image.nonpersistent,
callback: function (req) {
@ -277,9 +277,9 @@ var image_actions = {
elements: function() { return getSelectedNodes(dataTable_images); },
error: onError,
notify: true
},
},
"Image.publish" : {
"Image.publish" : {
type: "multiple",
call: OpenNebula.Image.publish,
callback: function (req) {
@ -288,9 +288,9 @@ var image_actions = {
elements: function() { return getSelectedNodes(dataTable_images); },
error: onError,
notify: true
},
},
"Image.unpublish" : {
"Image.unpublish" : {
type: "multiple",
call: OpenNebula.Image.unpublish,
callback: function (req) {
@ -299,16 +299,16 @@ var image_actions = {
elements: function() { return getSelectedNodes(dataTable_images); },
error: onError,
notify: true
},
},
"Image.delete" : {
"Image.delete" : {
type: "multiple",
call: OpenNebula.Image.delete,
callback: deleteImageElement,
elements: function() { return getSelectedNodes(dataTable_images); },
error: onError,
notify: true
},
},
"Image.chown" : {
type: "multiple",
@ -513,6 +513,7 @@ function updateImagesView(request, images_list){
function popUpImageTemplateUpdateDialog(){
$('#template_update_dialog #template_update_button').val("Image");
$('#template_update_dialog #template_update_select').html(images_select);
$('#template_update_dialog #template_update_textarea').val("");
$('#template_update_dialog').dialog('open');
return false;
}
@ -525,50 +526,50 @@ function updateImageInfo(request,img){
title: "Image information",
content:
'<table id="info_img_table" class="info_table">\
<thead>\
<tr><th colspan="2">Image "'+img_info.NAME+'" information</th></tr>\
</thead>\
<tr>\
<td class="key_td">ID</td>\
<td class="value_td">'+img_info.ID+'</td>\
</tr>\
<tr>\
<td class="key_td">Name</td>\
<td class="value_td">'+img_info.NAME+'</td>\
</tr>\
<tr>\
<td class="key_td">Type</td>\
<td class="value_td">'+OpenNebula.Helper.image_type(img_info.TYPE)+'</td>\
</tr>\
<tr>\
<td class="key_td">Register time</td>\
<td class="value_td">'+pretty_time(img_info.REGTIME)+'</td>\
</tr>\
<tr>\
<td class="key_td">Public</td>\
<td class="value_td">'+(parseInt(img_info.PUBLIC) ? "yes" : "no")+'</td>\
</tr>\
<tr>\
<td class="key_td">Persistent</td>\
<td class="value_td">'+(parseInt(img_info.PERSISTENT) ? "yes" : "no")+'</td>\
</tr>\
<tr>\
<td class="key_td">Source</td>\
<td class="value_td">'+img_info.SOURCE+'</td>\
</tr>\
<tr>\
<td class="key_td">State</td>\
<td class="value_td">'+OpenNebula.Helper.resource_state("image",img_info.STATE)+'</td>\
</tr>\
</table>'
<thead>\
<tr><th colspan="2">Image "'+img_info.NAME+'" information</th></tr>\
</thead>\
<tr>\
<td class="key_td">ID</td>\
<td class="value_td">'+img_info.ID+'</td>\
</tr>\
<tr>\
<td class="key_td">Name</td>\
<td class="value_td">'+img_info.NAME+'</td>\
</tr>\
<tr>\
<td class="key_td">Type</td>\
<td class="value_td">'+OpenNebula.Helper.image_type(img_info.TYPE)+'</td>\
</tr>\
<tr>\
<td class="key_td">Register time</td>\
<td class="value_td">'+pretty_time(img_info.REGTIME)+'</td>\
</tr>\
<tr>\
<td class="key_td">Public</td>\
<td class="value_td">'+(parseInt(img_info.PUBLIC) ? "yes" : "no")+'</td>\
</tr>\
<tr>\
<td class="key_td">Persistent</td>\
<td class="value_td">'+(parseInt(img_info.PERSISTENT) ? "yes" : "no")+'</td>\
</tr>\
<tr>\
<td class="key_td">Source</td>\
<td class="value_td">'+img_info.SOURCE+'</td>\
</tr>\
<tr>\
<td class="key_td">State</td>\
<td class="value_td">'+OpenNebula.Helper.resource_state("image",img_info.STATE)+'</td>\
</tr>\
</table>'
}
var template_tab = {
title: "Image template",
content: '<table id="img_template_table" class="info_table">\
<thead><tr><th colspan="2">Image template</th></tr></thead>'+
prettyPrintJSON(img_info.TEMPLATE)+
'</table>'
<thead><tr><th colspan="2">Image template</th></tr></thead>'+
prettyPrintJSON(img_info.TEMPLATE)+
'</table>'
}
Sunstone.updateInfoPanelTab("image_info_panel","image_info_tab",info_tab);
@ -580,9 +581,9 @@ function updateImageInfo(request,img){
// Prepare the image creation dialog
function setupCreateImageDialog(){
$('div#dialogs').append('<div title="Create Image" id="create_image_dialog"></div>');
$('div#dialogs').append('<div title="Create Image" id="create_image_dialog"></div>');
//Insert HTML in place
//Insert HTML in place
$('#create_image_dialog').html(create_image_tmpl);
var height = Math.floor($(window).height()*0.8); //set height to a percentage of the window
@ -600,7 +601,7 @@ function setupCreateImageDialog(){
$('#img_type option').first().attr("selected","selected");
$('#datablock_img').attr("disabled","disabled");
//Chrome workaround
//Chrome workaround
$('select#img_type').change(function(){
$(this).trigger("click");
});
@ -608,14 +609,14 @@ function setupCreateImageDialog(){
$('select#img_type').click(function(){
var value = $(this).val();
switch (value){
case "DATABLOCK":
$('#datablock_img').removeAttr("disabled");
break;
default:
$('#datablock_img').attr("disabled","disabled");
$('#path_img').attr("checked","checked");
$('#img_source,#img_fstype,#img_size').parent().hide();
$('#img_path').parent().show();
case "DATABLOCK":
$('#datablock_img').removeAttr("disabled");
break;
default:
$('#datablock_img').attr("disabled","disabled");
$('#path_img').attr("checked","checked");
$('#img_source,#img_fstype,#img_size').parent().hide();
$('#img_path').parent().show();
}
});
@ -624,11 +625,11 @@ function setupCreateImageDialog(){
$('#img_path').parent().addClass("img_man");
$('#img_public').click(function(){
$('#img_persistent').removeAttr("checked");
$('#img_persistent').removeAttr("checked");
});
$('#img_persistent').click(function(){
$('#img_public').removeAttr("checked");
$('#img_public').removeAttr("checked");
});
@ -636,24 +637,24 @@ function setupCreateImageDialog(){
$('#src_path_select input').click(function(){
var value = $(this).val();
switch (value){
case "path":
$('#img_source,#img_fstype,#img_size').parent().hide();
$('#img_source,#img_fstype,#img_size').parent().removeClass("img_man");
$('#img_path').parent().show();
$('#img_path').parent().addClass("img_man");
break;
case "source":
$('#img_path,#img_fstype,#img_size').parent().hide();
$('#img_path,#img_fstype,#img_size').parent().removeClass("img_man");
$('#img_source').parent().show();
$('#img_source').parent().addClass("img_man");
break;
case "datablock":
$('#img_source,#img_path').parent().hide();
$('#img_source,#img_path').parent().removeClass("img_man");
$('#img_fstype,#img_size').parent().show();
$('#img_fstype,#img_size').parent().addClass("img_man");
break;
case "path":
$('#img_source,#img_fstype,#img_size').parent().hide();
$('#img_source,#img_fstype,#img_size').parent().removeClass("img_man");
$('#img_path').parent().show();
$('#img_path').parent().addClass("img_man");
break;
case "source":
$('#img_path,#img_fstype,#img_size').parent().hide();
$('#img_path,#img_fstype,#img_size').parent().removeClass("img_man");
$('#img_source').parent().show();
$('#img_source').parent().addClass("img_man");
break;
case "datablock":
$('#img_source,#img_path').parent().hide();
$('#img_source,#img_path').parent().removeClass("img_man");
$('#img_fstype,#img_size').parent().show();
$('#img_fstype,#img_size').parent().addClass("img_man");
break;
}
});
@ -661,11 +662,11 @@ function setupCreateImageDialog(){
$('#create_image_form_easy').submit(function(){
var exit = false;
$('.img_man',this).each(function(){
if (!$('input',this).val().length){
notifyError("There are mandatory parameters missing");
exit = true;
return false;
}
if (!$('input',this).val().length){
notifyError("There are mandatory parameters missing");
exit = true;
return false;
}
});
if (exit) { return false; }
var img_json = {};
@ -694,33 +695,33 @@ function setupCreateImageDialog(){
img_json["BUS"] = bus;
switch ($('#src_path_select input:checked').val()){
case "path":
path = $('#img_path').val();
img_json["PATH"] = path;
break;
case "source":
source = $('#img_source').val();
img_json["SOURCE"] = source;
break;
case "path":
path = $('#img_path').val();
img_json["PATH"] = path;
break;
case "source":
source = $('#img_source').val();
img_json["SOURCE"] = source;
break;
case "datablock":
size = $('#img_size').val();
fstype = $('#img_fstype').val();
img_json["SIZE"] = size;
img_json["FSTYPE"] = fstype;
break;
size = $('#img_size').val();
fstype = $('#img_fstype').val();
img_json["SIZE"] = size;
img_json["FSTYPE"] = fstype;
break;
}
var obj = { "image" : img_json };
Sunstone.runAction("Image.register", obj);
$('#create_image_dialog').dialog('close');
return false;
return false;
});
$('#create_image_form_manual').submit(function(){
var template=$('#template',this).val();
var template=$('#template',this).val();
Sunstone.runAction("Image.register",template);
$('#create_image_dialog').dialog('close');
return false;
$('#create_image_dialog').dialog('close');
return false;
});
}
@ -731,13 +732,13 @@ function popUpCreateImageDialog(){
// Set the autorefresh interval for the datatable
function setImageAutorefresh() {
setInterval(function(){
var checked = $('input:checked',dataTable_images.fnGetNodes());
setInterval(function(){
var checked = $('input:checked',dataTable_images.fnGetNodes());
var filter = $("#datatable_images_filter input").attr("value");
if (!checked.length && !filter.length){
if (!checked.length && !filter.length){
Sunstone.runAction("Image.autorefresh");
}
},INTERVAL+someTime());
}
},INTERVAL+someTime());
}
//The DOM is ready at this point

1110
src/sunstone/public/js/plugins/templates-tab.js
View File

File diff suppressed because it is too large Load Diff

46
src/sunstone/public/js/plugins/users-tab.js
View File

@ -87,7 +87,11 @@ var user_actions = {
"User.autorefresh" : {
type: "custom",
call: function(){
OpenNebula.User.list({timeout: true, success: updateUsersView, error: onError});
OpenNebula.User.list({
timeout: true,
success: updateUsersView,
error: onError
});
},
condition: function(){ uid == 0 },
notify: false
@ -197,8 +201,8 @@ function deleteUserElement(req){
// Callback to add a single user element
function addUserElement(request,user_json){
var element = userElementArray(user_json);
addElement(element,dataTable_users);
var element = userElementArray(user_json);
addElement(element,dataTable_users);
updateUserSelect();
}
@ -217,34 +221,34 @@ function updateUsersView(request,users_list){
// Prepare the user creation dialog
function setupCreateUserDialog(){
$('div#dialogs').append('<div title="Create user" id="create_user_dialog"></div>');
$('#create_user_dialog').html(create_user_tmpl);
$('div#dialogs').append('<div title="Create user" id="create_user_dialog"></div>');
$('#create_user_dialog').html(create_user_tmpl);
//Prepare jquery dialog
$('#create_user_dialog').dialog({
autoOpen: false,
modal:true,
width: 400
});
//Prepare jquery dialog
$('#create_user_dialog').dialog({
autoOpen: false,
modal:true,
width: 400
});
$('#create_user_dialog button').button();
$('#create_user_form').submit(function(){
var user_name=$('#username',this).val();
var user_password=$('#pass',this).val();
var user_name=$('#username',this).val();
var user_password=$('#pass',this).val();
if (!user_name.length && !user_password.length){
notifyError("User name and password must be filled in");
return false;
}
var user_json = { "user" :
{ "name" : user_name,
"password" : user_password }
};
Sunstone.runAction("User.create",user_json);
$('#create_user_dialog').dialog('close');
return false;
});
var user_json = { "user" :
{ "name" : user_name,
"password" : user_password }
};
Sunstone.runAction("User.create",user_json);
$('#create_user_dialog').dialog('close');
return false;
});
}
function popUpCreateUserDialog(){

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

@ -75,17 +75,17 @@ var vms_tab_content =
var create_vm_tmpl ='<form id="create_vm_form" action="">\
<fieldset>\
<div>\
<label for="vm_name">VM Name:</label>\
<input type="text" name="vm_name" id="vm_name" /><br />\
<label for="vm_name">VM Name:</label>\
<input type="text" name="vm_name" id="vm_name" /><br />\
<label for="template_id">Select template:</label>\
<select id="template_id">\
<select id="template_id">\
</select>\
</div>\
</fieldset>\
<fieldset>\
<div class="form_buttons">\
<button class="button" id="create_vm_proceed" value="VM.create">Create</button>\
<button class="button" type="reset" value="reset">Reset</button>\
<button class="button" id="create_vm_proceed" value="VM.create">Create</button>\
<button class="button" type="reset" value="reset">Reset</button>\
</div>\
</fieldset>\
</form>';
@ -267,12 +267,12 @@ var vm_actions = {
type: "custom",
call: function(obj) {
OpenNebula.VM.saveas(
{data:obj,
success: function (req) {
Sunstone.runAction("VM.show",
req.request.data[0][0]);
},
error: onError });
{data:obj,
success: function (req) {
Sunstone.runAction("VM.show",
req.request.data[0][0]);
},
error: onError });
}
},
@ -445,9 +445,9 @@ var vm_buttons = {
text: "Deploy",
tip: "This will deploy the selected VMs on the chosen host",
select: function(){
if (hosts_select){return hosts_select}
else {return ""}
},
if (hosts_select){return hosts_select}
else {return ""}
},
condition: True
},
"VM.migrate" : {
@ -455,9 +455,9 @@ var vm_buttons = {
text: "Migrate",
tip: "This will migrate the selected VMs to the chosen host",
select: function(){
if (hosts_select){return hosts_select}
else {return ""}
},
if (hosts_select){return hosts_select}
else {return ""}
},
condition: True
},
@ -466,9 +466,9 @@ var vm_buttons = {
text: "Live migrate",
tip: "This will live-migrate the selected VMs to the chosen host",
select: function(){
if (hosts_select){return hosts_select}
else {return ""}
},
if (hosts_select){return hosts_select}
else {return ""}
},
condition: True
},
"VM.hold" : {
@ -596,120 +596,122 @@ function vMachineElementArray(vm_json){
//Creates a listener for the TDs of the VM table
function vMachineInfoListener(){
$('#tbodyvmachines tr').live("click", function(e){
if ($(e.target).is('input') || $(e.target).is('a img')) {return true;}
$('#tbodyvmachines tr').live("click", function(e){
if ($(e.target).is('input') || $(e.target).is('a img')) {return true;}
popDialogLoading();
var aData = dataTable_vMachines.fnGetData(this);
var id = $(aData[0]).val();
var aData = dataTable_vMachines.fnGetData(this);
var id = $(aData[0]).val();
Sunstone.runAction("VM.showinfo",id);
return false;
});
return false;
});
}
// Callback to refresh a single element from the list
function updateVMachineElement(request, vm_json){
var id = vm_json.VM.ID;
var element = vMachineElementArray(vm_json);
updateSingleElement(element,dataTable_vMachines,'#vm_'+id)
var id = vm_json.VM.ID;
var element = vMachineElementArray(vm_json);
updateSingleElement(element,dataTable_vMachines,'#vm_'+id)
}
// Callback to delete a single element from the list
function deleteVMachineElement(req){
deleteElement(dataTable_vMachines,'#vm_'+req.request.data);
deleteElement(dataTable_vMachines,'#vm_'+req.request.data);
}
// Callback to add an element to the list
function addVMachineElement(request,vm_json){
var id = vm_json.VM.ID;
var element = vMachineElementArray(vm_json);
addElement(element,dataTable_vMachines);
var element = vMachineElementArray(vm_json);
addElement(element,dataTable_vMachines);
}
// Callback to refresh the list of Virtual Machines
function updateVMachinesView(request, vmachine_list){
vmachine_list_json = vmachine_list;
var vmachine_list_array = [];
vmachine_list_json = vmachine_list;
var vmachine_list_array = [];
$.each(vmachine_list,function(){
vmachine_list_array.push( vMachineElementArray(this));
});
$.each(vmachine_list,function(){
vmachine_list_array.push( vMachineElementArray(this));
});
updateView(vmachine_list_array,dataTable_vMachines);
updateDashboard("vms",vmachine_list_json);
updateView(vmachine_list_array,dataTable_vMachines);
updateDashboard("vms",vmachine_list_json);
}
// Refreshes the information panel for a VM
function updateVMInfo(request,vm){
var vm_info = vm.VM;
var info_tab = {
var vm_info = vm.VM;
var info_tab = {
title : "VM information",
content: '<table id="info_vm_table" class="info_table">\
<thead>\
<tr><th colspan="2">Virtual Machine information - '+vm_info.NAME+'</th></tr>\
</thead>\
<tbody>\
<tr>\
<td class="key_td">ID</td>\
<td class="value_td">'+vm_info.ID+'</td>\
</tr>\
<tr>\
<td class="key_td">Name</td>\
<td class="value_td">'+vm_info.NAME+'</td>\
</tr>\
<tr>\
<td class="key_td">State</td>\
<td class="value_td">'+OpenNebula.Helper.resource_state("vm",vm_info.STATE)+'</td>\
</tr>\
<tr>\
<td class="key_td">LCM State</td>\
<td class="value_td">'+OpenNebula.Helper.resource_state("vm_lcm",vm_info.LCM_STATE)+'</td>\
</tr>\
<tr>\
<td class="key_td">Start time</td>\
<td class="value_td">'+pretty_time(vm_info.STIME)+'</td>\
</tr>\
<tr>\
<td class="key_td">Deploy ID</td>\
<td class="value_td">'+(typeof(vm_info.DEPLOY_ID) == "object" ? "-" : vm_info.DEPLOY_ID)+'</td>\
</tr></tbody>\
content:
'<table id="info_vm_table" class="info_table">\
<thead>\
<tr><th colspan="2">Virtual Machine information - '+vm_info.NAME+'</th></tr>\
</thead>\
<tbody>\
<tr>\
<td class="key_td">ID</td>\
<td class="value_td">'+vm_info.ID+'</td>\
</tr>\
<tr>\
<td class="key_td">Name</td>\
<td class="value_td">'+vm_info.NAME+'</td>\
</tr>\
<tr>\
<td class="key_td">State</td>\
<td class="value_td">'+OpenNebula.Helper.resource_state("vm",vm_info.STATE)+'</td>\
</tr>\
<tr>\
<td class="key_td">LCM State</td>\
<td class="value_td">'+OpenNebula.Helper.resource_state("vm_lcm",vm_info.LCM_STATE)+'</td>\
</tr>\
<tr>\
<td class="key_td">Start time</td>\
<td class="value_td">'+pretty_time(vm_info.STIME)+'</td>\
</tr>\
<tr>\
<td class="key_td">Deploy ID</td>\
<td class="value_td">'+(typeof(vm_info.DEPLOY_ID) == "object" ? "-" : vm_info.DEPLOY_ID)+'</td>\
</tr></tbody>\
</table>\
<table id="vm_monitoring_table" class="info_table">\
<thead>\
<tr><th colspan="2">Monitoring information</th></tr>\
</thead>\
<tbody>\
<tr>\
<td class="key_td">Net_TX</td>\
<td class="value_td">'+vm_info.NET_TX+'</td>\
</tr>\
<tr>\
<td class="key_td">Net_RX</td>\
<td class="value_td">'+vm_info.NET_RX+'</td>\
</tr>\
<tr>\
<td class="key_td">Used Memory</td>\
<td class="value_td">'+humanize_size(vm_info.MEMORY)+'</td>\
</tr>\
<tr>\
<td class="key_td">Used CPU</td>\
<td class="value_td">'+vm_info.CPU+'</td>\
</tr>\
<tr>\
<td class="key_td">VNC Session</td>\
<td class="value_td">'+vncIcon(vm_info)+'</td>\
</tr>\
</tbody>\
<thead>\
<tr><th colspan="2">Monitoring information</th></tr>\
</thead>\
<tbody>\
<tr>\
<td class="key_td">Net_TX</td>\
<td class="value_td">'+vm_info.NET_TX+'</td>\
</tr>\
<tr>\
<td class="key_td">Net_RX</td>\
<td class="value_td">'+vm_info.NET_RX+'</td>\
</tr>\
<tr>\
<td class="key_td">Used Memory</td>\
<td class="value_td">'+humanize_size(vm_info.MEMORY)+'</td>\
</tr>\
<tr>\
<td class="key_td">Used CPU</td>\
<td class="value_td">'+vm_info.CPU+'</td>\
</tr>\
<tr>\
<td class="key_td">VNC Session</td>\
<td class="value_td">'+vncIcon(vm_info)+'</td>\
</tr>\
</tbody>\
</table>'
}
var template_tab = {
title: "VM Template",
content: '<table id="vm_template_table" class="info_table">\
<thead><tr><th colspan="2">VM template</th></tr></thead>'+
content:
'<table id="vm_template_table" class="info_table">\
<thead><tr><th colspan="2">VM template</th></tr></thead>'+
prettyPrintJSON(vm_info.TEMPLATE)+
'</table>'
'</table>'
}
var log_tab = {
@ -739,16 +741,16 @@ function updateVMInfo(request,vm){
// which is a lot.
function setupCreateVMDialog(){
$('div#dialogs').append('<div title="Create Virtual Machine" id="create_vm_dialog"></div>');
//Insert HTML in place
$('#create_vm_dialog').html(create_vm_tmpl);
$('div#dialogs').append('<div title="Create Virtual Machine" id="create_vm_dialog"></div>');
//Insert HTML in place
$('#create_vm_dialog').html(create_vm_tmpl);
//Prepare jquery dialog
$('#create_vm_dialog').dialog({
autoOpen: false,
modal: true,
width: 400
});
//Prepare jquery dialog
$('#create_vm_dialog').dialog({
autoOpen: false,
modal: true,
width: 400
});
$('#create_vm_dialog button').button();
@ -808,8 +810,8 @@ function setupSaveasDialog(){
if (!id.length || !disk_id.length || !image_name.length) {
notifyError("Skipping VM "+id+
". No disk id or image name specified");
}
". No disk id or image name specified");
}
else {
var obj = {
vm_id: id,
@ -830,8 +832,8 @@ function setupSaveasDialog(){
});
$('#saveas_vm_dialog #vm_saveas_cancel').click(function(){
$('#saveas_vm_dialog').dialog('close');
return false;
$('#saveas_vm_dialog').dialog('close');
return false;
});
}
@ -913,47 +915,47 @@ function saveasDisksCallback(req,response){
//Prepares autorefresh
function setVMAutorefresh(){
setInterval(function(){
var checked = $('input:checked',dataTable_vMachines.fnGetNodes());
var filter = $("#datatable_vmachines_filter input").attr("value");
if (!checked.length && !filter.length){
Sunstone.runAction("VM.autorefresh");
var checked = $('input:checked',dataTable_vMachines.fnGetNodes());
var filter = $("#datatable_vmachines_filter input").attr("value");
if (!checked.length && !filter.length){
Sunstone.runAction("VM.autorefresh");
}
},INTERVAL+someTime()); //so that not all refreshing is done at the same time
},INTERVAL+someTime());
}
function updateVNCState(rfb, state, oldstate, msg) {
var s, sb, cad, klass;
s = $D('VNC_status');
sb = $D('VNC_status_bar');
cad = $D('sendCtrlAltDelButton');
switch (state) {
case 'failed':
case 'fatal':
klass = "VNC_status_error";
break;
case 'normal':
klass = "VNC_status_normal";
break;
case 'disconnected':
case 'loaded':
klass = "VNC_status_normal";
break;
case 'password':
klass = "VNC_status_warn";
break;
default:
klass = "VNC_status_warn";
}
var s, sb, cad, klass;
s = $D('VNC_status');
sb = $D('VNC_status_bar');
cad = $D('sendCtrlAltDelButton');
switch (state) {
case 'failed':
case 'fatal':
klass = "VNC_status_error";
break;
case 'normal':
klass = "VNC_status_normal";
break;
case 'disconnected':
case 'loaded':
klass = "VNC_status_normal";
break;
case 'password':
klass = "VNC_status_warn";
break;
default:
klass = "VNC_status_warn";
}
if (state === "normal") { cad.disabled = false; }
else { cad.disabled = true; }
if (state === "normal") { cad.disabled = false; }
else { cad.disabled = true; }
if (typeof(msg) !== 'undefined') {
sb.setAttribute("class", klass);
s.innerHTML = msg;
}
}
if (typeof(msg) !== 'undefined') {
sb.setAttribute("class", klass);
s.innerHTML = msg;
}
}
//setups VNC application
function setupVNC(){
@ -963,18 +965,18 @@ function setupVNC(){
$('#vnc_dialog').html('\
<div id="VNC_status_bar" class="VNC_status_bar" style="margin-top: 0px;">\
<table border=0 width="100%"><tr>\
<td><div id="VNC_status">Loading</div></td>\
<td width="1%"><div id="VNC_buttons">\
<input type=button value="Send CtrlAltDel"\
id="sendCtrlAltDelButton">\
</div></td>\
</tr></table>\
</div>\
<canvas id="VNC_canvas" width="640px" height="20px">\
Canvas not supported.\
</canvas>\
');
<table border=0 width="100%"><tr>\
<td><div id="VNC_status">Loading</div></td>\
<td width="1%"><div id="VNC_buttons">\
<input type=button value="Send CtrlAltDel"\
id="sendCtrlAltDelButton">\
</div></td>\
</tr></table>\
</div>\
<canvas id="VNC_canvas" width="640px" height="20px">\
Canvas not supported.\
</canvas>\
');
$('#sendCtrlAltDelButton').click(function(){
rfb.sendCtrlAltDel();
@ -992,7 +994,6 @@ function setupVNC(){
$( "#vnc_dialog" ).bind( "dialogclose", function(event, ui) {
var id = $("#vnc_dialog").attr("vm_id");
Sunstone.runAction("VM.stopvnc",id);
});
$('.vnc').live("click",function(){
@ -1008,26 +1009,24 @@ function setupVNC(){
}
function vncCallback(request,response){
rfb = new RFB({'target': $D('VNC_canvas'),
'encrypt': false,
'true_color': true,
'local_cursor': true,
'shared': true,
'updateState': updateVNCState});
//fetch things from clicked element host - port - password
vnc_port = response["port"];
//Hopefully this is returning sunstone server address, where
//the proxy is running
vnc_host = window.location.hostname;
vnc_pw = response["password"];
setTimeout(function(){
rfb.connect(vnc_host, vnc_port, vnc_pw);
$('#vnc_dialog').dialog('open');
},4000);
rfb = new RFB({'target': $D('VNC_canvas'),
'encrypt': false,
'true_color': true,
'local_cursor': true,
'shared': true,
'updateState': updateVNCState});
//fetch things from clicked element host - port - password
vnc_port = response["port"];
//Hopefully this is returning sunstone server address, where
//the proxy is running
vnc_host = window.location.hostname;
vnc_pw = response["password"];
setTimeout(function(){
rfb.connect(vnc_host, vnc_port, vnc_pw);
$('#vnc_dialog').dialog('open');
},4000);
}

313
src/sunstone/public/js/plugins/vnets-tab.js
View File

@ -16,7 +16,7 @@
/*Virtual networks tab plugin*/
var vnets_tab_content =
var vnets_tab_content =
'<form id="virtualNetworks_form" action="javascript:alert(\'js error!\');">\
<div class="action_blocks">\
</div>\
@ -41,84 +41,84 @@ var vnets_tab_content =
var create_vn_tmpl =
'<div id="vn_tabs">\
<ul>\
<li><a href="#easy">Wizard</a></li>\
<li><a href="#manual">Advanced mode</a></li>\
</ul>\
<div id="easy">\
<form id="create_vn_form_easy" action="">\
<fieldset>\
<label for="name">Name:</label>\
<input type="text" name="name" id="name" /><br />\
</fieldset>\
<fieldset>\
<label for="bridge">Bridge:</label>\
<input type="text" name="bridge" id="bridge" /><br />\
</fieldset>\
<fieldset>\
<label style="height:2em;">Network type:</label>\
<input type="radio" name="fixed_ranged" id="fixed_check" value="fixed" checked="checked">Fixed network</input><br />\
<input type="radio" name="fixed_ranged" id="ranged_check" value="ranged">Ranged network</input><br />\
</fieldset>\
<div class="clear"></div>\
<div id="easy_tabs">\
<div id="fixed">\
<fieldset>\
<label for="leaseip">Lease IP:</label>\
<input type="text" name="leaseip" id="leaseip" /><br />\
<label for="leasemac">Lease MAC (opt):</label>\
<input type="text" name="leasemac" id="leasemac" />\
<div class="clear"></div>\
<button class="add_remove_button add_button" id="add_lease" value="add/lease">\
Add\
</button>\
<button class="add_remove_button" id="remove_lease" value="remove/lease">\
Remove selected\
</button>\
<label for="leases">Current leases:</label>\
<select id="leases" name="leases" size="10" style="width:150px" multiple>\
<!-- insert leases -->\
</select><br />\
</fieldset>\
</div>\
<div id="ranged">\
<fieldset>\
<label for="net_address">Network Address:</label>\
<input type="text" name="net_address" id="net_address" /><br />\
<label for="net_size">Network size:</label>\
<input type="text" name="net_size" id="net_size" />\
</fieldset>\
</div>\
</div>\
<div class="clear"></div>\
</fieldset>\
<fieldset>\
<div class="form_buttons">\
<button class="button" id="create_vn_submit_easy" value="vn/create">\
Create\
</button>\
<button class="button" type="reset" value="reset">Reset</button>\
</div>\
</fieldset>\
</form>\
</div>\
<div id="manual">\
<form id="create_vn_form_manual" action="">\
<h3 style="margin-bottom:10px;">Write the Virtual Network template here</h3>\
<fieldset style="border-top:none;">\
<textarea id="template" rows="15" style="width:100%;"></textarea>\
<div class="clear"></div>\
</fieldset>\
<fieldset>\
<div class="form_buttons">\
<button class="button" id="create_vn_submit_manual" value="vn/create">\
Create\
</button>\
<button class="button" type="reset" value="reset">Reset</button>\
</div>\
</fieldset>\
</form>\
</div>\
<ul>\
<li><a href="#easy">Wizard</a></li>\
<li><a href="#manual">Advanced mode</a></li>\
</ul>\
<div id="easy">\
<form id="create_vn_form_easy" action="">\
<fieldset>\
<label for="name">Name:</label>\
<input type="text" name="name" id="name" /><br />\
</fieldset>\
<fieldset>\
<label for="bridge">Bridge:</label>\
<input type="text" name="bridge" id="bridge" /><br />\
</fieldset>\
<fieldset>\
<label style="height:2em;">Network type:</label>\
<input type="radio" name="fixed_ranged" id="fixed_check" value="fixed" checked="checked">Fixed network</input><br />\
<input type="radio" name="fixed_ranged" id="ranged_check" value="ranged">Ranged network</input><br />\
</fieldset>\
<div class="clear"></div>\
<div id="easy_tabs">\
<div id="fixed">\
<fieldset>\
<label for="leaseip">Lease IP:</label>\
<input type="text" name="leaseip" id="leaseip" /><br />\
<label for="leasemac">Lease MAC (opt):</label>\
<input type="text" name="leasemac" id="leasemac" />\
<div class="clear"></div>\
<button class="add_remove_button add_button" id="add_lease" value="add/lease">\
Add\
</button>\
<button class="add_remove_button" id="remove_lease" value="remove/lease">\
Remove selected\
</button>\
<label for="leases">Current leases:</label>\
<select id="leases" name="leases" size="10" style="width:150px" multiple>\
<!-- insert leases -->\
</select><br />\
</fieldset>\
</div>\
<div id="ranged">\
<fieldset>\
<label for="net_address">Network Address:</label>\
<input type="text" name="net_address" id="net_address" /><br />\
<label for="net_size">Network size:</label>\
<input type="text" name="net_size" id="net_size" />\
</fieldset>\
</div>\
</div>\
<div class="clear"></div>\
</fieldset>\
<fieldset>\
<div class="form_buttons">\
<button class="button" id="create_vn_submit_easy" value="vn/create">\
Create\
</button>\
<button class="button" type="reset" value="reset">Reset</button>\
</div>\
</fieldset>\
</form>\
</div>\
<div id="manual">\
<form id="create_vn_form_manual" action="">\
<h3 style="margin-bottom:10px;">Write the Virtual Network template here</h3>\
<fieldset style="border-top:none;">\
<textarea id="template" rows="15" style="width:100%;"></textarea>\
<div class="clear"></div>\
</fieldset>\
<fieldset>\
<div class="form_buttons">\
<button class="button" id="create_vn_submit_manual" value="vn/create">\
Create\
</button>\
<button class="button" type="reset" value="reset">Reset</button>\
</div>\
</fieldset>\
</form>\
</div>\
</div>';
var vnetworks_select="";
@ -240,19 +240,19 @@ var vnet_buttons = {
img: "/images/Refresh-icon.png",
condition: True
},
"Network.create_dialog" : {
type: "create_dialog",
text: "+ New",
condition: True
},
"Network.publish" : {
type: "action",
text: "Publish",
condition: True
},
"Network.unpublish" : {
type: "action",
text: "Unpublish",
@ -274,7 +274,7 @@ var vnet_buttons = {
tip: "Select the new group:",
condition: True
},
"Network.delete" : {
type: "action",
text: "Delete",
@ -315,132 +315,134 @@ function vNetworkElementArray(vn_json){
total_leases = network.LEASES.LEASE.length ? network.LEASES.LEASE.length : "1";
}
return ['<input type="checkbox" id="vnetwork_'+network.ID+'" name="selected_items" value="'+network.ID+'"/>',
network.ID,
getUserName(network.UID),
getGroupName(network.GID),
network.NAME,
parseInt(network.TYPE) ? "FIXED" : "RANGED",
network.BRIDGE,
parseInt(network.PUBLIC) ? "yes" : "no",
total_leases ];
return [
'<input type="checkbox" id="vnetwork_'+network.ID+'" name="selected_items" value="'+network.ID+'"/>',
network.ID,
getUserName(network.UID),
getGroupName(network.GID),
network.NAME,
parseInt(network.TYPE) ? "FIXED" : "RANGED",
network.BRIDGE,
parseInt(network.PUBLIC) ? "yes" : "no",
total_leases ];
}
//Adds a listener to show the extended info when clicking on a row
function vNetworkInfoListener(){
$('#tbodyvnetworks tr').live("click", function(e){
if ($(e.target).is('input')) {return true;}
$('#tbodyvnetworks tr').live("click", function(e){
if ($(e.target).is('input')) {return true;}
popDialogLoading();
var aData = dataTable_vNetworks.fnGetData(this);
var id = $(aData[0]).val();
Sunstone.runAction("Network.showinfo",id);
return false;
});
var aData = dataTable_vNetworks.fnGetData(this);
var id = $(aData[0]).val();
Sunstone.runAction("Network.showinfo",id);
return false;
});
}
//updates the vnet select different options
function updateNetworkSelect(){
vnetworks_select=
vnetworks_select=
makeSelectOptions(dataTable_vNetworks,1,4,7,"no",2);
//update static selectors:
//update static selectors:
//in the VM creation dialog
$('div.vm_section#networks select#NETWORK_ID').html(vnetworks_select);
$('div.vm_section#networks select#NETWORK_ID').html(vnetworks_select);
}
//Callback to update a vnet element after an action on it
function updateVNetworkElement(request, vn_json){
id = vn_json.VNET.ID;
element = vNetworkElementArray(vn_json);
updateSingleElement(element,dataTable_vNetworks,'#vnetwork_'+id);
id = vn_json.VNET.ID;
element = vNetworkElementArray(vn_json);
updateSingleElement(element,dataTable_vNetworks,'#vnetwork_'+id);
updateNetworkSelect();
}
//Callback to delete a vnet element from the table
function deleteVNetworkElement(req){
deleteElement(dataTable_vNetworks,'#vnetwork_'+req.request.data);
deleteElement(dataTable_vNetworks,'#vnetwork_'+req.request.data);
updateNetworkSelect();
}
//Callback to add a new element
function addVNetworkElement(request,vn_json){
var element = vNetworkElementArray(vn_json);
addElement(element,dataTable_vNetworks);
var element = vNetworkElementArray(vn_json);
addElement(element,dataTable_vNetworks);
updateNetworkSelect();
}
//updates the list of virtual networks
function updateVNetworksView(request, network_list){
network_list_json = network_list;
var network_list_array = [];
network_list_json = network_list;
var network_list_array = [];
$.each(network_list,function(){
network_list_array.push(vNetworkElementArray(this));
});
$.each(network_list,function(){
network_list_array.push(vNetworkElementArray(this));
});
updateView(network_list_array,dataTable_vNetworks);
updateNetworkSelect();
updateView(network_list_array,dataTable_vNetworks);
updateNetworkSelect();
//dependency with dashboard
updateDashboard("vnets",network_list_json);
updateDashboard("vnets",network_list_json);
}
//updates the information panel tabs and pops the panel up
function updateVNetworkInfo(request,vn){
var vn_info = vn.VNET;
var info_tab_content =
'<table id="info_vn_table" class="info_table">\
<thead>\
<tr><th colspan="2">Virtual Network '+vn_info.ID+' information</th></tr>\
</thead>\
<tr>\
<td class="key_td">ID</td>\
<td class="value_td">'+vn_info.ID+'</td>\
</tr>\
<tr>\
<td class="key_td">UID</td>\
<td class="value_td">'+vn_info.UID+'</td>\
</tr>\
<tr>\
<td class="key_td">Public</td>\
<td class="value_td">'+(parseInt(vn_info.PUBLIC) ? "yes" : "no" )+'</td>\
</tr>\
</table>';
//if it is a fixed VNET we can add leases information
var vn_info = vn.VNET;
var info_tab_content =
'<table id="info_vn_table" class="info_table">\
<thead>\
<tr><th colspan="2">Virtual Network '+vn_info.ID+' information</th></tr>\
</thead>\
<tr>\
<td class="key_td">ID</td>\
<td class="value_td">'+vn_info.ID+'</td>\
<tr>\
<tr>\
<td class="key_td">UID</td>\
<td class="value_td">'+vn_info.UID+'</td>\
</tr>\
<tr>\
<td class="key_td">Public</td>\
<td class="value_td">'+(parseInt(vn_info.PUBLIC) ? "yes" : "no" )+'</td>\
</tr>\
</table>';
//if it is a fixed VNET we can add leases information
if (vn_info.TEMPLATE.TYPE == "FIXED"){
info_tab_content += '<table id="vn_leases_info_table" class="info_table">\
<thead>\
<tr><th colspan="2">Leases information</th></tr>\
</thead>'+
prettyPrintJSON(vn_info.TEMPLATE.LEASES)+
'</table>';
info_tab_content +=
'<table id="vn_leases_info_table" class="info_table">\
<thead>\
<tr><th colspan="2">Leases information</th></tr>\
</thead>'+
prettyPrintJSON(vn_info.TEMPLATE.LEASES)+
'</table>';
}
var info_tab = {
var info_tab = {
title: "Virtual Network information",
content: info_tab_content
}
var template_tab = {
title: "Virtual Network template",
content: '<table id="vn_template_table" class="info_table">\
<thead><tr><th colspan="2">Virtual Network template</th></tr></thead>'+
prettyPrintJSON(vn_info.TEMPLATE)+
'</table>'
content:
'<table id="vn_template_table" class="info_table">\
<thead><tr><th colspan="2">Virtual Network template</th></tr></thead>'+
prettyPrintJSON(vn_info.TEMPLATE)+
'</table>'
}
Sunstone.updateInfoPanelTab("vnet_info_panel","vnet_info_tab",info_tab);
Sunstone.updateInfoPanelTab("vnet_info_panel","vnet_template_tab",template_tab);
Sunstone.popUpInfoPanel("vnet_info_panel");
}
//Prepares the vnet creation dialog
function setupCreateVNetDialog() {
$('div#dialogs').append('<div title="Create Virtual Network" id="create_vn_dialog"></div>');
@ -607,13 +609,10 @@ $(document).ready(function(){
'','','','','','','',''],dataTable_vNetworks);
Sunstone.runAction("Network.list");
setupCreateVNetDialog();
setVNetAutorefresh();
initCheckAllBoxes(dataTable_vNetworks);
tableCheckboxesListener(dataTable_vNetworks);
vNetworkInfoListener();
});

17
src/sunstone/public/js/sunstone-util.js
View File

@ -496,11 +496,13 @@ function generateMonitoringDivs(graphs, id_prefix){
id_suffix=label.replace(/,/g,'_');
id = id_prefix+id_suffix;
str+='<table class="info_table">\
<thead><tr><th colspan="1">'+this.title+'</th></tr></thead>\
<tr><td id="legend_'+id_suffix+'"></td></tr>\
<tr><td style="border:0">\
<div id="'+id+'" style="width:'+width+'px; height:150px;">'+spinner+'</div>\
</td></tr></table>';
<thead><tr><th colspan="1">'+this.title+'</th></tr></thead>\
<tr><td id="legend_'+id_suffix+'"></td></tr>\
<tr><td style="border:0">\
<div id="'+id+'" style="width:'+width+'px; height:150px;">'+
spinner+
'</div>\
</td></tr></table>';
});
return str;
@ -508,7 +510,8 @@ function generateMonitoringDivs(graphs, id_prefix){
function plot_graph(data,context,id_prefix,info){
var labels = info.monitor_resources;
var humanize = info.humanize_figures ? humanize_size : function(val){return val};
var humanize = info.humanize_figures ?
humanize_size : function(val){ return val };
var labels_arr = labels.split(',');
var id_suffix = labels.replace(/,/g,'_');
var series = [];
@ -616,4 +619,4 @@ function True(){
}
function False(){
return false;
}
}

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

@ -21,7 +21,7 @@ var spinner = '<img src="/images/ajax-loader.gif" alt="retrieving" class="loadin
//Sunstone configuration is formed by predifined "actions", main tabs
//and "info_panels". Each tab has "content" and "buttons". Each
//and "info_panels". Each tab has "content" and "buttons". Each
//"info_panel" has "tabs" with "content".
var SunstoneCfg = {
"actions" : {},
@ -32,29 +32,29 @@ var SunstoneCfg = {
/* Public plugin interface */
var Sunstone = {
//Adds a predifined action
"addAction" : function (action_name,action_obj) {
SunstoneCfg["actions"][action_name] = action_obj;
},
//Replaces a predefined action
"updateAction" : function(action_name,action_obj) {
SunstoneCfg["actions"][action_name] = action_obj;
},
//Deletes a predefined action.
"removeAction" : function(action_name) {
delete SunstoneCfg["actions"][action_name];
},
//Adds several actions encapsulated in an js object.
"addActions" : function(actions) {
for (action in actions){
Sunstone.addAction(action,actions[action]);
}
}
},
//Adds a new main tab. Refreshes the dom if wanted.
"addMainTab" : function(tab_id,tab_obj,refresh) {
SunstoneCfg["tabs"][tab_id] = tab_obj;
@ -62,7 +62,7 @@ var Sunstone = {
insertTab(tab_id);
}
},
//Updates the content of an info tab and refreshes the DOM if wanted.
"updateMainTabContent" : function(tab_id,content_arg,refresh){
SunstoneCfg["tabs"][tab_id]["content"]=content_arg;
@ -70,7 +70,7 @@ var Sunstone = {
$('div#'+tab_id).html(content_arg);
}
},
//Replaces the buttons of an info tab and regenerates them if wanted.
"updateMainTabButtons" : function(tab_id,buttons_arg,refresh){
SunstoneCfg["tabs"][tab_id]["buttons"]=buttons_arg;
@ -79,7 +79,7 @@ var Sunstone = {
insertButtonsInTab(tab_id);
}
},
//Removes a tab and refreshes the DOM
"removeMainTab" : function(tab_id,refresh) {
delete SunstoneCfg["tabs"][tab_id];
@ -88,27 +88,27 @@ var Sunstone = {
$('ul#navigation li#li_'+tab_id).remove();
}
},
//Adds a new info panel
"addInfoPanel" : function(panel_name, panel_obj){
SunstoneCfg["info_panels"][panel_name]=panel_obj;
},
//Replaces an existing info panel
"updateInfoPanel" : function(panel_name,panel_obj){
SunstoneCfg["info_panels"][panel_name]=panel_obj;
},
//Removes an info panel
"removeInfoPanel" : function(panel_name){
delete SunstoneCfg["info_panels"][panel_name];
},
//Makes an info panel content pop up in the screen.
"popUpInfoPanel" : function(panel_name, selected_tab){
popDialog(Sunstone.getInfoPanelHTML(panel_name, selected_tab));
},
//Generates and returns the HTML div element for an info panel, with
//Jquery tabs.
"getInfoPanelHTML" : function(panel_name,selected_tab){
@ -116,53 +116,53 @@ var Sunstone = {
var tabs = SunstoneCfg["info_panels"][panel_name];
var tab=null;
for (tab_name in tabs){
tab=tabs[tab_name];
$('ul',info_panel).append('<li><a href="#'+tab_name+'">'+tab.title+'</a></li>');
info_panel.append('<div id="'+tab_name+'">'+tab.content+'</div>');
tab=tabs[tab_name];
$('ul',info_panel).append('<li><a href="#'+tab_name+'">'+tab.title+'</a></li>');
info_panel.append('<div id="'+tab_name+'">'+tab.content+'</div>');
}
if (selected_tab){
return info_panel.tabs({selected: selected_tab});
}
return info_panel.tabs({selected: 0});
},
//adds a tab to an info panel.
"addInfoPanelTab" : function(panel_name, panel_tab_id, panel_tab_obj){
SunstoneCfg["info_panels"][panel_name][panel_tab_id] = panel_tab_obj;
},
//Replaces a tab from an info panel. Refreshes the DOM if wanted.
"updateInfoPanelTab" : function(panel_name, panel_tab_id,
panel_tab_obj, refresh){
"updateInfoPanelTab" : function(panel_name, panel_tab_id,
panel_tab_obj, refresh){
SunstoneCfg["info_panels"][panel_name][panel_tab_id] = panel_tab_obj;
if (refresh){
var tab_content = panel_tab_obj.content;
$('div#'+panel_name+' div#'+panel_tab_id).html(tab_content);
}
},
//Removes a tab from an info panel configuration.
"removeInfoPanelTab" : function(panel_name,panel_tab_id){
delete SunstoneCfg["info_panels"][panel_name][panel_tab_id];
},
//Runs a predefined action. Wraps the calls to opennebula.js and
//can be use to run action depending on conditions and notify them
//if desired.
"runAction" : function(action, data_arg, extra_param){
var actions = SunstoneCfg["actions"];
if (!actions[action]){
notifyError("Action "+action+" not defined");
return;
}
var action_cfg = actions[action];
var notify = action_cfg.notify;
var condition = action_cfg["condition"];
//Is the condition to run the action met?
//Should we inform if it is not met?
if (condition && !condition()){
@ -171,24 +171,24 @@ var Sunstone = {
}
return;
}
var call = action_cfg["call"];
var callback = action_cfg["callback"];
var err = action_cfg["error"];
//Time to close any confirmation dialogs, as the execution may have
//come from them.
$('div#confirm_with_select_dialog').dialog("close");
$('div#confirm_dialog').dialog("close");
//We ease the use of:
// * "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)
// * "monitor_global" (returns monitoring info from a pool of elements
// * "monitor_single" (returns monitoring info from 1 element)
// * "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"
@ -201,7 +201,13 @@ var Sunstone = {
break;
case "single":
if (extra_param){
call({data:{id:data_arg,extra_param:extra_param}, success: callback,error:err});
call({
data:{
id:data_arg,
extra_param:extra_param
},
success: callback,error:err
});
} else {
call({data:{id:data_arg}, success: callback,error:err});
};
@ -210,23 +216,40 @@ var Sunstone = {
call({success: callback, error:err});
break;
case "monitor_global":
call({timeout: true, success: callback, error:err, data: {monitor: data_arg}});
call({
timeout: true,
success: callback,
error:err,
data: {monitor: data_arg}});
break;
case "monitor":
case "monitor_single":
call({timeout: true, success: callback, error:err, data: {id:data_arg, monitor: extra_param}});
call({
timeout: true,
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(){
if (extra_param){
call({data:{id:this,extra_param:extra_param}, success: callback, error: err});
call({
data:{
id:this,
extra_param:extra_param
},
success: callback,
error: err});
} else {
call({data:{id:this}, success: callback, error:err});
call({
data:{id:this},
success: callback,
error:err});
}
});
break;
default:
default:
//This action is complemente handled by the "call" function.
//we pass any data if present.
if (data_arg && extra_param) {call(data_arg,extra_param);}
@ -237,45 +260,24 @@ var Sunstone = {
if (notify) {
notifySubmit(action,data_arg,extra_param);
}
},
//Runs a predefined action on the selected nodes of a datatable.
//Optionally they are run with an extra_parameter.
//If no datatable is provided, it simply runs the action.
//~ "runActionOnDatatableNodes": function(action,dataTable,extra_param){
//~ if (dataTable != null){
//~
//~ //Which rows of the datatable are checked?
//~ var nodes = $('input:checked',dataTable.fnGetNodes());
//~ var data = [];
//~ $.each(nodes,function(){
//~ data.push($(this).val());
//~ });
//~ Sunstone.runAction(action,data,extra_param);
//~
//~ } else {
//~ Sunstone.runAction(action,extra_param);
//~ };
//~ },
//~
//returns a button object from the desired tab
"getButton" : function(tab_id,button_name){
var button = null;
var buttons = SunstoneCfg["tabs"][tab_id]["buttons"];
button = buttons[button_name];
//not found, is it in the list then?
if (!button && buttons["action_list"])
{
button = buttons["action_list"]["actions"][button_name];
}
return button;
var button = null;
var buttons = SunstoneCfg["tabs"][tab_id]["buttons"];
button = buttons[button_name];
//not found, is it in the list then?
if (!button && buttons["action_list"])
{
button = buttons["action_list"]["actions"][button_name];
}
return button;
} //end sunstone methods
};
@ -284,58 +286,61 @@ var Sunstone = {
$(document).ready(function(){
readCookie();
setLogin();
//Insert the tabs in the DOM and their buttons.
insertTabs();
insertButtons();
//Enhace the look of select buttons
initListButtons();
//Prepare the standard confirmation dialogs
setupConfirmDialogs();
//This dialog is shared to update templates
setupTemplateUpdateDialog();
//Listen for .action_buttons
//An action buttons runs a predefined action. If it has type
//An action buttons runs a predefined action. If it has type
//"multiple" it runs that action on the elements of a datatable.
$('.action_button').live("click",function(){
var table = null;
var value = $(this).attr("value");
var action = SunstoneCfg["actions"][value];
if (!action) { notifyError("Action "+value+" not defined."); return false;};
if (!action) {
notifyError("Action "+value+" not defined.");
return false;
};
switch (action.type){
case "multiple": //find the datatable
var nodes = action.elements();
Sunstone.runAction(value,nodes);
break;
default:
Sunstone.runAction(value);
case "multiple": //find the datatable
var nodes = action.elements();
Sunstone.runAction(value,nodes);
break;
default:
Sunstone.runAction(value);
}
return false;
});
//Listen .confirm_buttons. These buttons show a confirmation dialog
//before running the action.
$('.confirm_button').live("click",function(){
popUpConfirmDialog(this);
return false;
});
//Listen .confirm_buttons. These buttons show a confirmation dialog
//with a select box before running the action.
$('.confirm_with_select_button').live("click",function(){
popUpConfirmWithSelectDialog(this);
return false;
});
//Jquery-enhace the buttons in the DOM
$('button').button();
//Close overlay dialogs when clicking outside of them.
$(".ui-widget-overlay").live("click", function (){
$("div:ui-dialog:visible").dialog("close");
@ -345,10 +350,10 @@ $(document).ready(function(){
$('*:not(.action_list,.list_button)').click(function(){
$('.action_list:visible').hide();
});
//Start with the dashboard (supposing we have one).
showTab('#dashboard_tab');
});
@ -364,7 +369,7 @@ function readCookie(){
});
}
//sets the user info in the top bar and creates a listner in the
//sets the user info in the top bar and creates a listner in the
//signout button
function setLogin(){
//This two variables can be used anywhere
@ -373,10 +378,11 @@ function setLogin(){
$("#user").html(username);
$("#logout").click(function(){
OpenNebula.Auth.logout({success:function(){
window.location.href = "/login";
}
});
OpenNebula.Auth.logout({
success:function(){
window.location.href = "/login";
}
});
return false;
});
}
@ -400,7 +406,7 @@ function insertTab(tab_name){
if (condition && !condition()) {return;}
$("div.inner-center").append('<div id="'+tab_name+'" class="tab"></div>');
$('div#'+tab_name).html(tab_info.content);
$('ul#navigation').append('<li id="li_'+tab_name+'"><a href="#'+tab_name+'">'+tab_info.title+'</a></li>');
}
@ -419,11 +425,11 @@ function insertButtonsInTab(tab_name){
var button_code="";
var sel_obj=null;
var condition=null;
//Check if we have included an appropiate space our tab to
//insert them (an .action_blocks div)
if ($('div#'+tab_name+' div.action_blocks').length){
//for every button defined for this tab...
for (button_name in buttons){
button_code = "";
@ -431,7 +437,7 @@ function insertButtonsInTab(tab_name){
condition = button.condition;
//if we meet the condition we proceed. Otherwise we skip it.
if (condition && !condition()) { continue; }
//depending on the type of button we generate different
//code. There are 4 possible types:
/*
@ -441,7 +447,7 @@ function insertButtonsInTab(tab_name){
* default: generally buttons have the "<type>_button" class.
*/
switch (button.type) {
case "select":
case "select":
button_code = '<select class="multi_action_slct">';
//for each subbutton in the list we add an option to the select.
for (sel_name in button.actions){
@ -453,89 +459,84 @@ function insertButtonsInTab(tab_name){
};
button_code += '</select>';
break;
case "image":
case "image":
button_code = '<a href="#" class="action_button" value="'+button_name+'"><img class="image_button" src="'+button.img+'" alt="'+button.text+'" /></a>';
break;
case "create_dialog":
case "create_dialog":
button_code = '<button class="'+button.type+'_button action_button top_button" value="'+button_name+'">'+button.text+'</button>';
break;
default:
default:
button_code = '<button class="'+button.type+'_button top_button" value="'+button_name+'">'+button.text+'</button>';
}
if (button.alwaysActive) {
button_code = $(button_code).addClass("alwaysActive");
}
$('div#'+tab_name+' .action_blocks').append(button_code);
}//for each button in tab
$('.top_button').button();
}//if tab exists
}
//Converts selects into buttons which show a list of actions when
//clicked. This lists have two parts, one for the last action run, and
//Converts selects into buttons which show a list of actions when
//clicked. This lists have two parts, one for the last action run, and
//another containing a list of actions that can be folded/unfolded.
function initListButtons(){
//for each multi_action select
$('.multi_action_slct').each(function(){
//prepare replacement buttons
var buttonset = $('<div style="display:inline-block;" class="top_button"></div');
var button1 = $('<button class="last_action_button action_button confirm_button confirm_with_select_button" value="">Previous action</button>').button();
button1.attr("disabled","disabled");
var button2 = $('<button class="list_button" value="">See more</button>').button({
text:false,
icons: { primary: "ui-icon-triangle-1-s" }
});
buttonset.append(button1);
buttonset.append(button2);
buttonset.buttonset();
//prepare list
var options = $('option', $(this));
var list = $('<ul class="action_list"></ul>');
$.each(options,function(){
var classes = $(this).attr("class");
var item = $('<li></li>');
var a = $('<a href="#" class="'+classes+'" value="'+$(this).val()+'">'+$(this).text()+'</a>');
a.val($(this).val());
item.html(a);
list.append(item);
});
list.css({
"display":"none"
});
//replace the select and insert the buttons
$(this).before(buttonset);
$(this).parents('.action_blocks').append(list);
$(this).remove();
//$(this).replaceWith(list);
//for each multi_action select
$('.multi_action_slct').each(function(){
//prepare replacement buttons
var buttonset = $('<div style="display:inline-block;" class="top_button"></div');
var button1 = $('<button class="last_action_button action_button confirm_button confirm_with_select_button" value="">Previous action</button>').button();
button1.attr("disabled","disabled");
var button2 = $('<button class="list_button" value="">See more</button>').button({
text:false,
icons: { primary: "ui-icon-triangle-1-s" }
});
buttonset.append(button1);
buttonset.append(button2);
buttonset.buttonset();
//prepare list
var options = $('option', $(this));
var list = $('<ul class="action_list"></ul>');
$.each(options,function(){
var classes = $(this).attr("class");
var item = $('<li></li>');
var a = $('<a href="#" class="'+classes+'" value="'+$(this).val()+'">'+$(this).text()+'</a>');
a.val($(this).val());
item.html(a);
list.append(item);
});
list.css({
"display":"none"
});
$(this).before(buttonset);
$(this).parents('.action_blocks').append(list);
$(this).remove();
//below the listeners for events on these buttons and list
});
//enable run the last action button
$('.action_list li a').click(function(){
//enable run last action button
var prev_action_button = $('.last_action_button',$(this).parents('.action_blocks'));
prev_action_button.val($(this).val());
prev_action_button.removeClass("confirm_with_select_button");
prev_action_button.removeClass("confirm_button");
prev_action_button.removeClass("action_button");
prev_action_button.addClass($(this).attr("class"));
prev_action_button.button("option","label",$(this).text());
prev_action_button.button("enable");
$(this).parents('ul').hide("blind",100);
//return false;
});
//below the listeners for events on these buttons and list
//enable run the last action button
$('.action_list li a').click(function(){
//enable run last action button
var prev_action_button = $('.last_action_button',$(this).parents('.action_blocks'));
prev_action_button.val($(this).val());
prev_action_button.removeClass("confirm_with_select_button");
prev_action_button.removeClass("confirm_button");
prev_action_button.removeClass("action_button");
prev_action_button.addClass($(this).attr("class"));
prev_action_button.button("option","label",$(this).text());
prev_action_button.button("enable");
$(this).parents('ul').hide("blind",100);
//return false;
});
//Show the list of actions in place
$('.list_button').click(function(){
@ -551,93 +552,90 @@ function initListButtons(){
//Prepares the standard confirm dialogs
function setupConfirmDialogs(){
//add div to the main body if it isn't present.
if (!($('div#confirm_dialog').length)){
$('div#dialogs').append('<div id="confirm_dialog" title="Confirmation of action"></div>');
};
//add the HTML with the standard question and buttons.
$('div#confirm_dialog').html(
'<form action="javascript:alert(\'js error!\');">\
<div id="confirm_tip">You have to confirm this action.</div>\
<br />\
<div id="question">Do you want to proceed?</div>\
<br />\
<div class="form_buttons">\
<button id="confirm_proceed" class="action_button" value="">OK</button>\
<button class="confirm_cancel" value="">Cancel</button>\
</div>\
</form>');
$('div#confirm_dialog').html(
'<form action="javascript:alert(\'js error!\');">\
<div id="confirm_tip">You have to confirm this action.</div>\
<br />\
<div id="question">Do you want to proceed?</div>\
<br />\
<div class="form_buttons">\
<button id="confirm_proceed" class="action_button" value="">OK</button>\
<button class="confirm_cancel" value="">Cancel</button>\
</div>\
</form>');
//prepare the jquery dialog
$('div#confirm_dialog').dialog({
resizable:false,
modal:true,
width:300,
heigth:200,
autoOpen:false
});
$('div#confirm_dialog').dialog({
resizable:false,
modal:true,
width:300,
heigth:200,
autoOpen:false
});
//enhace the button look
$('div#confirm_dialog button').button();
//same for the confirm with select dialog.
if (!($('div#confirm_with_select_dialog').length)){
$('div#dialogs').append('<div id="confirm_with_select_dialog" title="Confirmation of action"></div>');
};
$('div#confirm_with_select_dialog').html(
'<form action="javascript:alert(\'js error!\');">\
<div id="confirm_with_select_tip">You need to select something.</div>\
<select style="margin: 10px 0;" id="confirm_select">\
</select>\
<div class="form_buttons">\
<button id="confirm_with_select_proceed" class="" value="">OK</button>\
<button class="confirm_cancel" value="">Cancel</button>\
</div>\
</form>');
$('div#confirm_with_select_dialog').html(
'<form action="javascript:alert(\'js error!\');">\
<div id="confirm_with_select_tip">You need to select something.</div>\
<select style="margin: 10px 0;" id="confirm_select">\
</select>\
<div class="form_buttons">\
<button id="confirm_with_select_proceed" class="" value="">OK</button>\
<button class="confirm_cancel" value="">Cancel</button>\
</div>\
</form>');
//prepare the jquery dialog
$('div#confirm_with_select_dialog').dialog({
resizable:false,
modal:true,
width:300,
heigth:300,
autoOpen:false
});
$('div#confirm_with_select_dialog').dialog({
resizable:false,
modal:true,
width:300,
heigth:300,
autoOpen:false
});
$('div#confirm_with_select_dialog button').button();
//if a cancel button is pressed, we close the dialog.
$('button.confirm_cancel').click(function(){
$('div#confirm_with_select_dialog').dialog("close");
$('div#confirm_with_select_dialog').dialog("close");
$('div#confirm_dialog').dialog("close");
return false;
});
return false;
});
//when we proceed with a "confirm with select" we need to
//find out if we are running an action with a parametre on a datatable
//items or if its just an action
//items or if its just an action
$('button#confirm_with_select_proceed').click(function(){
var value = $(this).val();
var action = SunstoneCfg["actions"][value];
var param = $('select#confirm_select').val();
if (!action) { notifyError("Action "+value+" not defined."); return false;};
switch (action.type){
case "multiple": //find the datatable
var nodes = action.elements();
Sunstone.runAction(value,nodes,param);
break;
default:
Sunstone.runAction(value,param);
break;
case "multiple": //find the datatable
var nodes = action.elements();
Sunstone.runAction(value,nodes,param);
break;
default:
Sunstone.runAction(value,param);
break;
}
return false;
});
}
//Popup a confirmation dialog.
@ -666,9 +664,7 @@ function popUpConfirmWithSelectDialog(target_elem){
var select_var = button.select();
$('select#confirm_select').html(select_var);
$('div#confirm_with_select_tip').text(tip);
$('button#confirm_with_select_proceed').val(value);
$('div#confirm_with_select_dialog').dialog("open");
}