Add IPv4 / IPv6 selectors definition

virtweb_frontend/src/widgets/forms/NWFilterRules.tsx

@@ -13,6 +13,7 @@ import {
 import {
   NWFSArp,
   NWFSArpOrRARP,
+  NWFSIPBase,
   NWFSMac,
   NWFSelector,
   NWFilterRule,
@@ -246,6 +247,14 @@ function NWFSelectorEdit(p: {
             <NWFSelectorArp {...p} selector={p.selector} />
           )}
 
+          {p.selector.type === "ipv4" && (
+            <NWFSelectorIP {...p} selector={p.selector} version={4} />
+          )}
+
+          {p.selector.type === "ipv6" && (
+            <NWFSelectorIP {...p} selector={p.selector} version={6} />
+          )}
+
           <TextInput
             editable={p.editable}
             label="Comment"
@@ -278,6 +287,11 @@ interface SpecificSelectorEditor<E> {
   onChange?: () => void;
 }
 
+interface SpecificSelectorEditorWithIPVersion<E>
+  extends SpecificSelectorEditor<E> {
+  version: 4 | 6;
+}
+
 function NWFSelectorMac(
   p: SpecificSelectorEditor<NWFSMac>
 ): React.ReactElement {
@@ -391,3 +405,72 @@ function NWFSelectorArp(
     </>
   );
 }
+
+function NWFSelectorIP(
+  p: SpecificSelectorEditorWithIPVersion<NWFSIPBase>
+): React.ReactElement {
+  return (
+    <>
+      <MACInput
+        {...p}
+        label="Src mac address"
+        value={p.selector.srcmacaddr}
+        onValueChange={(v) => {
+          p.selector.srcmacaddr = v;
+          p.onChange?.();
+        }}
+      />
+      <MACInput
+        {...p}
+        label="Src mac mask"
+        value={p.selector.srcmacaddr}
+        onValueChange={(v) => {
+          p.selector.srcmacaddr = v;
+          p.onChange?.();
+        }}
+      />
+      <MACInput
+        {...p}
+        label="Dst mac address"
+        value={p.selector.dstmacaddr}
+        onValueChange={(v) => {
+          p.selector.dstmacaddr = v;
+          p.onChange?.();
+        }}
+      />
+      <MACInput
+        {...p}
+        label="Dst mac mask"
+        value={p.selector.dstmacaddr}
+        onValueChange={(v) => {
+          p.selector.dstmacaddr = v;
+          p.onChange?.();
+        }}
+      />
+      <IPInputWithMask
+        {...p}
+        label="Source IP address / mask"
+        ip={p.selector.srcipaddr}
+        mask={p.selector.srcipmask}
+        version={p.version}
+        onValueChange={(ip, mask) => {
+          p.selector.srcipaddr = ip;
+          p.selector.srcipmask = mask;
+          p.onChange?.();
+        }}
+      />
+      <IPInputWithMask
+        {...p}
+        label="Destination IP address / mask"
+        ip={p.selector.dstipaddr}
+        mask={p.selector.dstipmask}
+        version={p.version}
+        onValueChange={(ip, mask) => {
+          p.selector.dstipaddr = ip;
+          p.selector.dstipmask = mask;
+          p.onChange?.();
+        }}
+      />
+    </>
+  );
+}