[pve-devel] [PATCH v4 manager 1/5] ui: move upload window into UploadToStorage.js

Dominik Csapak d.csapak at proxmox.com
Fri Nov 5 09:12:49 CET 2021


Looks mostly ok, some small nits (replied to the separate patches)
those could also be sent as follow ups

Aside from those things

Reviewed-by: Dominik Csapak <d.csapak at proxmox.com>
Tested-by: Dominik Csapak <d.csapak at proxmox.com>


On 8/31/21 12:16, Lorenz Stechauner wrote:
> Signed-off-by: Lorenz Stechauner <l.stechauner at proxmox.com>
> ---
>   www/manager6/Makefile                  |   1 +
>   www/manager6/storage/ContentView.js    | 195 +------------------------
>   www/manager6/window/UploadToStorage.js | 192 ++++++++++++++++++++++++
>   3 files changed, 194 insertions(+), 194 deletions(-)
>   create mode 100644 www/manager6/window/UploadToStorage.js
> 
> diff --git a/www/manager6/Makefile b/www/manager6/Makefile
> index 75d355a5..552e842b 100644
> --- a/www/manager6/Makefile
> +++ b/www/manager6/Makefile
> @@ -106,6 +106,7 @@ JSSRC= 							\
>   	window/Snapshot.js				\
>   	window/StartupEdit.js				\
>   	window/DownloadUrlToStorage.js 			\
> +	window/UploadToStorage.js 			\
>   	window/Wizard.js				\
>   	ha/Fencing.js					\
>   	ha/GroupEdit.js					\
> diff --git a/www/manager6/storage/ContentView.js b/www/manager6/storage/ContentView.js
> index 3f5b686b..ca0ad664 100644
> --- a/www/manager6/storage/ContentView.js
> +++ b/www/manager6/storage/ContentView.js
> @@ -1,196 +1,3 @@
> -Ext.define('PVE.storage.Upload', {
> -    extend: 'Ext.window.Window',
> -    alias: 'widget.pveStorageUpload',
> -
> -    resizable: false,
> -
> -    modal: true,
> -
> -    initComponent: function() {
> -        var me = this;
> -
> -	if (!me.nodename) {
> -	    throw "no node name specified";
> -	}
> -	if (!me.storage) {
> -	    throw "no storage ID specified";
> -	}
> -
> -	let baseurl = `/nodes/${me.nodename}/storage/${me.storage}/upload`;
> -
> -	let pbar = Ext.create('Ext.ProgressBar', {
> -            text: 'Ready',
> -	    hidden: true,
> -	});
> -
> -	let acceptedExtensions = {
> -	    iso: ".img, .iso",
> -	    vztmpl: ".tar.gz, .tar.xz",
> -	};
> -
> -	let defaultContent = me.contents[0] || '';
> -
> -	let fileField = Ext.create('Ext.form.field.File', {
> -	    name: 'filename',
> -	    buttonText: gettext('Select File...'),
> -	    allowBlank: false,
> -	    setAccept: function(content) {
> -		let acceptString = acceptedExtensions[content] || '';
> -		this.fileInputEl.set({
> -		    accept: acceptString,
> -		});
> -	    },
> -	    listeners: {
> -		afterrender: function(cmp) {
> -		    cmp.setAccept(defaultContent);
> -		},
> -	    },
> -	});
> -
> -	me.formPanel = Ext.create('Ext.form.Panel', {
> -	    method: 'POST',
> -	    waitMsgTarget: true,
> -	    bodyPadding: 10,
> -	    border: false,
> -	    width: 300,
> -	    fieldDefaults: {
> -		labelWidth: 100,
> -		anchor: '100%',
> -            },
> -	    items: [
> -		{
> -		    xtype: 'pveContentTypeSelector',
> -		    cts: me.contents,
> -		    fieldLabel: gettext('Content'),
> -		    name: 'content',
> -		    value: defaultContent,
> -		    allowBlank: false,
> -		    listeners: {
> -			change: function(cmp, newValue, oldValue) {
> -			    fileField.setAccept(newValue);
> -			},
> -		    },
> -		},
> -		fileField,
> -		pbar,
> -	    ],
> -	});
> -
> -	let form = me.formPanel.getForm();
> -
> -	let 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);
> -		},
> -	    });
> -	};
> -
> -	let updateProgress = function(per, bytes) {
> -	    var text = (per * 100).toFixed(2) + '%';
> -	    if (bytes) {
> -		text += " (" + Proxmox.Utils.format_size(bytes) + ')';
> -	    }
> -	    pbar.updateProgress(per, text);
> -	};
> -
> -	let abortBtn = Ext.create('Ext.Button', {
> -	    text: gettext('Abort'),
> -	    disabled: true,
> -	    handler: function() {
> -		me.close();
> -	    },
> -	});
> -
> -	let 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);
> -
> -		var field = form.findField('content');
> -		fd.append("content", field.getValue());
> -		field.setDisabled(true);
> -
> -		field = form.findField('filename');
> -		var file = field.fileInputEl.dom;
> -		fd.append("filename", file.files[0]);
> -		field.setDisabled(true);
> -
> -		pbar.setVisible(true);
> -		updateProgress(0);
> -
> -		let xhr = new XMLHttpRequest();
> -		me.xhr = xhr;
> -
> -		xhr.addEventListener("load", function(e) {
> -		    if (xhr.status === 200) {
> -			me.close();
> -			return;
> -		    }
> -		    let err = Ext.htmlEncode(xhr.statusText);
> -		    let msg = `${gettext('Error')} ${xhr.status.toString()}: ${err}`;
> -		    if (xhr.responseText !== "") {
> -			let result = Ext.decode(xhr.responseText);
> -			result.message = msg;
> -			msg = Proxmox.Utils.extractRequestError(result, true);
> -		    }
> -		    Ext.Msg.alert(gettext('Error'), msg, btn => me.close());
> -		}, false);
> -
> -		xhr.addEventListener("error", function(e) {
> -		    let err = e.target.status.toString();
> -		    let msg = `Error '${err}' occurred while receiving the document.`;
> -		    Ext.Msg.alert(gettext('Error'), msg, btn => me.close());
> -		});
> -
> -		xhr.upload.addEventListener("progress", function(evt) {
> -		    if (evt.lengthComputable) {
> -			let percentComplete = evt.loaded / evt.total;
> -			updateProgress(percentComplete, evt.loaded);
> -		    }
> -		}, false);
> -
> -		xhr.open("POST", `/api2/json${baseurl}`, true);
> -		xhr.send(fd);
> -	    },
> -	});
> -
> -	form.on('validitychange', (f, valid) => submitBtn.setDisabled(!valid));
> -
> -	Ext.apply(me, {
> -	    title: gettext('Upload'),
> -	    items: me.formPanel,
> -	    buttons: [abortBtn, submitBtn],
> -	    listeners: {
> -		close: function() {
> -		    if (me.xhr) {
> -			me.xhr.abort();
> -			delete me.xhr;
> -		    }
> -		},
> -	    },
> -	});
> -
> -        me.callParent();
> -    },
> -});
> -
>   Ext.define('PVE.storage.ContentView', {
>       extend: 'Ext.grid.GridPanel',
>   
> @@ -259,7 +66,7 @@ Ext.define('PVE.storage.ContentView', {
>   		    text: gettext('Upload'),
>   		    disabled: !me.enableUploadButton,
>   		    handler: function() {
> -			Ext.create('PVE.storage.Upload', {
> +			Ext.create('PVE.window.UploadToStorage', {
>   			    nodename: nodename,
>   			    storage: storage,
>   			    contents: [content],
> diff --git a/www/manager6/window/UploadToStorage.js b/www/manager6/window/UploadToStorage.js
> new file mode 100644
> index 00000000..3c35020a
> --- /dev/null
> +++ b/www/manager6/window/UploadToStorage.js
> @@ -0,0 +1,192 @@
> +Ext.define('PVE.window.UploadToStorage', {
> +    extend: 'Ext.window.Window',
> +    alias: 'widget.pveStorageUpload',
> +
> +    resizable: false,
> +
> +    modal: true,
> +
> +    initComponent: function() {
> +        var me = this;
> +
> +	if (!me.nodename) {
> +	    throw "no node name specified";
> +	}
> +	if (!me.storage) {
> +	    throw "no storage ID specified";
> +	}
> +
> +	let baseurl = `/nodes/${me.nodename}/storage/${me.storage}/upload`;
> +
> +	let pbar = Ext.create('Ext.ProgressBar', {
> +            text: 'Ready',
> +	    hidden: true,
> +	});
> +
> +	let acceptedExtensions = {
> +	    iso: ".img, .iso",
> +	    vztmpl: ".tar.gz, .tar.xz",
> +	};
> +
> +	let defaultContent = me.contents[0] || '';
> +
> +	let fileField = Ext.create('Ext.form.field.File', {
> +	    name: 'filename',
> +	    buttonText: gettext('Select File...'),
> +	    allowBlank: false,
> +	    setAccept: function(content) {
> +		let acceptString = acceptedExtensions[content] || '';
> +		this.fileInputEl.set({
> +		    accept: acceptString,
> +		});
> +	    },
> +	    listeners: {
> +		afterrender: function(cmp) {
> +		    cmp.setAccept(defaultContent);
> +		},
> +	    },
> +	});
> +
> +	me.formPanel = Ext.create('Ext.form.Panel', {
> +	    method: 'POST',
> +	    waitMsgTarget: true,
> +	    bodyPadding: 10,
> +	    border: false,
> +	    width: 300,
> +	    fieldDefaults: {
> +		labelWidth: 100,
> +		anchor: '100%',
> +            },
> +	    items: [
> +		{
> +		    xtype: 'pveContentTypeSelector',
> +		    cts: me.contents,
> +		    fieldLabel: gettext('Content'),
> +		    name: 'content',
> +		    value: defaultContent,
> +		    allowBlank: false,
> +		    listeners: {
> +			change: function(cmp, newValue, oldValue) {
> +			    fileField.setAccept(newValue);
> +			},
> +		    },
> +		},
> +		fileField,
> +		pbar,
> +	    ],
> +	});
> +
> +	let form = me.formPanel.getForm();
> +
> +	let 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);
> +		},
> +	    });
> +	};
> +
> +	let updateProgress = function(per, bytes) {
> +	    var text = (per * 100).toFixed(2) + '%';
> +	    if (bytes) {
> +		text += " (" + Proxmox.Utils.format_size(bytes) + ')';
> +	    }
> +	    pbar.updateProgress(per, text);
> +	};
> +
> +	let abortBtn = Ext.create('Ext.Button', {
> +	    text: gettext('Abort'),
> +	    disabled: true,
> +	    handler: function() {
> +		me.close();
> +	    },
> +	});
> +
> +	let 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);
> +
> +		var field = form.findField('content');
> +		fd.append("content", field.getValue());
> +		field.setDisabled(true);
> +
> +		field = form.findField('filename');
> +		var file = field.fileInputEl.dom;
> +		fd.append("filename", file.files[0]);
> +		field.setDisabled(true);
> +
> +		pbar.setVisible(true);
> +		updateProgress(0);
> +
> +		let xhr = new XMLHttpRequest();
> +		me.xhr = xhr;
> +
> +		xhr.addEventListener("load", function(e) {
> +		    if (xhr.status === 200) {
> +			me.close();
> +			return;
> +		    }
> +		    let err = Ext.htmlEncode(xhr.statusText);
> +		    let msg = `${gettext('Error')} ${xhr.status.toString()}: ${err}`;
> +		    if (xhr.responseText !== "") {
> +			let result = Ext.decode(xhr.responseText);
> +			result.message = msg;
> +			msg = Proxmox.Utils.extractRequestError(result, true);
> +		    }
> +		    Ext.Msg.alert(gettext('Error'), msg, btn => me.close());
> +		}, false);
> +
> +		xhr.addEventListener("error", function(e) {
> +		    let err = e.target.status.toString();
> +		    let msg = `Error '${err}' occurred while receiving the document.`;
> +		    Ext.Msg.alert(gettext('Error'), msg, btn => me.close());
> +		});
> +
> +		xhr.upload.addEventListener("progress", function(evt) {
> +		    if (evt.lengthComputable) {
> +			let percentComplete = evt.loaded / evt.total;
> +			updateProgress(percentComplete, evt.loaded);
> +		    }
> +		}, false);
> +
> +		xhr.open("POST", `/api2/json${baseurl}`, true);
> +		xhr.send(fd);
> +	    },
> +	});
> +
> +	form.on('validitychange', (f, valid) => submitBtn.setDisabled(!valid));
> +
> +	Ext.apply(me, {
> +	    title: gettext('Upload'),
> +	    items: me.formPanel,
> +	    buttons: [abortBtn, submitBtn],
> +	    listeners: {
> +		close: function() {
> +		    if (me.xhr) {
> +			me.xhr.abort();
> +			delete me.xhr;
> +		    }
> +		},
> +	    },
> +	});
> +
> +        me.callParent();
> +    },
> +});
> 





More information about the pve-devel mailing list