Add network filters metadata

virtweb_frontend/src/api/ServerApi.ts

@@ -6,8 +6,9 @@ export interface ServerConfig {
   oidc_auth_enabled: boolean;
   iso_mimetypes: string[];
   net_mac_prefix: string;
-  constraints: ServerConstraints;
   builtin_nwfilter_rules: string[];
+  nwfilter_chains: string[];
+  constraints: ServerConstraints;
 }
 
 export interface ServerConstraints {
@@ -21,6 +22,9 @@ export interface ServerConstraints {
   net_name_size: LenConstraint;
   net_title_size: LenConstraint;
   dhcp_reservation_host_name: LenConstraint;
+  nwfilter_name_size: LenConstraint;
+  nwfilter_comment_size: LenConstraint;
+  nwfilter_priority: LenConstraint;
 }
 
 export interface LenConstraint {

virtweb_frontend/src/routes/EditNWFilterRoute.tsx

@@ -17,6 +17,7 @@ export function CreateNWFilterRoute(): React.ReactElement {
 
   const [nwfilter, setNWFilter] = React.useState<NWFilter>({
     name: "my-filter",
+    chain: { protocol: "root" },
     join_filters: [],
     rules: [],
   });

virtweb_frontend/src/widgets/nwfilter/NWFilterDetails.tsx

@@ -1,4 +1,4 @@
-import { Button } from "@mui/material";
+import { Button, Grid } from "@mui/material";
 import React, { ReactElement } from "react";
 import { useNavigate } from "react-router-dom";
 import {
@@ -12,6 +12,10 @@ import { useSnackbar } from "../../hooks/providers/SnackbarProvider";
 import { AsyncWidget } from "../AsyncWidget";
 import { TabsWidget } from "../TabsWidget";
 import { XMLAsyncWidget } from "../XMLWidget";
+import { EditSection } from "../forms/EditSection";
+import { TextInput } from "../forms/TextInput";
+import { ServerApi } from "../../api/ServerApi";
+import { SelectInput } from "../forms/SelectInput";
 
 interface DetailsProps {
   nwfilter: NWFilter;
@@ -96,7 +100,51 @@ export function NetworkFilterDetailsInner(
 function NetworkFilterDetailsTabGeneral(
   p: InnerDetailsProps
 ): React.ReactElement {
-  return <></>;
+  return (
+    <Grid container spacing={2}>
+      {/* Metadata section */}
+      <EditSection title="Metadata">
+        <TextInput
+          label="Name"
+          editable={p.editable}
+          value={p.nwfilter.name}
+          onValueChange={(v) => {
+            p.nwfilter.name = v ?? "";
+            p.onChange?.();
+          }}
+          checkValue={(v) => /^[a-zA-Z0-9\_\-]+$/.test(v)}
+          size={ServerApi.Config.constraints.nwfilter_name_size}
+        />
+
+        <TextInput label="UUID" editable={false} value={p.nwfilter.uuid} />
+
+        <SelectInput
+          label="Chain"
+          editable={p.editable}
+          value={p.nwfilter.chain?.protocol}
+          onValueChange={(v) => {
+            p.nwfilter.chain = v ? { protocol: v } : undefined;
+            p.onChange?.();
+          }}
+          options={ServerApi.Config.nwfilter_chains.map((c) => {
+            return { label: c, value: c };
+          })}
+        />
+
+        <TextInput
+          label="Priority"
+          editable={p.editable}
+          value={p.nwfilter.priority?.toString()}
+          type="number"
+          onValueChange={(v) => {
+            p.nwfilter.priority = v && v !== "" ? Number(v) : undefined;
+            p.onChange?.();
+          }}
+          size={ServerApi.Config.constraints.nwfilter_priority}
+        />
+      </EditSection>
+    </Grid>
+  );
 }
 
 function NetworkFilterDetailsTabXML(p: InnerDetailsProps): React.ReactElement {