eole-one-frontend/bugfix/images-tab.js

1257 lines
44 KiB
JavaScript
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

/* -------------------------------------------------------------------------- */
/* Copyright 2002-2014, OpenNebula Project (OpenNebula.org), C12G Labs */
/* */
/* Licensed under the Apache License, Version 2.0 (the "License"); you may */
/* not use this file except in compliance with the License. You may obtain */
/* a copy of the License at */
/* */
/* http://www.apache.org/licenses/LICENSE-2.0 */
/* */
/* Unless required by applicable law or agreed to in writing, software */
/* distributed under the License is distributed on an "AS IS" BASIS, */
/* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. */
/* See the License for the specific language governing permissions and */
/* limitations under the License. */
/* -------------------------------------------------------------------------- */
/*Images tab plugin*/
size_images = 0;
var create_image_tmpl ='<div class="row create_image_header">\
<div class="large-5 columns">\
<h3 class="subheader">'+tr("Create Image")+'</h3>'+
'</div>'+
'<div class="large-7 columns">'+
'<dl class="tabs right" data-tab>\
<dd class="active"><a href="#img_easyTab">'+tr("Wizard")+'</a></dd>\
<dd><a href="#img_manualTab">'+tr("Advanced mode")+'</a></dd>\
</dl>\
</div>\
</div>\
<form id="create_image" action="" class="custom creation">\
<div class="tabs-content">\
<div id="img_easyTab" class="content active">\
<div class="row vm_param">\
<div class="large-12 columns">\
<label for="img_name">'+tr("Name")+
'<span class="tip">'+tr("Name that the Image will get. Every image must have a unique name.")+'</span>\
</label>\
<input type="text" name="img_name" id="img_name" />\
</div>\
</div>\
<div class="row">\
<div class="large-12 columns">\
<label for="img_desc">'+tr("Description")+
'<span class="tip">'+tr("Human readable description of the image for other users.")+'</span>\
</label>\
<textarea name="img_desc" id="img_desc" rows="4"></textarea>\
</div>\
</div>\
<div class="row">\
<div class="large-6 columns">\
<label for="img_type">'+tr("Type")+
'<span class="tip">'+tr("Type of the image.")+'<br/><br/>'
+ tr(" OS images contain a working operative system.")+'<br/><br/>'
+ tr(" CDROM images are readonly data.")+'<br/><br/>'
+ tr(" DATABLOCK images are a storage for data. They can be created from previous existing data, or as an empty drive.")+
'</span>'+
'</label>\
<select name="img_type" id="img_type">\
<option value="OS">'+tr("OS")+'</option>\
<option value="CDROM">'+tr("CDROM")+'</option>\
<option value="DATABLOCK">'+tr("DATABLOCK")+'</option>\
</select>\
</div>\
<div class="large-6 columns">\
<label for="img_datastore">'+tr("Datastore")+
'<span class="tip">'+tr("Select the datastore for this image")+'</span>'+
'</label>\
<div id="img_datastore" name="img_datastore">\
</div>\
</div>\
<div class="large-6 columns">\
<input type="checkbox" id="img_persistent" name="img_persistent" value="YES" />\
<label for="img_persistent">'+tr("Persistent")+
'<span class="tip">'+tr("Persistence of the image")+'</span>'+
'</label>\
</div>\
</div>\
<br>\
<fieldset>\
<legend>'+tr("Image location")+':</legend>\
<div class="row" id="src_path_select">\
<div class="large-12 columns text-center">\
<input type="radio" name="src_path" id="path_image" value="path"><label for="path_image">'+ tr("Provide a path")+'</label> \
<input type="radio" name="src_path" id="upload_image" value="upload"> <label for="upload_image">'+tr("Upload")+'</label> \
<input type="radio" name="src_path" id="datablock_img" value="datablock" disabled> <label for="datablock_img">'+tr("Empty datablock")+'</label> \
</div>\
</div>\
<br>\
<div class="img_param row">\
<div class="large-12 columns">\
<label for="img_path">'+tr("Path")+
'<span class="tip">'+tr("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.")+'</span>'+
'</label>\
<input type="text" name="img_path" id="img_path" />\
</div>\
</div>\
<div class="row">\
<div id="file-uploader" class="large-12 columns text-center">\
</div>\
</div>\
<div class="img_size row">\
<div class="large-6 columns">\
<label for="img_size">'+tr("Size")+
'<span class="tip">'+tr("Size of the datablock in MB.")+'</span>'+
'</label>\
<input type="text" name="img_size" id="img_size" />\
</div>\
<div class="large-6 columns">\
<label for="img_fstype">'+tr("FS type")+
'<span class="tip">'+tr("Type of file system to be built.")+'<br><br>'
+ tr(" Plain. When the disk image is used directly by the hypervisor we can format the image, and so it is ready to be used by the guest OS. Values: ext2, ext3, ext4, ntfs, reiserfs, jfs, swap. Any other fs supported by mkfs will work if no special option is needed.")+'<br><br>'
+ tr(" Formatted. The disk image is stored in a hypervisor specific format VMDK or Qcow2. Then we cannot really make a filesystem on the image, just create the device and let the guest OS format the disk. Use raw to not to format the new image. Values: raw, qcow2, vmdk_*.")+
'</span>'+
'</label>\
<input type="text" name="img_fstype" id="img_fstype" />\
</div>\
</div>\
</fieldset>\
<div class="show_hide" id="advanced_image_create">\
<h4><small><i class=" fa fa-caret-down"/> '+tr("Advanced options")+'<a id="add_os_boot_opts" class="icon_left" href="#"></a></small></h4>\
</div>\
<div class="advanced">\
<div class="row">\
<div class="large-6 columns">\
<div class="row">\
<div class="large-12 columns">\
<label for="img_dev_prefix">'+tr("Device prefix")+
'<span class="tip">'+tr("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”).")+'</span>'+
'</label>\
<input type="text" name="img_dev_prefix" id="img_dev_prefix" />\
</div>\
</div>\
<div class="row">\
<div class="large-12 columns">\
<label for="img_driver">'+tr("Driver")+
'<span class="tip">'+tr("Specific image mapping driver. KVM: raw, qcow2. XEN: tap:aio, file:")+'</span>'+
'</label>\
<input type="text" name="img_driver" id="img_driver" />\
</div>\
</div>\
</div>\
<div class="large-6 columns">\
<div class="row">\
<div class="large-12 columns">\
<label for="img_target">'+tr("Target")+
'<span class="tip">'+tr("Target on which the image will be mounted at. For example: hda, sdb...")+'</span>'+
'</label>\
<input type="text" name="img_target" id="img_target" />\
</div>\
</div>\
</div>\
</div>\
<br>\
<div class="row">\
<fieldset>\
<legend>' + tr("Custom attributes") + '</legend>\
<div class="row">\
<div class="large-6 columns">\
<div class="row">\
<div class="large-12 columns">\
<label for="custom_var_image_name">'+tr("Name")+'</label>\
<input type="text" id="custom_var_image_name" name="custom_var_image_name" />\
</div>\
</div>\
<div class="row">\
<div class="large-12 columns">\
<label for="custom_var_image_value">'+tr("Value")+'</label>\
<input type="text" id="custom_var_image_value" name="custom_var_image_value" />\
</div>\
</div>\
<div class="row">\
<div class="large-12 columns">\
<button class="add_remove_button add_button secondary button small radius" id="add_custom_var_image_button" value="add_custom_image_var">\
'+tr("Add")+'\
</button>\
<button class="add_remove_button secondary button small radius" id="remove_custom_var_image_button" value="remove_custom_image_var">\
'+tr("Remove selected")+'\
</button>\
</div>\
</div>\
</div>\
<div class="large-6 columns">\
<div class="row">\
<div class="eight centered columns">\
<select id="custom_var_image_box" name="custom_var_image_box" style="height:180px !important; width:100%" multiple>\
<!-- insert leases -->\
</select>\
</div>\
</div>\
</div>\
</div>\
</fieldset>\
</div>\
</div>\
<div class="form_buttons">\
<button class="button success radius right" id="create_image_submit" type="button" value="image/create">'+tr("Create")+'</button>\
<button id="wizard_image_reset_button" class="button secondary radius" type="reset" value="reset">'+tr("Reset")+'</button>\
</div>\
</div>\
<div id="img_manualTab" class="content">\
<div class="row">\
<div class="columns large-12">\
<label for="img_datastores_raw">'+tr("Datastore")+':</label>\
<div id="img_datastore_raw" name="img_datastore_raw">\
</div>\
</div>\
</div>\
<div class="row">\
<div class="columns large-12">\
<textarea id="template" rows="15" style="height:380px !important; width:100%;"></textarea>\
</div>\
</div>\
<div class="form_buttons">\
<button class="button success radius right" id="create_image_submit_manual" value="image/create">'+tr("Create")+'</button>\
<button id="advanced_image_reset_button" class="button secondary radius" type="reset" value="reset">'+tr("Reset")+'</button>\
</div>\
</div>\
</div>\
<a class="close-reveal-modal">&#215;</a>\
</form>\
</div>';
var dataTable_images;
var $create_image_dialog;
var image_actions = {
"Image.create" : {
type: "create",
call: OpenNebula.Image.create,
callback: function(request, response){
addImageElement(request, response);
$create_image_dialog.foundation('reveal', 'close');
$create_image_dialog.empty();
setupCreateImageDialog();
notifyCustom(tr("Image created"), " ID: " + response.IMAGE.ID, false)
},
error: onError
},
"Image.create_dialog" : {
type: "custom",
call: popUpCreateImageDialog
},
"Image.list" : {
type: "list",
call: OpenNebula.Image.list,
callback: updateImagesView,
error: onError
},
"Image.show" : {
type : "single",
call: OpenNebula.Image.show,
callback: function(request, response){
var tab = dataTable_images.parents(".tab");
if (Sunstone.rightInfoVisible(tab)) {
// individual view
updateImageInfo(request, response);
}
// datatable row
updateImageElement(request, response);
},
error: onError
},
"Image.refresh" : {
type: "custom",
call: function () {
var tab = dataTable_images.parents(".tab");
if (Sunstone.rightInfoVisible(tab)) {
Sunstone.runAction("Image.show", Sunstone.rightInfoResourceId(tab))
} else {
waitingNodes(dataTable_images);
Sunstone.runAction("Image.list", {force: true});
}
}
},
"Image.update_template" : {
type: "single",
call: OpenNebula.Image.update,
callback: function(request) {
notifyMessage("Template updated correctly");
Sunstone.runAction('Image.show',request.request.data[0][0]);
},
error: onError
},
"Image.enable" : {
type: "multiple",
call: OpenNebula.Image.enable,
callback: function (req) {
Sunstone.runAction("Image.show",req.request.data[0]);
},
elements: imageElements,
error: onError,
notify: true
},
"Image.disable" : {
type: "multiple",
call: OpenNebula.Image.disable,
callback: function (req) {
Sunstone.runAction("Image.show",req.request.data[0]);
},
elements: imageElements,
error: onError,
notify: true
},
"Image.persistent" : {
type: "multiple",
call: OpenNebula.Image.persistent,
callback: function (req) {
Sunstone.runAction("Image.show",req.request.data[0]);
},
elements: imageElements,
error: function (req,error_json) {
Sunstone.runAction("Image.show",req.request.data[0]);
onError(req,error_json);
},
notify: true
},
"Image.nonpersistent" : {
type: "multiple",
call: OpenNebula.Image.nonpersistent,
callback: function (req) {
Sunstone.runAction("Image.show",req.request.data[0]);
},
elements: imageElements,
error: onError,
notify: true
},
"Image.delete" : {
type: "multiple",
call: OpenNebula.Image.del,
callback: deleteImageElement,
elements: imageElements,
error: onError,
notify: true
},
"Image.chown" : {
type: "multiple",
call: OpenNebula.Image.chown,
callback: function (req) {
Sunstone.runAction("Image.show",req.request.data[0]);
},
elements: imageElements,
error: onError,
notify: true
},
"Image.chgrp" : {
type: "multiple",
call: OpenNebula.Image.chgrp,
callback: function (req) {
Sunstone.runAction("Image.show",req.request.data[0]);
},
elements: imageElements,
error: onError,
notify: true
},
"Image.chmod" : {
type: "single",
call: OpenNebula.Image.chmod,
// callback
error: onError,
notify: true
},
"Image.chtype" : {
type: "single",
call: OpenNebula.Image.chtype,
callback: function (req) {
Sunstone.runAction("Image.show",req.request.data[0][0]);
},
elements: imageElements,
error: onError,
notify: true
},
"Image.clone_dialog" : {
type: "custom",
call: popUpImageCloneDialog
},
"Image.clone" : {
type: "single",
call: OpenNebula.Image.clone,
error: onError,
notify: true
},
"Image.help" : {
type: "custom",
call: function() {
hideDialog();
$('div#images_tab div.legend_div').slideToggle();
}
},
"Image.rename" : {
type: "single",
call: OpenNebula.Image.rename,
callback: function(request) {
notifyMessage(tr("Image renamed correctly"));
Sunstone.runAction('Image.show',request.request.data[0][0]);
},
error: onError,
notify: true
},
};
var image_buttons = {
"Image.refresh" : {
type: "action",
layout: "refresh",
alwaysActive: true
},
// "Sunstone.toggle_top" : {
// type: "custom",
// layout: "top",
// alwaysActive: true
// },
"Image.create_dialog" : {
type: "create_dialog",
layout: "create"
},
"Image.chown" : {
type: "confirm_with_select",
text: tr("Change owner"),
layout: "user_select",
select: "User",
tip: tr("Select the new owner")+":",
condition: mustBeAdmin
},
"Image.chgrp" : {
type: "confirm_with_select",
text: tr("Change group"),
layout: "user_select",
select: "Group",
tip: tr("Select the new group")+":",
condition: mustBeAdmin
},
"Image.enable" : {
type: "action",
layout: "more_select",
text: tr("Enable")
},
"Image.disable" : {
type: "action",
layout: "more_select",
text: tr("Disable")
},
"Image.persistent" : {
type: "action",
layout: "more_select",
text: tr("Make persistent")
},
"Image.nonpersistent" : {
type: "action",
layout: "more_select",
text: tr("Make non persistent")
},
"Image.clone_dialog" : {
type: "action",
layout: "main",
text: tr("Clone")
},
"Image.delete" : {
type: "confirm",
layout: "del",
text: tr("Delete")
},
}
var image_info_panel = {
"image_info_tab" : {
title: tr("Information"),
content: ""
}
}
var images_tab = {
title: tr("Images"),
resource: 'Image',
buttons: image_buttons,
tabClass: 'subTab',
parentTab: 'vresources-tab',
content: '<div class="large-12 columns">\
<div id="upload_progress_bars"></div>\
</div>',
search_input: '<input id="image_search" type="text" placeholder="'+tr("Search")+'" />',
list_header: '<i class="fa fa-fw fa-upload"></i>&emsp;'+tr("Images"),
info_header: '<i class="fa fa-fw fa-upload"></i>&emsp;'+tr("Image"),
subheader: '<span class="total_images"/> <small>'+tr("TOTAL")+'</small>&emsp;\
<span class="size_images"/> <small>'+tr("USED")+'</small>',
table: '<table id="datatable_images" class="datatable twelve">\
<thead>\
<tr>\
<th class="check"><input type="checkbox" class="check_all" value=""></input></th>\
<th>'+tr("ID")+'</th>\
<th>'+tr("Owner")+'</th>\
<th>'+tr("Group")+'</th>\
<th>'+tr("Name")+'</th>\
<th>'+tr("Datastore")+'</th>\
<th>'+tr("Size")+'</th>\
<th>'+tr("Type")+'</th>\
<th>'+tr("Registration time")+'</th>\
<th>'+tr("Persistent")+'</th>\
<th>'+tr("Status")+'</th>\
<th>'+tr("#VMS")+'</th>\
<th>'+tr("Target")+'</th>\
</tr>\
</thead>\
<tbody id="tbodyimages">\
</tbody>\
</table>'
}
Sunstone.addActions(image_actions);
Sunstone.addMainTab('images-tab',images_tab);
Sunstone.addInfoPanel('image_info_panel',image_info_panel);
function imageElements() {
return getSelectedNodes(dataTable_images);
}
// Returns an array containing the values of the image_json and ready
// to be inserted in the dataTable
function imageElementArray(image_json){
//Changing this? It may affect to the is_persistent() functions.
var image = image_json.IMAGE;
// KERNEL || RAMDISK || CONTEXT
if (image.TYPE == "3" || image.TYPE == "4" || image.TYPE == "5") {
return false;
}
size_images = size_images + parseInt(image.SIZE);
//add also persistent/non-persistent selects, type select.
return [
'<input class="check_item" type="checkbox" id="image_'+image.ID+'" name="selected_items" value="'+image.ID+'"/>',
image.ID,
image.UNAME,
image.GNAME,
image.NAME,
image.DATASTORE,
image.SIZE,
OpenNebula.Helper.image_type(image.TYPE),
pretty_time(image.REGTIME),
parseInt(image.PERSISTENT) ? "yes" : "no",
OpenNebula.Helper.resource_state("image",image.STATE),
image.RUNNING_VMS,
image.TEMPLATE.TARGET ? image.TEMPLATE.TARGET : '--'
];
}
// Callback to update an element in the dataTable
function updateImageElement(request, image_json){
var id = image_json.IMAGE.ID;
var element = imageElementArray(image_json);
updateSingleElement(element,dataTable_images,'#image_'+id);
}
// Callback to remove an element from the dataTable
function deleteImageElement(req){
deleteElement(dataTable_images,'#image_'+req.request.data);
}
// Callback to add an image element
function addImageElement(request, image_json){
var element = imageElementArray(image_json);
addElement(element,dataTable_images);
}
// Callback to refresh the list of images
function updateImagesView(request, images_list){
var image_list_array = [];
size_images = 0;
$.each(images_list,function(){
var image = imageElementArray(this);
if (image)
image_list_array.push(image);
});
updateView(image_list_array,dataTable_images);
var size = humanize_size_from_mb(size_images)
$(".total_images").text(image_list_array.length);
$(".size_images").text(size);
}
// Callback to update the information panel tabs and pop it up
function updateImageInfo(request,img){
var img_info = img.IMAGE;
var info_tab = {
title : tr("Info"),
icon: "fa-info-circle",
content:
'<div class="row">\
<div class="large-6 columns">\
<table id="info_img_table" class="dataTable extended_table">\
<thead>\
<tr><th colspan="3">'+tr("Information")+'</th></tr>\
</thead>\
<tr>\
<td class="key_td">'+tr("ID")+'</td>\
<td class="value_td">'+img_info.ID+'</td>\
<td></td>\
</tr>'+
insert_rename_tr(
'images-tab',
"Image",
img_info.ID,
img_info.NAME)+
'<tr>\
<td class="key_td">'+tr("Datastore")+'</td>\
<td class="value_td">'+img_info.DATASTORE+'</td>\
<td></td>\
</tr>\
<tr>\
<td class="key_td">'+tr("Type")+'</td>\
<td class="value_td_type">'+OpenNebula.Helper.image_type(img_info.TYPE)+'</td>\
<td><div id="div_edit_chg_type">\
<a id="div_edit_chg_type_link" class="edit_e" href="#"><i class="fa fa-pencil-square-o right"/></a>\
</div>\
</td>\
</tr>\
<tr>\
<td class="key_td">'+tr("Register time")+'</td>\
<td class="value_td">'+pretty_time(img_info.REGTIME)+'</td>\
<td></td>\
</tr>\
<tr>\
<td class="key_td">'+tr("Persistent")+'</td>\
<td class="value_td_persistency">'+(parseInt(img_info.PERSISTENT) ? tr("yes") : tr("no"))+'</td>\
<td><div id="div_edit_persistency">\
<a id="div_edit_persistency_link" class="edit_e" href="#"><i class="fa fa-pencil-square-o right"/></a>\
</div>\
</td>\
</tr>\
<tr>\
<td class="key_td">'+tr("Filesystem type")+'</td>\
<td class="value_td">'+(typeof img_info.FSTYPE === "string" ? img_info.FSTYPE : "--")+'</td>\
<td></td>\
</tr>\
<tr>\
<td class="key_td">'+tr("Size")+'</td>\
<td class="value_td">'+humanize_size_from_mb(img_info.SIZE)+'</td>\
<td></td>\
</tr>\
<tr>\
<td class="key_td">'+tr("State")+'</td>\
<td class="value_td">'+OpenNebula.Helper.resource_state("image",img_info.STATE)+'</td>\
<td></td>\
</tr>\
<tr>\
<td class="key_td">'+tr("Running VMS")+'</td>\
<td class="value_td">'+img_info.RUNNING_VMS+'</td>\
<td></td>\
</tr>\
</table>\
</div>\
<div class="large-6 columns">' +
insert_permissions_table('images-tab',
"Image",
img_info.ID,
img_info.UNAME,
img_info.GNAME,
img_info.UID,
img_info.GID) +
'</div>\
</div>\
<div class="row">\
<div class="large-9 columns">'+
insert_extended_template_table(img_info.TEMPLATE,
"Image",
img_info.ID,
"Attributes") +
'</div>\
</div>'
}
$("#div_edit_chg_type_link").die();
$("#chg_type_select").die();
$("#div_edit_persistency").die();
$("#persistency_select").die();
// Listener for edit link for type change
$("#div_edit_chg_type_link").live("click", function() {
$(".value_td_type").html(
'<select id="chg_type_select">\
<option value="OS">OS</option>\
<option value="CDROM">CDROM</option>\
<option value="DATABLOCK">DATABLOCK</option>\
</select>');
$('#chg_type_select').val(OpenNebula.Helper.image_type(img_info.TYPE));
});
$("#chg_type_select").live("change", function() {
var new_value = $(this).val();
Sunstone.runAction("Image.chtype", img_info.ID, new_value);
});
// Listener for edit link for persistency change
$("#div_edit_persistency").live("click", function() {
$(".value_td_persistency").html(
'<select id="persistency_select">\
<option value="yes">'+tr("yes")+'</option>\
<option value="no">'+tr("no")+'</option>\
</select>');
$('#persistency_select').val(parseInt(img_info.PERSISTENT) ? "yes" : "no");
});
$("#persistency_select").live("change", function() {
var new_value = $(this).val();
if (new_value=="yes")
Sunstone.runAction("Image.persistent",[img_info.ID]);
else
Sunstone.runAction("Image.nonpersistent",[img_info.ID]);
});
var vms_info_tab = {
title: tr("VMs"),
icon: "fa-cloud",
content : '<div id="datatable_image_vms_info_div" class="row">\
<div class="large-12 columns">\
<table id="datatable_image_vms" class="datatable twelve">\
<thead>\
<tr>\
<th class="check"><input type="checkbox" class="check_all" value=""></input></th>\
<th>'+tr("ID")+'</th>\
<th>'+tr("Owner")+'</th>\
<th>'+tr("Group")+'</th>\
<th>'+tr("Name")+'</th>\
<th>'+tr("Status")+'</th>\
<th>'+tr("Used CPU")+'</th>\
<th>'+tr("Used Memory")+'</th>\
<th>'+tr("Host")+'</th>\
<th>'+tr("IPs")+'</th>\
<th>'+tr("Start Time")+'</th>\
<th>'+tr("VNC")+'</th>\
</tr>\
</thead>\
<tbody id="tbody_image_vmachines">\
</tbody>\
</table>\
</div>\
</div>'
}
Sunstone.updateInfoPanelTab("image_info_panel","image_info_tab",info_tab);
Sunstone.updateInfoPanelTab("image_info_panel","image_vms_tab",vms_info_tab);
Sunstone.popUpInfoPanel("image_info_panel", "images-tab");
dataTable_image_vMachines = $("#datatable_image_vms", $("#image_info_panel")).dataTable({
"bSortClasses" : false,
"bDeferRender": true,
"aoColumnDefs": [
{ "bSortable": false, "aTargets": ["check",6,7,11] },
{ "sWidth": "35px", "aTargets": [0] },
{ "bVisible": false, "aTargets": [0]},
{ "bVisible": true, "aTargets": Config.tabTableColumns("vms-tab")},
{ "bVisible": false, "aTargets": ['_all']},
]
});
infoListener(dataTable_image_vMachines,'VM.show','vms-tab');
if (img_info.VMS) {
var vm_ids = img_info.VMS.ID;
var vm_ids_map = {};
if (!(vm_ids instanceof Array)) {
vm_ids = [vm_ids];
}
$.each(vm_ids,function(){
vm_ids_map[this] = true;
});
OpenNebula.VM.list({
timeout: true,
success: function (request, vm_list){
var vm_list_array = [];
$.each(vm_list,function(){
if (vm_ids_map[this.VM.ID]){
//Grab table data from the vm_list
vm_list_array.push(vMachineElementArray(this));
}
});
updateView(vm_list_array, dataTable_image_vMachines);
},
error: onError
});
}
setPermissionsTable(img_info,'');
}
function enable_all_datastores()
{
$('select#disk_type').children('option').each(function() {
$(this).removeAttr('disabled');
});
}
// Prepare the image creation dialog
function setupCreateImageDialog(dialog) {
if ($('#create_image_dialog').length == 0) {
dialogs_context.append('<div id="create_image_dialog"></div>');
}
$create_image_dialog = $('#create_image_dialog');
var dialog = $create_image_dialog;
dialog.html(create_image_tmpl);
dialog.addClass("reveal-modal medium").attr("data-reveal", "");
initialize_create_image_dialog(dialog);
}
function initialize_create_image_dialog(dialog) {
setupTips(dialog);
$('.advanced',dialog).hide();
$('#advanced_image_create',dialog).click(function(){
$('.advanced',dialog).toggle();
return false;
});
$('select#img_type',dialog).change(function(){
var value = $(this).val();
var context = dialog;
switch (value){
case "DATABLOCK":
$('#datablock_img',context).removeAttr("disabled");
break;
default:
$('#datablock_img',context).attr('disabled','disabled');
$('#path_image',context).click();
}
});
$('#img_path,#img_fstype,#img_size,#file-uploader',dialog).closest('.row').hide();
$("input[name='src_path']", dialog).change(function(){
var context = dialog;
var value = $(this).val();
switch (value){
case "path":
$('#img_fstype,#img_size,#file-uploader',context).closest('.row').hide();
$('#img_path',context).closest('.row').show();
break;
case "datablock":
$('#img_path,#file-uploader',context).closest('.row').hide();
$('#img_fstype,#img_size',context).closest('.row').show();
break;
case "upload":
$('#img_path,#img_fstype,#img_size',context).closest('.row').hide();
$('#file-uploader',context).closest('.row').show();
break;
};
});
$('#path_image',dialog).click();
$('#add_custom_var_image_button', dialog).click(
function(){
var name = $('#custom_var_image_name',dialog).val();
var value = $('#custom_var_image_value',dialog).val();
if (!name.length || !value.length) {
notifyError(tr("Custom attribute name and value must be filled in"));
return false;
}
option= '<option value=\''+value+'\' name=\''+name+'\'>'+
name+'='+value+
'</option>';
$('select#custom_var_image_box',dialog).append(option);
return false;
}
);
$('#remove_custom_var_image_button', dialog).click(
function(){
$('select#custom_var_image_box :selected',dialog).remove();
return false;
}
);
$('#upload-progress',dialog).css({
border: "1px solid #AAAAAA",
position: "relative",
width: "258px",
height: "15px",
display: "inline-block"
});
$('#upload-progress div',dialog).css("border","1px solid #AAAAAA");
var img_obj;
// Upload is handled by FileUploader vendor plugin
var uploader = new qq.FileUploaderBasic({
button: $('#file-uploader',dialog)[0],
action: 'upload',
multiple: false,
params: {},
sizeLimit: 0,
showMessage: function(message){
//notifyMessage(message);
},
onSubmit: function(id, fileName){
uploader.setParams({
csrftoken: csrftoken,
img : JSON.stringify(img_obj),
file: fileName
});
$('#upload_progress_bars').append('<div id="'+id+'progressBar" class="row" style="margin-bottom:10px">\
<div class="large-2 columns dataTables_info">\
'+tr("Uploading...")+'\
</div>\
<div class="large-10 columns">\
<div id="upload_progress_container" class="progress nine radius" style="height:25px !important">\
<span class="meter" style="width:0%"></span>\
</div>\
<div class="progress-text" style="margin-left:15px">'+id+' '+fileName+'</div>\
</div>\
</div>');
},
onProgress: function(id, fileName, loaded, total){
$('span.meter', $('#'+id+'progressBar')).css('width', Math.floor(loaded*100/total)+'%')
},
onComplete: function(id, fileName, responseJSON){
if (uploader._handler._xhrs[id] &&
uploader._handler._xhrs[id].status == 500) {
onError({}, JSON.parse(uploader._handler._xhrs[id].response) )
$('#'+id+'progressBar').remove();
} else {
notifyMessage("Image uploaded correctly");
$('#'+id+'progressBar').remove();
Sunstone.runAction("Image.list");
}
return false;
},
onCancel: function(id, fileName){
}
});
var file_input = false;
uploader._button._options.onChange = function(input) {
file_input = input; return false;
};
$('#create_image_submit',dialog).click(function(){
$create_image_dialog = dialog;
var exit = false;
var upload = false;
$('.img_man',this).each(function(){
if (!$('input',this).val().length){
notifyError(tr("There are mandatory parameters missing"));
exit = true;
return false;
}
});
if (exit) { return false; }
var ds_id = $('#img_datastore .resource_list_select',dialog).val();
if (!ds_id){
notifyError(tr("Please select a datastore for this image"));
return false;
};
var img_json = {};
var name = $('#img_name',dialog).val();
img_json["NAME"] = name;
var desc = $('#img_desc',dialog).val();
if (desc.length){
img_json["DESCRIPTION"] = desc;
}
var type = $('#img_type',dialog).val();
img_json["TYPE"]= type;
img_json["PERSISTENT"] = $('#img_persistent:checked',dialog).length ? "YES" : "NO";
var dev_prefix = $('#img_dev_prefix',dialog).val();
if (dev_prefix.length){
img_json["DEV_PREFIX"] = dev_prefix;
}
var driver = $('#img_driver',dialog).val();
if (driver.length)
img_json["DRIVER"] = driver;
var target = $('#img_target',dialog).val();
if (target)
img_json["TARGET"] = target;
switch ($('#src_path_select input:checked',dialog).val()){
case "path":
path = $('#img_path',dialog).val();
if (path) img_json["PATH"] = path;
break;
case "datablock":
size = $('#img_size',dialog).val();
fstype = $('#img_fstype',dialog).val();
if (size) img_json["SIZE"] = size;
if (fstype) img_json["FSTYPE"] = fstype;
break;
case "upload":
upload=true;
break;
}
//Time to add custom attributes
$('#custom_var_image_box option',dialog).each(function(){
var attr_name = $(this).attr('name');
var attr_value = $(this).val();
img_json[attr_name] = attr_value;
});
img_obj = { "image" : img_json,
"ds_id" : ds_id};
//we this is an image upload we trigger FileUploader
//to start the upload
if (upload){
dialog.foundation('reveal', 'close');
dialog.empty();
setupCreateImageDialog();
uploader._onInputChange(file_input);
} else {
Sunstone.runAction("Image.create", img_obj);
};
return false;
});
$('#create_image_submit_manual',dialog).click(function(){
var template=$('#template',dialog).val();
var ds_id = $('#img_datastore_raw .resource_list_select',dialog).val();
if (!ds_id){
notifyError(tr("Please select a datastore for this image"));
return false;
};
var img_obj = {
"image" : {
"image_raw" : template
},
"ds_id" : ds_id
};
Sunstone.runAction("Image.create",img_obj);
return false;
});
$('#wizard_image_reset_button', dialog).click(function(){
$('#create_image_dialog').html("");
setupCreateImageDialog();
popUpCreateImageDialog();
});
$('#advanced_image_reset_button', dialog).click(function(){
$('#create_image_dialog').html("");
setupCreateImageDialog();
popUpCreateImageDialog();
$("a[href='#img_manual']").click();
});
}
function initialize_datastore_info_create_image_dialog(dialog) {
var ds_id = $('#img_datastore .resource_list_select',dialog).val();
var ds_id_raw = $('#img_datastore_raw .resource_list_select',dialog).val();
// Filter out DS with type system (1) or file (2)
var filter_att = ["TYPE", "TYPE"];
var filter_val = ["1", "2"];
insertSelectOptions('div#img_datastore', dialog, "Datastore",
ds_id, false, null, filter_att, filter_val);
insertSelectOptions('div#img_datastore_raw', dialog, "Datastore",
ds_id_raw, false, null, filter_att, filter_val);
$('#file-uploader input',dialog).removeAttr("style");
$('#file-uploader input',dialog).attr('style','margin:0;width:256px!important');
}
function popUpCreateImageDialog(){
$create_image_dialog = $('#create_image_dialog');
initialize_datastore_info_create_image_dialog($create_image_dialog);
$create_image_dialog.foundation().foundation('reveal', 'open');
$("input#img_name",$create_image_dialog).focus();
}
function is_persistent_image(id){
var data = getElementData(id,"#image",dataTable_images)[8];
return $(data).is(':checked');
};
function setupImageCloneDialog(){
//Append to DOM
dialogs_context.append('<div id="image_clone_dialog"></div>');
var dialog = $('#image_clone_dialog',dialogs_context);
//Put HTML in place
var html = '<div class="row">\
<h3 id="create_vnet_header" class="subheader">'+tr("Clone Image")+'</h3>\
</div>\
<form>\
<div class="row">\
<div class="large-12 columns">\
<div class="clone_one"></div>\
<div class="clone_several">'+tr("Several image are selected, please choose prefix to name the new copies")+':</div>\
<br>\
</div>\
</div>\
<div class="row">\
<div class="columns large-12">\
<label class="clone_one">'+tr("Name")+':</label>\
<label class="clone_several">'+tr("Prefix")+':</label>\
<input type="text" name="name"></input>\
</div>\
</div>\
<div class="form_buttons row">\
<button class="button radius right" id="image_clone_button" value="Image.clone">'+tr("Clone")+'</button>\
</div>\
<a class="close-reveal-modal">&#215;</a>\
</form>\
';
dialog.html(html);
dialog.addClass("reveal-modal").attr("data-reveal", "");
$('form',dialog).submit(function(){
var name = $('input', this).val();
var sel_elems = imageElements();
if (!name || !sel_elems.length)
notifyError('A name or prefix is needed!');
if (sel_elems.length > 1){
for (var i=0; i< sel_elems.length; i++)
//If we are cloning several images we
//use the name as prefix
Sunstone.runAction('Image.clone',
sel_elems[i],
name+getImageName(sel_elems[i]));
} else {
Sunstone.runAction('Image.clone',sel_elems[0],name)
};
dialog.foundation('reveal', 'close')
setTimeout(function(){
Sunstone.runAction('Image.refresh');
}, 1500);
return false;
});
}
function popUpImageCloneDialog(){
var dialog = $('#image_clone_dialog');
var sel_elems = imageElements();
//show different text depending on how many elements are selected
if (sel_elems.length > 1){
$('.clone_one',dialog).hide();
$('.clone_several',dialog).show();
$('input',dialog).val('Copy of ');
}
else {
$('.clone_one',dialog).show();
$('.clone_several',dialog).hide();
$('input',dialog).val('Copy of '+getImageName(sel_elems[0]));
};
$(dialog).foundation().foundation('reveal', 'open');
$("input[name='name']",dialog).focus();
}
//The DOM is ready at this point
$(document).ready(function(){
var tab_name = 'images-tab';
if (Config.isTabEnabled(tab_name)) {
dataTable_images = $("#datatable_images",main_tabs_context).dataTable({
"bSortClasses" : false,
"bDeferRender": true,
"aoColumnDefs": [
{ "bSortable": false, "aTargets": ["check"] },
{ "sWidth": "35px", "aTargets": [0] },
{ "bVisible": true, "aTargets": Config.tabTableColumns(tab_name)},
{ "bVisible": false, "aTargets": ['_all']}
]
});
$('#image_search').keyup(function(){
dataTable_images.fnFilter( $(this).val() );
})
dataTable_images.on('draw', function(){
recountCheckboxes(dataTable_images);
})
Sunstone.runAction("Image.list");
setupCreateImageDialog();
setupImageCloneDialog();
initCheckAllBoxes(dataTable_images);
tableCheckboxesListener(dataTable_images);
infoListener(dataTable_images,'Image.show');
$('div#images_tab div.legend_div').hide();
dataTable_images.fnSort( [ [1,config['user_config']['table_order']] ] );
}
});