[pve-devel] [PATCH proxmox-widget-toolkit] add vlan interface support

[Alexandre Derumier]

vlan-raw-device && vlan-id field are only
enabled if interface name is different than interfaceX.Y

I have added a listener on iface,
to enable them live if user want a custom name for vlan interface

Signed-off-by: Alexandre Derumier <aderumier at odiso.com>
---
 Toolkit.js          |  8 ++++++
 Utils.js            |  2 ++
 node/NetworkEdit.js | 67 +++++++++++++++++++++++++++++++++++++++++++--
 node/NetworkView.js | 17 +++++++++++-
 4 files changed, 90 insertions(+), 4 deletions(-)

diff --git a/Toolkit.js b/Toolkit.js
index 538db3a..d837890 100644
--- a/Toolkit.js
+++ b/Toolkit.js
@@ -83,6 +83,14 @@ Ext.apply(Ext.form.field.VTypes, {
     BridgeName: function(v) {
         return (/^vmbr\d{1,4}$/).test(v);
     },
+    VlanName: function(v) {
+       if (Proxmox.Utils.VlanInterface_match.test(v)) {
+         return true;
+       } else if (Proxmox.Utils.Vlan_match.test(v)) {
+         return true;
+       }
+       return true;
+    },
     BridgeNameText: gettext('Format') + ': vmbr<b>N</b>, where 0 <= <b>N</b> <= 9999',
 
     BondName: function(v) {
diff --git a/Utils.js b/Utils.js
index 6d1b24c..e9dcd79 100644
--- a/Utils.js
+++ b/Utils.js
@@ -696,5 +696,7 @@ Ext.define('Proxmox.Utils', { utilities: {
 	me.HostPort_match = new RegExp("^(" + IPV4_REGEXP + "|" + DnsName_REGEXP + ")(:\\d+)?$");
 	me.HostPortBrackets_match = new RegExp("^\\[(?:" + IPV6_REGEXP + "|" + IPV4_REGEXP + "|" + DnsName_REGEXP + ")\\](:\\d+)?$");
 	me.IP6_dotnotation_match = new RegExp("^" + IPV6_REGEXP + "(\\.\\d+)?$");
+        me.Vlan_match = new RegExp('^vlan(\\d+)');
+        me.VlanInterface_match = new RegExp('(\\w+)\\.(\\d+)');
     }
 });
diff --git a/node/NetworkEdit.js b/node/NetworkEdit.js
index ce7e7ae..33fee75 100644
--- a/node/NetworkEdit.js
+++ b/node/NetworkEdit.js
@@ -23,8 +23,8 @@ Ext.define('Proxmox.node.NetworkEdit', {
 	    iface_vtype = 'BondName';
 	} else if (me.iftype === 'eth' && !me.isCreate) {
 	    iface_vtype = 'InterfaceName';
-	} else if (me.iftype === 'vlan' && !me.isCreate) {
-	    iface_vtype = 'InterfaceName';
+	} else if (me.iftype === 'vlan') {
+	    iface_vtype = 'VlanName';
 	} else if (me.iftype === 'OVSBridge') {
 	    iface_vtype = 'BridgeName';
 	} else if (me.iftype === 'OVSBond') {
@@ -96,6 +96,49 @@ Ext.define('Proxmox.node.NetworkEdit', {
 		fieldLabel: gettext('OVS options'),
 		name: 'ovs_options'
 	    });
+	} else if (me.iftype === 'vlan') {
+
+	    if(!me.isCreate) {
+
+                me.disablevlanid = false;
+                me.disablevlanrawdevice = false;
+                me.vlanrawdevicevalue = '';
+                me.vlanidvalue = '';
+
+                if (Proxmox.Utils.VlanInterface_match.test(me.iface)) {
+                   me.disablevlanid = true;
+                   me.disablevlanrawdevice = true;
+                   var arr = Proxmox.Utils.VlanInterface_match.exec(me.iface);
+                   me.vlanrawdevicevalue = arr[1];
+                   me.vlanidvalue = arr[2];
+
+                } else if (Proxmox.Utils.Vlan_match.test(me.iface)) {
+                   me.disablevlanid = true;
+                   var arr = Proxmox.Utils.Vlan_match.exec(me.iface);
+                   me.vlanidvalue = arr[1];
+                }
+           } else {
+
+                me.disablevlanid = true;
+                me.disablevlanrawdevice = true;
+           }
+
+	    column2.push({
+		xtype: 'textfield',
+		fieldLabel: gettext('Vlan raw device'),
+		name: 'vlan-raw-device',
+                value: me.vlanrawdevicevalue,
+		disabled: me.disablevlanrawdevice
+	    });
+
+	    column2.push({
+		xtype: 'pveVlanField',
+		name: 'vlan-id',
+                value: me.vlanidvalue,
+		disabled: me.disablevlanid
+
+	    });
+
 	} else if (me.iftype === 'bond') {
 	    column2.push({
 		xtype: 'textfield',
@@ -200,7 +243,25 @@ Ext.define('Proxmox.node.NetworkEdit', {
 		name: 'iface',
 		value: me.iface,
 		vtype: iface_vtype,
-		allowBlank: false
+		allowBlank: false,
+                listeners: {
+                    change: function(f, value) {
+                        if (me.isCreate && iface_vtype === 'VlanName') {
+                           var vlanidField = me.down('field[name=vlan-id]');
+                           var vlanrawdeviceField = me.down('field[name=vlan-raw-device]');
+                           if (Proxmox.Utils.VlanInterface_match.test(value)) {
+                               vlanidField.setDisabled(true);
+                               vlanrawdeviceField.setDisabled(true);
+                           } else if (Proxmox.Utils.Vlan_match.test(value)) {
+                               vlanidField.setDisabled(true);
+                               vlanrawdeviceField.setDisabled(false);
+                           } else {
+                               vlanidField.setDisabled(false);
+                               vlanrawdeviceField.setDisabled(false);
+                           }
+                        }
+                    }
+                }
 	    }
 	];
 
diff --git a/node/NetworkView.js b/node/NetworkView.js
index 9b3845d..92d7eb8 100644
--- a/node/NetworkView.js
+++ b/node/NetworkView.js
@@ -18,7 +18,7 @@ Ext.define('Proxmox.node.NetworkView', {
 
     // defines what types of network devices we want to create
     // order is always the same
-    types: ['bridge', 'bond', 'ovs'],
+    types: ['bridge', 'bond', 'vlan', 'ovs'],
 
     showApplyBtn: false,
 
@@ -216,6 +216,21 @@ Ext.define('Proxmox.node.NetworkView', {
 	    });
 	}
 
+	if (me.types.indexOf('vlan') !== -1) {
+	    menu_items.push({
+		text: Proxmox.Utils.render_network_iface_type('vlan'),
+		handler: function() {
+		    var win = Ext.create('Proxmox.node.NetworkEdit', {
+			nodename: me.nodename,
+			iftype: 'vlan',
+			iface_default: 'interfaceX.1'
+		    });
+		    win.on('destroy', reload);
+		    win.show();
+		}
+	    });
+	}
+
 	if (me.types.indexOf('ovs') !== -1) {
 	    if (menu_items.length > 0) {
 		menu_items.push({ xtype: 'menuseparator' });
-- 
2.20.1