Create frames for network filters management

virtweb_frontend/src/routes/EditNWFilterRoute.tsx

@@ -0,0 +1,150 @@
+import { Button } from "@mui/material";
+import React from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { useAlert } from "../hooks/providers/AlertDialogProvider";
+import { useLoadingMessage } from "../hooks/providers/LoadingMessageProvider";
+import { useSnackbar } from "../hooks/providers/SnackbarProvider";
+import { AsyncWidget } from "../widgets/AsyncWidget";
+import { ConfigImportExportButtons } from "../widgets/ConfigImportExportButtons";
+import { VirtWebRouteContainer } from "../widgets/VirtWebRouteContainer";
+import { NWFilter, NWFilterApi, NWFilterURL } from "../api/NWFilterApi";
+import { NWFilterDetails } from "../widgets/nwfilter/NWFilterDetails";
+
+export function CreateNWFilterRoute(): React.ReactElement {
+  const alert = useAlert();
+  const snackbar = useSnackbar();
+  const navigate = useNavigate();
+
+  const [nwfilter, setNWFilter] = React.useState<NWFilter>({
+    name: "my-filter",
+    join_filters: [],
+    rules: [],
+  });
+
+  const createNWFilter = async (n: NWFilter) => {
+    try {
+      const res = await NWFilterApi.Create(n);
+      snackbar("The network filter was successfully created!");
+      navigate(`/nwfilter/${res.uid}`);
+    } catch (e) {
+      console.error(e);
+      alert(`Failed to create network filter!\n${e}`);
+    }
+  };
+
+  return (
+    <EditNetworkFilterRouteInner
+      nwfilter={nwfilter}
+      creating={true}
+      onCancel={() => navigate("/nwfilter")}
+      onSave={createNWFilter}
+      onReplace={setNWFilter}
+    />
+  );
+}
+
+export function EditNWFilterRoute(): React.ReactElement {
+  const alert = useAlert();
+  const snackbar = useSnackbar();
+
+  const { uuid } = useParams();
+  const navigate = useNavigate();
+
+  const [nwfilter, setNWFilter] = React.useState<NWFilter | undefined>();
+
+  const load = async () => {
+    setNWFilter(await NWFilterApi.GetSingle(uuid!));
+  };
+
+  const updateNetworkFilter = async (n: NWFilter) => {
+    try {
+      await NWFilterApi.Update(n);
+      snackbar("The network filter was successfully updated!");
+      navigate(NWFilterURL(nwfilter!));
+    } catch (e) {
+      console.error(e);
+      alert(`Failed to update network filter!\n${e}`);
+    }
+  };
+
+  return (
+    <AsyncWidget
+      loadKey={uuid}
+      ready={nwfilter !== undefined}
+      errMsg="Failed to fetch network filter information!"
+      load={load}
+      build={() => (
+        <EditNetworkFilterRouteInner
+          nwfilter={nwfilter!}
+          creating={false}
+          onCancel={() => navigate(`/nwfilter/${uuid}`)}
+          onSave={updateNetworkFilter}
+          onReplace={setNWFilter}
+        />
+      )}
+    />
+  );
+}
+
+function EditNetworkFilterRouteInner(p: {
+  nwfilter: NWFilter;
+  creating: boolean;
+  onCancel: () => void;
+  onSave: (vm: NWFilter) => Promise<void>;
+  onReplace: (vm: NWFilter) => void;
+}): React.ReactElement {
+  const loadingMessage = useLoadingMessage();
+
+  const [changed, setChanged] = React.useState(false);
+
+  const [, updateState] = React.useState<any>();
+  const forceUpdate = React.useCallback(() => updateState({}), []);
+
+  const valueChanged = () => {
+    setChanged(true);
+    forceUpdate();
+  };
+
+  const save = async () => {
+    loadingMessage.show("Saving network filter configuration...");
+    await p.onSave(p.nwfilter);
+    loadingMessage.hide();
+  };
+
+  return (
+    <VirtWebRouteContainer
+      label={p.creating ? "Create a Network Filter" : "Edit Network Filter"}
+      actions={
+        <span>
+          <ConfigImportExportButtons
+            currentConf={p.nwfilter}
+            filename={`nwfilter-${p.nwfilter.name}.json`}
+            importConf={(c) => {
+              p.onReplace(c);
+              valueChanged();
+            }}
+          />
+
+          {changed && (
+            <Button
+              variant="contained"
+              onClick={save}
+              style={{ marginRight: "10px" }}
+            >
+              {p.creating ? "Create" : "Save"}
+            </Button>
+          )}
+          <Button onClick={p.onCancel} variant="outlined">
+            Cancel
+          </Button>
+        </span>
+      }
+    >
+      <NWFilterDetails
+        nwfilter={p.nwfilter}
+        editable={true}
+        onChange={valueChanged}
+      />
+    </VirtWebRouteContainer>
+  );
+}

virtweb_frontend/src/routes/NetworkFiltersListRoute.tsx

@@ -15,7 +15,12 @@ import {
 } from "@mui/material";
 import React from "react";
 import { useNavigate } from "react-router-dom";
-import { NWFilter, NWFilterApi, NWFilterURL } from "../api/NWFilterApi";
+import {
+  NWFilter,
+  NWFilterApi,
+  NWFilterIsBuiltin,
+  NWFilterURL,
+} from "../api/NWFilterApi";
 import { AsyncWidget } from "../widgets/AsyncWidget";
 import { RouterLink } from "../widgets/RouterLink";
 import { VirtWebRouteContainer } from "../widgets/VirtWebRouteContainer";
@@ -61,10 +66,7 @@ function NetworkFiltersListRouteInner(p: {
 
     const onlyBuiltin = visibleFilters === VisibleFilters.Builtin;
 
-    return p.list.filter(
-      (f) =>
-        ServerApi.Config.builtin_nwfilter_rules.includes(f.name) === onlyBuiltin
-    );
+    return p.list.filter((f) => NWFilterIsBuiltin(f) === onlyBuiltin);
   }, [visibleFilters]);
 
   return (

virtweb_frontend/src/routes/ViewNWFilterRoute.tsx

@@ -0,0 +1,65 @@
+import { Button } from "@mui/material";
+import React from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import {
+  NWFilter,
+  NWFilterApi,
+  NWFilterIsBuiltin,
+  NWFilterURL,
+} from "../api/NWFilterApi";
+import { AsyncWidget } from "../widgets/AsyncWidget";
+import { ConfigImportExportButtons } from "../widgets/ConfigImportExportButtons";
+import { VirtWebRouteContainer } from "../widgets/VirtWebRouteContainer";
+import { NWFilterDetails } from "../widgets/nwfilter/NWFilterDetails";
+
+export function ViewNWFilterRoute() {
+  const { uuid } = useParams();
+
+  const [nwfilter, setNWFilter] = React.useState<NWFilter | undefined>();
+
+  const load = async () => {
+    setNWFilter(await NWFilterApi.GetSingle(uuid!));
+  };
+
+  return (
+    <AsyncWidget
+      loadKey={uuid}
+      ready={nwfilter !== undefined}
+      errMsg="Failed to fetch network filter information!"
+      load={load}
+      build={() => <ViewNetworkFilterRouteInner nwfilter={nwfilter!} />}
+    />
+  );
+}
+
+function ViewNetworkFilterRouteInner(p: {
+  nwfilter: NWFilter;
+}): React.ReactElement {
+  const navigate = useNavigate();
+
+  return (
+    <VirtWebRouteContainer
+      label={`Network filter ${p.nwfilter.name}`}
+      actions={
+        <span style={{ display: "flex", alignItems: "center" }}>
+          <ConfigImportExportButtons
+            filename={`nwfilter-${p.nwfilter.name}.json`}
+            currentConf={p.nwfilter}
+          />
+
+          {!NWFilterIsBuiltin(p.nwfilter) && (
+            <Button
+              variant="contained"
+              style={{ marginLeft: "15px" }}
+              onClick={() => navigate(NWFilterURL(p.nwfilter, true))}
+            >
+              Edit
+            </Button>
+          )}
+        </span>
+      }
+    >
+      <NWFilterDetails nwfilter={p.nwfilter} editable={false} />
+    </VirtWebRouteContainer>
+  );
+}