From mboxrd@z Thu Jan 1 00:00:00 1970 Return-Path: Received: from firstgate.proxmox.com (firstgate.proxmox.com [212.224.123.68]) (using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits) key-exchange X25519 server-signature RSA-PSS (2048 bits)) (No client certificate requested) by lists.proxmox.com (Postfix) with ESMTPS id 50B267C567 for ; Fri, 5 Nov 2021 09:12:53 +0100 (CET) Received: from firstgate.proxmox.com (localhost [127.0.0.1]) by firstgate.proxmox.com (Proxmox) with ESMTP id 4EBBD82CE for ; Fri, 5 Nov 2021 09:12:53 +0100 (CET) Received: from proxmox-new.maurer-it.com (proxmox-new.maurer-it.com [94.136.29.106]) (using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits) key-exchange X25519 server-signature RSA-PSS (2048 bits) server-digest SHA256) (No client certificate requested) by firstgate.proxmox.com (Proxmox) with ESMTPS id 2796827FF4 for ; Fri, 5 Nov 2021 09:12:51 +0100 (CET) Received: from proxmox-new.maurer-it.com (localhost.localdomain [127.0.0.1]) by proxmox-new.maurer-it.com (Proxmox) with ESMTP id E9B9545E5C; Fri, 5 Nov 2021 09:12:50 +0100 (CET) Message-ID: <0cf7b403-a322-35ee-286e-64e1e132b066@proxmox.com> Date: Fri, 5 Nov 2021 09:12:49 +0100 MIME-Version: 1.0 User-Agent: Mozilla/5.0 (X11; Linux x86_64; rv:95.0) Gecko/20100101 Thunderbird/95.0 Content-Language: en-US To: Proxmox VE development discussion , Lorenz Stechauner References: <20210831101637.3080902-1-l.stechauner@proxmox.com> <20210831101637.3080902-7-l.stechauner@proxmox.com> From: Dominik Csapak In-Reply-To: <20210831101637.3080902-7-l.stechauner@proxmox.com> Content-Type: text/plain; charset=UTF-8; format=flowed Content-Transfer-Encoding: 7bit X-SPAM-LEVEL: Spam detection results: 0 AWL 1.286 Adjusted score from AWL reputation of From: address BAYES_00 -1.9 Bayes spam probability is 0 to 1% KAM_DMARC_STATUS 0.01 Test Rule for DKIM or SPF Failure with Strict Alignment NICE_REPLY_A -2.093 Looks like a legit reply (A) SPF_HELO_NONE 0.001 SPF: HELO does not publish an SPF Record SPF_PASS -0.001 SPF: sender matches SPF record Subject: Re: [pve-devel] [PATCH v4 manager 1/5] ui: move upload window into UploadToStorage.js X-BeenThere: pve-devel@lists.proxmox.com X-Mailman-Version: 2.1.29 Precedence: list List-Id: Proxmox VE development discussion List-Unsubscribe: , List-Archive: List-Post: List-Help: List-Subscribe: , X-List-Received-Date: Fri, 05 Nov 2021 08:12:53 -0000 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 Tested-by: Dominik Csapak On 8/31/21 12:16, Lorenz Stechauner wrote: > Signed-off-by: Lorenz Stechauner > --- > 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(); > + }, > +}); >