1257 lines
44 KiB
JavaScript
1257 lines
44 KiB
JavaScript
/* -------------------------------------------------------------------------- */
|
||
/* 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">×</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> '+tr("Images"),
|
||
info_header: '<i class="fa fa-fw fa-upload"></i> '+tr("Image"),
|
||
subheader: '<span class="total_images"/> <small>'+tr("TOTAL")+'</small> \
|
||
<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">×</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']] ] );
|
||
}
|
||
});
|