Create a specific widget for network filters
This commit is contained in:
parent
a7bfb80547
commit
ed48b22f7f
@ -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[];
|
||||||
}
|
}
|
||||||
|
32
virtweb_frontend/src/widgets/forms/NWFilterSelectInput.tsx
Normal file
32
virtweb_frontend/src/widgets/forms/NWFilterSelectInput.tsx
Normal 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`,
|
||||||
|
};
|
||||||
|
}),
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
@ -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 && (
|
||||||
|
Loading…
Reference in New Issue
Block a user