Ready to implement groups web ui integration

remote_frontend/src/App.tsx

@@ -5,6 +5,8 @@ import {
   typographyStyles,
 } from "@fluentui/react-components";
 import {
+  AppsListDetailFilled,
+  AppsListDetailRegular,
   DesktopFilled,
   DesktopRegular,
   InfoFilled,
@@ -18,6 +20,7 @@ import { AsyncWidget } from "./widgets/AsyncWidget";
 import { MainMenu } from "./widgets/MainMenu";
 import { SystemInfoWidget } from "./widgets/SystemInfoWidget";
 import { VirtualMachinesWidget } from "./widgets/VirtualMachinesWidget";
+import { GroupsWidget } from "./widgets/GroupsWidget";
 
 const useStyles = makeStyles({
   title: typographyStyles.title2,
@@ -27,6 +30,8 @@ const InfoIcon = bundleIcon(InfoFilled, InfoRegular);
 
 const DesktopIcon = bundleIcon(DesktopFilled, DesktopRegular);
 
+const AppListIcon = bundleIcon(AppsListDetailFilled, AppsListDetailRegular);
+
 export function App() {
   return (
     <AsyncWidget
@@ -48,7 +53,7 @@ function AppInner(): React.ReactElement {
 
 function AuthenticatedApp(): React.ReactElement {
   const styles = useStyles();
-  const [tab, setTab] = React.useState<"vm" | "info">("vm");
+  const [tab, setTab] = React.useState<"group" | "vm" | "info">("group");
 
   const [rights, setRights] = React.useState<Rights | undefined>();
 
@@ -82,6 +87,13 @@ function AuthenticatedApp(): React.ReactElement {
                 selectedValue={tab}
                 onTabSelect={(_, d) => setTab(d.value as any)}
               >
+                <Tab
+                  value="group"
+                  icon={<AppListIcon />}
+                  disabled={rights!.groups.length === 0}
+                >
+                  Groups
+                </Tab>
                 <Tab
                   value="vm"
                   icon={<DesktopIcon />}
@@ -101,6 +113,7 @@ function AuthenticatedApp(): React.ReactElement {
                 <MainMenu />
               </div>
             </div>
+            {tab === "group" && <GroupsWidget rights={rights!} />}
             {tab === "vm" && <VirtualMachinesWidget rights={rights!} />}
             {tab === "info" && <SystemInfoWidget />}
           </div>

remote_frontend/src/api/ServerApi.ts

@@ -1,5 +1,5 @@
 import { APIClient } from "./ApiClient";
-import { VMInfo } from "./VMApi";
+import { VMCaps, VMInfo, VMInfoAndCaps } from "./VMApi";
 
 export interface ServerConfig {
   authenticated: boolean;
@@ -7,10 +7,18 @@ export interface ServerConfig {
 }
 
 export interface Rights {
-  vms: VMInfo[];
+  groups: VMGroup[];
+  vms: VMInfoAndCaps[];
   sys_info: boolean;
 }
 
+export type VMGroup = VMGroupInfo & VMCaps;
+
+export interface VMGroupInfo {
+  id: string;
+  vms: VMInfo[];
+}
+
 let config: ServerConfig | null = null;
 
 export class ServerApi {

remote_frontend/src/api/VMApi.ts

@@ -7,6 +7,9 @@ export interface VMInfo {
   architecture: string;
   memory: number;
   number_vcpu: number;
+}
+
+export interface VMCaps {
   can_get_state: boolean;
   can_start: boolean;
   can_shutdown: boolean;
@@ -17,6 +20,8 @@ export interface VMInfo {
   can_screenshot: boolean;
 }
 
+export type VMInfoAndCaps = VMInfo & VMCaps;
+
 export type VMState =
   | "NoState"
   | "Running"

remote_frontend/src/widgets/GroupsWidget.tsx

@@ -0,0 +1,5 @@
+import { Rights } from "../api/ServerApi";
+
+export function GroupsWidget(p: { rights: Rights }): React.ReactElement {
+  return <p>TODO</p>;
+}

remote_frontend/src/widgets/VirtualMachinesWidget.tsx

@@ -22,7 +22,7 @@ import {
 import { filesize } from "filesize";
 import React from "react";
 import { Rights } from "../api/ServerApi";
-import { VMApi, VMInfo, VMState } from "../api/VMApi";
+import { VMApi, VMInfo, VMInfoAndCaps, VMState } from "../api/VMApi";
 import { useConfirm } from "../hooks/providers/ConfirmDialogProvider";
 import { useToast } from "../hooks/providers/ToastProvider";
 import { VMLiveScreenshot } from "./VMLiveScreenshot";
@@ -54,7 +54,7 @@ export function VirtualMachinesWidget(p: {
   );
 }
 
-function VMWidget(p: { vm: VMInfo }): React.ReactElement {
+function VMWidget(p: { vm: VMInfoAndCaps }): React.ReactElement {
   const toast = useToast();
 
   const [state, setState] = React.useState<VMState | undefined>();
@@ -189,7 +189,10 @@ function VMWidget(p: { vm: VMInfo }): React.ReactElement {
   );
 }
 
-function VMPreview(p: { vm: VMInfo; state?: VMState }): React.ReactElement {
+function VMPreview(p: {
+  vm: VMInfoAndCaps;
+  state?: VMState;
+}): React.ReactElement {
   const styles = useStyles();
   if (!p.vm.can_screenshot || p.state !== "Running") {
     return (