Add API tokens support (#9)

Make it possible to create token authorized to query predetermined set of routes.

Reviewed-on: #9
Co-authored-by: Pierre HUBERT <pierre.git@communiquons.org>
Co-committed-by: Pierre HUBERT <pierre.git@communiquons.org>

virtweb_frontend/src/widgets/BaseAuthenticatedPage.tsx

@@ -1,4 +1,5 @@
 import {
+  mdiApi,
   mdiBoxShadow,
   mdiDisc,
   mdiHome,
@@ -72,6 +73,11 @@ export function BaseAuthenticatedPage(): React.ReactElement {
             uri="/iso"
             icon={<Icon path={mdiDisc} size={1} />}
           />
+          <NavLink
+            label="API tokens"
+            uri="/tokens"
+            icon={<Icon path={mdiApi} size={1} />}
+          />
           <NavLink
             label="Sysinfo"
             uri="/sysinfo"

virtweb_frontend/src/widgets/InlineCode.tsx

@@ -0,0 +1,18 @@
+export function InlineCode(p: React.PropsWithChildren): React.ReactElement {
+  return (
+    <code
+      style={{
+        display: "inline-block",
+        backgroundColor: "black",
+        color: "white",
+        wordBreak: "break-all",
+        wordWrap: "break-word",
+        whiteSpace: "pre-wrap",
+        padding: "0px 7px",
+        borderRadius: "5px",
+      }}
+    >
+      {p.children}
+    </code>
+  );
+}

virtweb_frontend/src/widgets/TimeWidget.tsx

@@ -0,0 +1,65 @@
+import { Tooltip } from "@mui/material";
+import date from "date-and-time";
+import { time } from "../utils/DateUtils";
+
+export function formatDate(time: number): string {
+  const t = new Date();
+  t.setTime(1000 * time);
+  return date.format(t, "DD/MM/YYYY HH:mm:ss");
+}
+
+export function timeDiff(a: number, b: number): string {
+  let diff = b - a;
+
+  if (diff === 0) return "now";
+  if (diff === 1) return "1 second";
+
+  if (diff < 60) {
+    return `${diff} seconds`;
+  }
+
+  diff = Math.floor(diff / 60);
+
+  if (diff === 1) return "1 minute";
+  if (diff < 24) {
+    return `${diff} minutes`;
+  }
+
+  diff = Math.floor(diff / 60);
+
+  if (diff === 1) return "1 hour";
+  if (diff < 24) {
+    return `${diff} hours`;
+  }
+
+  const diffDays = Math.floor(diff / 24);
+
+  if (diffDays === 1) return "1 day";
+  if (diffDays < 31) {
+    return `${diffDays} days`;
+  }
+
+  diff = Math.floor(diffDays / 31);
+
+  if (diff < 12) {
+    return `${diff} month`;
+  }
+
+  const diffYears = Math.floor(diffDays / 365);
+
+  if (diffYears === 1) return "1 year";
+  return `${diffYears} years`;
+}
+
+export function timeDiffFromNow(t: number): string {
+  return timeDiff(t, time());
+}
+
+export function TimeWidget(p: { time?: number }): React.ReactElement {
+  if (!p.time) return <></>;
+  return (
+    <Tooltip title={formatDate(p.time)}>
+      <span>{timeDiffFromNow(p.time)}</span>
+    </Tooltip>
+  );
+}

virtweb_frontend/src/widgets/forms/IPInput.tsx

@@ -22,14 +22,16 @@ export function IPInput(p: {
 export function IPInputWithMask(p: {
   label: string;
   editable: boolean;
+  ipAndMask?: string;
   ip?: string;
   mask?: number;
-  onValueChange?: (ip?: string, mask?: number) => void;
+  onValueChange?: (ip?: string, mask?: number, ipAndMask?: string) => void;
   version: 4 | 6;
 }): React.ReactElement {
   const showSlash = React.useRef(!!p.mask);
 
   const currValue =
+    p.ipAndMask ??
     (p.ip ?? "") + (p.mask || showSlash.current ? "/" : "") + (p.mask ?? "");
 
   const { onValueChange, ...props } = p;
@@ -38,7 +40,7 @@ export function IPInputWithMask(p: {
       onValueChange={(v) => {
         showSlash.current = false;
         if (!v) {
-          onValueChange?.(undefined, undefined);
+          onValueChange?.(undefined, undefined, undefined);
           return;
         }
 
@@ -52,7 +54,11 @@ export function IPInputWithMask(p: {
           mask = sanitizeMask(p.version, split[1]);
         }
 
-        onValueChange?.(ip, mask);
+        onValueChange?.(
+          ip,
+          mask,
+          mask || showSlash.current ? `${ip}/${mask ?? ""}` : ip
+        );
       }}
       value={currValue}
       {...props}

virtweb_frontend/src/widgets/forms/SelectInput.tsx

@@ -16,7 +16,7 @@ export interface SelectOption {
 export function SelectInput(p: {
   value?: string;
   editable: boolean;
-  label: string;
+  label?: string;
   options: SelectOption[];
   onValueChange: (o?: string) => void;
 }): React.ReactElement {
@@ -29,7 +29,7 @@ export function SelectInput(p: {
 
   return (
     <FormControl fullWidth variant="standard" style={{ marginBottom: "15px" }}>
-      <InputLabel>{p.label}</InputLabel>
+      {p.label && <InputLabel>{p.label}</InputLabel>}
       <Select
         value={p.value ?? ""}
         label={p.label}

virtweb_frontend/src/widgets/net/NetworkHookStatusWidget.tsx

@@ -3,6 +3,7 @@ import React, { PropsWithChildren } from "react";
 import { NetworkHookStatus, ServerApi } from "../../api/ServerApi";
 import { AsyncWidget } from "../AsyncWidget";
 import { CopyToClipboard } from "../CopyToClipboard";
+import { InlineCode } from "../InlineCode";
 
 export function NetworkHookStatusWidget(p: {
   hiddenIfInstalled: boolean;
@@ -72,25 +73,6 @@ function NetworkHookStatusWidgetInner(p: {
   );
 }
 
-function InlineCode(p: PropsWithChildren): React.ReactElement {
-  return (
-    <code
-      style={{
-        display: "inline-block",
-        backgroundColor: "black",
-        color: "white",
-        wordBreak: "break-all",
-        wordWrap: "break-word",
-        whiteSpace: "pre-wrap",
-        padding: "0px 7px",
-        borderRadius: "5px",
-      }}
-    >
-      {p.children}
-    </code>
-  );
-}
-
 function CodeBlock(p: PropsWithChildren): React.ReactElement {
   return (
     <pre

virtweb_frontend/src/widgets/tokens/APITokenDetails.tsx

@@ -0,0 +1,256 @@
+import { Button, Grid } from "@mui/material";
+import React from "react";
+import { useNavigate } from "react-router-dom";
+import { NWFilter, NWFilterApi } from "../../api/NWFilterApi";
+import { NetworkApi, NetworkInfo } from "../../api/NetworksApi";
+import { ServerApi } from "../../api/ServerApi";
+import { APIToken, TokensApi } from "../../api/TokensApi";
+import { VMApi, VMInfo } from "../../api/VMApi";
+import { useAlert } from "../../hooks/providers/AlertDialogProvider";
+import { useConfirm } from "../../hooks/providers/ConfirmDialogProvider";
+import { useSnackbar } from "../../hooks/providers/SnackbarProvider";
+import { AsyncWidget } from "../AsyncWidget";
+import { TabsWidget } from "../TabsWidget";
+import { EditSection } from "../forms/EditSection";
+import { IPInputWithMask } from "../forms/IPInput";
+import { RadioGroupInput } from "../forms/RadioGroupInput";
+import { TextInput } from "../forms/TextInput";
+import { TokenRawRightsEditor } from "./TokenRawRightsEditor";
+import { TokenRightsEditor } from "./TokenRightsEditor";
+
+const SECS_PER_DAY = 3600 * 24;
+
+export enum TokenWidgetStatus {
+  Create,
+  Read,
+  Update,
+}
+
+interface DetailsProps {
+  token: APIToken;
+  status: TokenWidgetStatus;
+  onChange?: () => void;
+}
+
+export function APITokenDetails(p: DetailsProps): React.ReactElement {
+  const [vms, setVMs] = React.useState<VMInfo[]>();
+  const [networks, setNetworks] = React.useState<NetworkInfo[]>();
+  const [nwFilters, setNetworkFilters] = React.useState<NWFilter[]>();
+  const [tokens, setTokens] = React.useState<APIToken[]>();
+
+  const load = async () => {
+    setVMs(await VMApi.GetList());
+    setNetworks(await NetworkApi.GetList());
+    setNetworkFilters(await NWFilterApi.GetList());
+    setTokens(await TokensApi.GetList());
+  };
+
+  return (
+    <AsyncWidget
+      loadKey={"1"}
+      load={load}
+      errMsg="Failed to load some system entities!"
+      build={() => (
+        <APITokenDetailsInner
+          vms={vms!}
+          networks={networks!}
+          nwFilters={nwFilters!}
+          tokens={tokens!}
+          {...p}
+        />
+      )}
+    />
+  );
+}
+
+enum TokenTab {
+  General = 0,
+  Rights,
+  RawRights,
+  Danger,
+}
+
+type DetailsInnerProps = DetailsProps & {
+  vms: VMInfo[];
+  networks: NetworkInfo[];
+  nwFilters: NWFilter[];
+  tokens: APIToken[];
+};
+
+function APITokenDetailsInner(p: DetailsInnerProps): React.ReactElement {
+  const [currTab, setCurrTab] = React.useState(TokenTab.General);
+
+  return (
+    <>
+      <TabsWidget
+        currTab={currTab}
+        onTabChange={setCurrTab}
+        options={[
+          { label: "General", value: TokenTab.General, visible: true },
+          {
+            label: "Rights",
+            value: TokenTab.Rights,
+            visible: true,
+          },
+          {
+            label: "Raw rights",
+            value: TokenTab.RawRights,
+            visible: true,
+          },
+
+          {
+            label: "Danger zone",
+            value: TokenTab.Danger,
+            color: "red",
+            visible: p.status === TokenWidgetStatus.Read,
+          },
+        ]}
+      />
+      {currTab === TokenTab.General && <APITokenTabGeneral {...p} />}
+      {currTab === TokenTab.Rights && <APITokenRights {...p} />}
+      {currTab === TokenTab.RawRights && <APITokenRawRights {...p} />}
+      {currTab === TokenTab.Danger && <APITokenTabDanger {...p} />}
+    </>
+  );
+}
+
+function APITokenTabGeneral(p: DetailsInnerProps): React.ReactElement {
+  const [ipVersion, setIpVersion] = React.useState<4 | 6>(
+    (p.token.ip_restriction ?? "").includes(":") ? 6 : 4
+  );
+
+  return (
+    <Grid container spacing={2}>
+      {/* Metadata section */}
+      <EditSection title="Metadata">
+        {p.status !== TokenWidgetStatus.Create && (
+          <TextInput label="UUID" editable={false} value={p.token.id} />
+        )}
+
+        <TextInput
+          label="Name"
+          editable={p.status === TokenWidgetStatus.Create}
+          value={p.token.name}
+          onValueChange={(v) => {
+            p.token.name = v ?? "";
+            p.onChange?.();
+          }}
+          size={ServerApi.Config.constraints.api_token_name_size}
+        />
+
+        <TextInput
+          label="Description"
+          editable={p.status === TokenWidgetStatus.Create}
+          value={p.token.description}
+          onValueChange={(v) => {
+            p.token.description = v ?? "";
+            p.onChange?.();
+          }}
+          multiline={true}
+          size={ServerApi.Config.constraints.api_token_description_size}
+        />
+      </EditSection>
+
+      <EditSection title="General settings">
+        {p.status === TokenWidgetStatus.Create && (
+          <RadioGroupInput
+            {...p}
+            editable={p.status === TokenWidgetStatus.Create}
+            options={[
+              { label: "IPv4", value: "4" },
+              { label: "IPv6", value: "6" },
+            ]}
+            value={ipVersion.toString()}
+            onValueChange={(v) => {
+              setIpVersion(Number(v) as any);
+            }}
+            label="Token IP restriction version"
+          />
+        )}
+        <IPInputWithMask
+          {...p}
+          label="Token IP network restriction"
+          ipAndMask={p.token.ip_restriction}
+          editable={p.status === TokenWidgetStatus.Create}
+          version={ipVersion}
+          onValueChange={(_ip, _mask, ipAndMask) => {
+            p.token.ip_restriction = ipAndMask;
+            p.onChange?.();
+          }}
+        />
+
+        <TextInput
+          editable={p.status === TokenWidgetStatus.Create}
+          label="Max inactivity of tokens (days)"
+          type="number"
+          value={
+            p.token.max_inactivity
+              ? Math.floor(p.token.max_inactivity / SECS_PER_DAY).toString()
+              : ""
+          }
+          onValueChange={(v) => {
+            const secs = Number(v ?? "0") * SECS_PER_DAY;
+            p.token.max_inactivity = secs === 0 ? undefined : secs;
+            p.onChange?.();
+          }}
+        />
+      </EditSection>
+    </Grid>
+  );
+}
+
+function APITokenRights(p: DetailsInnerProps): React.ReactElement {
+  return (
+    <div style={{ padding: "30px" }}>
+      <TokenRightsEditor
+        {...p}
+        editable={p.status !== TokenWidgetStatus.Read}
+      />
+    </div>
+  );
+}
+
+function APITokenRawRights(p: DetailsInnerProps): React.ReactElement {
+  return (
+    <div style={{ padding: "30px" }}>
+      <TokenRawRightsEditor
+        {...p}
+        editable={p.status !== TokenWidgetStatus.Read}
+      />
+    </div>
+  );
+}
+
+function APITokenTabDanger(p: DetailsInnerProps): React.ReactElement {
+  const confirm = useConfirm();
+  const snackbar = useSnackbar();
+  const alert = useAlert();
+  const navigate = useNavigate();
+
+  const requestDelete = async () => {
+    try {
+      if (
+        !(await confirm(
+          "Do you really want to delete this API token?",
+          `Delete API token ${p.token.name}`,
+          "Delete"
+        ))
+      )
+        return;
+
+      await TokensApi.Delete(p.token);
+
+      navigate("/tokens");
+      snackbar("The API token was successfully deleted!");
+    } catch (e) {
+      console.error(e);
+      alert(`Failed to delete the API token!\n${e}`);
+    }
+  };
+
+  return (
+    <Button color="error" onClick={requestDelete}>
+      Delete this API token
+    </Button>
+  );
+}

virtweb_frontend/src/widgets/tokens/TokenRawRightsEditor.tsx

@@ -0,0 +1,111 @@
+import AddIcon from "@mui/icons-material/Add";
+import DeleteIcon from "@mui/icons-material/Delete";
+import {
+  IconButton,
+  Paper,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Tooltip,
+  Typography,
+} from "@mui/material";
+import { ServerApi } from "../../api/ServerApi";
+import { APIToken } from "../../api/TokensApi";
+import { SelectInput } from "../forms/SelectInput";
+import { TextInput } from "../forms/TextInput";
+
+export function TokenRawRightsEditor(p: {
+  token: APIToken;
+  editable: boolean;
+  onChange?: () => void;
+}): React.ReactElement {
+  const addRule = () => {
+    p.token.rights.push({ path: "/api/", verb: "GET" });
+    p.onChange?.();
+  };
+
+  const deleteRule = (id: number) => {
+    p.token.rights.splice(id, 1);
+    p.onChange?.();
+  };
+
+  return (
+    <TableContainer component={Paper}>
+      <div
+        style={{
+          padding: "10px 10px 0px 10px",
+          display: "flex",
+          justifyContent: "space-between",
+        }}
+      >
+        <Typography variant="h5">Raw rights</Typography>
+        <div>
+          {p.editable && (
+            <Tooltip title="Add a new right rule">
+              <IconButton onClick={addRule}>
+                <AddIcon />
+              </IconButton>
+            </Tooltip>
+          )}
+        </div>
+      </div>
+
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableCell>Verb</TableCell>
+            <TableCell>URI</TableCell>
+            {p.editable && <TableCell>Actions</TableCell>}
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {p.token.rights.map((r, num) => (
+            <TableRow key={num} hover>
+              <TableCell style={{ width: "100px" }}>
+                <SelectInput
+                  {...p}
+                  value={r.verb}
+                  onValueChange={(v) => {
+                    r.verb = v as any;
+                    p.onChange?.();
+                  }}
+                  options={[
+                    { value: "GET" },
+                    { value: "POST" },
+                    { value: "PATCH" },
+                    { value: "PUT" },
+                    { value: "DELETE" },
+                  ]}
+                />
+              </TableCell>
+              <TableCell>
+                <TextInput
+                  {...p}
+                  value={r.path}
+                  onValueChange={(v) => {
+                    r.path = v ?? "";
+                    p.onChange?.();
+                  }}
+                  checkValue={(v) => v.startsWith("/api/")}
+                  size={ServerApi.Config.constraints.api_token_right_path_size}
+                />
+              </TableCell>
+              {p.editable && (
+                <TableCell style={{ width: "100px" }}>
+                  <IconButton onClick={() => deleteRule(num)}>
+                    <Tooltip title="Remove the rule">
+                      <DeleteIcon />
+                    </Tooltip>
+                  </IconButton>
+                </TableCell>
+              )}
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+}

virtweb_frontend/src/widgets/tokens/TokenRightsEditor.tsx

@@ -0,0 +1,690 @@
+import {
+  Checkbox,
+  FormControlLabel,
+  Paper,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+  Tooltip,
+  Typography,
+} from "@mui/material";
+import React from "react";
+import { NWFilter } from "../../api/NWFilterApi";
+import { NetworkInfo } from "../../api/NetworksApi";
+import { ServerApi } from "../../api/ServerApi";
+import { APIToken, TokenRight } from "../../api/TokensApi";
+import { VMInfo } from "../../api/VMApi";
+
+export function TokenRightsEditor(p: {
+  token: APIToken;
+  editable: boolean;
+  onChange?: () => void;
+  vms: VMInfo[];
+  networks: NetworkInfo[];
+  nwFilters: NWFilter[];
+  tokens: APIToken[];
+}): React.ReactElement {
+  return (
+    <>
+      {/* Virtual machines */}
+      <RightsSection label="Virtual machines">
+        <RouteRight
+          {...p}
+          right={{ verb: "POST", path: "/api/vm/create" }}
+          label="Create a new virtual machine"
+        />
+        <RouteRight
+          {...p}
+          right={{ verb: "GET", path: "/api/vm/list" }}
+          label="Get list of virtual machines"
+        />
+        <RouteRight
+          {...p}
+          right={{ verb: "GET", path: "/api/vnc" }}
+          label="Establish VNC connection"
+        />
+      </RightsSection>
+
+      <RightsSection label="VM configuration management">
+        <Table size="small">
+          <TableHead>
+            <TableRow>
+              <TableCell>VM name</TableCell>
+              <TableCell align="center">Get definition</TableCell>
+              <TableCell align="center">Update</TableCell>
+              <TableCell align="center">Delete</TableCell>
+              <TableCell align="center">Get XML definition</TableCell>
+              <TableCell align="center">Get autostart</TableCell>
+              <TableCell align="center">Set autostart</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {/* All VM operations */}
+            <TableRow hover>
+              <TableCell>
+                <i>All</i>
+              </TableCell>
+              <CellRight {...p} right={{ verb: "GET", path: "/api/vm/*" }} />
+              <CellRight {...p} right={{ verb: "PUT", path: "/api/vm/*" }} />
+              <CellRight {...p} right={{ verb: "DELETE", path: "/api/vm/*" }} />
+              <CellRight
+                {...p}
+                right={{ verb: "GET", path: "/api/vm/*/src" }}
+              />
+              <CellRight
+                {...p}
+                right={{ verb: "GET", path: "/api/vm/*/autostart" }}
+              />
+              <CellRight
+                {...p}
+                right={{ verb: "PUT", path: "/api/vm/*/autostart" }}
+              />
+            </TableRow>
+
+            {/* Per VM operations */}
+            {p.vms.map((v, n) => (
+              <TableRow hover key={n}>
+                <TableCell>{v.name}</TableCell>
+                <CellRight
+                  {...p}
+                  right={{ verb: "GET", path: `/api/vm/${v.uuid}` }}
+                  parent={{ verb: "GET", path: "/api/vm/*" }}
+                />
+                <CellRight
+                  {...p}
+                  right={{ verb: "PUT", path: `/api/vm/${v.uuid}` }}
+                  parent={{ verb: "PUT", path: "/api/vm/*" }}
+                />
+                <CellRight
+                  {...p}
+                  right={{ verb: "DELETE", path: `/api/vm/${v.uuid}` }}
+                  parent={{ verb: "DELETE", path: "/api/vm/*" }}
+                />
+                <CellRight
+                  {...p}
+                  right={{ verb: "GET", path: `/api/vm/${v.uuid}/src` }}
+                  parent={{ verb: "GET", path: "/api/vm/*/src" }}
+                />
+                <CellRight
+                  {...p}
+                  right={{ verb: "GET", path: `/api/vm/${v.uuid}/autostart` }}
+                  parent={{ verb: "GET", path: "/api/vm/*/autostart" }}
+                />
+                <CellRight
+                  {...p}
+                  right={{ verb: "PUT", path: `/api/vm/${v.uuid}/autostart` }}
+                  parent={{ verb: "PUT", path: "/api/vm/*/autostart" }}
+                />
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </RightsSection>
+
+      <RightsSection label="VM maintenance">
+        <Table size="small">
+          <TableHead>
+            <TableRow>
+              <TableCell>VM name</TableCell>
+              <TableCell align="center">Get state</TableCell>
+              <TableCell align="center">Start</TableCell>
+              <TableCell align="center">Shutdown</TableCell>
+              <TableCell align="center">Kill</TableCell>
+              <TableCell align="center">Reset</TableCell>
+              <TableCell align="center">Suspend</TableCell>
+              <TableCell align="center">Resume</TableCell>
+              <TableCell align="center">Screenshot</TableCell>
+              <TableCell align="center">VNC token</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {/* All VM operations */}
+            <TableRow hover>
+              <TableCell>
+                <i>All</i>
+              </TableCell>
+              <CellRight
+                {...p}
+                right={{ verb: "GET", path: "/api/vm/*/state" }}
+              />
+              <CellRight
+                {...p}
+                right={{ verb: "GET", path: "/api/vm/*/start" }}
+              />
+              <CellRight
+                {...p}
+                right={{ verb: "GET", path: "/api/vm/*/shutdown" }}
+              />
+              <CellRight
+                {...p}
+                right={{ verb: "GET", path: "/api/vm/*/kill" }}
+              />
+              <CellRight
+                {...p}
+                right={{ verb: "GET", path: "/api/vm/*/reset" }}
+              />
+              <CellRight
+                {...p}
+                right={{ verb: "GET", path: "/api/vm/*/suspend" }}
+              />
+              <CellRight
+                {...p}
+                right={{ verb: "GET", path: "/api/vm/*/resume" }}
+              />
+              <CellRight
+                {...p}
+                right={{ verb: "GET", path: "/api/vm/*/screenshot" }}
+              />
+              <CellRight
+                {...p}
+                right={{ verb: "GET", path: "/api/vm/*/vnc" }}
+              />
+            </TableRow>
+
+            {/* Per VM operations */}
+            {p.vms.map((v, n) => (
+              <TableRow hover key={n}>
+                <TableCell>{v.name}</TableCell>
+                <CellRight
+                  {...p}
+                  right={{ verb: "GET", path: `/api/vm/${v.uuid}/state` }}
+                  parent={{ verb: "GET", path: "/api/vm/*/state" }}
+                />
+                <CellRight
+                  {...p}
+                  right={{ verb: "GET", path: `/api/vm/${v.uuid}/start` }}
+                  parent={{ verb: "GET", path: "/api/vm/*/start" }}
+                />
+                <CellRight
+                  {...p}
+                  right={{ verb: "GET", path: `/api/vm/${v.uuid}/shutdown` }}
+                  parent={{ verb: "GET", path: "/api/vm/*/shutdown" }}
+                />
+                <CellRight
+                  {...p}
+                  right={{ verb: "GET", path: `/api/vm/${v.uuid}/kill` }}
+                  parent={{ verb: "GET", path: "/api/vm/*/kill" }}
+                />
+                <CellRight
+                  {...p}
+                  right={{ verb: "GET", path: `/api/vm/${v.uuid}/reset` }}
+                  parent={{ verb: "GET", path: "/api/vm/*/reset" }}
+                />
+                <CellRight
+                  {...p}
+                  right={{ verb: "GET", path: `/api/vm/${v.uuid}/suspend` }}
+                  parent={{ verb: "GET", path: "/api/vm/*/suspend" }}
+                />
+                <CellRight
+                  {...p}
+                  right={{ verb: "GET", path: `/api/vm/${v.uuid}/resume` }}
+                  parent={{ verb: "GET", path: "/api/vm/*/resume" }}
+                />
+                <CellRight
+                  {...p}
+                  right={{ verb: "GET", path: `/api/vm/${v.uuid}/screenshot` }}
+                  parent={{ verb: "GET", path: "/api/vm/*/screenshot" }}
+                />
+                <CellRight
+                  {...p}
+                  right={{ verb: "GET", path: `/api/vm/${v.uuid}/vnc` }}
+                  parent={{ verb: "GET", path: "/api/vm/*/vnc" }}
+                />
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </RightsSection>
+
+      {/* Networks */}
+      <RightsSection label="Networks">
+        <RouteRight
+          {...p}
+          right={{ verb: "POST", path: "/api/network/create" }}
+          label="Create a new network"
+        />
+        <RouteRight
+          {...p}
+          right={{ verb: "GET", path: "/api/network/list" }}
+          label="Get list of networks"
+        />
+      </RightsSection>
+
+      {/* Networks management */}
+      <RightsSection label="Networks management">
+        <Table size="small">
+          <TableHead>
+            <TableRow>
+              <TableCell>Network name</TableCell>
+              <TableCell align="center">Get definition</TableCell>
+              <TableCell align="center">Update</TableCell>
+              <TableCell align="center">Delete</TableCell>
+              <TableCell align="center">Get XML definition</TableCell>
+              <TableCell align="center">Get autostart</TableCell>
+              <TableCell align="center">Set autostart</TableCell>
+              <TableCell align="center">Get status</TableCell>
+              <TableCell align="center">Start</TableCell>
+              <TableCell align="center">Stop</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {/* All networks operations */}
+            <TableRow hover>
+              <TableCell>
+                <i>All</i>
+              </TableCell>
+              <CellRight
+                {...p}
+                right={{ verb: "GET", path: "/api/network/*" }}
+              />
+              <CellRight
+                {...p}
+                right={{ verb: "PUT", path: "/api/network/*" }}
+              />
+              <CellRight
+                {...p}
+                right={{ verb: "DELETE", path: "/api/network/*" }}
+              />
+              <CellRight
+                {...p}
+                right={{ verb: "GET", path: "/api/network/*/src" }}
+              />
+              <CellRight
+                {...p}
+                right={{ verb: "GET", path: "/api/network/*/autostart" }}
+              />
+              <CellRight
+                {...p}
+                right={{ verb: "PUT", path: "/api/network/*/autostart" }}
+              />
+              <CellRight
+                {...p}
+                right={{ verb: "GET", path: "/api/network/*/status" }}
+              />
+              <CellRight
+                {...p}
+                right={{ verb: "GET", path: "/api/network/*/start" }}
+              />
+              <CellRight
+                {...p}
+                right={{ verb: "GET", path: "/api/network/*/stop" }}
+              />
+            </TableRow>
+
+            {/* Per network operations */}
+            {p.networks.map((v, n) => (
+              <TableRow hover key={n}>
+                <TableCell>{v.name}</TableCell>
+                <CellRight
+                  {...p}
+                  right={{ verb: "GET", path: `/api/network/${v.uuid}` }}
+                  parent={{ verb: "GET", path: "/api/network/*" }}
+                />
+                <CellRight
+                  {...p}
+                  right={{ verb: "PUT", path: `/api/network/${v.uuid}` }}
+                  parent={{ verb: "PUT", path: "/api/network/*" }}
+                />
+                <CellRight
+                  {...p}
+                  right={{ verb: "DELETE", path: `/api/network/${v.uuid}` }}
+                  parent={{ verb: "DELETE", path: "/api/network/*" }}
+                />
+                <CellRight
+                  {...p}
+                  right={{ verb: "GET", path: `/api/network/${v.uuid}/src` }}
+                  parent={{ verb: "GET", path: "/api/network/*/src" }}
+                />
+                <CellRight
+                  {...p}
+                  right={{
+                    verb: "GET",
+                    path: `/api/network/${v.uuid}/autostart`,
+                  }}
+                  parent={{ verb: "GET", path: "/api/network/*/autostart" }}
+                />
+                <CellRight
+                  {...p}
+                  right={{
+                    verb: "PUT",
+                    path: `/api/network/${v.uuid}/autostart`,
+                  }}
+                  parent={{ verb: "PUT", path: "/api/network/*/autostart" }}
+                />
+                <CellRight
+                  {...p}
+                  right={{
+                    verb: "GET",
+                    path: `/api/network/${v.uuid}/status`,
+                  }}
+                  parent={{ verb: "GET", path: "/api/network/*/status" }}
+                />
+                <CellRight
+                  {...p}
+                  right={{
+                    verb: "GET",
+                    path: `/api/network/${v.uuid}/start`,
+                  }}
+                  parent={{ verb: "GET", path: "/api/network/*/start" }}
+                />
+                <CellRight
+                  {...p}
+                  right={{
+                    verb: "GET",
+                    path: `/api/network/${v.uuid}/stop`,
+                  }}
+                  parent={{ verb: "GET", path: "/api/network/*/stop" }}
+                />
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </RightsSection>
+
+      {/* Network filters */}
+      <RightsSection label="Network filters">
+        <RouteRight
+          {...p}
+          right={{ verb: "POST", path: "/api/nwfilter/create" }}
+          label="Create a new network filter"
+        />
+        <RouteRight
+          {...p}
+          right={{ verb: "GET", path: "/api/nwfilter/list" }}
+          label="Get list of network filters"
+        />
+      </RightsSection>
+
+      {/* Networks filters management */}
+      <RightsSection label="Networks filters management">
+        <Table size="small">
+          <TableHead>
+            <TableRow>
+              <TableCell>Network filter name</TableCell>
+              <TableCell align="center">Get definition</TableCell>
+              <TableCell align="center">Update</TableCell>
+              <TableCell align="center">Delete</TableCell>
+              <TableCell align="center">Get XML definition</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {/* All networks filters operations */}
+            <TableRow hover>
+              <TableCell>
+                <i>All</i>
+              </TableCell>
+              <CellRight
+                {...p}
+                right={{ verb: "GET", path: "/api/nwfilter/*" }}
+              />
+              <CellRight
+                {...p}
+                right={{ verb: "PUT", path: "/api/nwfilter/*" }}
+              />
+              <CellRight
+                {...p}
+                right={{ verb: "DELETE", path: "/api/nwfilter/*" }}
+              />
+              <CellRight
+                {...p}
+                right={{ verb: "GET", path: "/api/nwfilter/*/src" }}
+              />
+            </TableRow>
+
+            {/* Per network filter operations */}
+            {p.nwFilters.map((v, n) => (
+              <TableRow hover key={n}>
+                <TableCell>{v.name}</TableCell>
+                <CellRight
+                  {...p}
+                  right={{ verb: "GET", path: `/api/nwfilter/${v.uuid}` }}
+                  parent={{ verb: "GET", path: "/api/nwfilter/*" }}
+                />
+                {ServerApi.Config.builtin_nwfilter_rules.includes(v.name!) ? (
+                  <TableCell></TableCell>
+                ) : (
+                  <CellRight
+                    {...p}
+                    right={{ verb: "PUT", path: `/api/nwfilter/${v.uuid}` }}
+                    parent={{ verb: "PUT", path: "/api/nwfilter/*" }}
+                  />
+                )}
+                {ServerApi.Config.builtin_nwfilter_rules.includes(v.name!) ? (
+                  <TableCell></TableCell>
+                ) : (
+                  <CellRight
+                    {...p}
+                    right={{ verb: "DELETE", path: `/api/nwfilter/${v.uuid}` }}
+                    parent={{ verb: "DELETE", path: "/api/nwfilter/*" }}
+                  />
+                )}
+                <CellRight
+                  {...p}
+                  right={{ verb: "GET", path: `/api/nwfilter/${v.uuid}/src` }}
+                  parent={{ verb: "GET", path: "/api/nwfilter/*/src" }}
+                />
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </RightsSection>
+
+      {/* API tokens */}
+      <RightsSection label="API tokens">
+        <RouteRight
+          {...p}
+          right={{ verb: "POST", path: "/api/token/create" }}
+          label="Create a new API token"
+        />
+        <RouteRight
+          {...p}
+          right={{ verb: "GET", path: "/api/token/list" }}
+          label="Get list of API tokens"
+        />
+      </RightsSection>
+
+      {/* API tokens management */}
+      <RightsSection label="API tokens management">
+        <Table size="small">
+          <TableHead>
+            <TableRow>
+              <TableCell>API token name</TableCell>
+              <TableCell align="center">Get</TableCell>
+              <TableCell align="center">Update</TableCell>
+              <TableCell align="center">Delete</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {/* All API tokens operations */}
+            <TableRow hover>
+              <TableCell>
+                <i>All</i>
+              </TableCell>
+              <CellRight {...p} right={{ verb: "GET", path: "/api/token/*" }} />
+              <CellRight {...p} right={{ verb: "PUT", path: "/api/token/*" }} />
+              <CellRight
+                {...p}
+                right={{ verb: "DELETE", path: "/api/token/*" }}
+              />
+            </TableRow>
+
+            {/* Per API token operations */}
+            {p.tokens.map((v, n) => (
+              <TableRow hover key={n}>
+                <TableCell>{v.name}</TableCell>
+                <CellRight
+                  {...p}
+                  right={{ verb: "GET", path: `/api/token/${v.id}` }}
+                  parent={{ verb: "GET", path: "/api/token/*" }}
+                />
+                <CellRight
+                  {...p}
+                  right={{ verb: "PUT", path: `/api/token/${v.id}` }}
+                  parent={{ verb: "PUT", path: "/api/token/*" }}
+                />
+                <CellRight
+                  {...p}
+                  right={{ verb: "DELETE", path: `/api/token/${v.id}` }}
+                  parent={{ verb: "DELETE", path: "/api/token/*" }}
+                />
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </RightsSection>
+
+      {/* ISO files */}
+      <RightsSection label="ISO files">
+        <RouteRight
+          {...p}
+          right={{ verb: "POST", path: "/api/iso/upload" }}
+          label="Upload a new ISO file"
+        />
+        <RouteRight
+          {...p}
+          right={{ verb: "POST", path: "/api/iso/upload_from_url" }}
+          label="Upload a new ISO file from a given URL"
+        />
+        <RouteRight
+          {...p}
+          right={{ verb: "GET", path: "/api/iso/list" }}
+          label="Get the list of ISO files"
+        />
+        <RouteRight
+          {...p}
+          right={{ verb: "GET", path: "/api/iso/*" }}
+          label="Download ISO files"
+        />
+        <RouteRight
+          {...p}
+          right={{ verb: "DELETE", path: "/api/iso/*" }}
+          label="Delete ISO files"
+        />
+      </RightsSection>
+
+      {/* Server general information */}
+      <RightsSection label="Server">
+        <RouteRight
+          {...p}
+          right={{ verb: "GET", path: "/api/server/static_config" }}
+          label="Get static server configuration"
+        />
+        <RouteRight
+          {...p}
+          right={{ verb: "GET", path: "/api/server/info" }}
+          label="Get server information"
+        />
+        <RouteRight
+          {...p}
+          right={{ verb: "GET", path: "/api/server/network_hook_status" }}
+          label="Get network hook status"
+        />
+        <RouteRight
+          {...p}
+          right={{ verb: "GET", path: "/api/server/number_vcpus" }}
+          label="Get number of vCPU"
+        />
+        <RouteRight
+          {...p}
+          right={{ verb: "GET", path: "/api/server/networks" }}
+          label="Get list of network cards"
+        />
+      </RightsSection>
+    </>
+  );
+}
+
+function RightsSection(
+  p: React.PropsWithChildren<{ label: string }>
+): React.ReactElement {
+  return (
+    <Paper style={{ padding: "20px", margin: "10px" }}>
+      <Typography variant="h5">{p.label}</Typography>
+      {p.children}
+    </Paper>
+  );
+}
+
+interface RightOpts {
+  right: TokenRight;
+  label?: string;
+  editable: boolean;
+  token: APIToken;
+  onChange?: () => void;
+  parent?: TokenRight;
+}
+
+function CellRight(p: RightOpts): React.ReactElement {
+  return (
+    <TableCell align="center">
+      <RouteRight {...p} />
+    </TableCell>
+  );
+}
+
+function RouteRight(p: RightOpts): React.ReactElement {
+  const rightIndex = p.token.rights.findIndex(
+    (r) => r.verb === p.right.verb && r.path === p.right.path
+  );
+  const activated = rightIndex !== -1;
+
+  const parentActivated =
+    !!p.parent &&
+    p.token.rights.findIndex(
+      (r) => r.verb === p.parent?.verb && r.path === p.parent?.path
+    ) !== -1;
+
+  const toggle = (a: boolean) => {
+    if (a) {
+      p.token.rights.push(p.right);
+    } else {
+      p.token.rights.splice(rightIndex, 1);
+    }
+    p.onChange?.();
+  };
+
+  return (
+    <div>
+      <Tooltip
+        title={`${p.right.verb} ${p.right.path}`}
+        arrow
+        placement="left"
+        slotProps={{
+          popper: {
+            modifiers: [
+              {
+                name: "offset",
+                options: {
+                  offset: [0, -14],
+                },
+              },
+            ],
+          },
+        }}
+      >
+        {p.label ? (
+          <FormControlLabel
+            control={
+              <Checkbox
+                checked={activated || parentActivated}
+                disabled={!p.editable || parentActivated}
+                onChange={(_e, a) => toggle(a)}
+              />
+            }
+            label={p.label}
+          />
+        ) : (
+          <span>
+            <Checkbox
+              checked={activated || parentActivated}
+              disabled={!p.editable || parentActivated}
+              onChange={(_e, a) => toggle(a)}
+            />
+          </span>
+        )}
+      </Tooltip>
+    </div>
+  );
+}