ui: hdmove: modernize/refactor

Signed-off-by: Aaron Lauterer <a.lauterer@proxmox.com>
Reviewed-by: Fabian Ebner <f.ebner@proxmox.com>

diff --git a/www/manager6/qemu/HDMove.js b/www/manager6/qemu/HDMove.js
index 181b7bdc734084f29c04242f10b7b2ec9003c5eb..bddbbb20afe4d9b3f7a76eaa34c8214c9e8e85b7 100644 (file)
--- a/www/manager6/qemu/HDMove.js
+++ b/www/manager6/qemu/HDMove.js
@@ -1,48 +1,97 @@
 Ext.define('PVE.window.HDMove', {
-    extend: 'Ext.window.Window',
+    extend: 'Proxmox.window.Edit',
+    mixins: ['Proxmox.Mixin.CBind'],
 
     resizable: false,
+    modal: true,
+    width: 350,
+    border: false,
+    layout: 'fit',
+    showReset: false,
+    showProgress: true,
+    method: 'POST',
+
+    cbindData: function() {
+       let me = this;
+       return {
+           disk: me.disk,
+           isQemu: me.type === 'qemu',
+           nodename: me.nodename,
+           url: () => {
+               let endpoint = me.type === 'qemu' ? 'move_disk' : 'move_volume';
+               return `/nodes/${me.nodename}/${me.type}/${me.vmid}/${endpoint}`;
+           },
+       };
+    },
+
+    cbind: {
+       title: get => get('isQemu') ? gettext("Move disk") : gettext('Move Volume'),
+       submitText: get => get('title'),
+       qemu: '{isQemu}',
+       url: '{url}',
+    },
 
+    getValues: function() {
+       let me = this;
+       let values = me.formPanel.getForm().getValues();
 
-    move_disk: function(disk, storage, format, delete_disk) {
-       var me = this;
-       var qemu = me.type === 'qemu';
-       var params = {};
-       params.storage = storage;
-       params[qemu ? 'disk':'volume'] = disk;
+       let params = {
+           storage: values.hdstorage,
+       };
+       params[me.qemu ? 'disk' : 'volume'] = me.disk;
 
-       if (format && qemu) {
-           params.format = format;
+       if (values.diskformat && me.qemu) {
+           params.format = values.diskformat;
        }
 
-       if (delete_disk) {
+       if (values.deleteDisk) {
            params.delete = 1;
        }
+       return params;
+    },
 
-       var url = '/nodes/' + me.nodename + '/' + me.type + '/' + me.vmid + '/';
-       url += qemu ? 'move_disk' : 'move_volume';
-
-       Proxmox.Utils.API2Request({
-           params: params,
-           url: url,
-           waitMsgTarget: me,
-           method: 'POST',
-           failure: function(response, opts) {
-               Ext.Msg.alert('Error', response.htmlStatus);
-           },
-           success: function(response, options) {
-               var upid = response.result.data;
-               var win = Ext.create('Proxmox.window.TaskViewer', {
-                   upid: upid,
-               });
-               win.show();
-               win.on('destroy', function() { me.close(); });
+    items: [
+       {
+           xtype: 'form',
+           reference: 'moveFormPanel',
+           border: false,
+           fieldDefaults: {
+               labelWidth: 100,
+               anchor: '100%',
            },
-       });
-    },
+           items: [
+               {
+                   xtype: 'displayfield',
+                   cbind: {
+                       name: get => get('isQemu') ? 'disk' : 'volume',
+                       fieldLabel: get => get('isQemu') ? gettext('Disk') : gettext('Mount Point'),
+                       value: '{disk}',
+                   },
+                   allowBlank: false,
+               },
+               {
+                   xtype: 'pveDiskStorageSelector',
+                   storageLabel: gettext('Target Storage'),
+                   cbind: {
+                       nodename: '{nodename}',
+                       storageContent: get => get('isQemu') ? 'images' : 'rootdir',
+                       hideFormat: get => get('disk') === 'tpmstate0',
+                   },
+                   hideSize: true,
+               },
+               {
+                   xtype: 'proxmoxcheckbox',
+                   fieldLabel: gettext('Delete source'),
+                   name: 'deleteDisk',
+                   uncheckedValue: 0,
+                   checked: false,
+               },
+           ],
+       },
+    ],
 
     initComponent: function() {
-       var me = this;
+       let me = this;
 
        if (!me.nodename) {
            throw "no node name specified";
@@ -53,81 +102,9 @@ Ext.define('PVE.window.HDMove', {
        }
 
        if (!me.type) {
-           me.type = 'qemu';
+           throw "no type specified";
        }
 
-       var qemu = me.type === 'qemu';
-
-        var items = [
-            {
-                xtype: 'displayfield',
-                name: qemu ? 'disk' : 'volume',
-                value: me.disk,
-                fieldLabel: qemu ? gettext('Disk') : gettext('Mount Point'),
-                vtype: 'StorageId',
-                allowBlank: false,
-            },
-        ];
-
-       items.push({
-           xtype: 'pveDiskStorageSelector',
-           storageLabel: gettext('Target Storage'),
-           nodename: me.nodename,
-           storageContent: qemu ? 'images' : 'rootdir',
-           hideSize: true,
-           hideFormat: me.disk === 'tpmstate0',
-       });
-
-       items.push({
-           xtype: 'proxmoxcheckbox',
-           fieldLabel: gettext('Delete source'),
-           name: 'deleteDisk',
-           uncheckedValue: 0,
-           checked: false,
-       });
-
-       me.formPanel = Ext.create('Ext.form.Panel', {
-           bodyPadding: 10,
-           border: false,
-           fieldDefaults: {
-               labelWidth: 100,
-               anchor: '100%',
-           },
-           items: items,
-       });
-
-       var form = me.formPanel.getForm();
-
-       var submitBtn;
-
-       me.title = qemu ? gettext("Move disk") : gettext('Move Volume');
-       submitBtn = Ext.create('Ext.Button', {
-           text: me.title,
-           handler: function() {
-               if (form.isValid()) {
-                   var values = form.getValues();
-                   me.move_disk(me.disk, values.hdstorage, values.diskformat,
-                                values.deleteDisk);
-               }
-           },
-       });
-
-       Ext.apply(me, {
-           modal: true,
-           width: 350,
-           border: false,
-           layout: 'fit',
-           buttons: [submitBtn],
-           items: [me.formPanel],
-       });
-
-
        me.callParent();
-
-       me.mon(me.formPanel, 'validitychange', function(fp, isValid) {
-           submitBtn.setDisabled(!isValid);
-       });
-
-       me.formPanel.isValid();
     },
 });

diff --git a/www/manager6/qemu/HardwareView.js b/www/manager6/qemu/HardwareView.js
index 749d355f024e216ba24e61a14ce9d9956efa189d..3974d94982290b7efbb9b71657ca68098acb2a85 100644 (file)
--- a/www/manager6/qemu/HardwareView.js
+++ b/www/manager6/qemu/HardwareView.js
@@ -392,6 +392,7 @@ Ext.define('PVE.qemu.HardwareView', {
                    disk: rec.data.key,
                    nodename: nodename,
                    vmid: vmid,
+                   type: 'qemu',
                    listeners: {
                        destroy: () => me.reload(),
                    },