[pve-devel] [PATCH v4 widget-toolkit] add network selector widget

[Tim Marx]

Signed-off-by: Tim Marx <t.marx at proxmox.com>
---
changes in v4:
* fixed load event function signature
* handle case ipv6 only

 Makefile                |   1 +
 form/NetworkSelector.js | 131 ++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 132 insertions(+)
 create mode 100644 form/NetworkSelector.js

diff --git a/Makefile b/Makefile
index b9dc8b9..d12a4da 100644
--- a/Makefile
+++ b/Makefile
@@ -34,6 +34,7 @@ JSSRC=					\
 	form/ComboGrid.js		\
 	form/RRDTypeSelector.js		\
 	form/BondModeSelector.js	\
+	form/NetworkSelector.js		\
 	button/Button.js		\
 	button/HelpButton.js		\
 	grid/ObjectGrid.js		\
diff --git a/form/NetworkSelector.js b/form/NetworkSelector.js
new file mode 100644
index 0000000..e6824b6
--- /dev/null
+++ b/form/NetworkSelector.js
@@ -0,0 +1,131 @@
+Ext.define('Proxmox.form.NetworkSelectorController', {
+    extend: 'Ext.app.ViewController',
+    alias: 'controller.proxmoxNetworkSelectorController',
+
+    init: function(view) {
+	var me = this;
+
+	if (!view.nodename) {
+	    throw "missing custom view config: nodename";
+	}
+	view.getStore().getProxy().setUrl('/api2/json/nodes/'+ view.nodename + '/network');
+    }
+});
+
+Ext.define('Proxmox.data.NetworkSelector', {
+    extend: 'Ext.data.Model',
+    fields: [
+	{name: 'active'},
+	{name: 'cidr'},
+	{name: 'cidr6'},
+	{name: 'comments'},
+	{name: 'iface'},
+	{name: 'slaves'},
+	{name: 'type'}
+    ]
+});
+
+Ext.define('Proxmox.form.NetworkSelector', {
+    extend: 'Proxmox.form.ComboGrid',
+    alias: 'widget.proxmoxNetworkSelector',
+
+    nodename: 'localhost',
+    controller: 'proxmoxNetworkSelectorController',
+    setNodename: function(nodename) {
+	this.nodename = nodename;
+	var networkSelectorStore = this.getStore();
+	networkSelectorStore.removeAll();
+	// because of manual local copy of data for ip4/6
+	this.getPicker().refresh();
+	if (networkSelectorStore && typeof networkSelectorStore.getProxy === 'function') {
+	    networkSelectorStore.getProxy().setUrl('/api2/json/nodes/'+ nodename + '/network');
+	    networkSelectorStore.load();
+	}
+    },
+    // set default value to empty array, else it inits it with
+    // null and after the store load it is an empty array,
+    // triggering dirtychange
+    value: [],
+    valueField: 'cidr',
+    displayField: 'cidr',
+    store: {
+	autoLoad: true,
+	model: 'Proxmox.data.NetworkSelector',
+	proxy: {
+	    type: 'proxmox'
+	},
+	sorters: [
+	    {
+		property : 'iface',
+		direction: 'ASC'
+	    }
+	],
+	filters: [
+	    function(item) {
+		return item.data.cidr;
+	    }
+	],
+	listeners: {
+	    load: function(store, records, successfull) {
+
+		if(successfull) {
+		    records.forEach(function(record) {
+			if(record.data.cidr && record.data.cidr6) {
+			    var tempcopy = record.copy(null);
+			    tempcopy.data.cidr = tempcopy.data.cidr6;
+			    delete tempcopy.data.cidr6;
+			    tempcopy.data.comment = tempcopy.data.comments6;
+			    delete tempcopy.data.comments6;
+			    store.add(tempcopy);
+			}
+
+			if(!record.data.cidr && record.data.cidr6) {
+			    record.data.cidr = record.data.cidr6;
+			    delete record.data.cidr6;
+			    record.data.comments = record.data.comments6;
+			    delete record.data.comments6;
+			    store.add(record);
+			}
+		    });
+		}
+	    }
+	}
+    },
+    listConfig: {
+	width: 600,
+	columns: [
+	    {
+		header: gettext('Interface'),
+		sortable: true,
+		flex:1,
+		dataIndex: 'iface'
+	    },
+	    {
+		header: gettext('Active'),
+		sortable: true,
+		flex:1,
+		dataIndex: 'active'
+	    },
+	    {
+
+		header: gettext('CIDR'),
+		dataIndex: 'cidr',
+		sortable: true,
+		hideable: false,
+		flex:1
+	    },
+	    {
+		header: gettext('Type'),
+		sortable: true,
+		flex:1,
+		dataIndex: 'type'
+	    },
+	    {
+		header: gettext('Comment'),
+		sortable: true,
+		flex:1,
+		dataIndex: 'comments'
+	    }
+	]
+    }
+});
--
2.11.0