Re: [PATCH pve-manager v8 20/25] ui: sdn: prefix list: adapt to changed api structure

[Stefan Hanreich <s.hanreich@proxmox.com>]

On 5/11/26 6:09 PM, Lukas Sichert wrote:
> On 2026-05-11 15:36, Stefan Hanreich <s.hanreich@proxmox.com> wrote:
> 
>> From: Dominik Csapak <d.csapak@proxmox.com>
>>
>> instead of having to parse out the prefix list entries from the overall
>> prefix list GET api call, the entries are now queried below:
>>
>> /sdn/cluster/prefix-list/{id}/entries
>>
>> so the entries grid can be simplified to use it's own store + url.
>> This makes it possible to move the stores out of the viewmodel and into
>> the respective grid views.
>>
>> Also use proxmoxStdRemoveButtons here to simplify the removal code.
>>
>> Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
>> [SH: fixed wrong url in edit window, made sequence number optional and
>> added empty text]
>> Signed-off-by: Stefan Hanreich <s.hanreich@proxmox.com>
>> ---
>>  www/manager6/sdn/PrefixListPanel.js | 279 ++++++++++------------------
>>  1 file changed, 96 insertions(+), 183 deletions(-)
>>
>> diff --git a/www/manager6/sdn/PrefixListPanel.js b/www/manager6/sdn/PrefixListPanel.js
>> index cdb860f4f..0e5cc11b8 100644
>> --- a/www/manager6/sdn/PrefixListPanel.js
>> +++ b/www/manager6/sdn/PrefixListPanel.js
>> @@ -1,16 +1,11 @@
>>  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];
>> -    },
>> +    fields: ['id', 'state'],
>>  });
>>  
>>  Ext.define('PVE.sdn.PrefixListEntry', {
>>      extend: 'Ext.data.Model',
>> -    fields: ['id', 'action', 'prefix', 'le', 'ge', 'pending'],
>> +    fields: ['id', 'action', 'seq', 'prefix', 'le', 'ge', 'pending'],
>>  });
>>  
>>  Ext.define('PVE.sdn.EditPrefixListWindow', {
>> @@ -45,10 +40,11 @@ Ext.define('PVE.sdn.EditPrefixListWindow', {
>>  
>>  Ext.define('PVE.sdn.EditPrefixListEntryWindow', {
>>      extend: 'Proxmox.window.Edit',
>> +    mixins: ['Proxmox.Mixin.CBind'],
>>  
>>      subject: gettext('Prefix List Entry'),
>>  
>> -    url: '/cluster/sdn/prefix-lists',
>> +    baseUrl: '/cluster/sdn/prefix-lists',
>>  
>>      config: {
>>          entry: null,
>> @@ -57,6 +53,15 @@ Ext.define('PVE.sdn.EditPrefixListEntryWindow', {
>>      isCreate: false,
>>  
>>      items: [
>> +        {
>> +            xtype: 'proxmoxintegerfield',
>> +            name: 'seq',
>> +            fieldLabel: gettext('Sequence Nr.'),
>> +            emptyText: gettext('autogenerated'),
>> +            cbind: {
>> +                deleteEmpty: '{!isCreate}',
>> +            }
>> +        },
>>          {
>>              xtype: 'proxmoxKVComboBox',
>>              fieldLabel: gettext('Action'),
>> @@ -88,6 +93,17 @@ Ext.define('PVE.sdn.EditPrefixListEntryWindow', {
>>      initComponent: function () {
>>          let me = this;
>>          me.method = me.isCreate ? 'POST' : 'PUT';
>> +
>> +        if (!me.prefixList) {
>> +            throw new 'no prefixList given'();
>> +        }
>> +
>> +        if (me.entry) {
>> +            me.url = `${me.baseUrl}/${me.prefixList}/entries/${me.entry.seq}`;
>> +        } else {
>> +            me.url = `${me.baseUrl}/${me.prefixList}/entries`;
>> +        }
>> +
>>          me.callParent();
>>  
>>          me.setValues(me.getEntry());
>> @@ -108,19 +124,28 @@ Ext.define('PVE.sdn.PrefixListView', {
>>          },
>>          {
>>              text: gettext('Remove'),
>> -            xtype: 'button',
>> -            handler: 'removePrefixList',
>> -            bind: {
>> -                disabled: '{!prefixListGrid.selection}',
>> -            },
>> +            xtype: 'proxmoxStdRemoveButton',
>> +            baseurl: '/cluster/sdn/prefix-lists/',
>> +            dangerous: true,
>> +            callback: 'reloadPrefixList',
>>          },
>> +        '->',
>>          {
>>              text: gettext('Reload'),
>>              xtype: 'button',
>> -            handler: 'reload',
>> +            handler: 'reloadPrefixList',
>>          },
>>      ],
>>  
>> +    store: {
>> +        autoLoad: true,
>> +        model: 'PVE.sdn.PrefixList',
>> +        proxy: {
>> +            type: 'proxmox',
>> +            url: '/api2/json/cluster/sdn/prefix-lists?pending=1',
>> +        },
>> +    },
>> +
>>      columns: [
>>          {
>>              text: gettext('Name'),
>> @@ -139,6 +164,12 @@ Ext.define('PVE.sdn.PrefixListView', {
>>              },
>>          },
>>      ],
>> +
>> +    initComponent: function () {
>> +        let me = this;
>> +        me.callParent();
>> +        Proxmox.Utils.monStoreErrors(me, me.getStore());
>> +    },
>>  });
>>  
>>  Ext.define('PVE.sdn.PrefixListEntriesView', {
>> @@ -151,30 +182,22 @@ Ext.define('PVE.sdn.PrefixListEntriesView', {
>>          prefixList: null,
>>      },
>>  
>> -    viewConfig: {
>> -        plugins: [
>> -            {
>> -                ptype: 'gridviewdragdrop',
>> -            },
>> -        ],
>> -    },
>> -
>>      listeners: {
>> -        drop: 'saveEntries',
>>          itemdblclick: 'editPrefixListEntry',
>>      },
>>  
>> +    store: {
>> +        model: 'PVE.sdn.PrefixListEntry',
>> +        proxy: {
>> +            type: 'proxmox',
>> +        },
>> +    },
>> +
>>      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('Sequence Nr.'),
>> +            dataIndex: 'seq',
>> +            flex: 1,
>>          },
>>          {
>>              text: gettext('Action'),
>> @@ -209,21 +232,32 @@ Ext.define('PVE.sdn.PrefixListEntriesView', {
>>          },
>>          {
>>              text: gettext('Edit'),
>> -            xtype: 'button',
>> +            xtype: 'proxmoxButton',
>> +            disabled: true,
>>              handler: 'editPrefixListEntry',
>> -            bind: {
>> -                disabled: '{!prefixListEntriesGrid.selection}',
>> -            },
>>          },
>>          {
>>              text: gettext('Remove'),
>> -            xtype: 'button',
>> -            handler: 'removePrefixListEntry',
>> -            bind: {
>> -                disabled: '{!prefixListEntriesGrid.selection}',
>> +            xtype: 'proxmoxStdRemoveButton',
>> +            customConfirmationMessage: gettext(
>> +                'Are you sure you want to remove entry with sequence {0}',
>> +            ),
>> +            getRecordName: (rec) => rec.data.seq,
>> +            getUrl: function (rec) {
>> +                let grid = this.up('grid');
>> +                let prefixList = grid.prefixList;
>> +                let id = prefixList.getId();
>> +                let seq = rec.data.seq;
>> +                return `/cluster/sdn/prefix-lists/${id}/entries/${seq}`;
> 
> I am a bit confused here. I cannot find a Api Handler for '/entries' in
> the pve-network PrefixLists.pm File. Also if I want to look at the
> prefix-list entries in the Gui I get 'Method 'GET
> /cluster/sdn/prefix-lists/<prefix-list>/entries' not implemented (501)'.
> Is this somehow handled in a more obscure way or is it a bug that
> happened during rewriting the API interface?

hmm, just double-checked here:

root@elementalist:~# pvesh get /cluster/sdn/prefix-lists/qwe/entries
┌────────┬────┬────────────────┬─────┐
│ action │ le │ prefix         │ seq │
╞════════╪════╪════════════════╪═════╡
│ permit │    │ 203.0.113.0/24 │ 5   │
├────────┼────┼────────────────┼─────┤
│ permit │ 32 │ 192.0.2.0/24   │ 7   │
└────────┴────┴────────────────┴─────┘

root@elementalist:~# pvesh get /cluster/sdn/prefix-lists/qwe/entries/5
┌────────┬────────────────┐
│ key    │ value          │
╞════════╪════════════════╡
│ action │ permit         │
├────────┼────────────────┤
│ prefix │ 203.0.113.0/24 │
├────────┼────────────────┤
│ seq    │ 5              │
└────────┴────────────────┘

root@elementalist:~# pvesh delete /cluster/sdn/prefix-lists/qwe/entries/5


The respective subfolder is defined in:
pve-network/src/PVE/API2/Network/SDN/PrefixLists/PrefixList.pm

and the handlers then in:
pve-network/src/PVE/API2/Network/SDN/PrefixLists/PrefixListEntry.pm