Show VM screenshot

virtweb_frontend/src/widgets/vms/VMDetails.tsx

@@ -6,14 +6,24 @@ import { VMInfo } from "../../api/VMApi";
 import { CheckboxInput } from "../forms/CheckboxInput";
 import { SelectInput } from "../forms/SelectInput";
 import { TextInput } from "../forms/TextInput";
+import { VMScreenshot } from "./VMScreenshot";
 
 export function VMDetails(p: {
   vm: VMInfo;
   editable: boolean;
   onChange?: () => void;
+  screenshot?: boolean;
 }): React.ReactElement {
   return (
     <Grid container spacing={2}>
+      {
+        /* Screenshot section */ p.screenshot && (
+          <EditSection title="Screenshot">
+            <VMScreenshot vm={p.vm} />
+          </EditSection>
+        )
+      }
+
       {/* Metadata section */}
       <EditSection title="Metadata">
         <TextInput

virtweb_frontend/src/widgets/vms/VMScreenshot.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import { VMApi, VMInfo } from "../../api/VMApi";
+import { useSnackbar } from "../../hooks/providers/SnackbarProvider";
+
+export function VMScreenshot(p: { vm: VMInfo }): React.ReactElement {
+  const snackbar = useSnackbar();
+
+  const [screenshotURL, setScreenshotURL] = React.useState<
+    string | undefined
+  >();
+
+  const int = React.useRef<NodeJS.Timer | undefined>();
+
+  React.useEffect(() => {
+    const refresh = async () => {
+      try {
+        const screenshot = await VMApi.Screenshot(p.vm);
+        const u = URL.createObjectURL(screenshot);
+        setScreenshotURL(u);
+      } catch (e) {
+        console.error(e);
+        snackbar("Failed to get a screenshot of the VM!");
+      }
+    };
+
+    if (int.current === undefined) {
+      refresh();
+      int.current = setInterval(() => refresh(), 5000000);
+    }
+
+    return () => {
+      if (int.current !== undefined) {
+        clearInterval(int.current);
+        int.current = undefined;
+      }
+    };
+  }, [p.vm, snackbar]);
+
+  return (
+    <img src={screenshotURL} style={{ width: "100%" }} alt="VM screenshot" />
+  );
+}

virtweb_frontend/src/widgets/vms/VMStatusWidget.tsx

@@ -3,7 +3,12 @@ import PlayArrowIcon from "@mui/icons-material/PlayArrow";
 import PowerSettingsNewIcon from "@mui/icons-material/PowerSettingsNew";
 import ReplayIcon from "@mui/icons-material/Replay";
 import StopIcon from "@mui/icons-material/Stop";
-import { CircularProgress, IconButton, Tooltip } from "@mui/material";
+import {
+  CircularProgress,
+  IconButton,
+  Tooltip,
+  Typography,
+} from "@mui/material";
 import React from "react";
 import { VMApi, VMInfo, VMState } from "../../api/VMApi";
 import { useAlert } from "../../hooks/providers/AlertDialogProvider";
@@ -47,7 +52,7 @@ export function VMStatusWidget(p: {
 
   return (
     <div style={{ display: "inline-flex" }}>
-      {state}
+      <Typography>{state}</Typography>
 
       {/* Start VM */}
       <ActionButton