List the tokens from the WebUI

2024-04-17 22:20:01 +02:00
parent f03b631b6c
commit 91127ea61f
8 changed files with 240 additions and 19 deletions
--- a/virtweb_frontend/src/routes/TokensListRoute.tsx
+++ b/virtweb_frontend/src/routes/TokensListRoute.tsx
@ -0,0 +1,118 @@
+import React from "react";
+import { APIToken, APITokenURL, TokensApi } from "../api/TokensApi";
+import { AsyncWidget } from "../widgets/AsyncWidget";
+import {
+  Button,
+  IconButton,
+  Paper,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+} from "@mui/material";
+import { RouterLink } from "../widgets/RouterLink";
+import { VirtWebRouteContainer } from "../widgets/VirtWebRouteContainer";
+import { useNavigate } from "react-router-dom";
+import VisibilityIcon from "@mui/icons-material/Visibility";
+import { TimeWidget, timeDiff } from "../widgets/TimeWidget";
+
+export function TokensListRoute(): React.ReactElement {
+  const [list, setList] = React.useState<APIToken[] | undefined>();
+
+  const [count] = React.useState(1);
+
+  const load = async () => {
+    setList(await TokensApi.GetList());
+  };
+
+  return (
+    <AsyncWidget
+      loadKey={count}
+      load={load}
+      ready={list !== undefined}
+      errMsg="Failed to load the list of tokens!"
+      build={() => <TokensListRouteInner list={list!} />}
+    />
+  );
+}
+
+export function TokensListRouteInner(p: {
+  list: APIToken[];
+}): React.ReactElement {
+  const navigate = useNavigate();
+
+  return (
+    <VirtWebRouteContainer
+      label="API tokens"
+      actions={
+        <RouterLink to="/tokens/new">
+          <Button>New</Button>
+        </RouterLink>
+      }
+    >
+      <TableContainer component={Paper}>
+        <Table>
+          <TableHead>
+            <TableRow>
+              <TableCell>Name</TableCell>
+              <TableCell>Description</TableCell>
+              <TableCell>Created</TableCell>
+              <TableCell>Updated</TableCell>
+              <TableCell>Last used</TableCell>
+              <TableCell>IP restriction</TableCell>
+              <TableCell>Max inactivity</TableCell>
+              <TableCell>Rights</TableCell>
+              <TableCell>Actions</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {p.list.map((t) => {
+              return (
+                <TableRow
+                  key={t.id}
+                  hover
+                  onDoubleClick={() => navigate(APITokenURL(t))}
+                >
+                  <TableCell>{t.name}</TableCell>
+                  <TableCell>{t.description}</TableCell>
+                  <TableCell>
+                    <TimeWidget time={t.created} />
+                  </TableCell>
+                  <TableCell>
+                    <TimeWidget time={t.updated} />
+                  </TableCell>
+                  <TableCell>
+                    <TimeWidget time={t.last_used} />
+                  </TableCell>
+                  <TableCell>{t.ip_restriction}</TableCell>
+                  <TableCell>
+                    {t.max_inactivity && timeDiff(0, t.max_inactivity)}
+                  </TableCell>
+                  <TableCell>
+                    {t.rights.map((r) => {
+                      return (
+                        <div>
+                          {r.verb} {r.path}
+                        </div>
+                      );
+                    })}
+                  </TableCell>
+
+                  <TableCell>
+                    <RouterLink to={APITokenURL(t)}>
+                      <IconButton>
+                        <VisibilityIcon />
+                      </IconButton>
+                    </RouterLink>
+                  </TableCell>
+                </TableRow>
+              );
+            })}
+          </TableBody>
+        </Table>
+      </TableContainer>
+    </VirtWebRouteContainer>
+  );
+}