Create a specific widget for network filters

This commit is contained in:
Pierre HUBERT 2024-01-03 20:28:33 +01:00
parent a7bfb80547
commit ed48b22f7f
3 changed files with 38 additions and 13 deletions

View File

@ -114,9 +114,9 @@ export interface NWFilterRule {
export interface NWFilter { export interface NWFilter {
name: string; name: string;
uuid?: string;
chain?: NWFilterChain; chain?: NWFilterChain;
priority?: number; priority?: number;
uuid?: string;
join_filters: string[]; join_filters: string[];
rules: NWFilterRule[]; rules: NWFilterRule[];
} }

View File

@ -0,0 +1,32 @@
import { NWFilter } from "../../api/NWFilterApi";
import { SelectInput } from "./SelectInput";
export function NWFilterSelectInput(p: {
editable: boolean;
label?: string;
nwfilters: NWFilter[];
value?: string;
onChange?: (name?: string) => void;
canBeNull: boolean;
}): React.ReactElement {
return (
<SelectInput
editable={p.editable}
label={p.label ?? "Network filter"}
value={p.value}
onValueChange={(v) => p.onChange?.(v)}
options={[
...(p.canBeNull
? [{ label: "No network filer", value: undefined }]
: []),
...p.nwfilters.map((v) => {
return {
value: v.name,
label: `${v.name} (${v.chain?.protocol ?? "unspecified"})`,
description: `${v.rules.length} rules - ${v.join_filters.length} joint filters`,
};
}),
]}
/>
);
}

View File

@ -21,6 +21,7 @@ import { MACInput } from "./MACInput";
import { SelectInput } from "./SelectInput"; import { SelectInput } from "./SelectInput";
import { VMNetworkFilterParameters } from "./VMNetworkFilterParameters"; import { VMNetworkFilterParameters } from "./VMNetworkFilterParameters";
import { EditSection } from "./EditSection"; import { EditSection } from "./EditSection";
import { NWFilterSelectInput } from "./NWFilterSelectInput";
export function VMNetworksList(p: { export function VMNetworksList(p: {
vm: VMInfo; vm: VMInfo;
@ -174,11 +175,11 @@ function NetworkInfoWidget(p: {
/> />
{/* Network Filter */} {/* Network Filter */}
<SelectInput <NWFilterSelectInput
editable={p.editable} editable={p.editable}
label="Network filter" label="Network filter"
value={p.network.nwfilterref?.name} value={p.network.nwfilterref?.name}
onValueChange={(v) => { onChange={(v) => {
if (v && !p.network.nwfilterref) { if (v && !p.network.nwfilterref) {
p.network.nwfilterref = { name: v, parameters: [] }; p.network.nwfilterref = { name: v, parameters: [] };
} else if (v) { } else if (v) {
@ -188,16 +189,8 @@ function NetworkInfoWidget(p: {
} }
p.onChange?.(); p.onChange?.();
}} }}
options={[ canBeNull={true}
{ label: "No network filer", value: undefined }, nwfilters={p.networkFiltersList}
...p.networkFiltersList.map((v) => {
return {
value: v.name,
label: `${v.name} (${v.chain?.protocol ?? "unspecified"})`,
description: `${v.rules.length} rules - ${v.join_filters.length} joint filters`,
};
}),
]}
/> />
{p.network.nwfilterref && ( {p.network.nwfilterref && (