[PATCH pve-manager 7/9] ui: sdn: fabrics: add redistribution grid component

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

This component can be used to configure the redistribution settings
for fabrics that utilize FRR. Since the redistribution settings are
basically the same for each protocol, except for the allowed source
protocols, implement a generic component where it is possible to
override the possible source protocols.

Signed-off-by: Stefan Hanreich <s.hanreich@proxmox.com>
---
 www/manager6/Makefile                         |   1 +
 .../sdn/fabrics/RedistributionGrid.js         | 173 ++++++++++++++++++
 2 files changed, 174 insertions(+)
 create mode 100644 www/manager6/sdn/fabrics/RedistributionGrid.js

diff --git a/www/manager6/Makefile b/www/manager6/Makefile
index 002ac9733..1ad77f3d3 100644
--- a/www/manager6/Makefile
+++ b/www/manager6/Makefile
@@ -337,6 +337,7 @@ JSSRC= 							\
 	sdn/fabrics/InterfacePanel.js			\
 	sdn/fabrics/NodeEdit.js				\
 	sdn/fabrics/FabricEdit.js			\
+	sdn/fabrics/RedistributionGrid.js			\
 	sdn/fabrics/openfabric/InterfacePanel.js	\
 	sdn/fabrics/openfabric/NodeEdit.js		\
 	sdn/fabrics/openfabric/FabricEdit.js		\
diff --git a/www/manager6/sdn/fabrics/RedistributionGrid.js b/www/manager6/sdn/fabrics/RedistributionGrid.js
new file mode 100644
index 000000000..8580c4793
--- /dev/null
+++ b/www/manager6/sdn/fabrics/RedistributionGrid.js
@@ -0,0 +1,173 @@
+Ext.define('PVE.sdn.Fabric.OspfRedistribution', {
+    extend: 'Ext.data.Model',
+    fields: ['source'],
+});
+
+Ext.define('PVE.sdn.Fabric.RedistributionGrid', {
+    alias: 'widget.pveSDNRedistributionGrid',
+    extend: 'Ext.grid.Panel',
+    mixins: ['Ext.form.field.Field'],
+
+    config: {
+        sources: [],
+        additionalColumns: [],
+    },
+
+    store: {
+        model: 'PVE.sdn.Fabric.OspfRedistribution',
+        listeners: {
+            update: 'handleUpdate',
+        }
+    },
+
+    tbar: [
+        '->',
+        {
+            text: gettext('Add'),
+            handler: 'addRedistribution',
+        }
+    ],
+
+    border: false,
+
+    columns: [],
+
+    controller: {
+        xclass: 'Ext.app.ViewController',
+
+        addRedistribution: function() {
+            let me = this;
+
+            let source = me.getView().getSources()[0][0];
+
+            me.getView().getStore().add({
+                source,
+            });
+
+            me.handleUpdate();
+        },
+
+        deleteRedistribution: function (table, rI, cI, item, e, rec) {
+            let me = this;
+            me.getView().getStore().remove(rec);
+            me.handleUpdate();
+        },
+
+        handleUpdate: function() {
+            let me = this;
+            me.getView().checkChange();
+        }
+    },
+
+    initComponent: function() {
+        let me = this;
+
+        if (me.getSources().length === 0) {
+            throw "must define at least one redistribution source!";
+        }
+
+        me.columns = [
+            {
+                text: gettext("Source"),
+                xtype: 'widgetcolumn',
+                flex: 1,
+                widget: {
+                    xtype: 'proxmoxKVComboBox',
+                    comboItems: me.getSources(),
+                    bind: {
+                        value: '{record.source}',
+                    },
+                    listeners: {
+                        select: 'handleUpdate',
+                    },
+                },
+            },
+            {
+                text: gettext("Route Map"),
+                xtype: 'widgetcolumn',
+                flex: 1,
+                widget: {
+                    xtype: 'pveSDNRouteMapSelector',
+                    bind: {
+                        value: '{record.route_map}',
+                    },
+                    listeners: {
+                        select: 'handleUpdate',
+                    },
+                },
+            },
+            ...me.getAdditionalColumns(),
+            {
+                text: gettext("Action"),
+                xtype: 'actioncolumn',
+                width: 100,
+                items: [
+                    {
+                        tooltip: gettext('Delete'),
+                        handler: 'deleteRedistribution',
+                        iconCls: 'fa critical fa-trash-o',
+                    },
+                ],
+            },
+        ];
+
+        me.callParent();
+    },
+
+    isEqual: function(value1, value2) {
+        return JSON.stringify(value1) === JSON.stringify(value2);
+    },
+
+    getValue: function() {
+        let me = this;
+
+        return me.getStore().getData().items.map((record) => {
+            let data = structuredClone(record.data);
+            delete data.id;
+
+            return PVE.Parser.printPropertyString(data, undefined);
+        });
+    },
+
+    setValue: function(value) {
+        let me = this;
+
+        me.getStore().setData(value.map((item) => PVE.Parser.parsePropertyString(item)));
+        me.resetOriginalValue();
+    },
+
+    getSubmitData: function () {
+        let me = this;
+
+        let name = me.getName();
+        let value = me.getValue();
+
+        if (value.length === 0 && !me.isCreate) {
+            return {
+                delete: name,
+            };
+        }
+
+        return {
+            [name]: value,
+        };
+    },
+
+    getErrors: function(value) {
+        let me = this;
+
+        let errors = [];
+        let sourceCount = {};
+
+        for (const record of me.getStore().getData().items) {
+            sourceCount[record.data.source] ??= 0;
+            sourceCount[record.data.source]++;
+
+            if (sourceCount[record.data.source] === 2) {
+                errors.push(`Duplicate source: ${record.data.source}`);
+            }
+        }
+
+        return errors;
+    }
+});
-- 
2.47.3