[pve-devel] [PATCH manager 1/2] Convert the VMIDSelector to a generic GuestIDSelector

Emmanuel Kasper e.kasper at proxmox.com
Tue Dec 13 10:07:40 CET 2016


This allows to display a 'CT', a 'VM', or a 'CT/VM' label
to be displayed, depending on the context.

Currently when restoring a CT backup or creating a CT via the
wizard, we are asked to enter a  *VM* ID, which is confusing.
---
 www/manager6/Makefile                |  2 +-
 www/manager6/form/GuestIDSelector.js | 75 ++++++++++++++++++++++++++++++++++++
 www/manager6/form/VMIDSelector.js    | 56 ---------------------------
 www/manager6/ha/ResourceEdit.js      | 12 +++---
 www/manager6/ha/Resources.js         |  3 +-
 www/manager6/lxc/CreateWizard.js     |  7 ++--
 www/manager6/qemu/Clone.js           |  5 ++-
 www/manager6/qemu/CreateWizard.js    |  5 ++-
 www/manager6/window/Restore.js       | 25 ++++++++----
 9 files changed, 112 insertions(+), 78 deletions(-)
 create mode 100644 www/manager6/form/GuestIDSelector.js
 delete mode 100644 www/manager6/form/VMIDSelector.js

diff --git a/www/manager6/Makefile b/www/manager6/Makefile
index ea21c5d..ae0abe2 100644
--- a/www/manager6/Makefile
+++ b/www/manager6/Makefile
@@ -36,7 +36,7 @@ JSSRC= 				                 	\
 	form/GroupSelector.js				\
 	form/UserSelector.js				\
 	form/RoleSelector.js				\
-	form/VMIDSelector.js				\
+	form/GuestIDSelector.js				\
 	form/MemoryField.js				\
 	form/NetworkCardSelector.js			\
 	form/DiskFormatSelector.js			\
diff --git a/www/manager6/form/GuestIDSelector.js b/www/manager6/form/GuestIDSelector.js
new file mode 100644
index 0000000..819cef9
--- /dev/null
+++ b/www/manager6/form/GuestIDSelector.js
@@ -0,0 +1,75 @@
+Ext.define('PVE.form.GuestIDSelector', {
+    extend: 'Ext.form.field.Number',
+    alias: 'widget.pveGuestIDSelector',
+
+    allowBlank: false,
+
+    minValue: 100,
+
+    maxValue: 999999999,
+
+    validateExists: undefined,
+
+    loadNextFreeID: false,
+
+    guestType: undefined,
+
+    initComponent: function() {
+	var me = this;
+	var label = '{0} ID';
+	var unknownID = 'This {0} ID does not exists';
+	var inUseID = 'This {0} ID is already in use';
+
+	if (me.guestType === 'lxc') {
+	    label = Ext.String.format(label, 'CT');
+	    unknownID = Ext.String.format(gettext(unknownID), 'CT');
+	    inUseID = Ext.String.format(gettext(inUseID), 'CT');
+	} else if (me.guestType === 'qemu') {
+	    label = Ext.String.format(label, 'VM');
+	    unknownID = Ext.String.format(gettext(unknownID), 'VM');
+	    inUseID = Ext.String.format(gettext(inUseID), 'VM');
+	} else {
+	    label = Ext.String.format(label, 'CT/VM');
+	    unknownID = Ext.String.format(gettext(unknownID), 'CT/VM');
+	    inUseID = Ext.String.format(gettext(inUseID), 'CT/VM');
+	}
+
+	Ext.apply(me, {
+	    fieldLabel: label,
+	    listeners: {
+		'change': function(field, newValue, oldValue) {
+		    if (!Ext.isDefined(me.validateExists)) {
+			return;
+		    }
+		    PVE.Utils.API2Request({
+			params: { vmid: newValue },
+			url: '/cluster/nextid',
+			method: 'GET',
+			success: function(response, opts) {
+			    if (me.validateExists === true) {
+				me.markInvalid(unknownID);
+			    }
+			},
+			failure: function(response, opts) {
+			    if (me.validateExists === false) {
+				me.markInvalid(inUseID);
+			    }
+			}
+		    });
+		}
+	    }
+	});
+
+        me.callParent();
+
+	if (me.loadNextFreeID) {
+	    PVE.Utils.API2Request({
+		url: '/cluster/nextid',
+		method: 'GET',
+		success: function(response, opts) {
+		    me.setRawValue(response.result.data);
+		}
+	    });
+	}
+    }
+});
diff --git a/www/manager6/form/VMIDSelector.js b/www/manager6/form/VMIDSelector.js
deleted file mode 100644
index 92a1781..0000000
--- a/www/manager6/form/VMIDSelector.js
+++ /dev/null
@@ -1,56 +0,0 @@
-Ext.define('PVE.form.VMIDSelector', {
-    extend: 'Ext.form.field.Number',
-    alias: 'widget.pveVMIDSelector',
-
-    allowBlank: false,
-  
-    minValue: 100,
-
-    maxValue: 999999999,
-
-    validateExists: undefined,
-
-    loadNextFreeVMID: false,
-
-    initComponent: function() {
-        var me = this;
-
-	Ext.applyIf(me, {
-	    fieldLabel: 'VM ID',
-	    listeners: {
-		'change': function(field, newValue, oldValue) {
-		    if (!Ext.isDefined(me.validateExists)) {
-			return;
-		    }
-		    PVE.Utils.API2Request({
-			params: { vmid: newValue },
-			url: '/cluster/nextid',
-			method: 'GET',
-			success: function(response, opts) {
-			    if (me.validateExists === true) {
-				me.markInvalid(gettext('This VM ID does not exists'));
-			    }
-			},
-			failure: function(response, opts) {
-			    if (me.validateExists === false) {
-				me.markInvalid(gettext('This VM ID is already in use'));
-			    }
-			}
-		    });
-		}
-	    }
-	});
-
-        me.callParent();
-
-	if (me.loadNextFreeVMID) {
-	    PVE.Utils.API2Request({
-		url: '/cluster/nextid',
-		method: 'GET',
-		success: function(response, opts) {
-		    me.setRawValue(response.result.data);
-		}
-	    });
-	}
-    }
-});
diff --git a/www/manager6/ha/ResourceEdit.js b/www/manager6/ha/ResourceEdit.js
index 8dbc361..4dc7474 100644
--- a/www/manager6/ha/ResourceEdit.js
+++ b/www/manager6/ha/ResourceEdit.js
@@ -33,11 +33,11 @@ Ext.define('PVE.ha.VMResourceInputPanel', {
 
 	me.column1 = [
 	    {
-		xtype: me.vmid ? 'displayfield' : 'pveVMIDSelector',
+		xtype: me.vmid ? 'displayfield' : 'pveGuestIDSelector',
 		name: 'vmid',
-		fieldLabel: 'VM ID',
+		fieldLabel: (me.vmid && me.guestType === 'ct') ? 'CT' : 'VM',
 		value: me.vmid,
-		loadNextFreeVMID: false,
+		loadNextGuestID: false,
 		validateExists: true
 	    },
 	    {
@@ -111,6 +111,7 @@ Ext.define('PVE.ha.VMResourceEdit', {
     extend: 'PVE.window.Edit',
 
     vmid: undefined,
+    guestType: undefined,
 
     initComponent : function() {
 	var me = this;
@@ -127,11 +128,12 @@ Ext.define('PVE.ha.VMResourceEdit', {
 
 	var ipanel = Ext.create('PVE.ha.VMResourceInputPanel', {
 	    create: me.create,
-	    vmid: me.vmid
+	    vmid: me.vmid,
+	    guestType: me.guestType
 	});
 
 	Ext.apply(me, {
-            subject: gettext('VM Resource'),
+            subject: gettext('CT/VM Resource'),
 	    isAdd: true,
 	    items: [ ipanel ]
 	});
diff --git a/www/manager6/ha/Resources.js b/www/manager6/ha/Resources.js
index 16151cc..8d35afc 100644
--- a/www/manager6/ha/Resources.js
+++ b/www/manager6/ha/Resources.js
@@ -56,10 +56,11 @@ Ext.define('PVE.ha.ResourcesView', {
 	    if (res[1] !== 'vm' && res[1] !== 'ct') {
 		return;
 	    }
-	    
+	    var guestType = res[1];
 	    var vmid = res[2];
 	    
             var win = Ext.create('PVE.ha.VMResourceEdit',{
+                guestType: guestType,
                 vmid: vmid
             });
             win.on('destroy', reload);
diff --git a/www/manager6/lxc/CreateWizard.js b/www/manager6/lxc/CreateWizard.js
index df2b633..da80f81 100644
--- a/www/manager6/lxc/CreateWizard.js
+++ b/www/manager6/lxc/CreateWizard.js
@@ -194,10 +194,11 @@ Ext.define('PVE.lxc.CreateWizard', {
 			    }
 			},
 			{
-			    xtype: 'pveVMIDSelector',
-			    name: 'vmid',
+			    xtype: 'pveGuestIDSelector',
+			    name: 'vmid', // backend only knows vmid
+			    guestType: 'lxc',
 			    value: '',
-			    loadNextFreeVMID: true,
+			    loadNextFreeID: true,
 			    validateExists: false
 			},
 			{
diff --git a/www/manager6/qemu/Clone.js b/www/manager6/qemu/Clone.js
index 617b66e..83edc5c 100644
--- a/www/manager6/qemu/Clone.js
+++ b/www/manager6/qemu/Clone.js
@@ -179,10 +179,11 @@ Ext.define('PVE.window.Clone', {
 
 	col1.push(
 	    {
-                xtype: 'pveVMIDSelector',
+                xtype: 'pveGuestIDSelector',
                 name: 'newvmid',
+                guestType: 'qemu',
                 value: '',
-                loadNextFreeVMID: true,
+                loadNextGuestVMID: true,
                 validateExists: false
             },
 	    {
diff --git a/www/manager6/qemu/CreateWizard.js b/www/manager6/qemu/CreateWizard.js
index 5e0a75c..0a1d2c0 100644
--- a/www/manager6/qemu/CreateWizard.js
+++ b/www/manager6/qemu/CreateWizard.js
@@ -62,10 +62,11 @@ Ext.define('PVE.qemu.CreateWizard', {
 			    }
 			},
 			{
-			    xtype: 'pveVMIDSelector',
+			    xtype: 'pveGuestIDSelector',
 			    name: 'vmid',
+			    guestType: 'qemu',
 			    value: '',
-			    loadNextFreeVMID: true,
+			    loadNextFreeID: true,
 			    validateExists: false
 			},
 			{
diff --git a/www/manager6/window/Restore.js b/www/manager6/window/Restore.js
index 9499795..3a6550e 100644
--- a/www/manager6/window/Restore.js
+++ b/www/manager6/window/Restore.js
@@ -27,6 +27,22 @@ Ext.define('PVE.window.Restore', {
 	    allowBlank: true
 	});
 
+	var IDfield;
+	if (me.vmid) {
+	    IDfield = Ext.create('Ext.form.field.Display', {
+		name: 'vmid',
+		value: me.vmid,
+		fieldLabel: (me.vmtype === 'lxc') ? 'CT' : 'VM'
+	    });
+	} else {
+	    IDfield = Ext.create('PVE.form.GuestIDSelector', {
+		name: 'vmid',
+		guestType: me.vmtype,
+		loadNextGuestID: true,
+		validateExists: false
+	    });
+	}
+
 	me.formPanel = Ext.create('Ext.form.Panel', {
 	    bodyPadding: 10,
 	    border: false,
@@ -41,14 +57,7 @@ Ext.define('PVE.window.Restore', {
 		    fieldLabel: gettext('Source')
 		},
 		storagesel,
-		{
-		    xtype: me.vmid ? 'displayfield' : 'pveVMIDSelector',
-		    name: 'vmid',
-		    fieldLabel: 'VM ID',
-		    value: me.vmid,
-		    loadNextFreeVMID: me.vmid ? false: true,
-		    validateExists: false
-		}
+		IDfield
 	    ]
 	});
 
-- 
2.1.4





More information about the pve-devel mailing list