From: Stefan Hanreich <s.hanreich@proxmox.com>
To: pve-devel@lists.proxmox.com
Cc: Thomas Lamprecht <t.lamprecht@proxmox.com>
Subject: [PATCH pve-manager v8 12/25] ui: sdn: add panel for managing prefix lists
Date: Mon, 11 May 2026 15:36:31 +0200 [thread overview]
Message-ID: <20260511133650.310040-13-s.hanreich@proxmox.com> (raw)
In-Reply-To: <20260511133650.310040-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-11 13:40 UTC|newest]
Thread overview: 30+ messages / expand[flat|nested] mbox.gz Atom feed top
2026-05-11 13:36 [PATCH manager/network/proxmox{-ve-rs,-perl-rs} v8 00/25] Add support for route maps / prefix lists to SDN Stefan Hanreich
2026-05-11 13:36 ` [PATCH proxmox-ve-rs v8 01/25] sdn: prefix lists: refactor section config and api format Stefan Hanreich
2026-05-11 13:36 ` [PATCH proxmox-ve-rs v8 02/25] prefix lists: implement validation for prefix lists Stefan Hanreich
2026-05-11 13:36 ` [PATCH proxmox-perl-rs v8 03/25] sdn: prefix lists: refactor existing API endpoint Stefan Hanreich
2026-05-11 13:36 ` [PATCH proxmox-perl-rs v8 04/25] sdn: prefix lists: add crud methods for prefix list entries Stefan Hanreich
2026-05-11 13:36 ` [PATCH proxmox-perl-rs v8 05/25] sdn: prefix lists: validate prefix lists Stefan Hanreich
2026-05-11 13:36 ` [PATCH proxmox-perl-rs v8 06/25] sdn: route maps: add route map list method Stefan Hanreich
2026-05-11 13:36 ` [PATCH pve-network v8 07/25] tests: fix prefix list tests by including seq property Stefan Hanreich
2026-05-11 13:36 ` [PATCH pve-network v8 08/25] api: refactor route map api structure Stefan Hanreich
2026-05-11 13:36 ` [PATCH pve-network v8 09/25] api: refactor prefix list " Stefan Hanreich
2026-05-11 13:36 ` [PATCH pve-manager v8 10/25] ui: sdn: add route map selector Stefan Hanreich
2026-05-11 13:36 ` [PATCH pve-manager v8 11/25] ui: sdn: add prefix list selector Stefan Hanreich
2026-05-11 13:36 ` Stefan Hanreich [this message]
2026-05-11 13:36 ` [PATCH pve-manager v8 13/25] ui: sdn: add panel for managing route map entries Stefan Hanreich
2026-05-11 13:36 ` [PATCH pve-manager v8 14/25] ui: sdn: bgp controller: allow configuring route maps Stefan Hanreich
2026-05-11 13:36 ` [PATCH pve-manager v8 15/25] ui: sdn: evpn " Stefan Hanreich
2026-05-11 13:36 ` [PATCH pve-manager v8 16/25] ui: sdn: openfabric: add route filter Stefan Hanreich
2026-05-11 13:36 ` [PATCH pve-manager v8 17/25] ui: sdn: ospf: add route filter setting Stefan Hanreich
2026-05-11 13:36 ` [PATCH pve-manager v8 18/25] ui: sdn: prefix list: add missing subjects Stefan Hanreich
2026-05-11 13:36 ` [PATCH pve-manager v8 19/25] sdn: do not fail rendering record data if pending property is missing Stefan Hanreich
2026-05-11 13:36 ` [PATCH pve-manager v8 20/25] ui: sdn: prefix list: adapt to changed api structure Stefan Hanreich
2026-05-11 16:11 ` Lukas Sichert
2026-05-11 16:24 ` Stefan Hanreich
2026-05-11 13:36 ` [PATCH pve-manager v8 21/25] ui: sdn: route maps: adapt to new route map " Stefan Hanreich
2026-05-11 13:36 ` [PATCH pve-manager v8 22/25] ui: sdn: prefix lists: route maps: use integerfields for numbers Stefan Hanreich
2026-05-11 13:36 ` [PATCH pve-manager v8 23/25] ui: sdn: prefix list panel: reload data on deleting prefix list entry Stefan Hanreich
2026-05-11 13:36 ` [PATCH pve-manager v8 24/25] ui: prefix list panel: delete empty le and get properties Stefan Hanreich
2026-05-11 13:36 ` [PATCH pve-manager v8 25/25] ui: prefix list entry panel: make prefix required Stefan Hanreich
2026-05-12 1:51 ` applied: [PATCH manager/network/proxmox{-ve-rs,-perl-rs} v8 00/25] Add support for route maps / prefix lists to SDN Thomas Lamprecht
2026-05-12 8:22 ` 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=20260511133650.310040-13-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.