Can see group VM screenshot

remote_frontend/src/api/GroupApi.ts

@@ -96,7 +96,7 @@ export class GroupApi {
   /**
    * Request a screenshot of the VM of group
    */
-  static async ScreenshotVM(g: VMGroup, vm?: VMInfo): Promise<TreatmentResult> {
+  static async ScreenshotVM(g: VMGroup, vm?: VMInfo): Promise<Blob> {
     return (
       await APIClient.exec({
         method: "GET",

remote_frontend/src/widgets/GroupsWidget.tsx

@@ -1,21 +1,33 @@
 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 } from "@fluentui/react-icons";
+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 (
@@ -31,12 +43,17 @@ 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 {
@@ -54,6 +71,7 @@ function GroupInfo(p: { group: VMGroup }): React.ReactElement {
   });
 
   return (
+    <>
       <Card
         style={{
           margin: "50px 10px",
@@ -85,11 +103,28 @@ function GroupInfo(p: { group: VMGroup }): React.ReactElement {
                   >
                     {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
+                  {filesize(item.memory * 1000 * 1000)} &bull;{" "}
+                  {item.number_vcpu} vCPU
                 </TableCell>
                 <TableCell>{state?.[item.uuid] ?? ""}</TableCell>
                 <TableCell>
@@ -104,5 +139,31 @@ function GroupInfo(p: { group: VMGroup }): React.ReactElement {
           </TableBody>
         </Table>
       </Card>
+      <Dialog
+        open={!!screenshotVM}
+        onOpenChange={(_event, _data) => {
+          if (!screenshotVM) setScreenshotVM(undefined);
+        }}
+      >
+        <DialogSurface>
+          <DialogBody>
+            <DialogTitle>{screenshotVM?.name} 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) {