Add groups support (#146)

Reviewed-on: #146

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,12 +53,17 @@ 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>();
 
   const load = async () => {
-    setRights(await ServerApi.GetRights());
+    const rights = await ServerApi.GetRights();
+    setRights(rights);
+
+    if (rights!.groups.length > 0) setTab("group");
+    else if (rights!.vms.length > 0) setTab("vm");
+    else setTab("info");
   };
 
   return (
@@ -82,25 +92,27 @@ function AuthenticatedApp(): React.ReactElement {
                 selectedValue={tab}
                 onTabSelect={(_, d) => setTab(d.value as any)}
               >
-                <Tab
-                  value="vm"
-                  icon={<DesktopIcon />}
-                  disabled={rights!.vms.length === 0}
-                >
-                  Virtual machines
-                </Tab>
-                <Tab
-                  value="info"
-                  icon={<InfoIcon />}
-                  disabled={!rights!.sys_info}
-                >
-                  System info
-                </Tab>
+                {rights!.groups.length > 0 && (
+                  <Tab value="group" icon={<AppListIcon />}>
+                    Groups
+                  </Tab>
+                )}
+                {rights!.vms.length > 0 && (
+                  <Tab value="vm" icon={<DesktopIcon />}>
+                    Virtual machines
+                  </Tab>
+                )}
+                {rights!.sys_info && (
+                  <Tab value="info" icon={<InfoIcon />}>
+                    System info
+                  </Tab>
+                )}
               </TabList>
               <div>
                 <MainMenu />
               </div>
             </div>
+            {tab === "group" && <GroupsWidget rights={rights!} />}
             {tab === "vm" && <VirtualMachinesWidget rights={rights!} />}
             {tab === "info" && <SystemInfoWidget />}
           </div>

remote_frontend/src/api/GroupApi.ts

@@ -0,0 +1,107 @@
+import { APIClient } from "./ApiClient";
+import { VMGroup } from "./ServerApi";
+import { VMInfo, VMState } from "./VMApi";
+
+export interface GroupVMState {
+  [key: string]: VMState;
+}
+
+export interface TreatmentResult {
+  ok: number;
+  failed: number;
+}
+
+export class GroupApi {
+  /**
+   * Get the state of the VMs of a group
+   */
+  static async State(g: VMGroup): Promise<GroupVMState> {
+    return (
+      await APIClient.exec({ method: "GET", uri: `/group/${g.id}/vm/state` })
+    ).data;
+  }
+
+  /**
+   * Request to start the VM of a group
+   */
+  static async StartVM(g: VMGroup, vm?: VMInfo): Promise<TreatmentResult> {
+    return (
+      await APIClient.exec({
+        method: "GET",
+        uri: `/group/${g.id}/vm/start` + (vm ? `?vm_id=${vm.uuid}` : ""),
+      })
+    ).data;
+  }
+
+  /**
+   * Request to suspend the VM of a group
+   */
+  static async SuspendVM(g: VMGroup, vm?: VMInfo): Promise<TreatmentResult> {
+    return (
+      await APIClient.exec({
+        method: "GET",
+        uri: `/group/${g.id}/vm/suspend` + (vm ? `?vm_id=${vm.uuid}` : ""),
+      })
+    ).data;
+  }
+
+  /**
+   * Request to resume the VM of a group
+   */
+  static async ResumeVM(g: VMGroup, vm?: VMInfo): Promise<TreatmentResult> {
+    return (
+      await APIClient.exec({
+        method: "GET",
+        uri: `/group/${g.id}/vm/resume` + (vm ? `?vm_id=${vm.uuid}` : ""),
+      })
+    ).data;
+  }
+
+  /**
+   * Request to shutdown the VM of a group
+   */
+  static async ShutdownVM(g: VMGroup, vm?: VMInfo): Promise<TreatmentResult> {
+    return (
+      await APIClient.exec({
+        method: "GET",
+        uri: `/group/${g.id}/vm/shutdown` + (vm ? `?vm_id=${vm.uuid}` : ""),
+      })
+    ).data;
+  }
+
+  /**
+   * Request to kill the VM of a group
+   */
+  static async KillVM(g: VMGroup, vm?: VMInfo): Promise<TreatmentResult> {
+    return (
+      await APIClient.exec({
+        method: "GET",
+        uri: `/group/${g.id}/vm/kill` + (vm ? `?vm_id=${vm.uuid}` : ""),
+      })
+    ).data;
+  }
+
+  /**
+   * Request to reset the VM of a group
+   */
+  static async ResetVM(g: VMGroup, vm?: VMInfo): Promise<TreatmentResult> {
+    return (
+      await APIClient.exec({
+        method: "GET",
+        uri: `/group/${g.id}/vm/reset` + (vm ? `?vm_id=${vm.uuid}` : ""),
+      })
+    ).data;
+  }
+
+  /**
+   * Request a screenshot of the VM of group
+   */
+  static async ScreenshotVM(g: VMGroup, vm?: VMInfo): Promise<Blob> {
+    return (
+      await APIClient.exec({
+        method: "GET",
+        uri: `/group/${g.id}/vm/screenshot` + (vm ? `?vm_id=${vm.uuid}` : ""),
+      })
+    ).data;
+  }
+}

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

@@ -1,12 +1,15 @@
 import { APIClient } from "./ApiClient";
 
 export interface VMInfo {
-  uiid: string;
+  uuid: string;
   name: string;
   description?: string;
   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"
@@ -34,7 +39,7 @@ export class VMApi {
    */
   static async State(vm: VMInfo): Promise<VMState> {
     return (
-      await APIClient.exec({ method: "GET", uri: `/vm/${vm.uiid}/state` })
+      await APIClient.exec({ method: "GET", uri: `/vm/${vm.uuid}/state` })
     ).data.state;
   }
 
@@ -42,42 +47,42 @@ export class VMApi {
    * Request to start VM
    */
   static async StartVM(vm: VMInfo): Promise<void> {
-    await APIClient.exec({ method: "GET", uri: `/vm/${vm.uiid}/start` });
+    await APIClient.exec({ method: "GET", uri: `/vm/${vm.uuid}/start` });
   }
 
   /**
    * Request to suspend VM
    */
   static async SuspendVM(vm: VMInfo): Promise<void> {
-    await APIClient.exec({ method: "GET", uri: `/vm/${vm.uiid}/suspend` });
+    await APIClient.exec({ method: "GET", uri: `/vm/${vm.uuid}/suspend` });
   }
 
   /**
    * Request to resume VM
    */
   static async ResumeVM(vm: VMInfo): Promise<void> {
-    await APIClient.exec({ method: "GET", uri: `/vm/${vm.uiid}/resume` });
+    await APIClient.exec({ method: "GET", uri: `/vm/${vm.uuid}/resume` });
   }
 
   /**
    * Request to shutdown VM
    */
   static async ShutdownVM(vm: VMInfo): Promise<void> {
-    await APIClient.exec({ method: "GET", uri: `/vm/${vm.uiid}/shutdown` });
+    await APIClient.exec({ method: "GET", uri: `/vm/${vm.uuid}/shutdown` });
   }
 
   /**
    * Request to kill VM
    */
   static async KillVM(vm: VMInfo): Promise<void> {
-    await APIClient.exec({ method: "GET", uri: `/vm/${vm.uiid}/kill` });
+    await APIClient.exec({ method: "GET", uri: `/vm/${vm.uuid}/kill` });
   }
 
   /**
    * Request to reset VM
    */
   static async ResetVM(vm: VMInfo): Promise<void> {
-    await APIClient.exec({ method: "GET", uri: `/vm/${vm.uiid}/reset` });
+    await APIClient.exec({ method: "GET", uri: `/vm/${vm.uuid}/reset` });
   }
 
   /**
@@ -86,7 +91,7 @@ export class VMApi {
   static async Screenshot(vm: VMInfo): Promise<Blob> {
     return (
       await APIClient.exec({
-        uri: `/vm/${vm.uiid}/screenshot`,
+        uri: `/vm/${vm.uuid}/screenshot`,
         method: "GET",
       })
     ).data;

remote_frontend/src/hooks/providers/ThemeProvider.tsx

@@ -20,7 +20,7 @@ type ThemeContext = { theme: Theme; set: (theme: Theme) => void };
 const ThemeContextK = React.createContext<ThemeContext | null>(null);
 
 export function ThemeProvider(p: React.PropsWithChildren): React.ReactElement {
-  const [theme, setTheme] = React.useState<Theme>("highcontrast");
+  const [theme, setTheme] = React.useState<Theme>("teamsdark");
 
   let fluentTheme = teamsHighContrastTheme;
   switch (theme) {

remote_frontend/src/widgets/GroupVMAction.tsx

@@ -0,0 +1,177 @@
+import { Button, Spinner, Toolbar, Tooltip } from "@fluentui/react-components";
+import {
+  ArrowResetRegular,
+  PauseRegular,
+  PlayCircleRegular,
+  PlayFilled,
+  PowerRegular,
+  StopRegular,
+} from "@fluentui/react-icons";
+import React from "react";
+import { GroupApi, TreatmentResult } from "../api/GroupApi";
+import { VMGroup } from "../api/ServerApi";
+import { VMInfo, VMState } from "../api/VMApi";
+import { useAlert } from "../hooks/providers/AlertDialogProvider";
+import { useConfirm } from "../hooks/providers/ConfirmDialogProvider";
+import { useToast } from "../hooks/providers/ToastProvider";
+
+export function GroupVMAction(p: {
+  group: VMGroup;
+  state?: VMState;
+  vm?: VMInfo;
+}): React.ReactElement {
+  return (
+    <Toolbar>
+      <GroupVMButton
+        enabled={p.group.can_start}
+        icon={<PlayFilled />}
+        tooltip="Start"
+        group={p.group}
+        vm={p.vm}
+        allowedStates={["Shutdown", "Shutoff", "Crashed"]}
+        currState={p.state}
+        needConfirm={false}
+        action={GroupApi.StartVM}
+      />
+      <GroupVMButton
+        enabled={p.group.can_suspend}
+        icon={<PauseRegular />}
+        tooltip="Suspend"
+        group={p.group}
+        vm={p.vm}
+        allowedStates={["Running"]}
+        currState={p.state}
+        needConfirm={true}
+        action={GroupApi.SuspendVM}
+      />
+      <GroupVMButton
+        enabled={p.group.can_resume}
+        icon={<PlayCircleRegular />}
+        tooltip="Resume"
+        group={p.group}
+        vm={p.vm}
+        allowedStates={["Paused", "PowerManagementSuspended"]}
+        currState={p.state}
+        needConfirm={false}
+        action={GroupApi.ResumeVM}
+      />
+      <GroupVMButton
+        enabled={p.group.can_shutdown}
+        icon={<PowerRegular />}
+        tooltip="Shutdown"
+        group={p.group}
+        vm={p.vm}
+        allowedStates={["Running"]}
+        currState={p.state}
+        needConfirm={true}
+        action={GroupApi.ShutdownVM}
+      />
+      <GroupVMButton
+        enabled={p.group.can_kill}
+        icon={<StopRegular />}
+        tooltip="Kill"
+        group={p.group}
+        vm={p.vm}
+        allowedStates={[
+          "Running",
+          "Paused",
+          "PowerManagementSuspended",
+          "Blocked",
+        ]}
+        currState={p.state}
+        needConfirm={true}
+        action={GroupApi.KillVM}
+      />
+      <GroupVMButton
+        enabled={p.group.can_reset}
+        icon={<ArrowResetRegular />}
+        tooltip="Reset"
+        group={p.group}
+        vm={p.vm}
+        allowedStates={[
+          "Running",
+          "Paused",
+          "PowerManagementSuspended",
+          "Blocked",
+        ]}
+        currState={p.state}
+        needConfirm={true}
+        action={GroupApi.ResetVM}
+      />
+    </Toolbar>
+  );
+}
+
+function GroupVMButton(p: {
+  enabled: boolean;
+  icon: React.ReactElement;
+  action: (group: VMGroup, vm?: VMInfo) => Promise<TreatmentResult>;
+  tooltip: string;
+  currState?: VMState;
+  allowedStates: VMState[];
+  group: VMGroup;
+  vm?: VMInfo;
+  needConfirm: boolean;
+}): React.ReactElement {
+  const toast = useToast();
+  const confirm = useConfirm();
+  const alert = useAlert();
+
+  const [running, setRunning] = React.useState(false);
+
+  const target = p.vm
+    ? `the VM ${p.vm.name}`
+    : `all the VM of the group ${p.group.id}`;
+
+  const allowed =
+    !p.vm || (p.currState && p.allowedStates.includes(p.currState));
+
+  const perform = async () => {
+    if (running || !allowed) return;
+    try {
+      if (
+        (!p.vm || p.needConfirm) &&
+        !(await confirm(
+          `Do you want to perform ${p.tooltip} action on ${target}?`,
+          `Confirmation`,
+          p.tooltip
+        ))
+      ) {
+        return;
+      }
+
+      setRunning(true);
+
+      const result = await p.action(p.group, p.vm);
+
+      toast(
+        p.tooltip,
+        `${p.tooltip} action on ${target}: ${result.ok} OK / ${result.failed} Failed`,
+        "success"
+      );
+    } catch (e) {
+      console.error("Failed to perform group action!", e);
+
+      alert(`Failed to perform ${p.tooltip} action on ${target}: ${e}`);
+    } finally {
+      setRunning(false);
+    }
+  };
+
+  if (!p.enabled) return <></>;
+
+  return (
+    <Tooltip
+      content={`${p.tooltip} ${target}`}
+      relationship="description"
+      withArrow
+    >
+      <Button
+        icon={running ? <Spinner size="tiny" /> : p.icon}
+        onClick={allowed ? perform : undefined}
+        disabled={!allowed}
+        appearance="subtle"
+      />
+    </Tooltip>
+  );
+}

remote_frontend/src/widgets/GroupsWidget.tsx

@@ -0,0 +1,171 @@
+import {
+  Button,
+  Card,
+  Dialog,
+  DialogActions,
+  DialogBody,
+  DialogContent,
+  DialogSurface,
+  DialogTitle,
+  DialogTrigger,
+  Table,
+  TableBody,
+  TableCell,
+  TableCellActions,
+  TableCellLayout,
+  TableHeader,
+  TableHeaderCell,
+  TableRow,
+  Title3,
+  Tooltip,
+} from "@fluentui/react-components";
+import { Desktop24Regular, ScreenshotRegular } from "@fluentui/react-icons";
+import { filesize } from "filesize";
+import React from "react";
+import { GroupApi, GroupVMState } from "../api/GroupApi";
+import { Rights, VMGroup } from "../api/ServerApi";
+import { VMInfo } from "../api/VMApi";
+import { useToast } from "../hooks/providers/ToastProvider";
+import { GroupVMAction } from "./GroupVMAction";
+import { VMLiveScreenshot } from "./VMLiveScreenshot";
+
+export function GroupsWidget(p: { rights: Rights }): React.ReactElement {
+  return (
+    <>
+      {p.rights.groups.map((g) => (
+        <GroupInfo group={g} />
+      ))}
+    </>
+  );
+}
+
+function GroupInfo(p: { group: VMGroup }): React.ReactElement {
+  const toast = useToast();
+
+  const [state, setState] = React.useState<GroupVMState | undefined>();
+  const [screenshotVM, setScreenshotVM] = React.useState<VMInfo | undefined>();
+
+  const load = async () => {
+    const newState = await GroupApi.State(p.group);
+    if (state !== newState) setState(newState);
+  };
+
+  const screenshot = (vm: VMInfo) => {
+    setScreenshotVM(vm);
+  };
+
+  React.useEffect(() => {
+    const interval = setInterval(async () => {
+      try {
+        if (p.group.can_get_state) await load();
+      } catch (e) {
+        console.error(e);
+        toast(
+          "Error",
+          `Failed to refresh group ${p.group.id} VMs status!`,
+          "error"
+        );
+      }
+    }, 1000);
+    return () => clearInterval(interval);
+  });
+
+  return (
+    <>
+      <Card
+        style={{
+          margin: "50px 10px",
+          display: "flex",
+          flexDirection: "column",
+        }}
+      >
+        <div style={{ display: "flex", justifyContent: "space-between" }}>
+          <Title3 style={{ marginLeft: "10px" }}>{p.group.id}</Title3>
+          <GroupVMAction group={p.group} />
+        </div>
+        <Table sortable>
+          <TableHeader>
+            <TableRow>
+              <TableHeaderCell>VM</TableHeaderCell>
+              <TableHeaderCell>Resources</TableHeaderCell>
+              <TableHeaderCell>State</TableHeaderCell>
+              <TableHeaderCell>Actions</TableHeaderCell>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {p.group.vms.map((item) => (
+              <TableRow key={item.uuid}>
+                <TableCell>
+                  <TableCellLayout
+                    media={<Desktop24Regular />}
+                    appearance="primary"
+                    description={item.description}
+                  >
+                    {item.name}
+                  </TableCellLayout>
+                  <TableCellActions>
+                    {state?.[item.uuid] === "Running" && (
+                      <Tooltip
+                        relationship="description"
+                        content={"Take a screenshot of the VM screen"}
+                        withArrow
+                      >
+                        <Button
+                          icon={<ScreenshotRegular />}
+                          appearance="subtle"
+                          aria-label="Edit"
+                          disabled={!p.group.can_screenshot}
+                          onClick={() => screenshot(item)}
+                        />
+                      </Tooltip>
+                    )}
+                  </TableCellActions>
+                </TableCell>
+                <TableCell>
+                  {item.architecture} &bull; RAM :{" "}
+                  {filesize(item.memory * 1000 * 1000)} &bull;{" "}
+                  {item.number_vcpu} vCPU
+                </TableCell>
+                <TableCell>{state?.[item.uuid] ?? ""}</TableCell>
+                <TableCell>
+                  <GroupVMAction
+                    group={p.group}
+                    state={state?.[item.uuid]}
+                    vm={item}
+                  />
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </Card>
+      <Dialog
+        open={!!screenshotVM}
+        onOpenChange={(_event, _data) => {
+          if (!screenshotVM) setScreenshotVM(undefined);
+        }}
+      >
+        <DialogSurface>
+          <DialogBody>
+            <DialogTitle>
+              <em>{screenshotVM?.name}</em> screen
+            </DialogTitle>
+            <DialogContent>
+              <VMLiveScreenshot vm={screenshotVM!} group={p.group} />
+            </DialogContent>
+            <DialogActions>
+              <DialogTrigger disableButtonEnhancement>
+                <Button
+                  appearance="secondary"
+                  onClick={() => setScreenshotVM(undefined)}
+                >
+                  Close
+                </Button>
+              </DialogTrigger>
+            </DialogActions>
+          </DialogBody>
+        </DialogSurface>
+      </Dialog>
+    </>
+  );
+}

remote_frontend/src/widgets/VMLiveScreenshot.tsx

@@ -1,8 +1,13 @@
 import React from "react";
+import { GroupApi } from "../api/GroupApi";
+import { VMGroup } from "../api/ServerApi";
 import { VMApi, VMInfo } from "../api/VMApi";
 import { useToast } from "../hooks/providers/ToastProvider";
 
-export function VMLiveScreenshot(p: { vm: VMInfo }): React.ReactElement {
+export function VMLiveScreenshot(p: {
+  vm: VMInfo;
+  group?: VMGroup;
+}): React.ReactElement {
   const toast = useToast();
 
   const [screenshotURL, setScreenshotURL] = React.useState<
@@ -14,7 +19,9 @@ export function VMLiveScreenshot(p: { vm: VMInfo }): React.ReactElement {
   React.useEffect(() => {
     const refresh = async () => {
       try {
-        const screenshot = await VMApi.Screenshot(p.vm);
+        const screenshot = p.group
+          ? await GroupApi.ScreenshotVM(p.group, p.vm)
+          : await VMApi.Screenshot(p.vm);
         const u = URL.createObjectURL(screenshot);
         setScreenshotURL(u);
       } catch (e) {

remote_frontend/src/widgets/VirtualMachinesWidget.tsx

@@ -22,11 +22,11 @@ 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";
 import { SectionContainer } from "./SectionContainer";
+import { VMLiveScreenshot } from "./VMLiveScreenshot";
 
 const useStyles = makeStyles({
   body1Stronger: typographyStyles.body1Stronger,
@@ -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 (