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

[Thomas Lamprecht <t.lamprecht@proxmox.com>]

Am 27.03.26 um 16:01 schrieb Gabriel Goller:
> 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.

This is not really a ideal (modern) ExtJS component implementation, i.e.
could be more declarative, and has some smaller UX issues, like scrolling
the whole view, not the two panels that can actually get taller separately.

We also might want to load this for all nodes, as with more than a handful
of nodes this becomes rather very annoying to cross-check.  But that we
can still do/extend later just fine, so no hard feelings here for now.

My reimplementation that's still relatively close to yours semantically:

Ext.define('PVE.sdn.SdnDiffView', {
    extend: 'Ext.window.Window',

    width: 800,
    height: 900,

    modal: true,
    title: gettext('Pending SDN configuration changes'),

    layout: {
        type: 'vbox',
        align: 'stretch',
    },

    viewModel: {
        data: {
            node: undefined,
            frr_diff: '',
            interfaces_diff: '',
        },
    },

    controller: {
        xclass: 'Ext.app.ViewController',

        nodeChange: function (_field, value) {
            let me = this;
            let vm = me.getViewModel();
            let view = me.getView();

            vm.set('node', value);
            view.setLoading(gettext('Fetching diff...'));

            Proxmox.Async.api2({
                url: '/cluster/sdn/dry-run',
                params: { node: value },
                method: 'GET',
            })
                .then((req) => {
                    let diff = req.result.data;

                    vm.set('frr_diff', Ext.htmlEncode(diff['frr-diff'] ?? gettext('No changes')));
                    vm.set(
                        'interfaces_diff',
                        Ext.htmlEncode(diff['interfaces-diff'] ?? gettext('No changes')),
                    );
                })
                .catch(Proxmox.Utils.alertResponseFailure)
                .finally(() => {
                    view.setLoading(false);
                });
        },
    },

    items: [
        {
            xtype: 'pveNodeSelector',
            fieldLabel: gettext('Node'),
            padding: 10,
            labelWidth: 120,
            name: 'node',
            allowBlank: false,
            listeners: {
                change: 'nodeChange',
            },
        },
        {
            xtype: 'panel',
            title: gettext('FRR Config'),
            flex: 1,
            scrollable: true,
            items: [
                {
                    xtype: 'component',
                    padding: 5,
                    style: {
                        'white-space': 'pre',
                        'font-family': 'monospace',
                    },
                    bind: {
                        html: '{frr_diff}',
                    },
                },
            ],
        },
        {
            xtype: 'panel',
            title: gettext('Interfaces Config'),
            flex: 1,
            scrollable: true,
            items: [
                {
                    xtype: 'component',
                    padding: 5,
                    style: {
                        'white-space': 'pre',
                        'font-family': 'monospace',
                    },
                    bind: {
                        html: '{interfaces_diff}',
                    },
                },
            ],
        },
    ],
    buttons: [
        {
            text: gettext('Close'),
            handler: function () {
                this.up('window').close();
            },
        },
    ],
});