Re: [PATCH pve-manager v3 1/1] sdn: add dry-run diff view for sdn apply

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

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 <g.goller@proxmox.com>
> ---
>  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,