[pve-devel] [PATCH manager 3/3] add button for uploading disk images
Timo Grodzinski
t.grodzinski at profihost.ag
Mon Feb 15 14:29:54 CET 2016
Signed-off-by: Timo Grodzinski <t.grodzinski at profihost.ag>
---
www/manager/Makefile | 1 +
www/manager/Utils.js | 1 +
www/manager/qemu/HardwareView.js | 27 +++++++
www/manager/qemu/UploadImage.js | 168 +++++++++++++++++++++++++++++++++++++++
4 files changed, 197 insertions(+)
create mode 100644 www/manager/qemu/UploadImage.js
diff --git a/www/manager/Makefile b/www/manager/Makefile
index deeb9cb..4e7cf0a 100644
--- a/www/manager/Makefile
+++ b/www/manager/Makefile
@@ -129,6 +129,7 @@ JSSRC= \
qemu/HDMove.js \
qemu/HDThrottle.js \
qemu/CPUOptions.js \
+ qemu/UploadImage.js \
qemu/DisplayEdit.js \
qemu/KeyboardEdit.js \
qemu/HardwareView.js \
diff --git a/www/manager/Utils.js b/www/manager/Utils.js
index de4493c..59d1712 100644
--- a/www/manager/Utils.js
+++ b/www/manager/Utils.js
@@ -575,6 +575,7 @@ Ext.define('PVE.Utils', { statics: {
cephdestroyosd: ['Ceph OSD', gettext('Destroy') ],
imgcopy: ['', gettext('Copy data') ],
imgdel: ['', gettext('Erase data') ],
+ imgupload: ['', gettext('Upload image') ],
download: ['', gettext('Download') ],
vzdump: ['', gettext('Backup') ],
aptupdate: ['', gettext('Update package database') ],
diff --git a/www/manager/qemu/HardwareView.js b/www/manager/qemu/HardwareView.js
index 89f2f4e..46e791f 100644
--- a/www/manager/qemu/HardwareView.js
+++ b/www/manager/qemu/HardwareView.js
@@ -298,6 +298,22 @@ Ext.define('PVE.qemu.HardwareView', {
win.on('destroy', reload);
};
+ var run_upload = function() {
+ var rec = sm.getSelection()[0];
+ if (!rec) {
+ return;
+ }
+
+ var win = Ext.create('PVE.storage.UploadImage', {
+ disk: rec.data.key,
+ nodename: nodename,
+ vmid: vmid
+ });
+ win.show();
+
+ win.on('destroy', reload);
+ };
+
var run_cpuoptions = function() {
var sockets = me.getObjectValue('sockets', 1);
var cores = me.getObjectValue('cores', 1);
@@ -344,6 +360,12 @@ Ext.define('PVE.qemu.HardwareView', {
disabled: true,
handler: run_resize
});
+ var upload_btn = new PVE.button.Button({
+ text: gettext('Upload disk'),
+ selModel: sm,
+ disabled: true,
+ handler: run_upload
+ });
var move_btn = new PVE.button.Button({
text: gettext('Move disk'),
@@ -429,6 +451,7 @@ Ext.define('PVE.qemu.HardwareView', {
remove_btn.disable();
edit_btn.disable();
resize_btn.disable();
+ upload_btn.disable();
move_btn.disable();
diskthrottle_btn.disable();
revert_btn.disable();
@@ -448,6 +471,8 @@ Ext.define('PVE.qemu.HardwareView', {
resize_btn.setDisabled(pending || !isDisk);
+ upload_btn.setDisabled(pending || !isDisk);
+
move_btn.setDisabled(pending || !isDisk);
diskthrottle_btn.setDisabled(pending || !isDisk);
@@ -510,6 +535,7 @@ Ext.define('PVE.qemu.HardwareView', {
},
remove_btn,
edit_btn,
+ upload_btn,
resize_btn,
move_btn,
diskthrottle_btn,
@@ -535,3 +561,4 @@ Ext.define('PVE.qemu.HardwareView', {
});
}
});
+
diff --git a/www/manager/qemu/UploadImage.js b/www/manager/qemu/UploadImage.js
new file mode 100644
index 0000000..db539dd
--- /dev/null
+++ b/www/manager/qemu/UploadImage.js
@@ -0,0 +1,168 @@
+Ext.define('PVE.storage.UploadImage', {
+ extend: 'Ext.window.Window',
+
+ resizable: false,
+
+ modal: true,
+
+ initComponent : function() {
+ /*jslint confusion: true */
+ var me = this;
+
+ var xhr;
+
+ if (!me.nodename) {
+ throw "no node name specified";
+ }
+
+ if (!me.vmid) {
+ throw "no vm ID specified";
+ }
+
+ if (!me.disk) {
+ throw "no disk specified";
+ }
+
+ var baseurl = '/nodes/' + me.nodename + '/qemu/' + me.vmid + '/upload_image';
+
+ var pbar = Ext.create('Ext.ProgressBar', {
+ text: 'Ready',
+ hidden: true
+ });
+
+ me.formPanel = Ext.create('Ext.form.Panel', {
+ method: 'POST',
+ waitMsgTarget: true,
+ bodyPadding: 10,
+ border: false,
+ width: 300,
+ fieldDefaults: {
+ labelWidth: 100,
+ anchor: '100%'
+ },
+ items: [
+ { // XXX erlaubte dateiendungen angeben
+ xtype: 'filefield',
+ name: 'filename',
+ buttonText: gettext('Select File...'),
+ allowBlank: false,
+ regex: /\.(raw|raw\.gz|qcow|qcow\.gz|qcow2|qcow2\.gz|cow|cow\.gz|vdi|vdi\.gz|vmdk|vmdk\.gz|vpc|vpc\.gz|cloop|cloop\.gz)$/,
+ regexText: 'Only image or gzipped image files allowed'
+ },
+ pbar
+ ]
+ });
+
+ var form = me.formPanel.getForm();
+
+ var doStandardSubmit = function() {
+ form.submit({
+ url: "/api2/htmljs" + baseurl,
+ waitMsg: gettext('Uploading file...'),
+ success: function(f, action) {
+ me.close();
+ },
+ failure: function(f, action) {
+ var msg = PVE.Utils.extractFormActionError(action);
+ Ext.Msg.alert(gettext('Error'), msg);
+ }
+ });
+ };
+
+ var updateProgress = function(per, bytes) {
+ var text = (per * 100).toFixed(2) + '%';
+ if (bytes) {
+ text += " (" + PVE.Utils.format_size(bytes) + ')';
+ }
+ pbar.updateProgress(per, text);
+ };
+
+ var abortBtn = Ext.create('Ext.Button', {
+ text: gettext('Abort'),
+ disabled: true,
+ handler: function() {
+ me.close();
+ }
+ });
+
+ var submitBtn = Ext.create('Ext.Button', {
+ text: gettext('Upload'),
+ disabled: true,
+ handler: function(button) {
+ var fd;
+ try {
+ fd = new FormData();
+ } catch (err) {
+ doStandardSubmit();
+ return;
+ }
+
+ button.setDisabled(true);
+ abortBtn.setDisabled(false);
+
+ fd.append('disk', me.disk);
+
+ field = form.findField('filename');
+ var file = field.fileInputEl.dom;
+ fd.append("filename", file.files[0]);
+ field.setDisabled(true);
+
+ pbar.setVisible(true);
+ updateProgress(0);
+
+ xhr = new XMLHttpRequest();
+
+ xhr.addEventListener("load", function(e) {
+ if (xhr.status == 200) {
+ me.close();
+ } else {
+ var msg = gettext('Error') + " " + xhr.status.toString() + ": " + Ext.htmlEncode(xhr.statusText);
+ var result = Ext.decode(xhr.responseText);
+ result.message = msg;
+ var htmlStatus = PVE.Utils.extractRequestError(result, true);
+ Ext.Msg.alert(gettext('Error'), htmlStatus, function(btn) {
+ me.close();
+ });
+
+ }
+ }, false);
+
+ xhr.addEventListener("error", function(e) {
+ var msg = "Error " + e.target.status.toString() + " occurred while receiving the document.";
+ Ext.Msg.alert(gettext('Error'), msg, function(btn) {
+ me.close();
+ });
+ });
+
+ xhr.upload.addEventListener("progress", function(evt) {
+ if (evt.lengthComputable) {
+ var percentComplete = evt.loaded / evt.total;
+ updateProgress(percentComplete, evt.loaded);
+ }
+ }, false);
+
+ xhr.open("POST", "/api2/json" + baseurl, true);
+ xhr.send(fd);
+ }
+ });
+
+ form.on('validitychange', function(f, valid) {
+ submitBtn.setDisabled(!valid);
+ });
+
+ Ext.applyIf(me, {
+ title: gettext('Upload'),
+ items: me.formPanel,
+ buttons: [ abortBtn, submitBtn ],
+ listeners: {
+ close: function() {
+ if (xhr) {
+ xhr.abort();
+ }
+ }
+ }
+ });
+
+ me.callParent();
+ }
+});
--
2.1.4
More information about the pve-devel
mailing list