Perform first actions on VM

remote_frontend/src/api/VMApi.ts

@@ -44,4 +44,25 @@ export class VMApi {
       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,11 +6,15 @@ 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, VMState } from "../api/VMApi";
@@ -60,7 +64,8 @@ function VMWidget(p: { vm: VMInfo }): React.ReactElement {
   const [state, setState] = React.useState<VMState | undefined>();
 
   const load = async () => {
-    setState(await VMApi.State(p.vm));
+    const newState = await VMApi.State(p.vm);
+    if (state !== newState) setState(newState);
   };
 
   React.useEffect(() => {
@@ -105,11 +110,96 @@ function VMWidget(p: { vm: VMInfo }): React.ReactElement {
       <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>
+  );
+}