Can enable autostart of VMs

virtweb_frontend/src/widgets/forms/VMAutostartInput.tsx

@@ -0,0 +1,70 @@
+import { Alert, CircularProgress, Typography } from "@mui/material";
+import { VMApi, VMInfo } from "../../api/VMApi";
+import { AsyncWidget } from "../AsyncWidget";
+import React from "react";
+import { CheckboxInput } from "./CheckboxInput";
+import { useAlert } from "../../hooks/providers/AlertDialogProvider";
+import { useSnackbar } from "../../hooks/providers/SnackbarProvider";
+
+export function VMAutostartInput(p: {
+  editable: boolean;
+  vm: VMInfo;
+}): React.ReactElement {
+  const alert = useAlert();
+  const snackbar = useSnackbar();
+
+  const [enabled, setEnabled] = React.useState<boolean | undefined>();
+
+  const load = async () => {
+    setEnabled(await VMApi.IsAutostart(p.vm));
+  };
+
+  const update = async (enabled: boolean) => {
+    try {
+      await VMApi.SetAutostart(p.vm, enabled);
+      snackbar("Autostart status successfully updated!");
+      setEnabled(enabled);
+    } catch (e) {
+      console.error(e);
+      alert("Failed to update autostart status of the VM!");
+    }
+  };
+
+  return (
+    <AsyncWidget
+      loadKey={p.vm.uuid}
+      load={load}
+      errMsg="Failed to check autostart status of the VM!"
+      buildLoading={() => (
+        <Typography>
+          <CircularProgress size={"1rem"} /> Checking for autostart
+        </Typography>
+      )}
+      buildError={(e: string) => <Alert severity="error">{e}</Alert>}
+      build={() => (
+        <VMAutostartInputInner
+          editable={p.editable}
+          enabled={enabled!}
+          setEnabled={update}
+        />
+      )}
+    />
+  );
+}
+
+function VMAutostartInputInner(p: {
+  editable: boolean;
+  enabled: boolean;
+  setEnabled: (b: boolean) => void;
+}): React.ReactElement {
+  return (
+    <div>
+      <CheckboxInput
+        editable={p.editable}
+        checked={p.enabled}
+        label="Autostart VM"
+        onValueChange={p.setEnabled}
+      />
+    </div>
+  );
+}

virtweb_frontend/src/widgets/forms/VMSelectIsoInput.tsx

@@ -0,0 +1,74 @@
+import { filesize } from "filesize";
+import { IsoFile } from "../../api/IsoFilesApi";
+import { SelectInput } from "./SelectInput";
+import {
+  Avatar,
+  IconButton,
+  ListItem,
+  ListItemAvatar,
+  ListItemText,
+  Tooltip,
+} from "@mui/material";
+import DeleteIcon from "@mui/icons-material/Delete";
+import { mdiDisc } from "@mdi/js";
+import Icon from "@mdi/react";
+
+export function VMSelectIsoInput(p: {
+  editable: boolean;
+  isoList: IsoFile[];
+  value?: string;
+  onChange: (newVal?: string) => void;
+}): React.ReactElement {
+  if (!p.value && !p.editable) return <></>;
+
+  if (p.value) {
+    const iso = p.isoList.find((d) => d.filename == p.value);
+    return (
+      <ListItem
+        secondaryAction={
+          p.editable && (
+            <IconButton
+              edge="end"
+              aria-label="detach iso file"
+              onClick={() => {
+                p.onChange(undefined);
+              }}
+            >
+              <Tooltip title="Detach ISO file">
+                <DeleteIcon />
+              </Tooltip>
+            </IconButton>
+          )
+        }
+      >
+        <ListItemAvatar>
+          <Avatar>
+            <Icon path={mdiDisc} />
+          </Avatar>
+        </ListItemAvatar>
+        <ListItemText
+          primary={iso?.filename}
+          secondary={filesize(iso?.size ?? 0)}
+        />
+      </ListItem>
+    );
+  }
+
+  return (
+    <SelectInput
+      label="ISO file"
+      editable={p.editable}
+      value={p.value}
+      onValueChange={p.onChange}
+      options={[
+        { label: "None", value: undefined },
+        ...p.isoList.map((i) => {
+          return {
+            label: `${i.filename} ${filesize(i.size)}`,
+            value: i.filename,
+          };
+        }),
+      ]}
+    />
+  );
+}