still looks a bit barebones imo, but at least its monospaced now ;)
Maybe we could make the '{FRR,Interfaces} Config' headings rows, instead
of taking up a whole column with lots of unused whitespace.
I think it should also show a nicer message when there are no changes -
stating explicitly that nothing changed - instead of just an empty panel.Not a big blocker, since we can always improve it in a follow-up patch. On 3/5/26 11:04 AM, Gabriel Goller wrote: > Introduce a new SdnDiffView modal that runs a dry-run and shows the frr > and ifupdown2 configuration changes which will be made when clicking > apply. Now the user knows which config options will be set without > needing to apply the config. > > Signed-off-by: Gabriel Goller <[email protected]> > --- > www/manager6/Makefile | 1 + > www/manager6/sdn/SdnDiffView.js | 139 ++++++++++++++++++++++++++++++++ > www/manager6/sdn/StatusView.js | 8 ++ > 3 files changed, 148 insertions(+) > create mode 100644 www/manager6/sdn/SdnDiffView.js > > diff --git a/www/manager6/Makefile b/www/manager6/Makefile > index 4558d53e54be..da602523b27a 100644 > --- a/www/manager6/Makefile > +++ b/www/manager6/Makefile > @@ -286,6 +286,7 @@ JSSRC= > \ > sdn/ControllerView.js \ > sdn/Status.js \ > sdn/StatusView.js \ > + sdn/SdnDiffView.js \ > sdn/VnetEdit.js \ > sdn/VnetView.js \ > sdn/VnetACLView.js \ > diff --git a/www/manager6/sdn/SdnDiffView.js b/www/manager6/sdn/SdnDiffView.js > new file mode 100644 > index 000000000000..bfff3675950d > --- /dev/null > +++ b/www/manager6/sdn/SdnDiffView.js > @@ -0,0 +1,139 @@ > +Ext.define('PVE.sdn.SdnDiffView', { > + extend: 'Ext.window.Window', > + > + width: 800, > + height: 900, > + > + scrollable: true, > + modal: true, > + title: gettext('Pending SDN configuration changes'), > + > + node: undefined, > + > + viewModel: { > + data: { > + frr_diff: undefined, > + interfaces_diff: undefined, > + }, > + }, > + > + items: [ > + { > + xtype: 'displayfield', > + padding: 10, > + fieldLabel: gettext('FRR config'), > + bind: { > + value: '{frr_diff}', > + }, > + }, > + { > + xtype: 'displayfield', > + padding: 10, > + fieldLabel: gettext('Interfaces config'), > + bind: { > + value: '{interfaces_diff}', > + }, > + }, > + ], > + buttons: [ > + { > + handler: function () { > + this.up('window').close(); > + }, > + text: gettext('Close'), > + }, > + ], > + > + loadDiff: async function () { > + let me = this; > + > + let req = await Proxmox.Async.api2({ > + url: `/cluster/sdn/dry-run`, > + params: { node: me.node }, > + method: 'PUT', > + }); > + > + return req.result.data; > + }, > + > + load: function () { > + let me = this; > + > + me.setLoading('fetching node diff'); > + > + me.loadDiff() > + .catch(Proxmox.Utils.alertResponseFailure) > + .then((diff) => { > + if (diff['frr-diff'] === null) { > + this.getViewModel().set('frr_diff', ''); > + } else { > + this.getViewModel().set('frr_diff', '<pre>' + > diff['frr-diff'] + '</pre>'); > + } > + if (diff['interfaces-diff'] === null) { > + this.getViewModel().set('interfaces_diff', ''); > + } else { > + this.getViewModel().set( > + 'interfaces_diff', > + '<pre>' + diff['interfaces-diff'] + '</pre>', > + ); > + } > + }) > + .finally(() => { > + me.setLoading(false); > + }); > + }, > + > + getNodeSelector: function () { > + let me = this; > + > + return Ext.create('PVE.form.NodeSelector', { > + xtype: 'pveNodeSelector', > + reference: 'nodeselector', > + fieldLabel: gettext('Node'), > + padding: 10, > + labelWidth: 120, > + name: 'node', > + allowBlank: false, > + listeners: { > + change: function (f, value) { > + me.node = value; > + me.load(); > + }, > + }, > + listConfig: { > + columns: [ > + { > + header: gettext('Node'), > + dataIndex: 'node', > + sortable: true, > + hideable: false, > + flex: 1, > + }, > + ], > + }, > + store: { > + fields: ['node'], > + proxy: { > + type: 'proxmox', > + url: '/api2/json/nodes', > + }, > + sorters: [ > + { > + property: 'node', > + direction: 'ASC', > + }, > + ], > + }, > + }); > + }, > + > + initComponent: function () { > + let me = this; > + > + me.nodeSelector = me.getNodeSelector(); > + > + me.items = [me.nodeSelector, ...me.items]; > + > + me.callParent(); > + }, > +}); > diff --git a/www/manager6/sdn/StatusView.js b/www/manager6/sdn/StatusView.js > index fbc712c6cf6b..fada50411e91 100644 > --- a/www/manager6/sdn/StatusView.js > +++ b/www/manager6/sdn/StatusView.js > @@ -69,6 +69,14 @@ Ext.define( > }); > }, > }, > + { > + text: gettext('Dry-Run'), > + handler: function () { > + Ext.create('PVE.sdn.SdnDiffView', { > + autoShow: true, > + }); > + }, > + }, > ], > viewConfig: { > trackOver: false,
