]> git.proxmox.com Git - proxmox-widget-toolkit.git/blobdiff - node/NetworkEdit.js
make eslint 100% happy
[proxmox-widget-toolkit.git] / node / NetworkEdit.js
index f925e0d14bb220e8aaee4f4c794dfa03a6bcfe93..72aab6f771c56fb3d629aca5f851e38ce3a3efb8 100644 (file)
@@ -2,8 +2,8 @@ Ext.define('Proxmox.node.NetworkEdit', {
     extend: 'Proxmox.window.Edit',
     alias: ['widget.proxmoxNodeNetworkEdit'],
 
-    initComponent : function() {
-       var me = this;
+    initComponent: function() {
+       let me = this;
 
        if (!me.nodename) {
            throw "no node name specified";
@@ -13,18 +13,18 @@ Ext.define('Proxmox.node.NetworkEdit', {
            throw "no network device type specified";
        }
 
-       me.create = !me.iface;
+       me.isCreate = !me.iface;
 
-       var iface_vtype;
+       let iface_vtype;
 
        if (me.iftype === 'bridge') {
            iface_vtype = 'BridgeName';
        } else if (me.iftype === 'bond') {
            iface_vtype = 'BondName';
-       } else if (me.iftype === 'eth' && !me.create) {
-           iface_vtype = 'InterfaceName';
-       } else if (me.iftype === 'vlan' && !me.create) {
+       } else if (me.iftype === 'eth' && !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') {
@@ -40,116 +40,177 @@ Ext.define('Proxmox.node.NetworkEdit', {
 
        me.subject = Proxmox.Utils.render_network_iface_type(me.iftype);
 
-       var column2 = [];
+       let column1 = [],
+           column2 = [],
+           columnB = [],
+           advancedColumn1 = [],
+           advancedColumn2 = [];
 
-       if (!(me.iftype === 'OVSIntPort' || me.iftype === 'OVSPort' ||
-             me.iftype === 'OVSBond')) {
+       if (!(me.iftype === 'OVSIntPort' || me.iftype === 'OVSPort' || me.iftype === 'OVSBond')) {
            column2.push({
-               xtype: 'pvecheckbox',
+               xtype: 'proxmoxcheckbox',
                fieldLabel: gettext('Autostart'),
                name: 'autostart',
                uncheckedValue: 0,
-               checked: me.create ? true : undefined
+               checked: me.isCreate ? true : undefined,
            });
        }
 
        if (me.iftype === 'bridge') {
            column2.push({
-               xtype: 'pvecheckbox',
+               xtype: 'proxmoxcheckbox',
                fieldLabel: gettext('VLAN aware'),
                name: 'bridge_vlan_aware',
-               deleteEmpty: !me.create
+               deleteEmpty: !me.isCreate,
            });
            column2.push({
                xtype: 'textfield',
                fieldLabel: gettext('Bridge ports'),
-               name: 'bridge_ports'
+               name: 'bridge_ports',
            });
        } else if (me.iftype === 'OVSBridge') {
            column2.push({
                xtype: 'textfield',
                fieldLabel: gettext('Bridge ports'),
-               name: 'ovs_ports'
+               name: 'ovs_ports',
            });
            column2.push({
                xtype: 'textfield',
                fieldLabel: gettext('OVS options'),
-               name: 'ovs_options'
+               name: 'ovs_options',
            });
        } else if (me.iftype === 'OVSPort' || me.iftype === 'OVSIntPort') {
            column2.push({
-               xtype: me.create ? 'PVE.form.BridgeSelector' : 'displayfield',
+               xtype: me.isCreate ? 'PVE.form.BridgeSelector' : 'displayfield',
                fieldLabel: Proxmox.Utils.render_network_iface_type('OVSBridge'),
                allowBlank: false,
                nodename: me.nodename,
                bridgeType: 'OVSBridge',
-               name: 'ovs_bridge'
+               name: 'ovs_bridge',
            });
            column2.push({
                xtype: 'pveVlanField',
-               deleteEmpty: !me.create,
+               deleteEmpty: !me.isCreate,
                name: 'ovs_tag',
-               value: ''
+               value: '',
            });
            column2.push({
                xtype: 'textfield',
                fieldLabel: gettext('OVS options'),
-               name: '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;
+                  let 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;
+                  let 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,
+           });
+
+           columnB.push({
+               xtype: 'label',
+               userCls: 'pmx-hint',
+               text: 'Either add the VLAN number to an existing interface name, or choose your own name and set the VLAN raw device (for the latter ifupdown1 supports vlanXY naming only)',
            });
        } else if (me.iftype === 'bond') {
            column2.push({
                xtype: 'textfield',
                fieldLabel: gettext('Slaves'),
-               name: 'slaves'
+               name: 'slaves',
            });
 
-           var policySelector = Ext.createWidget('bondPolicySelector', {
+           let policySelector = Ext.createWidget('bondPolicySelector', {
                fieldLabel: gettext('Hash policy'),
                name: 'bond_xmit_hash_policy',
-               deleteEmpty: !me.create,
-               disabled: true
+               deleteEmpty: !me.isCreate,
+               disabled: true,
+           });
+
+           let primaryfield = Ext.createWidget('textfield', {
+               fieldLabel: gettext('bond-primary'),
+               name: 'bond-primary',
+               value: '',
+               disabled: true,
            });
 
            column2.push({
                xtype: 'bondModeSelector',
                fieldLabel: gettext('Mode'),
                name: 'bond_mode',
-               value: me.create ? 'balance-rr' : undefined,
+               value: me.isCreate ? 'balance-rr' : undefined,
                listeners: {
                    change: function(f, value) {
                        if (value === 'balance-xor' ||
                            value === '802.3ad') {
                            policySelector.setDisabled(false);
+                           primaryfield.setDisabled(true);
+                           primaryfield.setValue('');
+                       } else if (value === 'active-backup') {
+                           primaryfield.setDisabled(false);
+                           policySelector.setDisabled(true);
+                           policySelector.setValue('');
                        } else {
                            policySelector.setDisabled(true);
                            policySelector.setValue('');
+                           primaryfield.setDisabled(true);
+                           primaryfield.setValue('');
                        }
-                   }
+                   },
                },
-               allowBlank: false
+               allowBlank: false,
            });
 
            column2.push(policySelector);
-
+           column2.push(primaryfield);
        } else if (me.iftype === 'OVSBond') {
            column2.push({
-               xtype: me.create ? 'PVE.form.BridgeSelector' : 'displayfield',
+               xtype: me.isCreate ? 'PVE.form.BridgeSelector' : 'displayfield',
                fieldLabel: Proxmox.Utils.render_network_iface_type('OVSBridge'),
                allowBlank: false,
                nodename: me.nodename,
                bridgeType: 'OVSBridge',
-               name: 'ovs_bridge'
+               name: 'ovs_bridge',
            });
            column2.push({
                xtype: 'pveVlanField',
-               deleteEmpty: !me.create,
+               deleteEmpty: !me.isCreate,
                name: 'ovs_tag',
-               value: ''
+               value: '',
            });
            column2.push({
                xtype: 'textfield',
                fieldLabel: gettext('OVS options'),
-               name: 'ovs_options'
+               name: 'ovs_options',
            });
        }
 
@@ -158,13 +219,13 @@ Ext.define('Proxmox.node.NetworkEdit', {
            fieldLabel: gettext('Comment'),
            allowBlank: true,
            nodename: me.nodename,
-           name: 'comments'
+           name: 'comments',
        });
 
-       var url;
-       var method;
+       let url;
+       let method;
 
-       if (me.create) {
+       if (me.isCreate) {
            url = "/api2/extjs/nodes/" + me.nodename + "/network";
            method = 'POST';
        } else {
@@ -172,21 +233,37 @@ Ext.define('Proxmox.node.NetworkEdit', {
            method = 'PUT';
        }
 
-       var column1 = [
-           {
-               xtype: 'hiddenfield',
-               name: 'type',
-               value: me.iftype
+       column1.push({
+           xtype: 'hiddenfield',
+           name: 'type',
+           value: me.iftype,
+       },
+       {
+           xtype: me.isCreate ? 'textfield' : 'displayfield',
+           fieldLabel: gettext('Name'),
+           name: 'iface',
+           value: me.iface,
+           vtype: iface_vtype,
+           allowBlank: false,
+           listeners: {
+               change: function(f, value) {
+                   if (me.isCreate && iface_vtype === 'VlanName') {
+                       let vlanidField = me.down('field[name=vlan-id]');
+                       let 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);
+                       }
+                   }
+               },
            },
-           {
-               xtype: me.create ? 'textfield' : 'displayfield',
-               fieldLabel: gettext('Name'),
-               name: 'iface',
-               value: me.iface,
-               vtype: iface_vtype,
-               allowBlank: false
-           }
-       ];
+       });
 
        if (me.iftype === 'OVSBond') {
            column1.push(
@@ -195,98 +272,56 @@ Ext.define('Proxmox.node.NetworkEdit', {
                    fieldLabel: gettext('Mode'),
                    name: 'bond_mode',
                    openvswitch: true,
-                   value: me.create ? 'active-backup' : undefined,
-                   allowBlank: false
+                   value: me.isCreate ? 'active-backup' : undefined,
+                   allowBlank: false,
                },
                {
                    xtype: 'textfield',
                    fieldLabel: gettext('Slaves'),
-                   name: 'ovs_bonds'
-               }
+                   name: 'ovs_bonds',
+               },
            );
        } else {
-
            column1.push(
                {
                    xtype: 'proxmoxtextfield',
-                   deleteEmpty: !me.create,
-                   fieldLabel: gettext('IP address'),
-                   vtype: 'IPAddress',
-                   name: 'address'
+                   deleteEmpty: !me.isCreate,
+                   fieldLabel: 'IPv4/CIDR',
+                   vtype: 'IPCIDRAddress',
+                   name: 'cidr',
                },
                {
                    xtype: 'proxmoxtextfield',
-                   deleteEmpty: !me.create,
-                   fieldLabel: gettext('Subnet mask'),
+                   deleteEmpty: !me.isCreate,
+                   fieldLabel: gettext('Gateway') + ' (IPv4)',
                    vtype: 'IPAddress',
-                   name: 'netmask',
-                   validator: function(value) {
-                       /*jslint confusion: true */
-                       if (!me.items) {
-                           return true;
-                       }
-                       var address = me.down('field[name=address]').getValue();
-                       if (value !== '') {
-                           if (address === '') {
-                               return "Subnet mask requires option 'IP address'";
-                           }
-                       } else {
-                           if (address !== '') {
-                               return "Option 'IP address' requires a subnet mask";
-                           }
-                       }
-
-                       return true;
-                   }
+                   name: 'gateway',
                },
                {
                    xtype: 'proxmoxtextfield',
-                   deleteEmpty: !me.create,
-                   fieldLabel: gettext('Gateway'),
-                   vtype: 'IPAddress',
-                   name: 'gateway'
+                   deleteEmpty: !me.isCreate,
+                   fieldLabel: 'IPv6/CIDR',
+                   vtype: 'IP6CIDRAddress',
+                   name: 'cidr6',
                },
                {
                    xtype: 'proxmoxtextfield',
-                   deleteEmpty: !me.create,
-                   fieldLabel: gettext('IPv6 address'),
+                   deleteEmpty: !me.isCreate,
+                   fieldLabel: gettext('Gateway') + ' (IPv6)',
                    vtype: 'IP6Address',
-                   name: 'address6'
+                   name: 'gateway6',
                },
+           );
+           advancedColumn1.push(
                {
-                   xtype: 'proxmoxtextfield',
-                   deleteEmpty: !me.create,
-                   fieldLabel: gettext('Prefix length'),
-                   vtype: 'IP6PrefixLength',
-                   name: 'netmask6',
-                   value: '',
-                   allowBlank: true,
-                   validator: function(value) {
-                       /*jslint confusion: true */
-                       if (!me.items) {
-                           return true;
-                       }
-                       var address = me.down('field[name=address6]').getValue();
-                       if (value !== '') {
-                           if (address === '') {
-                               return "IPv6 prefix length requires option 'IPv6 address'";
-                           }
-                       } else {
-                           if (address !== '') {
-                               return "Option 'IPv6 address' requires an IPv6 prefix length";
-                           }
-                       }
-
-                       return true;
-                   }
+                   xtype: 'proxmoxintegerfield',
+                   minValue: 1280,
+                   maxValue: 65520,
+                   deleteEmpty: !me.isCreate,
+                   emptyText: 1500,
+                   fieldLabel: 'MTU',
+                   name: 'mtu',
                },
-               {
-                   xtype: 'proxmoxtextfield',
-                   deleteEmpty: !me.create,
-                   fieldLabel: gettext('Gateway'),
-                   vtype: 'IP6Address',
-                   name: 'gateway6'
-               }
            );
        }
 
@@ -296,20 +331,23 @@ Ext.define('Proxmox.node.NetworkEdit', {
            items: {
                 xtype: 'inputpanel',
                column1: column1,
-               column2: column2
-           }
+               column2: column2,
+               columnB: columnB,
+               advancedColumn1: advancedColumn1,
+               advancedColumn2: advancedColumn2,
+           },
        });
 
        me.callParent();
 
-       if (me.create) {
+       if (me.isCreate) {
            me.down('field[name=iface]').setValue(me.iface_default);
        } else {
            me.load({
                success: function(response, options) {
-                   var data = response.result.data;
+                   let data = response.result.data;
                    if (data.type !== me.iftype) {
-                       var msg = "Got unexpected device type";
+                       let msg = "Got unexpected device type";
                        Ext.Msg.alert(gettext('Error'), msg, function() {
                            me.close();
                        });
@@ -317,8 +355,8 @@ Ext.define('Proxmox.node.NetworkEdit', {
                    }
                    me.setValues(data);
                    me.isValid(); // trigger validation
-               }
+               },
            });
        }
-    }
+    },
 });