Add Layer4 rules support
This commit is contained in:
parent
c40ee037da
commit
975b4ab395
@ -1,6 +1,7 @@
|
||||
import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
|
||||
import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
|
||||
import DeleteIcon from "@mui/icons-material/Delete";
|
||||
import PlaylistAddIcon from "@mui/icons-material/PlaylistAdd";
|
||||
import {
|
||||
Button,
|
||||
Card,
|
||||
@ -11,20 +12,20 @@ import {
|
||||
Tooltip,
|
||||
} from "@mui/material";
|
||||
import {
|
||||
NWFSArp,
|
||||
NWFSArpOrRARP,
|
||||
NWFSIPBase,
|
||||
NWFSLayer4Base,
|
||||
NWFSMac,
|
||||
NWFSelector,
|
||||
NWFilterRule,
|
||||
} from "../../api/NWFilterApi";
|
||||
import { ServerApi } from "../../api/ServerApi";
|
||||
import { EditSection } from "./EditSection";
|
||||
import { IPInput, IPInputWithMask } from "./IPInput";
|
||||
import { MACInput } from "./MACInput";
|
||||
import { PortInput } from "./PortInput";
|
||||
import { SelectInput } from "./SelectInput";
|
||||
import { TextInput } from "./TextInput";
|
||||
import { ServerApi } from "../../api/ServerApi";
|
||||
import PlaylistAddIcon from "@mui/icons-material/PlaylistAdd";
|
||||
import { MACInput } from "./MACInput";
|
||||
import { IPInput, IPInputWithMask } from "./IPInput";
|
||||
|
||||
export function NWFilterRules(p: {
|
||||
editable: boolean;
|
||||
@ -255,6 +256,20 @@ function NWFSelectorEdit(p: {
|
||||
<NWFSelectorIP {...p} selector={p.selector} version={6} />
|
||||
)}
|
||||
|
||||
{(p.selector.type === "tcp" ||
|
||||
p.selector.type === "udp" ||
|
||||
p.selector.type === "sctp" ||
|
||||
p.selector.type === "icmp") && (
|
||||
<NWFSelectorLayer4 {...p} selector={p.selector} version={4} />
|
||||
)}
|
||||
|
||||
{(p.selector.type === "tcpipv6" ||
|
||||
p.selector.type === "udpipv6" ||
|
||||
p.selector.type === "sctpipv6" ||
|
||||
p.selector.type === "icmpipv6") && (
|
||||
<NWFSelectorLayer4 {...p} selector={p.selector} version={6} />
|
||||
)}
|
||||
|
||||
<TextInput
|
||||
editable={p.editable}
|
||||
label="Comment"
|
||||
@ -354,9 +369,9 @@ function NWFSelectorArp(
|
||||
<MACInput
|
||||
{...p}
|
||||
label="Src mac mask"
|
||||
value={p.selector.srcmacaddr}
|
||||
value={p.selector.srcmacmask}
|
||||
onValueChange={(v) => {
|
||||
p.selector.srcmacaddr = v;
|
||||
p.selector.srcmacmask = v;
|
||||
p.onChange?.();
|
||||
}}
|
||||
/>
|
||||
@ -372,9 +387,9 @@ function NWFSelectorArp(
|
||||
<MACInput
|
||||
{...p}
|
||||
label="Dst mac mask"
|
||||
value={p.selector.dstmacaddr}
|
||||
value={p.selector.dstmacmask}
|
||||
onValueChange={(v) => {
|
||||
p.selector.dstmacaddr = v;
|
||||
p.selector.dstmacmask = v;
|
||||
p.onChange?.();
|
||||
}}
|
||||
/>
|
||||
@ -423,9 +438,9 @@ function NWFSelectorIP(
|
||||
<MACInput
|
||||
{...p}
|
||||
label="Src mac mask"
|
||||
value={p.selector.srcmacaddr}
|
||||
value={p.selector.srcmacmask}
|
||||
onValueChange={(v) => {
|
||||
p.selector.srcmacaddr = v;
|
||||
p.selector.srcmacmask = v;
|
||||
p.onChange?.();
|
||||
}}
|
||||
/>
|
||||
@ -441,9 +456,9 @@ function NWFSelectorIP(
|
||||
<MACInput
|
||||
{...p}
|
||||
label="Dst mac mask"
|
||||
value={p.selector.dstmacaddr}
|
||||
value={p.selector.dstmacmask}
|
||||
onValueChange={(v) => {
|
||||
p.selector.dstmacaddr = v;
|
||||
p.selector.dstmacmask = v;
|
||||
p.onChange?.();
|
||||
}}
|
||||
/>
|
||||
@ -474,3 +489,134 @@ function NWFSelectorIP(
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function NWFSelectorLayer4(
|
||||
p: SpecificSelectorEditorWithIPVersion<NWFSLayer4Base>
|
||||
): React.ReactElement {
|
||||
return (
|
||||
<>
|
||||
<MACInput
|
||||
{...p}
|
||||
label="Src mac address"
|
||||
value={p.selector.srcmacaddr}
|
||||
onValueChange={(v) => {
|
||||
p.selector.srcmacaddr = 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?.();
|
||||
}}
|
||||
/>
|
||||
<IPInput
|
||||
{...p}
|
||||
label="Source IP from"
|
||||
value={p.selector.srcipfrom}
|
||||
onValueChange={(ip) => {
|
||||
p.selector.srcipfrom = ip;
|
||||
p.onChange?.();
|
||||
}}
|
||||
/>
|
||||
<IPInput
|
||||
{...p}
|
||||
label="Source IP to"
|
||||
value={p.selector.srcipto}
|
||||
onValueChange={(ip) => {
|
||||
p.selector.srcipto = ip;
|
||||
p.onChange?.();
|
||||
}}
|
||||
/>
|
||||
<IPInput
|
||||
{...p}
|
||||
label="Destination IP from"
|
||||
value={p.selector.dstipfrom}
|
||||
onValueChange={(ip) => {
|
||||
p.selector.dstipfrom = ip;
|
||||
p.onChange?.();
|
||||
}}
|
||||
/>
|
||||
<IPInput
|
||||
{...p}
|
||||
label="Destination IP to"
|
||||
value={p.selector.dstipto}
|
||||
onValueChange={(ip) => {
|
||||
p.selector.dstipto = ip;
|
||||
p.onChange?.();
|
||||
}}
|
||||
/>
|
||||
<PortInput
|
||||
{...p}
|
||||
label="Source port start"
|
||||
value={p.selector.srcportstart}
|
||||
onChange={(port) => {
|
||||
p.selector.srcportstart = port;
|
||||
p.onChange?.();
|
||||
}}
|
||||
/>
|
||||
<PortInput
|
||||
{...p}
|
||||
label="Source port end"
|
||||
value={p.selector.srcportend}
|
||||
onChange={(port) => {
|
||||
p.selector.srcportend = port;
|
||||
p.onChange?.();
|
||||
}}
|
||||
/>
|
||||
<PortInput
|
||||
{...p}
|
||||
label="Destination port start"
|
||||
value={p.selector.dstportstart}
|
||||
onChange={(port) => {
|
||||
p.selector.dstportstart = port;
|
||||
p.onChange?.();
|
||||
}}
|
||||
/>
|
||||
<PortInput
|
||||
{...p}
|
||||
label="Destination port end"
|
||||
value={p.selector.dstportend}
|
||||
onChange={(port) => {
|
||||
p.selector.dstportend = port;
|
||||
p.onChange?.();
|
||||
}}
|
||||
/>
|
||||
<SelectInput
|
||||
{...p}
|
||||
label="Connection state"
|
||||
value={p.selector.state}
|
||||
onValueChange={(s) => {
|
||||
p.selector.state = s as any;
|
||||
p.onChange?.();
|
||||
}}
|
||||
options={[
|
||||
{ label: "None", value: undefined },
|
||||
{ label: "NEW", value: "NEW" },
|
||||
{ label: "ESTABLISHED", value: "ESTABLISHED" },
|
||||
{ label: "RELATED", value: "RELATED" },
|
||||
{ label: "INVALID", value: "INVALID" },
|
||||
{ label: "NONE", value: "NONE" },
|
||||
]}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
28
virtweb_frontend/src/widgets/forms/PortInput.tsx
Normal file
28
virtweb_frontend/src/widgets/forms/PortInput.tsx
Normal file
@ -0,0 +1,28 @@
|
||||
import { TextInput } from "./TextInput";
|
||||
|
||||
export function PortInput(p: {
|
||||
editable: boolean;
|
||||
label: string;
|
||||
value?: number;
|
||||
onChange: (value: number | undefined) => void;
|
||||
}): React.ReactElement {
|
||||
return (
|
||||
<TextInput
|
||||
{...p}
|
||||
value={p.value?.toString() ?? ""}
|
||||
type="number"
|
||||
onValueChange={(v) => {
|
||||
p.onChange?.(sanitizePort(v));
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function sanitizePort(port?: string): number | undefined {
|
||||
if (port === undefined) return undefined;
|
||||
const val = Number(port);
|
||||
|
||||
if (val < 0) return 0;
|
||||
if (val > 65535) return 65535;
|
||||
return val;
|
||||
}
|
Loading…
Reference in New Issue
Block a user