Perform first actions on VM

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,34 @@ 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;
+  }
+
+  /**
+   * Request to start VM
+   */
+  static async StartVM(vm: VMInfo): Promise<void> {
+    await APIClient.exec({ method: "GET", uri: `/vm/${vm.uiid}/start` });
+  }
+
+  /**
+   * Request to shutdown VM
+   */
+  static async ShutdownVM(vm: VMInfo): Promise<void> {
+    await APIClient.exec({ method: "GET", uri: `/vm/${vm.uiid}/shutdown` });
+  }
+
+  /**
+   * Request to kill VM
+   */
+  static async KillVM(vm: VMInfo): Promise<void> {
+    await APIClient.exec({ method: "GET", uri: `/vm/${vm.uiid}/kill` });
+  }
 }

remote_frontend/src/widgets/VirtualMachinesWidget.tsx

@@ -6,16 +6,21 @@ import {
   CardFooter,
   CardHeader,
   CardPreview,
+  Spinner,
+  Tooltip,
 } from "@fluentui/react-components";
 import {
   DesktopRegular,
+  FluentIcon,
   Play16Regular,
   PowerRegular,
+  StopRegular,
 } 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 +59,27 @@ 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 () => {
+    const newState = await VMApi.State(p.vm);
+    if (state !== newState) setState(newState);
+  };
+
+  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,17 +100,106 @@ 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>
 
       <CardFooter>
-        <Button appearance="primary" icon={<Play16Regular />}>
-          Start VM
-        </Button>
-        <Button icon={<PowerRegular />}>Shutdown</Button>
+        <VMAction
+          {...p}
+          primary
+          label="Start"
+          icon={<Play16Regular />}
+          enabled={p.vm.can_start}
+          currState={state}
+          possibleStates={["Shutdown", "Shutoff", "Crashed"]}
+          onClick={VMApi.StartVM}
+        />
+        <VMAction
+          {...p}
+          label="Shutdown"
+          icon={<PowerRegular />}
+          enabled={p.vm.can_shutdown}
+          currState={state}
+          possibleStates={["Running"]}
+          onClick={VMApi.ShutdownVM}
+        />
+        <VMAction
+          {...p}
+          label="Kill"
+          icon={<StopRegular />}
+          enabled={p.vm.can_kill}
+          currState={state}
+          possibleStates={[
+            "Running",
+            "Paused",
+            "PowerManagementSuspended",
+            "Blocked",
+          ]}
+          onClick={VMApi.KillVM}
+        />
       </CardFooter>
     </Card>
   );
 }
+
+function VMAction(p: {
+  vm: VMInfo;
+  label: string;
+  primary?: boolean;
+  icon: React.ReactElement;
+  enabled: boolean;
+  currState?: VMState;
+  possibleStates: VMState[];
+  onClick: (vm: VMInfo) => Promise<void>;
+}): React.ReactElement {
+  const toast = useToast();
+  const [loading, setLoading] = React.useState(false);
+
+  const onClick = async () => {
+    try {
+      setLoading(true);
+
+      await p.onClick(p.vm);
+
+      toast(p.label, `Action successfully executed!`, "success");
+    } catch (e) {
+      console.error(e);
+      toast(p.label, `Failed to perform action: ${e}`, "error");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (!p.currState || !p.possibleStates.includes(p.currState)) {
+    return <></>;
+  }
+
+  if (!p.enabled)
+    return (
+      <Tooltip content={"Unavailable"} relationship="label">
+        <Button
+          appearance={p.primary ? "primary" : undefined}
+          icon={p.icon}
+          disabled
+        >
+          {p.label}
+        </Button>
+      </Tooltip>
+    );
+
+  return (
+    <Button
+      appearance={p.primary ? "primary" : undefined}
+      icon={loading ? <Spinner size="tiny" /> : p.icon}
+      onClick={onClick}
+    >
+      {p.label}
+    </Button>
+  );
+}