diff --git a/virtweb_frontend/src/api/NWFilterApi.ts b/virtweb_frontend/src/api/NWFilterApi.ts index 5b336a0..0e76cd4 100644 --- a/virtweb_frontend/src/api/NWFilterApi.ts +++ b/virtweb_frontend/src/api/NWFilterApi.ts @@ -114,9 +114,9 @@ export interface NWFilterRule { export interface NWFilter { name: string; + uuid?: string; chain?: NWFilterChain; priority?: number; - uuid?: string; join_filters: string[]; rules: NWFilterRule[]; } diff --git a/virtweb_frontend/src/widgets/forms/NWFilterSelectInput.tsx b/virtweb_frontend/src/widgets/forms/NWFilterSelectInput.tsx new file mode 100644 index 0000000..c17ea83 --- /dev/null +++ b/virtweb_frontend/src/widgets/forms/NWFilterSelectInput.tsx @@ -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 ( + 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`, + }; + }), + ]} + /> + ); +} diff --git a/virtweb_frontend/src/widgets/forms/VMNetworksList.tsx b/virtweb_frontend/src/widgets/forms/VMNetworksList.tsx index 98433ae..e1bcbfb 100644 --- a/virtweb_frontend/src/widgets/forms/VMNetworksList.tsx +++ b/virtweb_frontend/src/widgets/forms/VMNetworksList.tsx @@ -21,6 +21,7 @@ import { MACInput } from "./MACInput"; import { SelectInput } from "./SelectInput"; import { VMNetworkFilterParameters } from "./VMNetworkFilterParameters"; import { EditSection } from "./EditSection"; +import { NWFilterSelectInput } from "./NWFilterSelectInput"; export function VMNetworksList(p: { vm: VMInfo; @@ -174,11 +175,11 @@ function NetworkInfoWidget(p: { /> {/* Network Filter */} - { + onChange={(v) => { if (v && !p.network.nwfilterref) { p.network.nwfilterref = { name: v, parameters: [] }; } else if (v) { @@ -188,16 +189,8 @@ function NetworkInfoWidget(p: { } p.onChange?.(); }} - options={[ - { label: "No network filer", value: undefined }, - ...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`, - }; - }), - ]} + canBeNull={true} + nwfilters={p.networkFiltersList} /> {p.network.nwfilterref && (