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

Feature #3748: Refactor image create to be a form-panel

Browse Source
This commit is contained in:
Carlos Martín 2015-06-02 18:46:44 +02:00
parent 6fce9716d1
commit fa87351868
8 changed files with 374 additions and 378 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/sunstone/public/app/tabs/images-tab.js
View File

@ -8,7 +8,6 @@ define(function(require) {
var DATATABLE_ID = "dataTableImages";
var _dialogs = [
require('./images-tab/dialogs/create'),
require('./images-tab/dialogs/clone')
];
@ -17,6 +16,10 @@ define(function(require) {
require('./images-tab/panels/vms')
];
var _formPanels = [
require('./images-tab/form-panels/create')
];
var Tab = {
tabId: TAB_ID,
title: Locale.tr("Images"),
@ -31,6 +34,7 @@ define(function(require) {
actions: Actions,
dataTable: new Table(DATATABLE_ID, {actions: true, info: true}),
panels: _panels,
formPanels: _formPanels,
dialogs: _dialogs
};

8
src/sunstone/public/app/tabs/images-tab/actions.js
View File

@ -7,7 +7,7 @@ define(function(require) {
var RESOURCE = "Image";
var XML_ROOT = "IMAGE";
var TAB_ID = require('./tabId');
var CREATE_DIALOG_ID = require('./dialogs/create/dialogId');
var CREATE_DIALOG_ID = require('./form-panels/create/formPanelId');
var CLONE_DIALOG_ID = require('./dialogs/clone/dialogId');
var _actions = {
@ -15,8 +15,8 @@ define(function(require) {
type: "create",
call: OpenNebulaImage.create,
callback: function(request, response) {
Sunstone.getDialog(CREATE_DIALOG_ID).hide();
Sunstone.getDialog(CREATE_DIALOG_ID).reset();
Sunstone.resetFormPanel(TAB_ID, CREATE_DIALOG_ID);
Sunstone.hideFormPanel(TAB_ID);
Sunstone.getDataTable(TAB_ID).addElement(request, response);
Notifier.notifyCustom(Locale.tr("Image created"), " ID: " + response[XML_ROOT].ID, false);
},
@ -26,7 +26,7 @@ define(function(require) {
"Image.create_dialog" : {
type: "custom",
call: function() {
Sunstone.getDialog(CREATE_DIALOG_ID).show();
Sunstone.showFormPanel(TAB_ID, CREATE_DIALOG_ID, "create");
}
},

3
src/sunstone/public/app/tabs/images-tab/dialogs/create/dialogId.js
View File

@ -1,3 +0,0 @@
define(function(require){
return 'createImageDialog';
})

239
src/sunstone/public/app/tabs/images-tab/dialogs/create/html.hbs
View File

@ -1,239 +0,0 @@
<div id="{{dialogId}}" class="reveal-modal medium" role="dialog" data-reveal >
<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="{{dialogId}}Form" 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">
{{#if persistentActionEnabled}}
<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>
{{/if}}
</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">
<label id="file-uploader-label" for="file-uploader-input"></label>
<input id="file-uploader-input" type="file"/>
</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>
{{#advancedSection (tr "Advanced Options") }}
<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" type="button" value="add_custom_image_var">{{tr "Add"}}</button>
<button class="add_remove_button secondary button small radius" id="remove_custom_var_image_button" type="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></select>
</div>
</div>
</div>
</div>
</fieldset>
</div>
{{/advancedSection}}
<div class="form_buttons">
<button class="button success radius right" id="create_image_submit" type="submit" 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>

279
src/sunstone/public/app/tabs/images-tab/dialogs/create.js → src/sunstone/public/app/tabs/images-tab/form-panels/create.js
View File

@ -3,46 +3,68 @@ define(function(require) {
DEPENDENCIES
*/
var BaseDialog = require('utils/dialogs/dialog');
var BaseFormPanel = require('utils/form-panels/form-panel');
var Resumable = require('resumable');
var TemplateHTML = require('hbs!./create/html');
var Sunstone = require('sunstone');
var OpenNebulaError = require('opennebula/error');
var Notifier = require('utils/notifier');
var Locale = require('utils/locale');
var Tips = require('utils/tips');
var ResourceSelect = require('utils/resource-select')
var ResourceSelect = require('utils/resource-select');
var TemplateWizardHTML = require('hbs!./create/wizard');
var TemplateAdvancedHTML = require('hbs!./create/advanced');
/*
CONSTANTS
*/
var DIALOG_ID = require('./create/dialogId');
var FORM_PANEL_ID = require('./create/formPanelId');
var TAB_ID = require('../tabId');
/*
CONSTRUCTOR
*/
function Dialog() {
this.dialogId = DIALOG_ID;
BaseDialog.call(this);
};
function FormPanel() {
this.formPanelId = FORM_PANEL_ID;
this.tabId = TAB_ID;
this.actions = {
'create': {
'title': Locale.tr("Create Image"),
'buttonText': Locale.tr("Create"),
'resetButton': true
}
};
BaseFormPanel.call(this);
}
FormPanel.FORM_PANEL_ID = FORM_PANEL_ID;
FormPanel.prototype = Object.create(BaseFormPanel.prototype);
FormPanel.prototype.constructor = FormPanel;
FormPanel.prototype.htmlWizard = _htmlWizard;
FormPanel.prototype.htmlAdvanced = _htmlAdvanced;
FormPanel.prototype.submitWizard = _submitWizard;
FormPanel.prototype.submitAdvanced = _submitAdvanced;
FormPanel.prototype.onShow = _onShow;
FormPanel.prototype.setup = _setup;
return FormPanel;
Dialog.DIALOG_ID = DIALOG_ID;
Dialog.prototype = Object.create(BaseDialog.prototype);
Dialog.prototype.constructor = Dialog;
Dialog.prototype.html = _html;
Dialog.prototype.onShow = _onShow;
Dialog.prototype.setup = _setup;
return Dialog;
/*
FUNCTION DEFINITIONS
*/
function _html() {
return TemplateHTML({dialogId: this.dialogId});
function _htmlWizard() {
return TemplateWizardHTML({
'formPanelId': this.formPanelId
});
}
function _htmlAdvanced() {
return TemplateAdvancedHTML({formPanelId: this.formPanelId});
}
function _onShow(dialog) {
@ -122,12 +144,10 @@ define(function(require) {
return false;
});
var img_obj;
if (_getInternetExplorerVersion() > -1) {
$("#upload_image").attr("disabled", "disabled");
} else {
var uploader = new Resumable({
that.uploader = new Resumable({
target: 'upload_chunk',
chunkSize: 10 * 1024 * 1024,
maxFiles: 1,
@ -137,12 +157,12 @@ define(function(require) {
}
});
uploader.assignBrowse($('#file-uploader-input', dialog));
that.uploader.assignBrowse($('#file-uploader-input', dialog));
var fileName = '';
var file_input = false;
uploader.on('fileAdded', function(file) {
that.uploader.on('fileAdded', function(file) {
fileName = file.fileName;
file_input = fileName;
@ -150,7 +170,7 @@ define(function(require) {
$("#file-uploader-label", dialog).html(file.fileName);
});
uploader.on('uploadStart', function() {
that.uploader.on('uploadStart', function() {
$('#upload_progress_bars').append('<div id="' + fileName + 'progressBar" class="row" style="margin-bottom:10px">\
<div id="' + fileName + '-info" class="large-2 columns dataTables_info">\
' + Locale.tr("Uploading...") + '\
@ -164,138 +184,135 @@ define(function(require) {
</div>');
});
uploader.on('progress', function() {
$('span.meter', $('div[id="' + fileName + 'progressBar"]')).css('width', uploader.progress() * 100.0 + '%')
that.uploader.on('progress', function() {
$('span.meter', $('div[id="' + fileName + 'progressBar"]')).css('width', that.uploader.progress() * 100.0 + '%')
});
}
uploader.on('fileSuccess', function(file) {
$('div[id="' + fileName + '-info"]').text(Locale.tr("Registering in OpenNebula"));
return false;
}
function _submitWizard(dialog) {
var that = this;
var upload = false;
var ds_id = $('#img_datastore .resource_list_select', dialog).val();
if (!ds_id) {
Notifier.notifyError(Locale.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;
});
var img_obj = {
"image" : img_json,
"ds_id" : ds_id
};
//this is an image upload we trigger FileUploader
//to start the upload
if (upload) {
Sunstone.resetFormPanel(that.tabId, that.formPanelId);
Sunstone.hideFormPanel(that.tabId);
that.uploader.on('fileSuccess', function(file) {
$('div[id="' + file.fileName + '-info"]').text(Locale.tr("Registering in OpenNebula"));
$.ajax({
url: 'upload',
type: "POST",
data: {
csrftoken: csrftoken,
img : JSON.stringify(img_obj),
file: fileName,
file: file.fileName,
tempfile: file.uniqueIdentifier
},
success: function() {
Notifier.notifyMessage("Image uploaded correctly");
$('div[id="' + fileName + 'progressBar"]').remove();
$('div[id="' + file.fileName + 'progressBar"]').remove();
Sunstone.runAction("Image.refresh");
},
error: function(response) {
Notifier.onError({}, OpenNebulaError(response));
$('div[id="' + fileName + 'progressBar"]').remove();
$('div[id="' + file.fileName + 'progressBar"]').remove();
}
});
});
that.uploader.upload();
} else {
Sunstone.runAction("Image.create", img_obj);
}
$('#' + DIALOG_ID + 'Form', dialog).submit(function() {
var exit = false;
var upload = false;
$('.img_man', this).each(function() {
if (!$('input', this).val().length) {
Notifier.notifyError(Locale.tr("There are mandatory parameters missing"));
exit = true;
return false;
}
});
if (exit) { return false; }
return false;
}
var ds_id = $('#img_datastore .resource_list_select', dialog).val();
if (!ds_id) {
Notifier.notifyError(Locale.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) {
that.hide();
that.reset();
uploader.upload();
} else {
Sunstone.runAction("Image.create", img_obj);
};
function _submitAdvanced(dialog) {
var template = $('#template', dialog).val();
var ds_id = $('#img_datastore_raw .resource_list_select', dialog).val();
if (!ds_id) {
Notifier.notifyError(Locale.tr("Please select a datastore for this image"));
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();
var img_obj = {
"image" : {
"image_raw" : template
},
"ds_id" : ds_id
};
if (!ds_id) {
Notifier.notifyError(Locale.tr("Please select a datastore for this image"));
return false;
};
Sunstone.runAction("Image.create", img_obj);
var img_obj = {
"image" : {
"image_raw" : template
},
"ds_id" : ds_id
};
Sunstone.runAction("Image.create", img_obj);
return false;
});
return false;
}

18
src/sunstone/public/app/tabs/images-tab/form-panels/create/advanced.hbs Normal file
View File

@ -0,0 +1,18 @@
<form data-abide="ajax" id="{{formPanelId}}Advanced" class="custom creation">
<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="large-12 columns">
<p>{{tr "Write the Image template here"}}</p>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<textarea id="template" rows="15" required></textarea>
</div>
</div>
</form>

3
src/sunstone/public/app/tabs/images-tab/form-panels/create/formPanelId.js Normal file
View File

@ -0,0 +1,3 @@
define(function(require){
return 'createImageForm';
})

196
src/sunstone/public/app/tabs/images-tab/form-panels/create/wizard.hbs Normal file
View File

@ -0,0 +1,196 @@
<form data-abide="ajax" id="{{formPanelId}}Wizard" class="custom creation">
<div class="row">
<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">
{{#if persistentActionEnabled}}
<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>
{{/if}}
</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">
<label id="file-uploader-label" for="file-uploader-input"></label>
<input id="file-uploader-input" type="file"/>
</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>
{{#advancedSection (tr "Advanced Options") }}
<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" type="button" value="add_custom_image_var">{{tr "Add"}}</button>
<button class="add_remove_button secondary button small radius" id="remove_custom_var_image_button" type="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></select>
</div>
</div>
</div>
</div>
</fieldset>
</div>
{{/advancedSection}}
</form>