Add groups VM configuration

virtweb_frontend/src/widgets/tokens/APITokenDetails.tsx

@@ -2,6 +2,7 @@ import { Button } from "@mui/material";
 import Grid from "@mui/material/Grid2";
 import React from "react";
 import { useNavigate } from "react-router-dom";
+import { GroupApi } from "../../api/GroupApi";
 import { NWFilter, NWFilterApi } from "../../api/NWFilterApi";
 import { NetworkApi, NetworkInfo } from "../../api/NetworksApi";
 import { ServerApi } from "../../api/ServerApi";
@@ -35,12 +36,14 @@ interface DetailsProps {
 
 export function APITokenDetails(p: DetailsProps): React.ReactElement {
   const [vms, setVMs] = React.useState<VMInfo[]>();
+  const [groups, setGroups] = React.useState<string[]>();
   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());
+    setGroups(await GroupApi.GetList());
     setNetworks(await NetworkApi.GetList());
     setNetworkFilters(await NWFilterApi.GetList());
     setTokens(await TokensApi.GetList());
@@ -54,6 +57,7 @@ export function APITokenDetails(p: DetailsProps): React.ReactElement {
       build={() => (
         <APITokenDetailsInner
           vms={vms!}
+          groups={groups!}
           networks={networks!}
           nwFilters={nwFilters!}
           tokens={tokens!}
@@ -73,6 +77,7 @@ enum TokenTab {
 
 type DetailsInnerProps = DetailsProps & {
   vms: VMInfo[];
+  groups: string[];
   networks: NetworkInfo[];
   nwFilters: NWFilter[];
   tokens: APIToken[];

virtweb_frontend/src/widgets/tokens/TokenRightsEditor.tsx

@@ -22,6 +22,7 @@ export function TokenRightsEditor(p: {
   editable: boolean;
   onChange?: () => void;
   vms: VMInfo[];
+  groups: string[];
   networks: NetworkInfo[];
   nwFilters: NWFilter[];
   tokens: APIToken[];
@@ -238,6 +239,139 @@ export function TokenRightsEditor(p: {
         </Table>
       </RightsSection>
 
+      <RightsSection label="VM groups">
+        <RouteRight
+          {...p}
+          right={{ verb: "POST", path: "/api/group/list" }}
+          label="Get the list of groups"
+        />
+
+        <Table size="small">
+          <TableHead>
+            <TableRow>
+              <TableCell>Group name</TableCell>
+              <TableCell align="center">Get VM info</TableCell>
+              <TableCell align="center">Start VM</TableCell>
+              <TableCell align="center">Shutdown VM</TableCell>
+              <TableCell align="center">Suspend VM</TableCell>
+              <TableCell align="center">Resume VM</TableCell>
+              <TableCell align="center">Kill VM</TableCell>
+              <TableCell align="center">Reset VM</TableCell>
+              <TableCell align="center">Screenshot VM</TableCell>
+              <TableCell align="center">Get VM State</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {/* All Group operations */}
+            <TableRow hover>
+              <TableCell>
+                <i>All</i>
+              </TableCell>
+              <CellRight
+                {...p}
+                right={{ verb: "GET", path: "/api/group/*/vm/info" }}
+              />
+              <CellRight
+                {...p}
+                right={{ verb: "GET", path: "/api/group/*/vm/start" }}
+              />
+              <CellRight
+                {...p}
+                right={{ verb: "GET", path: "/api/group/*/vm/shutdown" }}
+              />
+              <CellRight
+                {...p}
+                right={{ verb: "GET", path: "/api/group/*/vm/suspend" }}
+              />
+              <CellRight
+                {...p}
+                right={{ verb: "GET", path: "/api/group/*/vm/resume" }}
+              />
+              <CellRight
+                {...p}
+                right={{ verb: "GET", path: "/api/group/*/vm/kill" }}
+              />
+              <CellRight
+                {...p}
+                right={{ verb: "GET", path: "/api/group/*/vm/reset" }}
+              />
+              <CellRight
+                {...p}
+                right={{ verb: "GET", path: "/api/group/*/vm/screenshot" }}
+              />
+              <CellRight
+                {...p}
+                right={{ verb: "GET", path: "/api/group/*/vm/state" }}
+              />
+            </TableRow>
+
+            {/* Per VM operations */}
+            {p.groups.map((v, n) => (
+              <TableRow hover key={n}>
+                <TableCell>{v}</TableCell>
+                <CellRight
+                  {...p}
+                  right={{ verb: "GET", path: `/api/group/${v}/vm/info` }}
+                  parent={{ verb: "GET", path: "/api/group/*/vm/info" }}
+                />
+                <CellRight
+                  {...p}
+                  right={{ verb: "GET", path: `/api/group/${v}/vm/start` }}
+                  parent={{ verb: "GET", path: "/api/group/*/vm/start" }}
+                />
+                <CellRight
+                  {...p}
+                  right={{
+                    verb: "GET",
+                    path: `/api/group/${v}/vm/shutdown`,
+                  }}
+                  parent={{ verb: "GET", path: "/api/group/*/vm/shutdown" }}
+                />
+                <CellRight
+                  {...p}
+                  right={{
+                    verb: "GET",
+                    path: `/api/group/${v}/vm/suspend`,
+                  }}
+                  parent={{ verb: "GET", path: "/api/group/*/vm/suspend" }}
+                />
+                <CellRight
+                  {...p}
+                  right={{
+                    verb: "GET",
+                    path: `/api/group/${v}/vm/resume`,
+                  }}
+                  parent={{ verb: "GET", path: "/api/group/*/vm/resume" }}
+                />
+                <CellRight
+                  {...p}
+                  right={{ verb: "GET", path: `/api/group/${v}/vm/kill` }}
+                  parent={{ verb: "GET", path: "/api/group/*/vm/kill" }}
+                />
+                <CellRight
+                  {...p}
+                  right={{ verb: "GET", path: `/api/group/${v}/vm/reset` }}
+                  parent={{ verb: "GET", path: "/api/group/*/vm/reset" }}
+                />
+                <CellRight
+                  {...p}
+                  right={{
+                    verb: "GET",
+                    path: `/api/group/${v}/vm/screenshot`,
+                  }}
+                  parent={{ verb: "GET", path: "/api/group/*/vm/screenshot" }}
+                />
+                <CellRight
+                  {...p}
+                  right={{ verb: "GET", path: `/api/group/${v}/vm/state` }}
+                  parent={{ verb: "GET", path: "/api/group/*/vm/state" }}
+                />
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </RightsSection>
+
       {/* Networks */}
       <RightsSection label="Networks">
         <RouteRight