pierre/VirtWeb
1
0
Fork 0
Code Issues Pull Requests 3 Packages Projects Releases 5 Wiki Activity

Can edit MAC rules

Browse Source
This commit is contained in:
Pierre HUBERT
2024-01-04 12:26:51 +01:00
parent 7d7a052f5f
commit ad45c0d654
4 changed files with 242 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

189
virtweb_frontend/src/widgets/forms/NWFilterRules.tsx
View File

@@ -7,12 +7,16 @@ import {
CardActions,
CardContent,
IconButton,
Paper,
Tooltip,
} from "@mui/material";
import { NWFilterRule } from "../../api/NWFilterApi";
import { NWFSMac, NWFSelector, NWFilterRule } from "../../api/NWFilterApi";
import { EditSection } from "./EditSection";
import { SelectInput } from "./SelectInput";
import { TextInput } from "./TextInput";
import { ServerApi } from "../../api/ServerApi";
import PlaylistAddIcon from "@mui/icons-material/PlaylistAdd";
import { MACInput } from "./MACInput";
export function NWFilterRules(p: {
editable: boolean;
@@ -72,6 +76,18 @@ function NWRuleEdit(p: {
onGoDown?: () => void;
onDelete: () => void;
}): React.ReactElement {
const addSelector = () => {
p.rule.selectors.push({
type: "all",
});
p.onChange?.();
};
const deleteSelector = (num: number) => {
p.rule.selectors.splice(num, 1);
p.onChange?.();
};
return (
<Card style={{ margin: "30px" }} elevation={3}>
<CardContent>
@@ -120,23 +136,51 @@ function NWRuleEdit(p: {
size={ServerApi.Config.constraints.nwfilter_priority}
/>
</div>
{p.rule.selectors.map((s, n) => (
<NWFSelectorEdit
key={n}
editable={p.editable}
onChange={p.onChange}
selector={s}
onDelete={() => deleteSelector(n)}
/>
))}
</CardContent>
<CardActions>
{p.editable && (
<div style={{ display: "flex", width: "100%" }}>
<IconButton color="error" onClick={p.onDelete}>
<DeleteIcon />
</IconButton>
<Tooltip title="Remove the rule">
<IconButton color="error" onClick={p.onDelete}>
<DeleteIcon />
</IconButton>
</Tooltip>
<span style={{ flex: 1 }}></span>
{p.onGoUp && (
<IconButton onClick={p.onGoUp}>
<ArrowUpwardIcon />
</IconButton>
{ServerApi.Config.constraints.nwfilter_selectors_count.max >
p.rule.selectors.length && (
<Tooltip title="Add a selector">
<IconButton onClick={addSelector}>
<PlaylistAddIcon />
</IconButton>
</Tooltip>
)}
{p.onGoUp && (
<Tooltip title="Move rule upward">
<IconButton onClick={p.onGoUp}>
<ArrowUpwardIcon />
</IconButton>
</Tooltip>
)}
{p.onGoDown && (
<IconButton onClick={p.onGoDown}>
<ArrowDownwardIcon />
</IconButton>
<Tooltip title="Move rule downward">
<IconButton onClick={p.onGoDown}>
<ArrowDownwardIcon />
</IconButton>
</Tooltip>
)}
</div>
)}
@@ -144,3 +188,126 @@ function NWRuleEdit(p: {
</Card>
);
}
function NWFSelectorEdit(p: {
editable: boolean;
selector: NWFSelector;
onDelete: () => void;
onChange?: () => void;
}): React.ReactElement {
return (
<Paper elevation={10} style={{ padding: "10px" }}>
<div style={{ display: "flex", width: "100%" }}>
<div style={{ flex: 1 }}>
<SelectInput
editable={p.editable}
label="Type"
onValueChange={(v) => {
p.selector.type = v! as any;
p.onChange?.();
}}
value={p.selector.type}
options={[
{ label: "All over IPv4", value: "all" },
{ label: "All over IPv6", value: "allipv6" },
{ label: "MAC (Ethernet)", value: "mac" },
{ label: "ARP", value: "arp" },
{ label: "RARP", value: "rarp" },
{ label: "IPv4", value: "ipv4" },
{ label: "IPv6", value: "ipv6" },
{ label: "TCP over IPv4", value: "tcp" },
{ label: "UDP over IPv4", value: "udp" },
{ label: "SCTP over IPv4", value: "sctp" },
{ label: "ICMPv4", value: "icmp" },
{ label: "TCP over IPv6", value: "tcpipv6" },
{ label: "UDP over IPv6", value: "udpipv6" },
{ label: "SCTP over IPv6", value: "sctpipv6" },
{ label: "ICMPv6", value: "icmpipv6" },
]}
/>
{p.selector.type === "mac" && (
<NWFSelectorMac {...p} selector={p.selector} />
)}
<TextInput
editable={p.editable}
label="Comment"
value={p.selector.comment}
onValueChange={(v) => {
p.selector.comment = v;
p.onChange?.();
}}
size={ServerApi.Config.constraints.nwfilter_comment_size}
/>
</div>
{p.editable && (
<div style={{ display: "flex", justifyContent: "center" }}>
<Tooltip title="Remove the selector">
<IconButton color="error" onClick={p.onDelete}>
<DeleteIcon />
</IconButton>
</Tooltip>
</div>
)}
</div>
</Paper>
);
}
interface SpecificSelectorEditor<E> {
editable: boolean;
selector: E;
onChange?: () => void;
}
function NWFSelectorMac(
p: SpecificSelectorEditor<NWFSMac>
): React.ReactElement {
return (
<>
<MACInput
{...p}
label="Src mac address"
value={p.selector.src_mac_addr}
onValueChange={(v) => {
p.selector.src_mac_addr = v;
p.onChange?.();
}}
/>
<MACInput
{...p}
label="Src mac mask"
value={p.selector.src_mac_mask}
onValueChange={(v) => {
p.selector.src_mac_mask = v;
p.onChange?.();
}}
/>
<MACInput
{...p}
label="Dst mac address"
value={p.selector.dst_mac_addr}
onValueChange={(v) => {
p.selector.dst_mac_addr = v;
p.onChange?.();
}}
/>
<MACInput
{...p}
label="Dst mac mask"
value={p.selector.dst_mac_mask}
onValueChange={(v) => {
p.selector.dst_mac_mask = v;
p.onChange?.();
}}
/>
</>
);
}