[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