Get VM state

remote_frontend/src/api/VMApi.ts

@@ -17,6 +17,17 @@ export interface VMInfo {
   can_screenshot: boolean;
 }
 
+export type VMState =
+  | "NoState"
+  | "Running"
+  | "Blocked"
+  | "Paused"
+  | "Shutdown"
+  | "Shutoff"
+  | "Crashed"
+  | "PowerManagementSuspended"
+  | "Other";
+
 export class VMApi {
   /**
    * Get the list of VM that can be managed by this console
@@ -24,4 +35,13 @@ export class VMApi {
   static async GetList(): Promise<VMInfo[]> {
     return (await APIClient.exec({ method: "GET", uri: "/vm/list" })).data;
   }
+
+  /**
+   * Get the state of a VM
+   */
+  static async State(vm: VMInfo): Promise<VMState> {
+    return (
+      await APIClient.exec({ method: "GET", uri: `/vm/${vm.uiid}/state` })
+    ).data.state;
+  }
 }

remote_frontend/src/widgets/VirtualMachinesWidget.tsx

@@ -13,9 +13,10 @@ import {
   PowerRegular,
 } from "@fluentui/react-icons";
 import React from "react";
-import { VMApi, VMInfo } from "../api/VMApi";
+import { VMApi, VMInfo, VMState } from "../api/VMApi";
 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>();
@@ -54,6 +55,26 @@ function VirtualMachinesWidgetInner(p: { list: VMInfo[] }): React.ReactElement {
 }
 
 function VMWidget(p: { vm: VMInfo }): React.ReactElement {
+  const toast = useToast();
+
+  const [state, setState] = React.useState<VMState | undefined>();
+
+  const load = async () => {
+    setState(await VMApi.State(p.vm));
+  };
+
+  React.useEffect(() => {
+    const interval = setInterval(async () => {
+      try {
+        if (p.vm.can_get_state) await load();
+      } catch (e) {
+        console.error(e);
+        toast("Error", `Failed to refresh ${p.vm.name} status!`, "error");
+      }
+    }, 1000);
+    return () => clearInterval(interval);
+  });
+
   return (
     <Card
       style={{
@@ -74,7 +95,11 @@ function VMWidget(p: { vm: VMInfo }): React.ReactElement {
             <b>{p.vm.name}</b>
           </Body1>
         }
-        description={<Caption1>STATE TODO</Caption1>}
+        description={
+          <Caption1>
+            {p.vm.can_get_state ? state ?? "..." : "Unavailable"}
+          </Caption1>
+        }
       />
 
       <p style={{ flex: 1 }}>{p.vm.description}</p>