[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