Create network filters route

2024-01-03 14:50:59 +01:00
parent 706bce0fd8
commit 22f5acd0ff
11 changed files with 180 additions and 31 deletions
--- a/virtweb_frontend/src/routes/NetworkFiltersListRoute.tsx
+++ b/virtweb_frontend/src/routes/NetworkFiltersListRoute.tsx
@ -0,0 +1,153 @@
+import VisibilityIcon from "@mui/icons-material/Visibility";
+import {
+  Button,
+  IconButton,
+  Paper,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  ToggleButton,
+  ToggleButtonGroup,
+  Typography,
+} from "@mui/material";
+import React from "react";
+import { useNavigate } from "react-router-dom";
+import { NWFilter, NWFilterApi, NWFilterURL } from "../api/NWFilterApi";
+import { AsyncWidget } from "../widgets/AsyncWidget";
+import { RouterLink } from "../widgets/RouterLink";
+import { VirtWebRouteContainer } from "../widgets/VirtWebRouteContainer";
+import { ServerApi } from "../api/ServerApi";
+
+export function NetworkFiltersListRoute(): React.ReactElement {
+  const [list, setList] = React.useState<NWFilter[] | undefined>();
+
+  const [count] = React.useState(1);
+
+  const load = async () => {
+    setList(await NWFilterApi.GetList());
+  };
+
+  return (
+    <AsyncWidget
+      loadKey={count}
+      load={load}
+      ready={list !== undefined}
+      errMsg="Failed to load the list of networks!"
+      build={() => <NetworkFiltersListRouteInner list={list!} />}
+    />
+  );
+}
+
+enum VisibleFilters {
+  All,
+  Builtin,
+  Custom,
+}
+
+function NetworkFiltersListRouteInner(p: {
+  list: NWFilter[];
+}): React.ReactElement {
+  const navigate = useNavigate();
+
+  const [visibleFilters, setVisibleFilters] = React.useState(
+    VisibleFilters.All
+  );
+
+  const filteredList = React.useMemo(() => {
+    if (visibleFilters === VisibleFilters.All) return p.list;
+
+    const onlyBuiltin = visibleFilters === VisibleFilters.Builtin;
+
+    return p.list.filter(
+      (f) =>
+        ServerApi.Config.builtin_nwfilter_rules.includes(f.name) === onlyBuiltin
+    );
+  }, [visibleFilters]);
+
+  return (
+    <VirtWebRouteContainer
+      label="Network filters"
+      actions={
+        <>
+          <span style={{ flex: 10 }}></span>
+          <ToggleButtonGroup
+            size="small"
+            value={visibleFilters}
+            exclusive
+            onChange={(_ev, v) => setVisibleFilters(v)}
+            aria-label="visible filters"
+          >
+            <ToggleButton value={VisibleFilters.All}>All</ToggleButton>
+            <ToggleButton value={VisibleFilters.Builtin}>Builtin</ToggleButton>
+            <ToggleButton value={VisibleFilters.Custom}>Custom</ToggleButton>
+          </ToggleButtonGroup>
+          <span style={{ flex: 2 }}></span>
+
+          <RouterLink to="/nwfilter/new">
+            <Button>New</Button>
+          </RouterLink>
+        </>
+      }
+    >
+      <TableContainer component={Paper}>
+        <Table>
+          <TableHead>
+            <TableRow>
+              <TableCell>Name</TableCell>
+              <TableCell>Chain</TableCell>
+              <TableCell>Priority</TableCell>
+              <TableCell>Referenced filters</TableCell>
+              <TableCell># of rules</TableCell>
+              <TableCell>Actions</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {filteredList.map((t) => {
+              return (
+                <TableRow
+                  key={t.uuid}
+                  hover
+                  onDoubleClick={() => navigate(NWFilterURL(t))}
+                >
+                  <TableCell>{t.name}</TableCell>
+                  <TableCell>
+                    {t.chain?.protocol ?? (
+                      <Typography style={{ fontStyle: "italic" }}>
+                        None
+                      </Typography>
+                    )}
+                  </TableCell>
+                  <TableCell>
+                    {t.priority ?? (
+                      <Typography style={{ fontStyle: "italic" }}>
+                        None
+                      </Typography>
+                    )}
+                  </TableCell>
+                  <TableCell>
+                    <ul>
+                      {t.join_filters.map((f, n) => (
+                        <li key={n}>{f}</li>
+                      ))}
+                    </ul>
+                  </TableCell>
+                  <TableCell>{t.rules.length}</TableCell>
+                  <TableCell>
+                    <RouterLink to={NWFilterURL(t)}>
+                      <IconButton>
+                        <VisibilityIcon />
+                      </IconButton>
+                    </RouterLink>
+                  </TableCell>
+                </TableRow>
+              );
+            })}
+          </TableBody>
+        </Table>
+      </TableContainer>
+    </VirtWebRouteContainer>
+  );
+}