sdn: subnet: add panel for editing dhcp ranges

Signed-off-by: Stefan Hanreich <s.hanreich@proxmox.com>

diff --git a/www/manager6/Makefile b/www/manager6/Makefile
index c63361c306f174432215820b841e811bc5602da2..01afc8c4d1a68643fffaa8ae0032bb5a3749de1a 100644 (file)
--- a/www/manager6/Makefile
+++ b/www/manager6/Makefile
@@ -274,6 +274,7 @@ JSSRC=                                                      \
        sdn/ZoneContentView.js                          \
        sdn/ZoneContentPanel.js                         \
        sdn/ZoneView.js                                 \
+       sdn/IpamEdit.js                                 \
        sdn/OptionsPanel.js                             \
        sdn/controllers/Base.js                         \
        sdn/controllers/EvpnEdit.js                     \

diff --git a/www/manager6/sdn/SubnetEdit.js b/www/manager6/sdn/SubnetEdit.js
index b9825d2a37f5215bd5bfde97bb1ef33b44d91852..4fe16ab925ffd86426058f981074ce9f05e14cb6 100644 (file)
--- a/www/manager6/sdn/SubnetEdit.js
+++ b/www/manager6/sdn/SubnetEdit.js
@@ -56,6 +56,147 @@ Ext.define('PVE.sdn.SubnetInputPanel', {
     ],
 });
 
+Ext.define('PVE.sdn.SubnetDhcpRangePanel', {
+    extend: 'Ext.form.FieldContainer',
+    mixins: ['Ext.form.field.Field'],
+
+    initComponent: function() {
+       let me = this;
+
+       me.callParent();
+       me.initField();
+    },
+
+    getValue: function() {
+       let me = this;
+       let store = me.lookup('grid').getStore();
+
+       let data = [];
+
+       store.getData()
+           .each((item) =>
+               data.push(`start-address=${item.data['start-address']},end-address=${item.data['end-address']}`),
+           );
+
+       return data;
+    },
+
+    getSubmitData: function() {
+       let me = this;
+
+       let data = {};
+       let value = me.getValue();
+
+       if (value.length) {
+           data[me.getName()] = value;
+       }
+
+       return data;
+    },
+
+    setValue: function(dhcpRanges) {
+       let me = this;
+       let store = me.lookup('grid').getStore();
+       store.setData(dhcpRanges);
+    },
+
+    getErrors: function() {
+       let me = this;
+        let errors = [];
+
+       return errors;
+    },
+
+    controller: {
+       xclass: 'Ext.app.ViewController',
+
+       addRange: function() {
+           let me = this;
+           me.lookup('grid').getStore().add({});
+       },
+
+       removeRange: function(field) {
+           let me = this;
+           let record = field.getWidgetRecord();
+
+           me.lookup('grid').getStore().remove(record);
+       },
+
+       onValueChange: function(field, value) {
+           let me = this;
+           let record = field.getWidgetRecord();
+           let column = field.getWidgetColumn();
+
+           record.set(column.dataIndex, value);
+           record.commit();
+       },
+
+       control: {
+           'grid button': {
+               click: 'removeRange',
+           },
+           'field': {
+               change: 'onValueChange',
+           },
+       },
+    },
+
+    items: [
+       {
+           xtype: 'grid',
+           reference: 'grid',
+           scrollable: true,
+           store: {
+               fields: ['start-address', 'end-address'],
+           },
+           columns: [
+               {
+                   text: gettext('Start Address'),
+                   xtype: 'widgetcolumn',
+                   dataIndex: 'start-address',
+                   flex: 1,
+                   widget: {
+                       xtype: 'textfield',
+                       vtype: 'IP64Address',
+                   },
+               },
+               {
+                   text: gettext('End Address'),
+                   xtype: 'widgetcolumn',
+                   dataIndex: 'end-address',
+                   flex: 1,
+                   widget: {
+                       xtype: 'textfield',
+                       vtype: 'IP64Address',
+                   },
+               },
+               {
+                   xtype: 'widgetcolumn',
+                   width: 40,
+                   widget: {
+                       xtype: 'button',
+                       iconCls: 'fa fa-trash-o',
+                   },
+               },
+           ],
+       },
+       {
+           xtype: 'container',
+           layout: {
+               type: 'hbox',
+           },
+           items: [
+               {
+                   xtype: 'button',
+                   text: gettext('Add'),
+                   iconCls: 'fa fa-plus-circle',
+                   handler: 'addRange',
+               },
+           ],
+       },
+    ],
+});
+
 Ext.define('PVE.sdn.SubnetEdit', {
     extend: 'Proxmox.window.Edit',
 
@@ -67,6 +208,8 @@ Ext.define('PVE.sdn.SubnetEdit', {
 
     base_url: undefined,
 
+    bodyPadding: 0,
+
     initComponent: function() {
        var me = this;
 
@@ -82,11 +225,22 @@ Ext.define('PVE.sdn.SubnetEdit', {
 
        let ipanel = Ext.create('PVE.sdn.SubnetInputPanel', {
            isCreate: me.isCreate,
+           title: gettext('General'),
+       });
+
+       let dhcpPanel = Ext.create('PVE.sdn.SubnetDhcpRangePanel', {
+           isCreate: me.isCreate,
+           title: gettext('DHCP Ranges'),
+           name: 'dhcp-range',
        });
 
        Ext.apply(me, {
            items: [
-               ipanel,
+               {
+                   xtype: 'tabpanel',
+                   bodyPadding: 10,
+                   items: [ipanel, dhcpPanel],
+               },
            ],
        });
 
@@ -97,6 +251,10 @@ Ext.define('PVE.sdn.SubnetEdit', {
                success: function(response, options) {
                    let values = response.result.data;
                    ipanel.setValues(values);
+
+                   if (values['dhcp-range']) {
+                       dhcpPanel.setValue(values['dhcp-range']);
+                   }
                },
            });
        }