Get VM 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>