Start to build VM page

virtweb_frontend/src/widgets/vms/VMStatusWidget.tsx

@@ -11,7 +11,7 @@ import { useConfirm } from "../../hooks/providers/ConfirmDialogProvider";
 import { useSnackbar } from "../../hooks/providers/SnackbarProvider";
 
 export function VMStatusWidget(p: {
-  d: VMInfo;
+  vm: VMInfo;
   onChange?: (s: VMState) => void;
 }): React.ReactElement {
   const snackbar = useSnackbar();
@@ -20,7 +20,7 @@ export function VMStatusWidget(p: {
 
   const refresh = async () => {
     try {
-      const s = await VMApi.GetState(p.d);
+      const s = await VMApi.GetState(p.vm);
       if (s !== state) p.onChange?.(s);
       setState(s);
     } catch (e) {
@@ -32,6 +32,7 @@ export function VMStatusWidget(p: {
   const changedAction = () => setState(undefined);
 
   React.useEffect(() => {
+    refresh();
     const i = setInterval(() => refresh(), 3000);
 
     return () => clearInterval(i);
@@ -54,7 +55,7 @@ export function VMStatusWidget(p: {
         cond={["Shutdown", "Shutoff", "Crashed"]}
         icon={<PlayArrowIcon />}
         tooltip="Start the Virtual Machine"
-        performAction={() => VMApi.StartVM(p.d)}
+        performAction={() => VMApi.StartVM(p.vm)}
         onExecuted={changedAction}
       />
 
@@ -64,7 +65,7 @@ export function VMStatusWidget(p: {
         cond={["Paused", "PowerManagementSuspended"]}
         icon={<PlayArrowIcon />}
         tooltip="Resume the Virtual Machine"
-        performAction={() => VMApi.ResumeVM(p.d)}
+        performAction={() => VMApi.ResumeVM(p.vm)}
         onExecuted={changedAction}
       />
 
@@ -75,7 +76,7 @@ export function VMStatusWidget(p: {
         icon={<PauseIcon />}
         tooltip="Suspend the Virtual Machine"
         confirmMessage="Do you really want to supsend this VM?"
-        performAction={() => VMApi.SuspendVM(p.d)}
+        performAction={() => VMApi.SuspendVM(p.vm)}
         onExecuted={changedAction}
       />
 
@@ -86,7 +87,7 @@ export function VMStatusWidget(p: {
         icon={<PowerSettingsNewIcon />}
         tooltip="Shutdown the Virtual Machine"
         confirmMessage="Do you really want to shutdown this VM?"
-        performAction={() => VMApi.ShutdownVM(p.d)}
+        performAction={() => VMApi.ShutdownVM(p.vm)}
         onExecuted={changedAction}
       />
 
@@ -97,7 +98,7 @@ export function VMStatusWidget(p: {
         icon={<StopIcon />}
         tooltip="Kill the Virtual Machine"
         confirmMessage="Do you really want to kill this VM? This could lead to data loss / corruption!"
-        performAction={() => VMApi.KillVM(p.d)}
+        performAction={() => VMApi.KillVM(p.vm)}
         onExecuted={changedAction}
       />
 
@@ -108,7 +109,7 @@ export function VMStatusWidget(p: {
         icon={<ReplayIcon />}
         tooltip="Reset the Virtual Machine"
         confirmMessage="Do you really want to reset this VM?"
-        performAction={() => VMApi.ResetVM(p.d)}
+        performAction={() => VMApi.ResetVM(p.vm)}
         onExecuted={changedAction}
       />
     </div>