[PATCH network] sdn: add dry-run diff view for sdn apply

[PATCH network] sdn: add dry-run diff view for sdn apply

[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
having to apply the config.

Co-authored-by: Thomas Lamprecht <t.lamprecht@proxmox.com>
Signed-off-by: Gabriel Goller <g.goller@proxmox.com>
---
 www/manager6/Makefile           |   1 +
 www/manager6/sdn/SdnDiffView.js | 114 ++++++++++++++++++++++++++++++++
 www/manager6/sdn/StatusView.js  |   8 +++
 3 files changed, 123 insertions(+)
 create mode 100644 www/manager6/sdn/SdnDiffView.js

diff --git a/www/manager6/Makefile b/www/manager6/Makefile
index b0c94b322a4b..b506849ddb08 100644
--- a/www/manager6/Makefile
+++ b/www/manager6/Makefile
@@ -287,6 +287,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..2bc52049585f
--- /dev/null
+++ b/www/manager6/sdn/SdnDiffView.js
@@ -0,0 +1,114 @@
+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();
+            },
+        },
+    ],
+});
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,
-- 
2.47.3

Re: [PATCH network] sdn: add dry-run diff view for sdn apply

[Gabriel Goller]

Ah, this is obviously "manager" and not "network", my bad!