shaba/one
1
0
Fork 0
mirror of https://github.com/OpenNebula/one.git synced 2025-04-01 06:50:25 +03:00
Code Releases Wiki Activity

Feature: #4474: Refactor images & files tab

Browse Source
This commit is contained in:
Carlos Martín 2016-06-03 12:08:07 +02:00
parent 91b45a9260
commit 0e9329810b
18 changed files with 790 additions and 1207 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/sunstone/public/app/tabs/files-tab.js
View File

@ -47,9 +47,6 @@ define(function(require) {
infoHeader: Locale.tr("File"),
subheader: '',
resource: 'File',
content: '<div class="large-12 columns">\
<div id="files_upload_progress_bars"></div>\
</div>',
buttons: Buttons,
actions: Actions,
dataTable: new Table(DATATABLE_ID, {actions: true, info: true}),

47
src/sunstone/public/app/tabs/files-tab/buttons.js
View File

@ -15,47 +15,16 @@
/* -------------------------------------------------------------------------- */
define(function(require) {
var Locale = require('utils/locale');
var ImageButtons = require('tabs/images-tab/buttons');
var Buttons = {
"File.refresh" : {
type: "action",
layout: "refresh",
alwaysActive: true
},
"File.create_dialog" : {
type: "create_dialog",
layout: "create"
},
"File.chown" : {
type: "confirm_with_select",
text: Locale.tr("Change owner"),
layout: "user_select",
select: "User",
tip: Locale.tr("Select the new owner")
},
"File.chgrp" : {
type: "confirm_with_select",
text: Locale.tr("Change group"),
layout: "user_select",
select: "Group",
tip: Locale.tr("Select the new group")
},
"File.enable" : {
type: "action",
layout: "more_select",
text: Locale.tr("Enable")
},
"File.disable" : {
type: "action",
layout: "more_select",
text: Locale.tr("Disable")
},
"File.delete" : {
type: "confirm",
layout: "del",
text: Locale.tr("Delete")
},
"File.refresh" : ImageButtons["Image.refresh"],
"File.create_dialog" : ImageButtons["Image.create_dialog"],
"File.chown" : ImageButtons["Image.chown"],
"File.chgrp" : ImageButtons["Image.chgrp"],
"File.enable" : ImageButtons["Image.enable"],
"File.disable" : ImageButtons["Image.disable"],
"File.delete" : ImageButtons["Image.delete"]
};
return Buttons;

69
src/sunstone/public/app/tabs/files-tab/datatable.js
View File

@ -19,64 +19,24 @@ define(function(require) {
DEPENDENCIES
*/
var TabDataTable = require('utils/tab-datatable');
var SunstoneConfig = require('sunstone-config');
var ImageCommonDataTable = require('tabs/images-tab/datatable-common');
var Locale = require('utils/locale');
var Humanize = require('utils/humanize');
var Notifier = require('utils/notifier');
var OpenNebulaImage = require('opennebula/image');
var LabelsUtils = require('utils/labels/utils');
/*
CONSTANTS
*/
var RESOURCE = "File";
var XML_ROOT = "IMAGE";
var TAB_NAME = require('./tabId');
var LABELS_COLUMN = 13;
var TEMPLATE_ATTR = 'TEMPLATE';
/*
CONSTRUCTOR
*/
function Table(dataTableId, conf) {
this.conf = conf || {};
this.tabId = TAB_NAME;
this.dataTableId = dataTableId;
this.resource = RESOURCE;
this.xmlRoot = XML_ROOT;
this.labelsColumn = LABELS_COLUMN;
this.dataTableOptions = {
"bAutoWidth": false,
"bSortClasses" : false,
"bDeferRender": true,
"aoColumnDefs": [
{"bSortable": false, "aTargets": ["check"]},
{"sWidth": "35px", "aTargets": [0]},
{"bVisible": true, "aTargets": SunstoneConfig.tabTableColumns(TAB_NAME)},
{"bVisible": false, "aTargets": ['_all']}
]
};
this.columns = [
Locale.tr("ID"),
Locale.tr("Owner"),
Locale.tr("Group"),
Locale.tr("Name"),
Locale.tr("Datastore"),
Locale.tr("Size"),
Locale.tr("Type"),
Locale.tr("Registration time"),
Locale.tr("Persistent"),
Locale.tr("Status"),
Locale.tr("#VMS"),
Locale.tr("Target"),
Locale.tr("Labels")
];
this.selectOptions = {
"id_index": 1,
"name_index": 4,
@ -87,10 +47,10 @@ define(function(require) {
"you_selected_multiple": Locale.tr("You selected the following files:")
};
TabDataTable.call(this);
ImageCommonDataTable.call(this, RESOURCE, TAB_NAME, dataTableId, conf);
};
Table.prototype = Object.create(TabDataTable.prototype);
Table.prototype = Object.create(ImageCommonDataTable.prototype);
Table.prototype.constructor = Table;
Table.prototype.elementArray = _elementArray;
@ -109,23 +69,6 @@ define(function(require) {
return false;
}
return [
'<input class="check_item" type="checkbox" id="'+RESOURCE.toLowerCase()+'_' +
element.ID + '" name="selected_items" value="' +
element.ID + '"/>',
element.ID,
element.UNAME,
element.GNAME,
element.NAME,
element.DATASTORE,
element.SIZE,
OpenNebulaImage.typeStr(element.TYPE),
Humanize.prettyTime(element.REGTIME),
parseInt(element.PERSISTENT) ? "yes" : "no",
OpenNebulaImage.stateStr(element.STATE),
element.RUNNING_VMS,
element.TEMPLATE.TARGET ? element.TEMPLATE.TARGET : '--',
(LabelsUtils.labelsStr(element[TEMPLATE_ATTR])||'')
];
return this.elementArrayCommon(element_json);
}
});
});

251
src/sunstone/public/app/tabs/files-tab/form-panels/create.js
View File

@ -19,26 +19,13 @@ 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 BrowserInfo = require('utils/browser-info');
var OpenNebulaDatastore = require('opennebula/datastore');
var WizardFields = require('utils/wizard-fields');
var ProgressBar = require('utils/progress-bar');
var TemplateWizardHTML = require('hbs!./create/wizard');
var TemplateAdvancedHTML = require('hbs!./create/advanced');
var BaseFormPanel = require('tabs/images-tab/form-panels/create-common');
/*
CONSTANTS
*/
var RESOURCE = "File";
var FORM_PANEL_ID = require('./create/formPanelId');
var TAB_ID = require('../tabId');
@ -49,13 +36,7 @@ define(function(require) {
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
}
};
this.resource = RESOURCE;
BaseFormPanel.call(this);
}
@ -63,232 +44,6 @@ define(function(require) {
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();
ResourceSelect.insert({
context: $('#file_datastore', context),
resourceName: 'Datastore',
initValue: ds_id,
filterKey: 'TYPE',
filterValue: '' + OpenNebulaDatastore.TYPES.FILE_DS
});
ResourceSelect.insert({
context: $('#file_datastore_raw', context),
resourceName: 'Datastore',
initValue: ds_id_raw,
filterKey: 'TYPE',
filterValue: '' + OpenNebulaDatastore.TYPES.FILE_DS
});
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 (BrowserInfo.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: 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="medium-2 columns">\
' + Locale.tr("Uploading...") + '\
</div>\
<div class="medium-10 columns">\
<div class="progressbar">'+
ProgressBar.html(0, 1, fileName) + '\
</div>\
</div>\
</div>');
});
that.uploader.on('progress', function() {
$('div.progressbar', $('div[id="files-' + fileName + 'progressBar"]')).html(
ProgressBar.html(this.progress(), 1, fileName) );
});
}
return false;
}
function _submitWizard(context) {
var that = this;
var upload = false;
var ds_id = $('#file_datastore .resource_list_select', context).val();
if (!ds_id) {
Sunstone.hideFormPanelLoading(TAB_ID);
Notifier.notifyError(Locale.tr("Please select a datastore for this file"));
return false;
}
var img_json = {};
var name = WizardFields.retrieveInput($('#file_name', context));
img_json["NAME"] = name;
var desc = WizardFields.retrieveInput($('#file_desc', context));
if (desc.length) {
img_json["DESCRIPTION"] = desc;
}
var type = WizardFields.retrieveInput($('#file_type', context));
img_json["TYPE"] = type;
switch ($('#src_path_select input:checked', context).val()){
case "path":
path = WizardFields.retrieveInput($('#file_path', context));
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) {
if (that.uploader.files.length == 0) {
Sunstone.hideFormPanelLoading(TAB_ID);
Notifier.notifyError(Locale.tr("Please select a file to upload"));
return false;
}
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;
}
});

34
src/sunstone/public/app/tabs/files-tab/form-panels/create/advanced.hbs
View File

@ -1,34 +0,0 @@
{{! -------------------------------------------------------------------------- }}
{{! Copyright 2002-2016, OpenNebula Project, OpenNebula Systems }}
{{! }}
{{! 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. }}
{{! -------------------------------------------------------------------------- }}
<form data-abide novalidate 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" class="monospace" rows="15" required></textarea>
</div>
</div>
</form>

78
src/sunstone/public/app/tabs/files-tab/form-panels/create/wizard.hbs
View File

@ -1,78 +0,0 @@
{{! -------------------------------------------------------------------------- }}
{{! Copyright 2002-2016, OpenNebula Project, OpenNebula Systems }}
{{! }}
{{! 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. }}
{{! -------------------------------------------------------------------------- }}
<form data-abide novalidate id="{{formPanelId}}Wizard" class="custom creation">
<div class="row">
<div class="medium-4 columns">
<label for="file_name">
{{tr "Name"}}
<input required type="text" name="file_name" id="file_name" />
</div>
<div class="medium-8 columns">
<label for="file_desc">
{{tr "Description"}}
</label>
<textarea name="file_desc" id="file_desc" rows="4"></textarea>
</div>
</div>
<div class="row">
<div class="medium-4 columns">
<label for="file_type">
{{tr "File type"}}
</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="medium-8 columns">
<label for="file_datastore">
{{tr "Datastore"}}
</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 "Path in OpenNebula server"}}</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"}}
</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>

99
src/sunstone/public/app/tabs/files-tab/panels/info.js
View File

@ -19,20 +19,7 @@ define(function(require) {
DEPENDENCIES
*/
var Locale = require('utils/locale');
var Humanize = require('utils/humanize');
var RenameTr = require('utils/panel/rename-tr');
var TemplateTable = require('utils/panel/template-table');
var PermissionsTable = require('utils/panel/permissions-table');
var OpenNebulaImage = require('opennebula/image');
var Config = require('sunstone-config');
var Sunstone = require('sunstone');
/*
TEMPLATES
*/
var TemplateInfo = require('hbs!./info/html');
var BasePanel = require('tabs/images-tab/panels/info-common');
/*
CONSTANTS
@ -40,7 +27,7 @@ define(function(require) {
var TAB_ID = require('../tabId');
var PANEL_ID = require('./info/panelId');
var RESOURCE = "File";
var RESOURCE = "File"
var XML_ROOT = "IMAGE";
/*
@ -48,84 +35,16 @@ define(function(require) {
*/
function Panel(info) {
this.title = Locale.tr("Info");
this.icon = "fa-info-circle";
this.tabId = TAB_ID;
this.resource = RESOURCE;
this.xmlRoot = XML_ROOT;
this.element = info[XML_ROOT];
return this;
}
return BasePanel.call(this, info);
};
Panel.PANEL_ID = PANEL_ID;
Panel.prototype.html = _html;
Panel.prototype.setup = _setup;
Panel.prototype = Object.create(BasePanel.prototype);
Panel.prototype.constructor = Panel;
return Panel;
/*
FUNCTION DEFINITIONS
*/
function _html() {
var renameTrHTML = RenameTr.html(TAB_ID, RESOURCE, this.element.NAME);
var templateTableHTML = TemplateTable.html(this.element.TEMPLATE, RESOURCE, Locale.tr("Attributes"));
var permissionsTableHTML = PermissionsTable.html(TAB_ID, RESOURCE, this.element);
var stateStr = Locale.tr(OpenNebulaImage.stateStr(this.element.STATE));
var prettyRegTime = Humanize.prettyTime(this.element.REGTIME);
var fsTypeStr = this.element.FS_TYPE != undefined ? this.element.FS_TYPE : '-';
var sizeStr = Humanize.sizeFromMB(this.element.SIZE);
return TemplateInfo({
'element': this.element,
'renameTrHTML': renameTrHTML,
'templateTableHTML': templateTableHTML,
'permissionsTableHTML': permissionsTableHTML,
'stateStr': stateStr,
'prettyRegTime': prettyRegTime,
'fsTypeStr': fsTypeStr,
'typeStr': OpenNebulaImage.typeStr(this.element.TYPE),
'sizeStr': sizeStr
});
}
function _setup(context) {
RenameTr.setup(TAB_ID, RESOURCE, this.element.ID, context);
TemplateTable.setup(this.element.TEMPLATE, RESOURCE, this.element.ID, context);
PermissionsTable.setup(TAB_ID, RESOURCE, this.element, context);
// Listener for edit link for type change
var that = this;
context.off("click", "#div_edit_chg_type_link")
context.on("click", "#div_edit_chg_type_link", function() {
$(".value_td_type", context).html(
'<select id="chg_type_select">\
<option value="KERNEL">'+Locale.tr("KERNEL")+'</option>\
<option value="RAMDISK">'+Locale.tr("RAMDISK")+'</option>\
<option value="CONTEXT">'+Locale.tr("CONTEXT")+'</option>\
</select>');
var currentVal = "";
switch(parseInt(that.element.TYPE)){
case OpenNebulaImage.TYPES.KERNEL:
currentVal = "KERNEL";
break;
case OpenNebulaImage.TYPES.RAMDISK:
currentVal = "RAMDISK";
break;
case OpenNebulaImage.TYPES.CONTEXT:
currentVal = "CONTEXT";
break;
}
$('#chg_type_select', context).val(currentVal);
});
context.off("change", "#chg_type_select");
context.on("change", "#chg_type_select", function() {
var new_value = $(this).val();
Sunstone.runAction("File.chtype", that.element.ID, new_value);
});
return false;
}
});

77
src/sunstone/public/app/tabs/files-tab/panels/info/html.hbs
View File

@ -1,77 +0,0 @@
{{! -------------------------------------------------------------------------- }}
{{! Copyright 2002-2016, OpenNebula Project, OpenNebula Systems }}
{{! }}
{{! 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. }}
{{! -------------------------------------------------------------------------- }}
<div class="row">
<div class="large-6 columns">
<table class="dataTable">
<thead>
<tr>
<th colspan="3">{{tr "Information"}}</th>
</tr>
</thead>
<tbody>
<tr>
<td class="key_td">{{tr "ID"}}</td>
<td class="value_td" colspan="2">{{element.ID}}</td>
</tr>
{{{renameTrHTML}}}
<tr>
<td class="key_td">{{tr "Datastore"}}</td>
<td class="value_td">{{element.DATASTORE}}</td>
<td></td>
</tr>
<tr>
<td class="key_td">{{tr "Register time"}}</td>
<td class="value_td">{{prettyRegTime}}</td>
<td></td>
</tr>
<tr>
<td class="key_td">{{tr "Type"}}</td>
<td class="value_td_type">{{typeStr}}</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 "Filesystem type"}}</td>
<td class="value_td">{{fsTypeStr}}</td>
<td></td>
</tr>
<tr>
<td class="key_td">{{tr "Size"}}</td>
<td class="value_td">{{sizeStr}}</td>
<td></td>
</tr>
<tr>
<td class="key_td">{{tr "State"}}</td>
<td class="value_td">{{stateStr}}</td>
<td></td>
</tr>
<tr>
<td class="key_td">{{tr "Running VMS"}}</td>
<td class="value_td">{{element.RUNNING_VMS}}</td>
<td></td>
</tr>
</tbody>
</table>
</div>
<div class="large-6 columns">{{{permissionsTableHTML}}}</div>
</div>
<div class="row">
<div class="large-9 columns">{{{templateTableHTML}}}</div>
</div>

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

@ -52,7 +52,6 @@ define(function(require) {
infoHeader: Locale.tr("Image"),
subheader: '',
resource: 'Image',
content: '<div id="upload_progress_bars" class="large-12 columns"></div>',
buttons: Buttons,
actions: Actions,
dataTable: new Table(DATATABLE_ID, {actions: true, info: true}),

112
src/sunstone/public/app/tabs/images-tab/datatable-common.js Normal file
View File

@ -0,0 +1,112 @@
/* -------------------------------------------------------------------------- */
/* Copyright 2002-2016, OpenNebula Project, OpenNebula Systems */
/* */
/* 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. */
/* -------------------------------------------------------------------------- */
define(function(require) {
/*
DEPENDENCIES
*/
var TabDataTable = require('utils/tab-datatable');
var SunstoneConfig = require('sunstone-config');
var Locale = require('utils/locale');
var Humanize = require('utils/humanize');
var OpenNebulaImage = require('opennebula/image');
var LabelsUtils = require('utils/labels/utils');
/*
CONSTANTS
*/
var XML_ROOT = "IMAGE"
var LABELS_COLUMN = 13;
var TEMPLATE_ATTR = 'TEMPLATE';
/*
CONSTRUCTOR
*/
function Table(resource, tabId, dataTableId, conf) {
this.conf = conf || {};
this.tabId = tabId;
this.dataTableId = dataTableId;
this.resource = resource;
this.xmlRoot = XML_ROOT;
this.labelsColumn = LABELS_COLUMN;
this.dataTableOptions = {
"bAutoWidth": false,
"bSortClasses" : false,
"bDeferRender": true,
"aoColumnDefs": [
{"bSortable": false, "aTargets": ["check"]},
{"sWidth": "35px", "aTargets": [0]},
{"bVisible": true, "aTargets": SunstoneConfig.tabTableColumns(tabId)},
{"bVisible": false, "aTargets": ['_all']}
]
}
this.columns = [
Locale.tr("ID"),
Locale.tr("Owner"),
Locale.tr("Group"),
Locale.tr("Name"),
Locale.tr("Datastore"),
Locale.tr("Size"),
Locale.tr("Type"),
Locale.tr("Registration time"),
Locale.tr("Persistent"),
Locale.tr("Status"),
Locale.tr("#VMS"),
Locale.tr("Target"),
Locale.tr("Labels")
]
TabDataTable.call(this);
};
Table.prototype = Object.create(TabDataTable.prototype);
Table.prototype.constructor = Table;
Table.prototype.elementArrayCommon = _elementArray;
return Table;
/*
FUNCTION DEFINITIONS
*/
function _elementArray(element_json) {
var element = element_json.IMAGE;
return [
'<input class="check_item" type="checkbox" id="'+this.resource.toLowerCase()+'_' +
element.ID + '" name="selected_items" value="' +
element.ID + '"/>',
element.ID,
element.UNAME,
element.GNAME,
element.NAME,
element.DATASTORE,
element.SIZE,
OpenNebulaImage.typeStr(element.TYPE),
Humanize.prettyTime(element.REGTIME),
parseInt(element.PERSISTENT) ? "yes" : "no",
OpenNebulaImage.stateStr(element.STATE),
element.RUNNING_VMS,
element.TEMPLATE.TARGET ? element.TEMPLATE.TARGET : '--',
(LabelsUtils.labelsStr(element[TEMPLATE_ATTR])||'')
];
}
});

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

@ -19,64 +19,24 @@ define(function(require) {
DEPENDENCIES
*/
var TabDataTable = require('utils/tab-datatable');
var SunstoneConfig = require('sunstone-config');
var ImageCommonDataTable = require('./datatable-common');
var Locale = require('utils/locale');
var Humanize = require('utils/humanize');
var Notifier = require('utils/notifier');
var OpenNebulaImage = require('opennebula/image');
var LabelsUtils = require('utils/labels/utils');
/*
CONSTANTS
*/
var RESOURCE = "Image"
var XML_ROOT = "IMAGE"
var TAB_NAME = require('./tabId');
var LABELS_COLUMN = 13;
var TEMPLATE_ATTR = 'TEMPLATE';
/*
CONSTRUCTOR
*/
function Table(dataTableId, conf) {
this.conf = conf || {};
this.tabId = TAB_NAME;
this.dataTableId = dataTableId;
this.resource = RESOURCE;
this.xmlRoot = XML_ROOT;
this.labelsColumn = LABELS_COLUMN;
this.dataTableOptions = {
"bAutoWidth": false,
"bSortClasses" : false,
"bDeferRender": true,
"aoColumnDefs": [
{"bSortable": false, "aTargets": ["check"]},
{"sWidth": "35px", "aTargets": [0]},
{"bVisible": true, "aTargets": SunstoneConfig.tabTableColumns(TAB_NAME)},
{"bVisible": false, "aTargets": ['_all']}
]
}
this.columns = [
Locale.tr("ID"),
Locale.tr("Owner"),
Locale.tr("Group"),
Locale.tr("Name"),
Locale.tr("Datastore"),
Locale.tr("Size"),
Locale.tr("Type"),
Locale.tr("Registration time"),
Locale.tr("Persistent"),
Locale.tr("Status"),
Locale.tr("#VMS"),
Locale.tr("Target"),
Locale.tr("Labels")
]
this.selectOptions = {
"id_index": 1,
"name_index": 4,
@ -87,13 +47,10 @@ define(function(require) {
"you_selected_multiple": Locale.tr("You selected the following images:")
};
this.totalImages = 0;
this.sizeImages = 0;
TabDataTable.call(this);
ImageCommonDataTable.call(this, RESOURCE, TAB_NAME, dataTableId, conf);
};
Table.prototype = Object.create(TabDataTable.prototype);
Table.prototype = Object.create(ImageCommonDataTable.prototype);
Table.prototype.constructor = Table;
Table.prototype.elementArray = _elementArray;
Table.prototype.preUpdateView = _preUpdateView;
@ -117,22 +74,7 @@ define(function(require) {
this.sizeImages = this.sizeImages + parseInt(element.SIZE);
this.totalImages++;
return [
'<input class="check_item" type="checkbox" id="image_' + element.ID + '" name="selected_items" value="' + element.ID + '"/>',
element.ID,
element.UNAME,
element.GNAME,
element.NAME,
element.DATASTORE,
element.SIZE,
OpenNebulaImage.typeStr(element.TYPE),
Humanize.prettyTime(element.REGTIME),
parseInt(element.PERSISTENT) ? "yes" : "no",
OpenNebulaImage.stateStr(element.STATE),
element.RUNNING_VMS,
element.TEMPLATE.TARGET ? element.TEMPLATE.TARGET : '--',
(LabelsUtils.labelsStr(element[TEMPLATE_ATTR])||'')
];
return this.elementArrayCommon(element_json);
}
function _preUpdateView() {

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

@ -0,0 +1,455 @@
/* -------------------------------------------------------------------------- */
/* Copyright 2002-2016, OpenNebula Project, OpenNebula Systems */
/* */
/* 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. */
/* -------------------------------------------------------------------------- */
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 OpenNebulaDatastore = require('opennebula/datastore');
var ResourceSelect = require('utils/resource-select');
var CustomTagsTable = require('utils/custom-tags-table');
var BrowserInfo = require('utils/browser-info');
var Config = require('sunstone-config');
var WizardFields = require('utils/wizard-fields');
var ProgressBar = require('utils/progress-bar');
var TemplateWizardHTML = require('hbs!./create/wizard');
var TemplateAdvancedHTML = require('hbs!./create/advanced');
/*
CONSTANTS
*/
/*
CONSTRUCTOR
*/
function FormPanel() {
var title;
if (this.resource == "Image"){
title = Locale.tr("Create Image");
} else {
title = Locale.tr("Create File");
}
this.actions = {
'create': {
'title': title,
'buttonText': Locale.tr("Create"),
'resetButton': true
}
};
BaseFormPanel.call(this);
}
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,
'customTagsHTML': CustomTagsTable.html(),
'images': (this.resource == "Image")
});
}
function _htmlAdvanced() {
return TemplateAdvancedHTML({formPanelId: this.formPanelId});
}
function _onShow(context) {
$("#img_name", context).focus();
var ds_id = $('#img_datastore .resource_list_select', context).val();
var ds_id_raw = $('#img_datastore_raw .resource_list_select', context).val();
var filterValue;
if (this.resource == "Image"){
filterValue = '' + OpenNebulaDatastore.TYPES.IMAGE_DS;
} else {
filterValue = '' + OpenNebulaDatastore.TYPES.FILE_DS
}
ResourceSelect.insert({
context: $('#img_datastore', context),
resourceName: 'Datastore',
initValue: ds_id,
filterKey: 'TYPE',
filterValue: filterValue,
triggerChange: true
});
ResourceSelect.insert({
context: $('#img_datastore_raw', context),
resourceName: 'Datastore',
initValue: ds_id_raw,
filterKey: 'TYPE',
filterValue: filterValue,
triggerChange: true
});
return false;
}
function _setup(context) {
var that = this;
Tips.setup(context);
$('select#img_type', context).change(function() {
var value = $(this).val();
switch (value){
case "DATABLOCK":
$('#datablock_img', context).removeAttr("disabled");
break;
default:
$('#datablock_img', context).attr('disabled', 'disabled');
$('#path_image', context).click();
}
});
$('#img_datastore', context).off('change', '.resource_list_select');
$('#img_datastore', context).on('change', '.resource_list_select', function() {
var ds_id = $(this).val();
OpenNebulaDatastore.show({
data : {
id: ds_id
},
timeout: true,
success: function(request, ds){
var mad = ds["DATASTORE"]["DS_MAD"];
var tm_mad = ds["DATASTORE"]["TM_MAD"];
var pers_forced = false;
// Set the persistency
if (Config.onedConf.DS_MAD_CONF !== undefined) {
$.each(Config.onedConf.DS_MAD_CONF, function(i,e){
if (e["NAME"] == mad && !$.isEmptyObject(e["PERSISTENT_ONLY"])) {
if (e["PERSISTENT_ONLY"] != undefined &&
e["PERSISTENT_ONLY"].toLowerCase() == "yes") {
$('#img_persistent', context).prop('disabled', true);
$('#img_persistent', context).prop('checked', true);
pers_forced = true;
return false;
}
}
}
);
}
if (!pers_forced) {
$('#img_persistent', context).prop('disabled', false);
}
// Display adequate values in the dialog.
switch (mad) {
case "vcenter":
$(".only_vcenter").show();
$(".not_vcenter").hide();
break;
default:
$(".only_vcenter").hide();
$(".not_vcenter").show();
}
// Fill in the default driver
if (tm_mad == "qcow2"){
$('select#img_driver',context).val("qcow2");
} else {
$('select#img_driver',context).val("raw");
}
},
error: function(request, error_json, container){
Notifier.onError(request, error_json, container);
}
});
});
// Custom Adapter Type
var custom_attrs = ["adapter_type",
"disk_type",
"img_dev_prefix",
"img_driver"];
for (var i in custom_attrs){
var field = custom_attrs[i];
$('input[name="custom_'+field+'"]',context).parent().hide();
$('select#'+field,context).change(function(){
var field = $(this).attr('name');
if ($(this).val() == "custom"){
$('input[name="custom_'+field+'"]',context).parent().show();
$('input[name="custom_'+field+'"]',context).attr('required', '');
} else {
$('input[name="custom_'+field+'"]',context).parent().hide();
$('input[name="custom_'+field+'"]',context).removeAttr('required');
}
});
}
$('#img_path,#img_size,#file-uploader', context).closest('.row').hide();
$("input[name='src_path']", context).change(function() {
var value = $(this).val();
switch (value){
case "path":
$('#img_size,#file-uploader', context).closest('.row').hide();
$('#img_path', context).closest('.row').show();
$('#img_path', context).attr('required', '');
$('#img_size', context).removeAttr('required');
break;
case "datablock":
$('#img_path,#file-uploader', context).closest('.row').hide();
$('#img_size', context).closest('.row').show();
$('#img_path', context).removeAttr('required');
$('#img_size', context).attr('required', '');
break;
case "upload":
$('#img_path,#img_size', context).closest('.row').hide();
$('#file-uploader', context).closest('.row').show();
$('#img_path', context).removeAttr('required');
$('#img_size', context).removeAttr('required');
break;
}
});
$('#path_image', context).click();
CustomTagsTable.setup(context);
if (BrowserInfo.getInternetExplorerVersion() > -1) {
$("#upload_image").attr("disabled", "disabled");
} else {
that.uploader = new Resumable({
target: 'upload_chunk',
chunkSize: 10 * 1024 * 1024,
maxFiles: 1,
testChunks: false,
query: {
csrftoken: csrftoken
}
});
that.uploader.assignBrowse($('#file-uploader-input', context));
var fileName = '';
var file_input = false;
that.uploader.on('fileAdded', function(file) {
fileName = file.fileName;
file_input = fileName;
$('#file-uploader-input', context).hide()
$("#file-uploader-label", context).html(file.fileName);
});
that.uploader.on('uploadStart', function() {
$('#upload_progress_bars').append(
'<div id="' + fileName + 'progressBar" class="row" style="margin-bottom:10px">\
<div id="' + fileName + '-info" class="medium-2 columns">\
' + Locale.tr("Uploading...") + '\
</div>\
<div class="medium-10 columns">\
<div class="progressbar">'+
ProgressBar.html(0, 1, fileName) + '\
</div>\
</div>\
</div>');
});
that.uploader.on('progress', function() {
$('div.progressbar', $('div[id="' + fileName + 'progressBar"]')).html(
ProgressBar.html(this.progress(), 1, fileName) );
});
}
return false;
}
function _submitWizard(context) {
var that = this;
var upload = false;
var ds_id = $('#img_datastore .resource_list_select', context).val();
if (!ds_id) {
Sunstone.hideFormPanelLoading(that.tabId);
Notifier.notifyError(Locale.tr("Please select a datastore for this image"));
return false;
}
var img_json = {};
var name = WizardFields.retrieveInput($('#img_name', context));
img_json["NAME"] = name;
var desc = WizardFields.retrieveInput($('#img_desc', context));
if (desc != undefined && desc.length) {
img_json["DESCRIPTION"] = desc;
}
var type = WizardFields.retrieveInput($('#img_type', context));
img_json["TYPE"] = type;
img_json["PERSISTENT"] = $('#img_persistent:checked', context).length ? "YES" : "NO";
var dev_prefix = WizardFields.retrieveInput($('#img_dev_prefix', context));
if (dev_prefix != undefined && dev_prefix.length) {
if (dev_prefix == "custom") {
dev_prefix = WizardFields.retrieveInput($('#custom_img_dev_prefix', context));
}
img_json["DEV_PREFIX"] = dev_prefix;
}
var driver = WizardFields.retrieveInput($('#img_driver', context));
if (driver != undefined && driver.length) {
if (driver == "custom") {
driver = WizardFields.retrieveInput($('#custom_img_driver', context));
}
img_json["DRIVER"] = driver;
}
var target = WizardFields.retrieveInput($('#img_target', context));
if (target)
img_json["TARGET"] = target;
var adapter_type = WizardFields.retrieveInput($('#adapter_type', context));
if (adapter_type) {
if (adapter_type == "custom") {
adapter_type = WizardFields.retrieveInput($('#custom_adapter_type', context));
}
img_json["ADAPTER_TYPE"] = adapter_type;
}
switch ($('#src_path_select input:checked', context).val()){
case "path":
path = WizardFields.retrieveInput($('#img_path', context));
if (path) img_json["PATH"] = path;
break;
case "datablock":
size = WizardFields.retrieveInput($('#img_size', context));
if (size) img_json["SIZE"] = size;
var disk_type = WizardFields.retrieveInput($('#disk_type', context));
if (disk_type) {
if (disk_type == "custom"){
disk_type = WizardFields.retrieveInput($('#custom_disk_type', context));
}
img_json["DISK_TYPE"] = disk_type;
}
break;
case "upload":
upload = true;
break;
}
$.extend(img_json, CustomTagsTable.retrieve(context));
var img_obj = {
"image" : img_json,
"ds_id" : ds_id
};
//this is an image upload we trigger FileUploader
//to start the upload
if (upload) {
if (that.uploader.files.length == 0) {
Sunstone.hideFormPanelLoading(that.tabId);
Notifier.notifyError(Locale.tr("Please select a file to upload"));
return false;
}
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: file.fileName,
tempfile: file.uniqueIdentifier
},
success: function() {
Notifier.notifyMessage("Image uploaded correctly");
$('div[id="' + file.fileName + 'progressBar"]').remove();
Sunstone.runAction(that.resource+".refresh");
},
error: function(response) {
Notifier.onError({}, OpenNebulaError(response));
$('div[id="' + file.fileName + 'progressBar"]').remove();
}
});
});
that.uploader.upload();
} else {
Sunstone.runAction(that.resource+".create", img_obj);
}
return false;
}
function _submitAdvanced(context) {
var template = $('#template', context).val();
var ds_id = $('#img_datastore_raw .resource_list_select', context).val();
if (!ds_id) {
Notifier.notifyError(Locale.tr("Please select a datastore for this image"));
return false;
}
var img_obj = {
"image" : {
"image_raw" : template
},
"ds_id" : ds_id
};
Sunstone.runAction(this.resource+".create", img_obj);
return false;
}
});

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

@ -19,28 +19,13 @@ 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 OpenNebulaDatastore = require('opennebula/datastore');
var ResourceSelect = require('utils/resource-select');
var CustomTagsTable = require('utils/custom-tags-table');
var BrowserInfo = require('utils/browser-info');
var Config = require('sunstone-config');
var WizardFields = require('utils/wizard-fields');
var ProgressBar = require('utils/progress-bar');
var TemplateWizardHTML = require('hbs!./create/wizard');
var TemplateAdvancedHTML = require('hbs!./create/advanced');
var BaseFormPanel = require('tabs/images-tab/form-panels/create-common');
/*
CONSTANTS
*/
var RESOURCE = "Image";
var FORM_PANEL_ID = require('./create/formPanelId');
var TAB_ID = require('../tabId');
@ -51,13 +36,7 @@ define(function(require) {
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
}
};
this.resource = RESOURCE;
BaseFormPanel.call(this);
}
@ -65,380 +44,6 @@ define(function(require) {
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,
'customTagsHTML': CustomTagsTable.html(),
});
}
function _htmlAdvanced() {
return TemplateAdvancedHTML({formPanelId: this.formPanelId});
}
function _onShow(context) {
$("#img_name", context).focus();
var ds_id = $('#img_datastore .resource_list_select', context).val();
var ds_id_raw = $('#img_datastore_raw .resource_list_select', context).val();
ResourceSelect.insert({
context: $('#img_datastore', context),
resourceName: 'Datastore',
initValue: ds_id,
filterKey: 'TYPE',
filterValue: '' + OpenNebulaDatastore.TYPES.IMAGE_DS,
triggerChange: true
});
ResourceSelect.insert({
context: $('#img_datastore_raw', context),
resourceName: 'Datastore',
initValue: ds_id_raw,
filterKey: 'TYPE',
filterValue: '' + OpenNebulaDatastore.TYPES.IMAGE_DS,
triggerChange: true
});
return false;
}
function _setup(context) {
var that = this;
Tips.setup(context);
$('select#img_type', context).change(function() {
var value = $(this).val();
switch (value){
case "DATABLOCK":
$('#datablock_img', context).removeAttr("disabled");
break;
default:
$('#datablock_img', context).attr('disabled', 'disabled');
$('#path_image', context).click();
}
});
$('#img_datastore', context).off('change', '.resource_list_select');
$('#img_datastore', context).on('change', '.resource_list_select', function() {
var ds_id = $(this).val();
OpenNebulaDatastore.show({
data : {
id: ds_id
},
timeout: true,
success: function(request, ds){
var mad = ds["DATASTORE"]["DS_MAD"];
var tm_mad = ds["DATASTORE"]["TM_MAD"];
var pers_forced = false;
// Set the persistency
if (Config.onedConf.DS_MAD_CONF !== undefined) {
$.each(Config.onedConf.DS_MAD_CONF, function(i,e){
if (e["NAME"] == mad && !$.isEmptyObject(e["PERSISTENT_ONLY"])) {
if (e["PERSISTENT_ONLY"] != undefined &&
e["PERSISTENT_ONLY"].toLowerCase() == "yes") {
$('#img_persistent', context).prop('disabled', true);
$('#img_persistent', context).prop('checked', true);
pers_forced = true;
return false;
}
}
}
);
}
if (!pers_forced) {
$('#img_persistent', context).prop('disabled', false);
}
// Display adequate values in the dialog.
switch (mad) {
case "vcenter":
$(".only_vcenter").show();
$(".not_vcenter").hide();
break;
default:
$(".only_vcenter").hide();
$(".not_vcenter").show();
}
// Fill in the default driver
if (tm_mad == "qcow2"){
$('select#img_driver',context).val("qcow2");
} else {
$('select#img_driver',context).val("raw");
}
},
error: function(request, error_json, container){
Notifier.onError(request, error_json, container);
}
});
});
// Custom Adapter Type
var custom_attrs = ["adapter_type",
"disk_type",
"img_dev_prefix",
"img_driver"];
for (var i in custom_attrs){
var field = custom_attrs[i];
$('input[name="custom_'+field+'"]',context).parent().hide();
$('select#'+field,context).change(function(){
var field = $(this).attr('name');
if ($(this).val() == "custom"){
$('input[name="custom_'+field+'"]',context).parent().show();
$('input[name="custom_'+field+'"]',context).attr('required', '');
} else {
$('input[name="custom_'+field+'"]',context).parent().hide();
$('input[name="custom_'+field+'"]',context).removeAttr('required');
}
});
}
$('#img_path,#img_size,#file-uploader', context).closest('.row').hide();
$("input[name='src_path']", context).change(function() {
var value = $(this).val();
switch (value){
case "path":
$('#img_size,#file-uploader', context).closest('.row').hide();
$('#img_path', context).closest('.row').show();
$('#img_path', context).attr('required', '');
$('#img_size', context).removeAttr('required');
break;
case "datablock":
$('#img_path,#file-uploader', context).closest('.row').hide();
$('#img_size', context).closest('.row').show();
$('#img_path', context).removeAttr('required');
$('#img_size', context).attr('required', '');
break;
case "upload":
$('#img_path,#img_size', context).closest('.row').hide();
$('#file-uploader', context).closest('.row').show();
$('#img_path', context).removeAttr('required');
$('#img_size', context).removeAttr('required');
break;
}
});
$('#path_image', context).click();
CustomTagsTable.setup(context);
if (BrowserInfo.getInternetExplorerVersion() > -1) {
$("#upload_image").attr("disabled", "disabled");
} else {
that.uploader = new Resumable({
target: 'upload_chunk',
chunkSize: 10 * 1024 * 1024,
maxFiles: 1,
testChunks: false,
query: {
csrftoken: csrftoken
}
});
that.uploader.assignBrowse($('#file-uploader-input', context));
var fileName = '';
var file_input = false;
that.uploader.on('fileAdded', function(file) {
fileName = file.fileName;
file_input = fileName;
$('#file-uploader-input', context).hide()
$("#file-uploader-label", context).html(file.fileName);
});
that.uploader.on('uploadStart', function() {
$('#upload_progress_bars').append(
'<div id="' + fileName + 'progressBar" class="row" style="margin-bottom:10px">\
<div id="' + fileName + '-info" class="medium-2 columns">\
' + Locale.tr("Uploading...") + '\
</div>\
<div class="medium-10 columns">\
<div class="progressbar">'+
ProgressBar.html(0, 1, fileName) + '\
</div>\
</div>\
</div>');
});
that.uploader.on('progress', function() {
$('div.progressbar', $('div[id="' + fileName + 'progressBar"]')).html(
ProgressBar.html(this.progress(), 1, fileName) );
});
}
return false;
}
function _submitWizard(context) {
var that = this;
var upload = false;
var ds_id = $('#img_datastore .resource_list_select', context).val();
if (!ds_id) {
Sunstone.hideFormPanelLoading(TAB_ID);
Notifier.notifyError(Locale.tr("Please select a datastore for this image"));
return false;
}
var img_json = {};
var name = WizardFields.retrieveInput($('#img_name', context));
img_json["NAME"] = name;
var desc = WizardFields.retrieveInput($('#img_desc', context));
if (desc.length) {
img_json["DESCRIPTION"] = desc;
}
var type = WizardFields.retrieveInput($('#img_type', context));
img_json["TYPE"] = type;
img_json["PERSISTENT"] = $('#img_persistent:checked', context).length ? "YES" : "NO";
var dev_prefix = WizardFields.retrieveInput($('#img_dev_prefix', context));
if (dev_prefix.length) {
if (dev_prefix == "custom") {
dev_prefix = WizardFields.retrieveInput($('#custom_img_dev_prefix', context));
}
img_json["DEV_PREFIX"] = dev_prefix;
}
var driver = WizardFields.retrieveInput($('#img_driver', context));
if (driver.length) {
if (driver == "custom") {
driver = WizardFields.retrieveInput($('#custom_img_driver', context));
}
img_json["DRIVER"] = driver;
}
var target = WizardFields.retrieveInput($('#img_target', context));
if (target)
img_json["TARGET"] = target;
var adapter_type = WizardFields.retrieveInput($('#adapter_type', context));
if (adapter_type) {
if (adapter_type == "custom") {
adapter_type = WizardFields.retrieveInput($('#custom_adapter_type', context));
}
img_json["ADAPTER_TYPE"] = adapter_type;
}
switch ($('#src_path_select input:checked', context).val()){
case "path":
path = WizardFields.retrieveInput($('#img_path', context));
if (path) img_json["PATH"] = path;
break;
case "datablock":
size = WizardFields.retrieveInput($('#img_size', context));
if (size) img_json["SIZE"] = size;
var disk_type = WizardFields.retrieveInput($('#disk_type', context));
if (disk_type) {
if (disk_type == "custom"){
disk_type = WizardFields.retrieveInput($('#custom_disk_type', context));
}
img_json["DISK_TYPE"] = disk_type;
}
break;
case "upload":
upload = true;
break;
}
$.extend(img_json, CustomTagsTable.retrieve(context));
var img_obj = {
"image" : img_json,
"ds_id" : ds_id
};
//this is an image upload we trigger FileUploader
//to start the upload
if (upload) {
if (that.uploader.files.length == 0) {
Sunstone.hideFormPanelLoading(TAB_ID);
Notifier.notifyError(Locale.tr("Please select a file to upload"));
return false;
}
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: file.fileName,
tempfile: file.uniqueIdentifier
},
success: function() {
Notifier.notifyMessage("Image uploaded correctly");
$('div[id="' + file.fileName + 'progressBar"]').remove();
Sunstone.runAction("Image.refresh");
},
error: function(response) {
Notifier.onError({}, OpenNebulaError(response));
$('div[id="' + file.fileName + 'progressBar"]').remove();
}
});
});
that.uploader.upload();
} else {
Sunstone.runAction("Image.create", img_obj);
}
return false;
}
function _submitAdvanced(context) {
var template = $('#template', context).val();
var ds_id = $('#img_datastore_raw .resource_list_select', context).val();
if (!ds_id) {
Notifier.notifyError(Locale.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;
}
});

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

@ -35,9 +35,15 @@
{{tr "Type"}}
</label>
<select name="img_type" id="img_type">
{{#if images}}
<option value="OS">{{tr "Operating System image"}}</option>
<option value="CDROM">{{tr "Readonly CD-ROM"}}</option>
<option value="DATABLOCK">{{tr "Generic storage datablock"}}</option>
{{else}}
<option value="CONTEXT">{{tr "Context"}}</option>
<option value="KERNEL">{{tr "Kernel"}}</option>
<option value="RAMDISK">{{tr "Ramdisk"}}</option>
{{/if}}
</select>
</div>
<div class="medium-8 columns">
@ -47,6 +53,7 @@
<div id="img_datastore" name="img_datastore"></div>
</div>
</div>
{{#if images}}
{{#isTabActionEnabled "images-tab" "Image.persistent"}}
<div class="row">
<div class="large-4 columns">
@ -57,6 +64,7 @@
</div>
</div>
{{/isTabActionEnabled}}
{{/if}}
<br>
<fieldset>
<legend>{{tr "Image location"}}</legend>
@ -66,8 +74,10 @@
<label for="path_image">{{tr "Path in OpenNebula server"}}</label>
<input type="radio" name="src_path" id="upload_image" value="upload">
<label for="upload_image">{{tr "Upload"}}</label>
{{#if images}}
<input type="radio" name="src_path" id="datablock_img" value="datablock" disabled>
<label for="datablock_img">{{tr "Empty disk image"}}</label>
{{/if}}
</div>
</div>
<br>
@ -109,6 +119,7 @@
</div>
</div>
</fieldset>
{{#if images}}
{{#advancedSection (tr "Advanced Options") }}
<div class="row">
<div class="medium-6 columns">
@ -183,4 +194,5 @@
</div>
{{{customTagsHTML}}}
{{/advancedSection}}
{{/if}}
</form>

165
src/sunstone/public/app/tabs/images-tab/panels/info-common.js Normal file
View File

@ -0,0 +1,165 @@
/* -------------------------------------------------------------------------- */
/* Copyright 2002-2016, OpenNebula Project, OpenNebula Systems */
/* */
/* 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. */
/* -------------------------------------------------------------------------- */
define(function(require) {
/*
DEPENDENCIES
*/
var Locale = require('utils/locale');
var Humanize = require('utils/humanize');
var RenameTr = require('utils/panel/rename-tr');
var TemplateTable = require('utils/panel/template-table');
var PermissionsTable = require('utils/panel/permissions-table');
var OpenNebulaImage = require('opennebula/image');
var Config = require('sunstone-config');
var Sunstone = require('sunstone');
/*
TEMPLATES
*/
var TemplateInfo = require('hbs!./info/html');
/*
CONSTRUCTOR
*/
function Panel(info) {
this.title = Locale.tr("Info");
this.icon = "fa-info-circle";
this.element = info[this.xmlRoot];
return this;
};
Panel.prototype.html = _html;
Panel.prototype.setup = _setup;
return Panel;
/*
FUNCTION DEFINITIONS
*/
function _html() {
var renameTrHTML = RenameTr.html(this.tabId, this.resource, this.element.NAME);
var templateTableHTML = TemplateTable.html(this.element.TEMPLATE, this.resource, Locale.tr("Attributes"));
var permissionsTableHTML = PermissionsTable.html(this.tabId, this.resource, this.element);
var prettyRegTime = Humanize.prettyTime(this.element.REGTIME);
var fsTypeStr = this.element.FS_TYPE != undefined ? this.element.FS_TYPE : '-';
var sizeStr = Humanize.sizeFromMB(this.element.SIZE);
var persistentStr = parseInt(this.element.PERSISTENT) ? Locale.tr("yes") : Locale.tr("no");
return TemplateInfo({
'element': this.element,
'renameTrHTML': renameTrHTML,
'templateTableHTML': templateTableHTML,
'permissionsTableHTML': permissionsTableHTML,
'stateStr': OpenNebulaImage.stateStr(this.element.STATE),
'prettyRegTime': prettyRegTime,
'fsTypeStr': fsTypeStr,
'persistentActionEnabled': Config.isTabActionEnabled('images-tab', "Image.persistent"),
'persistentStr': persistentStr,
'typeStr': OpenNebulaImage.typeStr(this.element.TYPE),
'sizeStr': sizeStr,
'images': (this.resource == "Image")
});
}
function _setup(context) {
RenameTr.setup(this.tabId, this.resource, this.element.ID, context);
TemplateTable.setup(this.element.TEMPLATE, this.resource, this.element.ID, context);
PermissionsTable.setup(this.tabId, this.resource, this.element, context);
// Listener for edit link for type change
var that = this;
context.off("click", "#div_edit_chg_type_link")
context.on("click", "#div_edit_chg_type_link", function() {
if (that.resource == "Image"){
$(".value_td_type", context).html(
'<select id="chg_type_select">\
<option value="OS">'+Locale.tr("OS")+'</option>\
<option value="CDROM">'+Locale.tr("CDROM")+'</option>\
<option value="DATABLOCK">'+Locale.tr("DATABLOCK")+'</option>\
</select>');
} else {
$(".value_td_type", context).html(
'<select id="chg_type_select">\
<option value="KERNEL">'+Locale.tr("KERNEL")+'</option>\
<option value="RAMDISK">'+Locale.tr("RAMDISK")+'</option>\
<option value="CONTEXT">'+Locale.tr("CONTEXT")+'</option>\
</select>');
}
var currentVal = "";
switch(parseInt(that.element.TYPE)){
case OpenNebulaImage.TYPES.OS:
currentVal = "OS";
break;
case OpenNebulaImage.TYPES.CDROM:
currentVal = "CDROM";
break;
case OpenNebulaImage.TYPES.DATABLOCK:
currentVal = "DATABLOCK";
break;
case OpenNebulaImage.TYPES.KERNEL:
currentVal = "KERNEL";
break;
case OpenNebulaImage.TYPES.RAMDISK:
currentVal = "RAMDISK";
break;
case OpenNebulaImage.TYPES.CONTEXT:
currentVal = "CONTEXT";
break;
}
$('#chg_type_select', context).val(currentVal);
});
context.off("change", "#chg_type_select");
context.on("change", "#chg_type_select", function() {
var new_value = $(this).val();
Sunstone.runAction(that.resource+".chtype", that.element.ID, new_value);
});
// Listener for edit link for persistency change
context.off("click", "#div_edit_persistency")
context.on("click", "#div_edit_persistency", function() {
$(".value_td_persistency", context).html(
'<select id="persistency_select">\
<option value="yes">' + Locale.tr("yes") + '</option>\
<option value="no">' + Locale.tr("no") + '</option>\
</select>');
$('#persistency_select', context).val(parseInt(that.element.PERSISTENT) ? "yes" : "no");
});
context.off("change", "#persistency_select")
context.on("change", "#persistency_select", function() {
var new_value = $(this).val();
if (new_value == "yes")
Sunstone.runAction(that.resource+".persistent", [that.element.ID]);
else
Sunstone.runAction(that.resource+".nonpersistent", [that.element.ID]);
});
return false;
}
});

121
src/sunstone/public/app/tabs/images-tab/panels/info.js
View File

@ -19,20 +19,7 @@ define(function(require) {
DEPENDENCIES
*/
var Locale = require('utils/locale');
var Humanize = require('utils/humanize');
var RenameTr = require('utils/panel/rename-tr');
var TemplateTable = require('utils/panel/template-table');
var PermissionsTable = require('utils/panel/permissions-table');
var OpenNebulaImage = require('opennebula/image');
var Config = require('sunstone-config');
var Sunstone = require('sunstone');
/*
TEMPLATES
*/
var TemplateInfo = require('hbs!./info/html');
var BasePanel = require('tabs/images-tab/panels/info-common');
/*
CONSTANTS
@ -41,115 +28,23 @@ define(function(require) {
var TAB_ID = require('../tabId');
var PANEL_ID = require('./info/panelId');
var RESOURCE = "Image"
var XML_ROOT = "IMAGE";
/*
CONSTRUCTOR
*/
function Panel(info) {
this.title = Locale.tr("Info");
this.icon = "fa-info-circle";
this.tabId = TAB_ID;
this.resource = RESOURCE;
this.xmlRoot = XML_ROOT;
this.element = info[RESOURCE.toUpperCase()];
return this;
return BasePanel.call(this, info);
};
Panel.PANEL_ID = PANEL_ID;
Panel.prototype.html = _html;
Panel.prototype.setup = _setup;
Panel.prototype = Object.create(BasePanel.prototype);
Panel.prototype.constructor = Panel;
return Panel;
/*
FUNCTION DEFINITIONS
*/
function _html() {
var renameTrHTML = RenameTr.html(TAB_ID, RESOURCE, this.element.NAME);
var templateTableHTML = TemplateTable.html(this.element.TEMPLATE, RESOURCE, Locale.tr("Attributes"));
var permissionsTableHTML = PermissionsTable.html(TAB_ID, RESOURCE, this.element);
var prettyRegTime = Humanize.prettyTime(this.element.REGTIME);
var fsTypeStr = this.element.FS_TYPE != undefined ? this.element.FS_TYPE : '-';
var sizeStr = Humanize.sizeFromMB(this.element.SIZE);
var persistentStr = parseInt(this.element.PERSISTENT) ? Locale.tr("yes") : Locale.tr("no");
return TemplateInfo({
'element': this.element,
'renameTrHTML': renameTrHTML,
'templateTableHTML': templateTableHTML,
'permissionsTableHTML': permissionsTableHTML,
'stateStr': OpenNebulaImage.stateStr(this.element.STATE),
'prettyRegTime': prettyRegTime,
'fsTypeStr': fsTypeStr,
'persistentActionEnabled': Config.isTabActionEnabled('images-tab', "Image.persistent"),
'persistentStr': persistentStr,
'typeStr': OpenNebulaImage.typeStr(this.element.TYPE),
'sizeStr': sizeStr
});
}
function _setup(context) {
RenameTr.setup(TAB_ID, RESOURCE, this.element.ID, context);
TemplateTable.setup(this.element.TEMPLATE, RESOURCE, this.element.ID, context);
PermissionsTable.setup(TAB_ID, RESOURCE, this.element, context);
// Listener for edit link for type change
var that = this;
context.off("click", "#div_edit_chg_type_link")
context.on("click", "#div_edit_chg_type_link", function() {
$(".value_td_type", context).html(
'<select id="chg_type_select">\
<option value="OS">'+Locale.tr("OS")+'</option>\
<option value="CDROM">'+Locale.tr("CDROM")+'</option>\
<option value="DATABLOCK">'+Locale.tr("DATABLOCK")+'</option>\
</select>');
var currentVal = "";
switch(parseInt(that.element.TYPE)){
case OpenNebulaImage.TYPES.OS:
currentVal = "OS";
break;
case OpenNebulaImage.TYPES.CDROM:
currentVal = "CDROM";
break;
case OpenNebulaImage.TYPES.DATABLOCK:
currentVal = "DATABLOCK";
break;
}
$('#chg_type_select', context).val(currentVal);
});
context.off("change", "#chg_type_select");
context.on("change", "#chg_type_select", function() {
var new_value = $(this).val();
Sunstone.runAction("Image.chtype", that.element.ID, new_value);
});
// Listener for edit link for persistency change
context.off("click", "#div_edit_persistency")
context.on("click", "#div_edit_persistency", function() {
$(".value_td_persistency", context).html(
'<select id="persistency_select">\
<option value="yes">' + Locale.tr("yes") + '</option>\
<option value="no">' + Locale.tr("no") + '</option>\
</select>');
$('#persistency_select', context).val(parseInt(that.element.PERSISTENT) ? "yes" : "no");
});
context.off("change", "#persistency_select")
context.on("change", "#persistency_select", function() {
var new_value = $(this).val();
if (new_value == "yes")
Sunstone.runAction("Image.persistent", [that.element.ID]);
else
Sunstone.runAction("Image.nonpersistent", [that.element.ID]);
});
return false;
}
});

2
src/sunstone/public/app/tabs/images-tab/panels/info/html.hbs
View File

@ -47,6 +47,7 @@
</div>
</td>
</tr>
{{#if images}}
<tr>
<td class="key_td">{{tr "Persistent"}}</td>
<td class="value_td_persistency">{{persistentStr}}</td>
@ -58,6 +59,7 @@
</div>
</td>
</tr>
{{/if}}
<tr>
<td class="key_td">{{tr "Filesystem type"}}</td>
<td class="value_td">{{fsTypeStr}}</td>

2
src/sunstone/views/index.erb
View File

@ -77,6 +77,8 @@
<div class="sunstone-header">
</div>
</div>
<div id="upload_progress_bars" class="large-10 columns end right">
</div>
<div id="loading" class="text-center">
<span id="loading-content">
<i class="fa fa-5x fa-spinner fa-pulse"></i>