From: Stefan Hanreich <s.hanreich@proxmox.com>
To: pve-devel@lists.proxmox.com
Cc: Thomas Lamprecht <t.lamprecht@proxmox.com>
Subject: [PATCH pve-manager v6 11/24] ui: sdn: add panel for managing prefix lists
Date: Fri, 8 May 2026 18:31:20 +0200 [thread overview]
Message-ID: <20260508163134.481912-12-s.hanreich@proxmox.com> (raw)
In-Reply-To: <20260508163134.481912-1-s.hanreich@proxmox.com>
This panel allows users to perform CRUD operations for prefix lists
and their entries, as well as re-ordering prefix lists entries. It
allows editing each entry in a prefix list separately via an edit
window even though they are a single property in the section config.
This is implemented by sending the full entries property to the update
endpoint everytime a single entry has been edited.
Signed-off-by: Stefan Hanreich <s.hanreich@proxmox.com>
Link: https://lore.proxmox.com/20260505153720.412180-42-s.hanreich@proxmox.com
Signed-off-by: Thomas Lamprecht <t.lamprecht@proxmox.com>
---
www/manager6/Makefile | 1 +
www/manager6/dc/Config.js | 8 +
www/manager6/sdn/PrefixListPanel.js | 459 ++++++++++++++++++++++++++++
3 files changed, 468 insertions(+)
create mode 100644 www/manager6/sdn/PrefixListPanel.js
diff --git a/www/manager6/Makefile b/www/manager6/Makefile
index 615e68662..b123a331d 100644
--- a/www/manager6/Makefile
+++ b/www/manager6/Makefile
@@ -310,6 +310,7 @@ JSSRC= \
sdn/IpamEdit.js \
sdn/OptionsPanel.js \
sdn/RouteMapSelector.js \
+ sdn/PrefixListPanel.js \
sdn/PrefixListSelector.js \
sdn/controllers/Base.js \
sdn/controllers/EvpnEdit.js \
diff --git a/www/manager6/dc/Config.js b/www/manager6/dc/Config.js
index b5e27a212..8784e357c 100644
--- a/www/manager6/dc/Config.js
+++ b/www/manager6/dc/Config.js
@@ -312,6 +312,14 @@ Ext.define('PVE.dc.Config', {
iconCls: 'fa fa-road',
itemId: 'sdnfabrics',
},
+ {
+ xtype: 'pveSDNPrefixLists',
+ groups: ['sdn'],
+ title: gettext('Prefix Lists'),
+ hidden: true,
+ iconCls: 'fa fa-list-ol',
+ itemId: 'sdnprefixlists',
+ },
);
}
diff --git a/www/manager6/sdn/PrefixListPanel.js b/www/manager6/sdn/PrefixListPanel.js
new file mode 100644
index 000000000..7152058e7
--- /dev/null
+++ b/www/manager6/sdn/PrefixListPanel.js
@@ -0,0 +1,459 @@
+Ext.define('PVE.sdn.PrefixList', {
+ extend: 'Ext.data.Model',
+ fields: ['id', 'entries', 'pending'],
+
+ getId: function () {
+ let me = this;
+ return me.data.pending?.[me.idProperty] ?? me.data[me.idProperty];
+ },
+});
+
+Ext.define('PVE.sdn.PrefixListEntry', {
+ extend: 'Ext.data.Model',
+ fields: ['id', 'action', 'prefix', 'le', 'ge', 'pending'],
+});
+
+Ext.define('PVE.sdn.EditPrefixListWindow', {
+ extend: 'Proxmox.window.Edit',
+
+ url: '/cluster/sdn/prefix-lists',
+
+ config: {
+ entry: null,
+ },
+
+ isCreate: false,
+
+ items: [
+ {
+ xtype: 'proxmoxtextfield',
+ fieldLabel: gettext('Name'),
+ name: 'id',
+ },
+ ],
+
+ initComponent: function () {
+ let me = this;
+ me.method = me.isCreate ? 'POST' : 'PUT';
+ me.callParent();
+
+ me.setValues(me.getEntry());
+ },
+});
+
+Ext.define('PVE.sdn.EditPrefixListEntryWindow', {
+ extend: 'Proxmox.window.Edit',
+
+ url: '/cluster/sdn/prefix-lists',
+
+ config: {
+ entry: null,
+ },
+
+ isCreate: false,
+
+ items: [
+ {
+ xtype: 'proxmoxKVComboBox',
+ fieldLabel: gettext('Action'),
+ name: 'action',
+ comboItems: [
+ ['permit', gettext('Permit')],
+ ['deny', gettext('Deny')],
+ ],
+ allowBlank: false,
+ },
+ {
+ xtype: 'proxmoxtextfield',
+ fieldLabel: gettext('Prefix'),
+ name: 'prefix',
+ vtype: 'IP64CIDRAddress',
+ },
+ {
+ xtype: 'proxmoxtextfield',
+ fieldLabel: gettext('Prefix <='),
+ name: 'le',
+ },
+ {
+ xtype: 'proxmoxtextfield',
+ fieldLabel: gettext('Prefix >='),
+ name: 'ge',
+ },
+ ],
+
+ initComponent: function () {
+ let me = this;
+ me.method = me.isCreate ? 'POST' : 'PUT';
+ me.callParent();
+
+ me.setValues(me.getEntry());
+ },
+});
+
+Ext.define('PVE.sdn.PrefixListView', {
+ extend: 'Ext.grid.GridPanel',
+ alias: ['widget.pveSDNPrefixListView'],
+
+ emptyText: gettext('No prefix list configured'),
+
+ tbar: [
+ {
+ text: gettext('Add'),
+ xtype: 'button',
+ handler: 'addPrefixList',
+ },
+ {
+ text: gettext('Remove'),
+ xtype: 'button',
+ handler: 'removePrefixList',
+ bind: {
+ disabled: '{!prefixListGrid.selection}',
+ },
+ },
+ {
+ text: gettext('Reload'),
+ xtype: 'button',
+ handler: 'reload',
+ },
+ ],
+
+ columns: [
+ {
+ text: gettext('Name'),
+ dataIndex: 'id',
+ flex: 1,
+ renderer: function (value, metaData, rec) {
+ return PVE.Utils.render_sdn_pending(rec, value, 'id', 1);
+ },
+ },
+ {
+ text: gettext('State'),
+ width: 100,
+ dataIndex: 'state',
+ renderer: function (value, metaData, rec) {
+ return PVE.Utils.render_sdn_pending_state(rec, value);
+ },
+ },
+ ],
+});
+
+Ext.define('PVE.sdn.PrefixListEntriesView', {
+ extend: 'Ext.grid.GridPanel',
+ alias: ['widget.pveSDNPrefixListEntriesView'],
+
+ emptyText: gettext('Prefix List has no entries configured.'),
+
+ config: {
+ prefixList: null,
+ },
+
+ viewConfig: {
+ plugins: [
+ {
+ ptype: 'gridviewdragdrop',
+ },
+ ],
+ },
+
+ listeners: {
+ drop: 'saveEntries',
+ itemdblclick: 'editPrefixListEntry',
+ },
+
+ columns: [
+ {
+ width: 40,
+ resizable: false,
+ sortable: false,
+ hideable: false,
+ menuDisabled: true,
+ renderer: function (value, metaData, record, rowIdx, colIdx) {
+ metaData.tdCls = Ext.baseCSSPrefix + 'grid-cell-special';
+ return "<i class='pve-grid-fa fa fa-fw fa-reorder cursor-move'></i>";
+ },
+ },
+ {
+ text: gettext('Action'),
+ dataIndex: 'action',
+ flex: 1,
+ },
+ {
+ text: gettext('Prefix'),
+ dataIndex: 'prefix',
+ flex: 1,
+ },
+ {
+ text: gettext('Prefix <='),
+ dataIndex: 'le',
+ flex: 1,
+ },
+ {
+ text: gettext('Prefix >='),
+ dataIndex: 'ge',
+ flex: 1,
+ },
+ ],
+
+ tbar: [
+ {
+ text: gettext('Add'),
+ xtype: 'button',
+ handler: 'addPrefixListEntry',
+ bind: {
+ disabled: '{!prefixListGrid.selection}',
+ },
+ },
+ {
+ text: gettext('Edit'),
+ xtype: 'button',
+ handler: 'editPrefixListEntry',
+ bind: {
+ disabled: '{!prefixListEntriesGrid.selection}',
+ },
+ },
+ {
+ text: gettext('Remove'),
+ xtype: 'button',
+ handler: 'removePrefixListEntry',
+ bind: {
+ disabled: '{!prefixListEntriesGrid.selection}',
+ },
+ },
+ ],
+});
+
+Ext.define('PVE.sdn.PrefixListPanel', {
+ extend: 'Ext.panel.Panel',
+ alias: ['widget.pveSDNPrefixLists'],
+
+ emptyText: gettext('No prefix list configured'),
+
+ viewModel: {
+ stores: {
+ prefixLists: {
+ autoLoad: true,
+ model: 'PVE.sdn.PrefixList',
+ proxy: {
+ type: 'proxmox',
+ url: '/api2/json/cluster/sdn/prefix-lists?pending=1',
+ },
+ },
+ prefixListEntries: {
+ model: 'PVE.sdn.PrefixListEntry',
+ proxy: {
+ type: 'proxmox',
+ reader: {
+ transform: {
+ fn: function (response) {
+ let entries = response.data.entries ?? [];
+ return entries.map(PVE.Parser.parsePropertyString);
+ },
+ },
+ },
+ },
+ },
+ },
+ formulas: {
+ entryGridEmptyText: function (get) {
+ let selection = get('prefixListGrid.selection');
+
+ return selection
+ ? gettext('Prefix List has no entries configured.')
+ : gettext('no Prefix List selected');
+ },
+ },
+ },
+
+ controller: {
+ reload: function () {
+ let me = this;
+
+ let prefixList = me.getViewModel().get('prefixListGrid.selection');
+
+ me.getViewModel()
+ .getStore('prefixLists')
+ .load((records, _operation, success) => {
+ if (!success || !prefixList) {
+ return;
+ }
+
+ let newPrefixList = records.find((record) => {
+ return record.getId() === prefixList.getId();
+ });
+
+ me.lookupReference('prefixListGrid').setSelection(newPrefixList);
+ });
+ },
+ saveEntries: function () {
+ let me = this;
+
+ let prefixList = me.getViewModel().get('prefixListGrid.selection');
+
+ let entries = me
+ .getViewModel()
+ .getStore('prefixListEntries')
+ .getData()
+ .items.map((item) => {
+ let data = item.data;
+ delete data.id;
+
+ return PVE.Parser.printPropertyString(data);
+ });
+
+ let params = {};
+
+ if (entries.length > 0) {
+ params.entries = entries;
+ } else {
+ params = { delete: ['entries'] };
+ }
+
+ Proxmox.Async.api2({
+ url: `/api2/extjs/cluster/sdn/prefix-lists/${prefixList.getId()}`,
+ params,
+ method: 'PUT',
+ })
+ .catch(Proxmox.Utils.alertResponseFailure)
+ .finally(() => {
+ me.reload(prefixList);
+ });
+ },
+ selectPrefixList: function (gridPanel, record, index, options) {
+ let me = this;
+
+ let url = `/api2/extjs/cluster/sdn/prefix-lists/${record.getId()}`;
+ let entryStore = me.getViewModel().getStore('prefixListEntries');
+
+ entryStore.getProxy().setUrl(url);
+ entryStore.load();
+ },
+ addPrefixList: function () {
+ let me = this;
+
+ Ext.create('PVE.sdn.EditPrefixListWindow', {
+ autoShow: true,
+ isCreate: true,
+ listeners: {
+ close: () => me.reload(),
+ },
+ });
+ },
+ removePrefixList: function () {
+ let me = this;
+ let prefixList = me.getViewModel().get('prefixListGrid.selection');
+
+ Ext.Msg.show({
+ title: gettext('Confirm'),
+ icon: Ext.Msg.WARNING,
+ message: Ext.String.format(gettext('Remove prefix list "{0}"?'), prefixList.getId()),
+ buttons: Ext.Msg.YESNO,
+ defaultFocus: 'no',
+ callback: function (btn) {
+ if (btn !== 'yes') {
+ return;
+ }
+
+ Proxmox.Async.api2({
+ url: `/api2/extjs/cluster/sdn/prefix-lists/${prefixList.getId()}`,
+ method: 'DELETE',
+ })
+ .catch(Proxmox.Utils.alertResponseFailure)
+ .finally(() => {
+ me.reload(prefixList);
+ });
+ },
+ });
+ },
+ addPrefixListEntry: function () {
+ let panel = this;
+
+ Ext.create('PVE.sdn.EditPrefixListEntryWindow', {
+ autoShow: true,
+ isCreate: true,
+ submit: function () {
+ let me = this;
+
+ panel.getViewModel().getStore('prefixListEntries').add(me.getValues());
+ panel.saveEntries();
+
+ me.close();
+ },
+ });
+ },
+ editPrefixListEntry: function () {
+ let panel = this;
+
+ let entry = panel.getViewModel().get('prefixListEntriesGrid.selection');
+
+ if (!entry) {
+ console.warn('no prefix list entry selected!');
+ return;
+ }
+
+ Ext.create('PVE.sdn.EditPrefixListEntryWindow', {
+ autoShow: true,
+ isCreate: false,
+ entry: entry.data,
+ submit: function () {
+ let me = this;
+ entry.set(me.getValues());
+
+ panel.saveEntries();
+
+ me.close();
+ },
+ });
+ },
+ removePrefixListEntry: function () {
+ let me = this;
+
+ let entry = me.getViewModel().get('prefixListEntriesGrid.selection');
+
+ Ext.Msg.show({
+ title: gettext('Confirm'),
+ icon: Ext.Msg.WARNING,
+ message: gettext('Remove prefix list entry?'),
+ buttons: Ext.Msg.YESNO,
+ defaultFocus: 'no',
+ callback: function (btn) {
+ if (btn !== 'yes') {
+ return;
+ }
+
+ me.getViewModel().getStore('prefixListEntries').remove(entry);
+ me.saveEntries();
+ },
+ });
+ },
+ },
+
+ layout: 'border',
+
+ items: [
+ {
+ xtype: 'pveSDNPrefixListView',
+ region: 'west',
+ width: '50%',
+ border: false,
+ split: true,
+ reference: 'prefixListGrid',
+ bind: {
+ store: '{prefixLists}',
+ },
+ listeners: {
+ select: 'selectPrefixList',
+ },
+ },
+ {
+ xtype: 'pveSDNPrefixListEntriesView',
+ region: 'center',
+ border: false,
+ bind: {
+ prefixList: '{prefixListGrid.selection}',
+ store: '{prefixListEntries}',
+ emptyText: '{entryGridEmptyText}',
+ },
+ reference: 'prefixListEntriesGrid',
+ },
+ ],
+});
--
2.47.3
next prev parent reply other threads:[~2026-05-08 16:34 UTC|newest]
Thread overview: 25+ messages / expand[flat|nested] mbox.gz Atom feed top
2026-05-08 16:31 [PATCH manager/network/proxmox{-ve-rs,-perl-rs} v6 00/24] Add support for route maps / prefix lists to SDN Stefan Hanreich
2026-05-08 16:31 ` [PATCH proxmox-ve-rs v6 01/24] sdn: prefix lists: refactor section config and api format Stefan Hanreich
2026-05-08 16:31 ` [PATCH proxmox-ve-rs v6 02/24] prefix lists: implement validation for prefix lists Stefan Hanreich
2026-05-08 16:31 ` [PATCH proxmox-perl-rs v6 03/24] sdn: prefix lists: refactor existing API endpoint Stefan Hanreich
2026-05-08 16:31 ` [PATCH proxmox-perl-rs v6 04/24] sdn: prefix lists: add crud methods for prefix list entries Stefan Hanreich
2026-05-08 16:31 ` [PATCH proxmox-perl-rs v6 05/24] sdn: prefix lists: validate prefix lists Stefan Hanreich
2026-05-08 16:31 ` [PATCH proxmox-perl-rs v6 06/24] sdn: route maps: add route map list method Stefan Hanreich
2026-05-08 16:31 ` [PATCH pve-network v6 07/24] api: refactor route map api structure Stefan Hanreich
2026-05-08 16:31 ` [PATCH pve-network v6 08/24] api: refactor prefix list " Stefan Hanreich
2026-05-08 16:31 ` [PATCH pve-manager v6 09/24] ui: sdn: add route map selector Stefan Hanreich
2026-05-08 16:31 ` [PATCH pve-manager v6 10/24] ui: sdn: add prefix list selector Stefan Hanreich
2026-05-08 16:31 ` Stefan Hanreich [this message]
2026-05-08 16:31 ` [PATCH pve-manager v6 12/24] ui: sdn: add panel for managing route map entries Stefan Hanreich
2026-05-08 16:31 ` [PATCH pve-manager v6 13/24] ui: sdn: bgp controller: allow configuring route maps Stefan Hanreich
2026-05-08 16:31 ` [PATCH pve-manager v6 14/24] ui: sdn: evpn " Stefan Hanreich
2026-05-08 16:31 ` [PATCH pve-manager v6 15/24] ui: sdn: openfabric: add route filter Stefan Hanreich
2026-05-08 16:31 ` [PATCH pve-manager v6 16/24] ui: sdn: ospf: add route filter setting Stefan Hanreich
2026-05-08 16:31 ` [PATCH pve-manager v6 17/24] ui: sdn: prefix list: add missing subjects Stefan Hanreich
2026-05-08 16:31 ` [PATCH pve-manager v6 18/24] sdn: do not fail rendering record data if pending property is missing Stefan Hanreich
2026-05-08 16:31 ` [PATCH pve-manager v6 19/24] ui: sdn: prefix list: adapt to changed api structure Stefan Hanreich
2026-05-08 16:31 ` [PATCH pve-manager v6 20/24] ui: sdn: route maps: adapt to new route map " Stefan Hanreich
2026-05-08 16:31 ` [PATCH pve-manager v6 21/24] ui: sdn: prefix lists: route maps: use integerfields for numbers Stefan Hanreich
2026-05-08 16:31 ` [PATCH pve-manager v6 22/24] ui: sdn: prefix list panel: reload data on deleting prefix list entry Stefan Hanreich
2026-05-08 16:31 ` [PATCH pve-manager v6 23/24] ui: prefix list panel: delete empty le and get properties Stefan Hanreich
2026-05-08 16:31 ` [PATCH pve-manager v6 24/24] ui: prefix list entry panel: make prefix required Stefan Hanreich
Reply instructions:
You may reply publicly to this message via plain-text email
using any one of the following methods:
* Save the following mbox file, import it into your mail client,
and reply-to-all from there: mbox
Avoid top-posting and favor interleaved quoting:
https://en.wikipedia.org/wiki/Posting_style#Interleaved_style
* Reply using the --to, --cc, and --in-reply-to
switches of git-send-email(1):
git send-email \
--in-reply-to=20260508163134.481912-12-s.hanreich@proxmox.com \
--to=s.hanreich@proxmox.com \
--cc=pve-devel@lists.proxmox.com \
--cc=t.lamprecht@proxmox.com \
/path/to/YOUR_REPLY
https://kernel.org/pub/software/scm/git/docs/git-send-email.html
* If your mail client supports setting the In-Reply-To header
via mailto: links, try the mailto: link
Be sure your reply has a Subject: header at the top and a blank line
before the message body.
This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox