mirror of
https://github.com/OpenNebula/one.git
synced 2025-03-25 02:50:08 +03:00
Feature #3748: File create wizard
This commit is contained in:
Carlos Martín
parent
55ebb65967
commit
cd792291a4
@ -7,14 +7,16 @@ define(function(require) {
|
||||
var TAB_ID = require('./files-tab/tabId');
|
||||
var DATATABLE_ID = "dataTableFiles";
|
||||
|
||||
var _dialogs = [
|
||||
//require('./files-tab/dialogs/create')
|
||||
];
|
||||
var _dialogs = [];
|
||||
|
||||
var _panels = [
|
||||
require('./files-tab/panels/info')
|
||||
];
|
||||
|
||||
var _formPanels = [
|
||||
require('./files-tab/form-panels/create')
|
||||
];
|
||||
|
||||
var Tab = {
|
||||
tabId: TAB_ID,
|
||||
title: Locale.tr("Files & Kernels"),
|
||||
@ -31,6 +33,7 @@ define(function(require) {
|
||||
actions: Actions,
|
||||
dataTable: new Table(DATATABLE_ID, {actions: true, info: true}),
|
||||
panels: _panels,
|
||||
formPanels: _formPanels,
|
||||
dialogs: _dialogs
|
||||
};
|
||||
|
||||
|
||||
@ -7,25 +7,28 @@ define(function(require) {
|
||||
var RESOURCE = "File";
|
||||
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 _actions = {
|
||||
"File.create" : {
|
||||
type: "create",
|
||||
call: OpenNebulaResource.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("File created"), " ID: " + response[XML_ROOT].ID, false);
|
||||
},
|
||||
error: Notifier.onError,
|
||||
error: function(request, response) {
|
||||
Sunstone.hideFormPanelLoading(TAB_ID);
|
||||
Notifier.onError(request, response);
|
||||
},
|
||||
},
|
||||
|
||||
"File.create_dialog" : {
|
||||
type: "custom",
|
||||
call: function() {
|
||||
Sunstone.getDialog(CREATE_DIALOG_ID).show();
|
||||
Sunstone.showFormPanel(TAB_ID, CREATE_DIALOG_ID, "create");
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
273
src/sunstone/public/app/tabs/files-tab/form-panels/create.js
Normal file
273
src/sunstone/public/app/tabs/files-tab/form-panels/create.js
Normal file
@ -0,0 +1,273 @@
|
||||
define(function(require) {
|
||||
/*
|
||||
DEPENDENCIES
|
||||
*/
|
||||
|
||||
var BaseFormPanel = require('utils/form-panels/form-panel');
|
||||
var Resumable = require('resumable');
|
||||
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 TemplateWizardHTML = require('hbs!./create/wizard');
|
||||
var TemplateAdvancedHTML = require('hbs!./create/advanced');
|
||||
|
||||
/*
|
||||
CONSTANTS
|
||||
*/
|
||||
|
||||
var FORM_PANEL_ID = require('./create/formPanelId');
|
||||
var TAB_ID = require('../tabId');
|
||||
|
||||
/*
|
||||
CONSTRUCTOR
|
||||
*/
|
||||
|
||||
function FormPanel() {
|
||||
this.formPanelId = FORM_PANEL_ID;
|
||||
this.tabId = TAB_ID;
|
||||
this.actions = {
|
||||
'create': {
|
||||
'title': Locale.tr("Create File"),
|
||||
'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;
|
||||
|
||||
|
||||
/*
|
||||
FUNCTION DEFINITIONS
|
||||
*/
|
||||
|
||||
function _htmlWizard() {
|
||||
return TemplateWizardHTML({
|
||||
'formPanelId': this.formPanelId
|
||||
});
|
||||
}
|
||||
|
||||
function _htmlAdvanced() {
|
||||
return TemplateAdvancedHTML({
|
||||
'formPanelId': this.formPanelId
|
||||
});
|
||||
}
|
||||
|
||||
function _onShow(context) {
|
||||
$("#file_name", context).focus();
|
||||
|
||||
var ds_id = $('#file_datastore .resource_list_select', context).val();
|
||||
var ds_id_raw = $('#file_datastore_raw .resource_list_select', context).val();
|
||||
|
||||
// Filter out DS with type image (0) or system (1)
|
||||
var filter_att = ["TYPE", "TYPE"];
|
||||
var filter_val = ["0", "1"];
|
||||
|
||||
ResourceSelect.insert('div#file_datastore', context, "Datastore",
|
||||
ds_id, false, null, filter_att, filter_val);
|
||||
|
||||
ResourceSelect.insert('div#file_datastore_raw', context, "Datastore",
|
||||
ds_id_raw, false, null, filter_att, filter_val);
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function _setup(context) {
|
||||
var that = this;
|
||||
Tips.setup(context);
|
||||
|
||||
$('#file_path,#files_file-uploader', context).closest('.row').hide();
|
||||
|
||||
$("input[name='src_path']", context).change(function() {
|
||||
var value = $(this).val();
|
||||
switch (value){
|
||||
case "path":
|
||||
$('#files_file-uploader', context).closest('.row').hide();
|
||||
$('#file_path', context).closest('.row').show();
|
||||
|
||||
$('#file_path', context).attr('required', '');
|
||||
break;
|
||||
case "upload":
|
||||
$('#file_path', context).closest('.row').hide();
|
||||
$('#files_file-uploader', context).closest('.row').show();
|
||||
|
||||
$('#file_path', context).removeAttr('required');
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
$('#path_file', context).click();
|
||||
|
||||
if (_getInternetExplorerVersion() > -1) {
|
||||
$("#upload_file").attr("disabled", "disabled");
|
||||
} else {
|
||||
that.uploader = new Resumable({
|
||||
target: 'upload_chunk',
|
||||
chunkSize: 10 * 1024 * 1024,
|
||||
maxFiles: 1,
|
||||
testChunks: false,
|
||||
query: {
|
||||
csrftoken: ""//TODO csrftoken
|
||||
}
|
||||
});
|
||||
|
||||
that.uploader.assignBrowse($('#files_file-uploader-input', context));
|
||||
|
||||
var fileName = '';
|
||||
var file_input = false;
|
||||
|
||||
that.uploader.on('fileAdded', function(file) {
|
||||
fileName = file.fileName;
|
||||
file_input = fileName;
|
||||
|
||||
$('#files_file-uploader-input', context).hide()
|
||||
$("#files_file-uploader-label", context).html(file.fileName);
|
||||
});
|
||||
|
||||
that.uploader.on('uploadStart', function() {
|
||||
$('#files_upload_progress_bars').append('<div id="files-' + fileName + 'progressBar" class="row" style="margin-bottom:10px">\
|
||||
<div id="files-' + fileName + '-info" class="large-2 columns dataTables_info">\
|
||||
' + Locale.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">' + fileName + '</div>\
|
||||
</div>\
|
||||
</div>');
|
||||
});
|
||||
|
||||
that.uploader.on('progress', function() {
|
||||
$('span.meter', $('div[id="files-' + fileName + 'progressBar"]')).css('width', that.uploader.progress() * 100.0 + '%')
|
||||
});
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function _submitWizard(context) {
|
||||
var that = this;
|
||||
var upload = false;
|
||||
|
||||
var ds_id = $('#file_datastore .resource_list_select', context).val();
|
||||
if (!ds_id) {
|
||||
Notifier.notifyError(Locale.tr("Please select a datastore for this file"));
|
||||
return false;
|
||||
}
|
||||
|
||||
var img_json = {};
|
||||
|
||||
var name = $('#file_name', context).val();
|
||||
img_json["NAME"] = name;
|
||||
|
||||
var desc = $('#file_desc', context).val();
|
||||
if (desc.length) {
|
||||
img_json["DESCRIPTION"] = desc;
|
||||
}
|
||||
|
||||
var type = $('#file_type', context).val();
|
||||
img_json["TYPE"] = type;
|
||||
|
||||
switch ($('#src_path_select input:checked', context).val()){
|
||||
case "path":
|
||||
path = $('#file_path', context).val();
|
||||
if (path) img_json["PATH"] = path;
|
||||
break;
|
||||
case "upload":
|
||||
upload = true;
|
||||
break;
|
||||
}
|
||||
|
||||
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="files-' + file.fileName + '-info"]').text(Locale.tr("Registering in OpenNebula"));
|
||||
$.ajax({
|
||||
url: 'upload',
|
||||
type: "POST",
|
||||
data: {
|
||||
csrftoken: csrftoken,
|
||||
img : JSON.stringify(img_obj),
|
||||
file: file.fileName,
|
||||
tempfile: file.uniqueIdentifier
|
||||
},
|
||||
success: function() {
|
||||
Notifier.notifyMessage("Image uploaded correctly");
|
||||
$('div[id="files-' + file.fileName + 'progressBar"]').remove();
|
||||
Sunstone.runAction("File.refresh");
|
||||
},
|
||||
error: function(response) {
|
||||
Notifier.onError({}, OpenNebulaError(response));
|
||||
$('div[id="files-' + file.fileName + 'progressBar"]').remove();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
that.uploader.upload();
|
||||
} else {
|
||||
Sunstone.runAction("File.create", img_obj);
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function _submitAdvanced(context) {
|
||||
var template = $('#template', context).val();
|
||||
var ds_id = $('#file_datastore_raw .resource_list_select', context).val();
|
||||
|
||||
if (!ds_id) {
|
||||
Notifier.notifyError(Locale.tr("Please select a datastore for this file"));
|
||||
return false;
|
||||
}
|
||||
|
||||
var img_obj = {
|
||||
"image" : {
|
||||
"image_raw" : template
|
||||
},
|
||||
"ds_id" : ds_id
|
||||
};
|
||||
|
||||
Sunstone.runAction("File.create", img_obj);
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function _getInternetExplorerVersion() {
|
||||
// Returns the version of Internet Explorer or a -1
|
||||
// (indicating the use of another browser).
|
||||
var rv = -1; // Return value assumes failure.
|
||||
if (navigator.appName == 'Microsoft Internet Explorer') {
|
||||
var ua = navigator.userAgent;
|
||||
var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
|
||||
if (re.exec(ua) != null)
|
||||
rv = parseFloat(RegExp.$1);
|
||||
}
|
||||
return rv;
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,18 @@
|
||||
<form data-abide="ajax" id="{{formPanelId}}Advanced" class="custom creation">
|
||||
<div class="row">
|
||||
<div class="columns large-12">
|
||||
<label for="file_datastores_raw">{{tr "Datastore"}}:</label>
|
||||
<div id="file_datastore_raw" name="file_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>
|
||||
@ -0,0 +1,3 @@
|
||||
define(function(require){
|
||||
return 'createFileForm';
|
||||
});
|
||||
@ -0,0 +1,82 @@
|
||||
<form data-abide="ajax" id="{{formPanelId}}Wizard" class="custom creation">
|
||||
<div class="row">
|
||||
<div class="medium-4 columns">
|
||||
<label for="file_name">
|
||||
{{tr "Name"}}
|
||||
<span class="tip">
|
||||
{{tr "Name that the File will get. Every file must have a unique name."}}
|
||||
</span>
|
||||
</label>
|
||||
<input required type="text" name="file_name" id="file_name" />
|
||||
</div>
|
||||
<div class="medium-8 columns">
|
||||
<label for="file_desc">
|
||||
{{tr "Description"}}
|
||||
<span class="tip">
|
||||
{{tr "Human readable description of the file for other users."}}
|
||||
</span>
|
||||
</label>
|
||||
<textarea name="file_desc" id="file_desc" rows="4"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="large-4 columns">
|
||||
<label for="file_type">
|
||||
{{tr "Type"}}
|
||||
<span class="tip">
|
||||
{{tr "Type of the file."}}
|
||||
<br/>
|
||||
<br/>
|
||||
{{tr " KERNEL & RAMDISK files can be used in the OS Booting section of the Template wizard."}}
|
||||
<br/>
|
||||
<br/>
|
||||
{{tr " CONTEXT files can be included in the context CD-ROM, from the Context/Files section of the Template wizard."}}
|
||||
</span>
|
||||
</label>
|
||||
<select name="file_type" id="file_type">
|
||||
<option value="CONTEXT">{{tr "Context"}}</option>
|
||||
<option value="KERNEL">{{tr "Kernel"}}</option>
|
||||
<option value="RAMDISK">{{tr "Ramdisk"}}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="large-8 columns">
|
||||
<label for="file_datastore">
|
||||
{{tr "Datastore"}}
|
||||
<span class="tip">{{tr "Select the datastore for this file"}}</span>
|
||||
</label>
|
||||
<div id="file_datastore" name="file_datastore"></div>
|
||||
</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_file" value="path">
|
||||
<label for="path_file">{{tr "Provide a path"}}</label>
|
||||
</input>
|
||||
<input type="radio" name="src_path" id="upload_file" value="upload">
|
||||
<label for="upload_file">{{tr "Upload"}}</label>
|
||||
</input>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<label for="file_path">
|
||||
{{tr "Path"}}
|
||||
<span class="tip">
|
||||
{{tr "Path to the original file that will be copied to the file repository."}}
|
||||
</span>
|
||||
</label>
|
||||
<input type="text" name="file_path" id="file_path" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div id="files_file-uploader" class="large-12 columns text-center">
|
||||
<label id="files_file-uploader-label" for="files_file-uploader-input"></label>
|
||||
<input id="files_file-uploader-input" type="file"/>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
Loading…
x
Reference in New Issue
Block a user