[PATCH pve-manager v3 40/45] ui: sdn: microseg: add fragments option to the rule form

[Hannes Laimer <h.laimer@proxmox.com>]

Signed-off-by: Hannes Laimer <h.laimer@proxmox.com>
---
 www/manager6/sdn/microseg/RuleEdit.js | 26 +++++++++++++++++++++++---
 www/manager6/sdn/microseg/RuleView.js |  4 ++++
 2 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/www/manager6/sdn/microseg/RuleEdit.js b/www/manager6/sdn/microseg/RuleEdit.js
index 3ee9c3b36e46..95620050fad4 100644
--- a/www/manager6/sdn/microseg/RuleEdit.js
+++ b/www/manager6/sdn/microseg/RuleEdit.js
@@ -69,20 +69,24 @@ Ext.define('PVE.sdn.microseg.RuleInputPanel', {
         let updateNarrowing = () => {
             let macro = me.down('field[name=macro]');
             let proto = me.down('field[name=proto]');
+            let fragments = me.isCreate && !!me.down('field[name=fragments]').getValue();
+            if (me.isCreate) {
+                setNarrowing(macro, !fragments, fragments);
+            }
             let byMacro = !Ext.isEmpty(macro.getValue());
             if (me.isCreate) {
                 setNarrowing(proto, !byMacro, byMacro);
             }
-            let editable = me.isCreate && !byMacro;
+            let editable = me.isCreate && !fragments && !byMacro;
             let protocol = proto.getValue();
             let icmpv4 = protocol === 'icmp';
             let icmpv6 = protocol === 'icmpv6' || protocol === 'ipv6-icmp';
             let v4 = me.down('#microsegIcmpv4Type');
             let v6 = me.down('#microsegIcmpv6Type');
             v4.setHidden(!icmpv4);
-            setNarrowing(v4, icmpv4 && editable);
+            setNarrowing(v4, icmpv4 && editable, fragments);
             v6.setHidden(!icmpv6);
-            setNarrowing(v6, icmpv6 && editable);
+            setNarrowing(v6, icmpv6 && editable, fragments);
             let ports = !icmpv4 && !icmpv6;
             for (const name of ['sport', 'dport']) {
                 let field = me.down(`field[name=${name}]`);
@@ -240,6 +244,22 @@ Ext.define('PVE.sdn.microseg.RuleInputPanel', {
                     [0, gettext('Deny')],
                 ],
             },
+            {
+                xtype: 'proxmoxcheckbox',
+                name: 'fragments',
+                fieldLabel: gettext('Fragments Only'),
+                uncheckedValue: null,
+                disabled: !me.isCreate,
+                autoEl: {
+                    tag: 'div',
+                    'data-qtip': gettext(
+                        'Match the IP fragments after the first. They carry no ports and no ICMP type.',
+                    ),
+                },
+                listeners: {
+                    change: updateNarrowing,
+                },
+            },
         ];
 
         me.columnB = [
diff --git a/www/manager6/sdn/microseg/RuleView.js b/www/manager6/sdn/microseg/RuleView.js
index 58d81221402c..95c08343e725 100644
--- a/www/manager6/sdn/microseg/RuleView.js
+++ b/www/manager6/sdn/microseg/RuleView.js
@@ -169,6 +169,9 @@ Ext.define(
                     return data.macro;
                 }
                 let proto = data.proto;
+                if (data.fragments) {
+                    return proto ? `${proto} ${gettext('fragments')}` : gettext('fragments');
+                }
                 if (!proto) {
                     return '';
                 }
@@ -296,6 +299,7 @@ Ext.define(
                 'dport',
                 'icmp-type',
                 'macro',
+                'fragments',
                 'direction',
                 'rank',
                 'specificity',
-- 
2.47.3