[pve-devel] [PATCH v6 pve-manager 09/13] add vnet panel with vnet + subnets split view

Alexandre Derumier aderumier at odiso.com
Mon Oct 5 17:09:25 CEST 2020


Signed-off-by: Alexandre Derumier <aderumier at odiso.com>
---
 www/manager6/Makefile          |  5 +--
 www/manager6/dc/Config.js      | 10 +-----
 www/manager6/sdn/SubnetEdit.js | 13 +++----
 www/manager6/sdn/SubnetView.js | 62 ++++++++++++++++++++++------------
 www/manager6/sdn/VnetPanel.js  | 39 +++++++++++++++++++++
 www/manager6/sdn/VnetView.js   | 14 ++++++--
 6 files changed, 100 insertions(+), 43 deletions(-)
 create mode 100644 www/manager6/sdn/VnetPanel.js

diff --git a/www/manager6/Makefile b/www/manager6/Makefile
index fca8b6d5..50624c3d 100644
--- a/www/manager6/Makefile
+++ b/www/manager6/Makefile
@@ -210,8 +210,9 @@ JSSRC= 							\
 	sdn/StatusView.js				\
 	sdn/VnetEdit.js					\
 	sdn/VnetView.js					\
-	sdn/SubnetEdit.js					\
-	sdn/SubnetView.js					\
+	sdn/VnetPanel.js				\
+	sdn/SubnetEdit.js				\
+	sdn/SubnetView.js				\
 	sdn/ZoneContentView.js				\
 	sdn/ZoneView.js					\
 	sdn/controllers/Base.js				\
diff --git a/www/manager6/dc/Config.js b/www/manager6/dc/Config.js
index d525c93d..97b37e6d 100644
--- a/www/manager6/dc/Config.js
+++ b/www/manager6/dc/Config.js
@@ -170,21 +170,13 @@ Ext.define('PVE.dc.Config', {
 		    itemId: 'sdnzone'
 		},
 		{
-		    xtype: 'pveSDNVnetView',
+		    xtype: 'pveSDNVnet',
 		    groups: ['sdn'],
 		    title: gettext('Vnets'),
 		    hidden: true,
 		    iconCls: 'fa fa-network-wired',
 		    itemId: 'sdnvnet'
 		},
-		{
-		    xtype: 'pveSDNSubnetView',
-		    groups: ['sdn'],
-		    title: gettext('Subnets'),
-		    hidden: true,
-		    iconCls: 'fa fa-network-wired',
-		    itemId: 'sdnsubnet'
-		},
 		{
 		    xtype: 'pveSDNIpamView',
 		    groups: ['sdn'],
diff --git a/www/manager6/sdn/SubnetEdit.js b/www/manager6/sdn/SubnetEdit.js
index 8badc34a..d8c61dd6 100644
--- a/www/manager6/sdn/SubnetEdit.js
+++ b/www/manager6/sdn/SubnetEdit.js
@@ -32,13 +32,6 @@ Ext.define('PVE.sdn.SubnetInputPanel', {
 	    allowBlank: false,
 	    fieldLabel: gettext('Subnet'),
 	},
-        {
-            xtype: 'pveSDNVnetSelector',
-            fieldLabel: gettext('Vnet'),
-            name: 'vnet',
-            value: '',
-            allowBlank: true,
-        },
 	{
 	    xtype: 'textfield',
 	    name: 'gateway',
@@ -107,16 +100,18 @@ Ext.define('PVE.sdn.SubnetEdit', {
 
     width: 350,
 
+    base_url: undefined,
+
     initComponent: function() {
 	var me = this;
 
 	me.isCreate = me.subnet === undefined;
 
 	if (me.isCreate) {
-	    me.url = '/api2/extjs/cluster/sdn/subnets';
+	    me.url = me.base_url;
 	    me.method = 'POST';
 	} else {
-	    me.url = '/api2/extjs/cluster/sdn/subnets/' + me.subnet;
+	    me.url = me.base_url + '/' + me.subnet;
 	    me.method = 'PUT';
 	}
 
diff --git a/www/manager6/sdn/SubnetView.js b/www/manager6/sdn/SubnetView.js
index 012d127b..96240617 100644
--- a/www/manager6/sdn/SubnetView.js
+++ b/www/manager6/sdn/SubnetView.js
@@ -5,21 +5,38 @@ Ext.define('PVE.sdn.SubnetView', {
     stateful: true,
     stateId: 'grid-sdn-subnet',
 
+    base_url: undefined,
+
+    remove_btn: undefined,
+
+    setBaseUrl: function(url) {
+        var me = this;
+
+        me.base_url = url;
+
+        if (url === undefined) {
+            me.store.removeAll();
+        } else {
+            me.remove_btn.baseurl = url + '/';
+            me.store.setProxy({
+                type: 'proxmox',
+                url: '/api2/json/' + url
+            });
+
+            me.store.load();
+        }
+    },
+
     initComponent : function() {
 	let me = this;
 
-	let store = new Ext.data.Store({
-	    model: 'pve-sdn-subnet',
-	    proxy: {
-                type: 'proxmox',
-		url: "/api2/json/cluster/sdn/subnets"
-	    },
-	    sorters: {
-		property: 'subnet',
-		order: 'DESC'
-	    }
-	});
-	let reload = () => store.load();
+        var store = new Ext.data.Store({
+            model: 'pve-sdn-subnet'
+        });
+
+        var reload = function() {
+            store.load();
+        };
 
 	let sm = Ext.create('Ext.selection.RowModel', {});
 
@@ -29,6 +46,7 @@ Ext.define('PVE.sdn.SubnetView', {
 	    let win = Ext.create('PVE.sdn.SubnetEdit',{
 		autoShow: true,
 		subnet: rec.data.subnet,
+		base_url: me.base_url,
 	    });
 	    win.on('destroy', reload);
         };
@@ -40,10 +58,12 @@ Ext.define('PVE.sdn.SubnetView', {
 	    handler: run_editor,
 	});
 
-	let remove_btn = Ext.create('Proxmox.button.StdRemoveButton', {
+	me.remove_btn = Ext.create('Proxmox.button.StdRemoveButton', {
 	    selModel: sm,
-	    baseurl: '/cluster/sdn/subnets/',
-	    callback: reload
+	    baseurl: me.base_url + '/',
+            callback: function() {
+                reload();
+            },
 	});
 
 	Ext.apply(me, {
@@ -59,12 +79,13 @@ Ext.define('PVE.sdn.SubnetView', {
 		    handler: function() {
 			let win = Ext.create('PVE.sdn.SubnetEdit', {
 			    autoShow: true,
+			    base_url: me.base_url,
 			    type: 'subnet',
 			});
 			win.on('destroy', reload);
 		    }
 		},
-		remove_btn,
+		me.remove_btn,
 		edit_btn,
 	    ],
 	    columns: [
@@ -73,11 +94,6 @@ Ext.define('PVE.sdn.SubnetView', {
 		    flex: 2,
 		    dataIndex: 'cidr'
 		},
-		{
-		    header: gettext('Vnet'),
-		    flex: 1,
-		    dataIndex: 'vnet',
-		},
 		{
 		    header: gettext('Gateway'),
 		    flex: 1,
@@ -101,6 +117,10 @@ Ext.define('PVE.sdn.SubnetView', {
 	});
 
 	me.callParent();
+
+        if (me.base_url) {
+            me.setBaseUrl(me.base_url); // load
+        }
     }
 }, function() {
 
diff --git a/www/manager6/sdn/VnetPanel.js b/www/manager6/sdn/VnetPanel.js
new file mode 100644
index 00000000..4b1cbc6e
--- /dev/null
+++ b/www/manager6/sdn/VnetPanel.js
@@ -0,0 +1,39 @@
+Ext.define('PVE.sdn.Vnet', {
+    extend: 'Ext.panel.Panel',
+    alias: 'widget.pveSDNVnet',
+
+    title: 'Vnet',
+
+    onlineHelp: 'pvesdn_config_vnet',
+
+    initComponent: function() {
+	var me = this;
+
+	var subnetview_panel = Ext.createWidget('pveSDNSubnetView', {
+            title: gettext('Subnets'),
+	    region: 'center',
+	    border: false
+	});
+
+	var vnetview_panel = Ext.createWidget('pveSDNVnetView', {
+            title: 'Vnets',
+	    region: 'west',
+	    subnetview_panel: subnetview_panel,
+	    width: '50%',
+	    border: false,
+	    split: true
+	});
+
+	Ext.apply(me, {
+            layout: 'border',
+            items: [ vnetview_panel, subnetview_panel ],
+	    listeners: {
+		show: function() {
+		    subnetview_panel.fireEvent('show', subnetview_panel);
+		}
+	    }
+	});
+
+	me.callParent();
+    }
+});
diff --git a/www/manager6/sdn/VnetView.js b/www/manager6/sdn/VnetView.js
index eefb6e42..e3d86c9a 100644
--- a/www/manager6/sdn/VnetView.js
+++ b/www/manager6/sdn/VnetView.js
@@ -7,6 +7,8 @@ Ext.define('PVE.sdn.VnetView', {
     stateful: true,
     stateId: 'grid-sdn-vnet',
 
+    subnetview_panel: undefined,
+
     initComponent : function() {
 	let me = this;
 
@@ -100,10 +102,18 @@ Ext.define('PVE.sdn.VnetView', {
 	    ],
 	    listeners: {
 		activate: reload,
-		itemdblclick: run_editor
+		itemdblclick: run_editor,
+                show: reload,
+                select: function(sm, rec) {
+                    var url = '/cluster/sdn/vnets/' + rec.data.vnet + '/subnets';
+                    me.subnetview_panel.setBaseUrl(url);
+                },
+                deselect: function() {
+                    me.subnetview_panel.setBaseUrl(undefined);
+                },
 	    }
 	});
-
+	store.load();
 	me.callParent();
     }
 });
-- 
2.20.1





More information about the pve-devel mailing list