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 an external index of several public inboxes,
see mirroring instructions on how to clone and mirror
all data and code used by this external index.