Create a specific widget for network filters

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[];
 }

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 (
+    <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`,
+          };
+        }),
+      ]}
+    />
+  );
+}

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 */}
-            <SelectInput
+            <NWFilterSelectInput
               editable={p.editable}
               label="Network filter"
               value={p.network.nwfilterref?.name}
-              onValueChange={(v) => {
+              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={[
+              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 && (