[PATCH pve-manager v6 19/24] ui: sdn: prefix list: adapt to changed api structure

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

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}`;
             },
         },
     ],
+
+    initComponent: function () {
+        let me = this;
+        me.callParent();
+        Proxmox.Utils.monStoreErrors(me, me.getStore());
+    },
 });
 
 Ext.define('PVE.sdn.PrefixListPanel', {
@@ -233,30 +267,6 @@ Ext.define('PVE.sdn.PrefixListPanel', {
     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');
@@ -269,64 +279,24 @@ Ext.define('PVE.sdn.PrefixListPanel', {
     },
 
     controller: {
-        reload: function () {
+        reloadPrefixList: 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);
-                });
+            me.lookup('prefixListGrid').getStore().load();
+            // reset entries grid
+            let entriesGrid = me.lookup('prefixListEntriesGrid');
+            entriesGrid.getStore().setData([]);
+            Proxmox.Utils.setErrorMask(entriesGrid, false);
         },
-        saveEntries: function () {
+        reloadPrefixEntries: 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);
-                });
+            me.lookup('prefixListEntriesGrid').getStore().load();
         },
         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');
+            let prefixEntriesGrid = me.lookup('prefixListEntriesGrid');
+            let entryStore = prefixEntriesGrid.getStore();
+            let url = `/api2/json/cluster/sdn/prefix-lists/${record.getId()}/entries`;
 
             entryStore.getProxy().setUrl(url);
             entryStore.load();
@@ -338,56 +308,28 @@ Ext.define('PVE.sdn.PrefixListPanel', {
                 autoShow: true,
                 isCreate: true,
                 listeners: {
-                    close: () => me.reload(),
+                    close: () => me.reloadPrefixList(),
                 },
             });
         },
-        removePrefixList: function () {
+        addPrefixListEntry: 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();
+                prefixList: prefixList.getId(),
+                listeners: {
+                    close: () => me.reloadPrefixEntries(),
                 },
             });
         },
         editPrefixListEntry: function () {
-            let panel = this;
+            let me = this;
 
-            let entry = panel.getViewModel().get('prefixListEntriesGrid.selection');
+            let entry = me.getViewModel().get('prefixListEntriesGrid.selection');
+            let prefixList = me.getViewModel().get('prefixListGrid.selection');
 
             if (!entry) {
                 console.warn('no prefix list entry selected!');
@@ -397,35 +339,10 @@ Ext.define('PVE.sdn.PrefixListPanel', {
             Ext.create('PVE.sdn.EditPrefixListEntryWindow', {
                 autoShow: true,
                 isCreate: false,
+                prefixList: prefixList.getId(),
                 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();
+                listeners: {
+                    close: () => me.reloadPrefixEntries(),
                 },
             });
         },
@@ -441,9 +358,6 @@ Ext.define('PVE.sdn.PrefixListPanel', {
             border: false,
             split: true,
             reference: 'prefixListGrid',
-            bind: {
-                store: '{prefixLists}',
-            },
             listeners: {
                 select: 'selectPrefixList',
             },
@@ -454,7 +368,6 @@ Ext.define('PVE.sdn.PrefixListPanel', {
             border: false,
             bind: {
                 prefixList: '{prefixListGrid.selection}',
-                store: '{prefixListEntries}',
                 emptyText: '{entryGridEmptyText}',
             },
             reference: 'prefixListEntriesGrid',
-- 
2.47.3