Can perform all actions on VM

remote_frontend/src/api/VMApi.ts

@@ -52,6 +52,20 @@ export class VMApi {
     await APIClient.exec({ method: "GET", uri: `/vm/${vm.uiid}/start` });
   }
 
+  /**
+   * Request to suspend VM
+   */
+  static async SuspendVM(vm: VMInfo): Promise<void> {
+    await APIClient.exec({ method: "GET", uri: `/vm/${vm.uiid}/suspend` });
+  }
+
+  /**
+   * Request to resume VM
+   */
+  static async ResumeVM(vm: VMInfo): Promise<void> {
+    await APIClient.exec({ method: "GET", uri: `/vm/${vm.uiid}/resume` });
+  }
+
   /**
    * Request to shutdown VM
    */
@@ -65,4 +79,11 @@ export class VMApi {
   static async KillVM(vm: VMInfo): Promise<void> {
     await APIClient.exec({ method: "GET", uri: `/vm/${vm.uiid}/kill` });
   }
+
+  /**
+   * Request to reset VM
+   */
+  static async ResetVM(vm: VMInfo): Promise<void> {
+    await APIClient.exec({ method: "GET", uri: `/vm/${vm.uiid}/reset` });
+  }
 }

remote_frontend/src/widgets/VirtualMachinesWidget.tsx

@@ -10,17 +10,18 @@ import {
   Tooltip,
 } from "@fluentui/react-components";
 import {
+  ArrowResetRegular,
   DesktopRegular,
-  FluentIcon,
+  PauseRegular,
   Play16Regular,
   PowerRegular,
   StopRegular,
 } from "@fluentui/react-icons";
 import React from "react";
 import { VMApi, VMInfo, VMState } from "../api/VMApi";
+import { useToast } from "../hooks/providers/ToastProvider";
 import { AsyncWidget } from "./AsyncWidget";
 import { SectionContainer } from "./SectionContainer";
-import { useToast } from "../hooks/providers/ToastProvider";
 
 export function VirtualMachinesWidget(): React.ReactElement {
   const [list, setList] = React.useState<VMInfo[] | undefined>();
@@ -85,7 +86,7 @@ function VMWidget(p: { vm: VMInfo }): React.ReactElement {
       style={{
         width: "400px",
         maxWidth: "49%",
-        height: "220px",
+        height: "250px",
         margin: "10px",
         display: "flex",
         flexDirection: "column",
@@ -109,7 +110,7 @@ function VMWidget(p: { vm: VMInfo }): React.ReactElement {
 
       <p style={{ flex: 1 }}>{p.vm.description}</p>
 
-      <CardFooter>
+      <CardFooter style={{ flexWrap: "wrap" }}>
         <VMAction
           {...p}
           primary
@@ -120,6 +121,26 @@ function VMWidget(p: { vm: VMInfo }): React.ReactElement {
           possibleStates={["Shutdown", "Shutoff", "Crashed"]}
           onClick={VMApi.StartVM}
         />
+        <VMAction
+          {...p}
+          primary
+          label="Resume"
+          icon={<Play16Regular />}
+          enabled={p.vm.can_resume}
+          currState={state}
+          possibleStates={["Paused", "PowerManagementSuspended"]}
+          onClick={VMApi.ResumeVM}
+        />
+        <VMAction
+          {...p}
+          primary
+          label="Suspend"
+          icon={<PauseRegular />}
+          enabled={p.vm.can_suspend}
+          currState={state}
+          possibleStates={["Running"]}
+          onClick={VMApi.SuspendVM}
+        />
         <VMAction
           {...p}
           label="Shutdown"
@@ -143,6 +164,20 @@ function VMWidget(p: { vm: VMInfo }): React.ReactElement {
           ]}
           onClick={VMApi.KillVM}
         />
+        <VMAction
+          {...p}
+          label="Reset"
+          icon={<ArrowResetRegular />}
+          enabled={p.vm.can_reset}
+          currState={state}
+          possibleStates={[
+            "Running",
+            "Paused",
+            "PowerManagementSuspended",
+            "Blocked",
+          ]}
+          onClick={VMApi.ResetVM}
+        />
       </CardFooter>
     </Card>
   );