VirtWeb/virtweb_frontend/src/routes/EditVMRoute.tsx

import { Button, Grid, Paper, Typography } from "@mui/material";
import React, { PropsWithChildren } from "react";
import { useNavigate, useParams } from "react-router-dom";
import { validate as validateUUID } from "uuid";
import { ServerApi } from "../api/ServerApi";
import { VMApi, VMInfo } from "../api/VMApi";
import { useAlert } from "../hooks/providers/AlertDialogProvider";
import { useSnackbar } from "../hooks/providers/SnackbarProvider";
import { AsyncWidget } from "../widgets/AsyncWidget";
import { VirtWebRouteContainer } from "../widgets/VirtWebRouteContainer";
import { CheckboxInput } from "../widgets/forms/CheckboxInput";
import { SelectInput } from "../widgets/forms/SelectInput";
import { TextInput } from "../widgets/forms/TextInput";

export function CreateVMRoute(): React.ReactElement {
  const snackbar = useSnackbar();
  const navigate = useNavigate();

  const [vm] = React.useState(VMInfo.NewEmpty);

  const create = async (v: VMInfo) => {
    try {
      const res = await VMApi.Create(v);
      snackbar("The virtual machine was successfully created!");
      v.uuid = res.uuid;
      navigate(v.ViewURL);
    } catch (e) {
      console.error(e);
      alert("Failed to create VM!");
    }
  };

  return (
    <EditVMInner
      vm={vm}
      isCreating={true}
      onSave={create}
      onCancel={() => navigate("/vms")}
    />
  );
}

export function EditVMRoute(): React.ReactElement {
  const navigate = useNavigate();
  const alert = useAlert();
  const snackbar = useSnackbar();

  const { uuid } = useParams();

  const [vm, setVM] = React.useState<VMInfo | undefined>(undefined);

  const load = async () => {
    const vm = await VMApi.GetSingle(uuid!);
    setVM(vm);

    const state = await VMApi.GetState(vm);
    if (state !== "Shutdown" && state !== "Shutoff") {
      await alert("The Virtual machine is running, you cannot edit it!");
      navigate(vm.ViewURL);
    }
  };

  const save = async (v: VMInfo) => {
    try {
      await VMApi.UpdateSingle(v);
      snackbar("The virtual machine was successfully updated!");
      navigate(v.ViewURL);
    } catch (e) {
      console.error(e);
      alert("Failed to update VM info!");
    }
  };

  return (
    <AsyncWidget
      loadKey={uuid}
      load={load}
      errMsg="Failed to get VM information!"
      build={() => (
        <EditVMInner
          vm={vm!}
          isCreating={false}
          onCancel={() => {
            navigate(vm!.ViewURL);
          }}
          onSave={save}
        />
      )}
    />
  );
}

function EditVMInner(p: {
  vm: VMInfo;
  isCreating: boolean;
  onCancel: () => void;
  onSave: (vm: VMInfo) => Promise<void>;
}): React.ReactElement {
  const [changed, setChanged] = React.useState(false);

  const [, updateState] = React.useState<any>();
  const forceUpdate = React.useCallback(() => updateState({}), []);

  const valueChanged = () => {
    setChanged(true);
    forceUpdate();
  };

  return (
    <VirtWebRouteContainer
      label={p.isCreating ? "Create a Virtual Machine" : "Edit Virtual Machine"}
      actions={
        <span>
          {changed && (
            <Button
              variant="contained"
              onClick={() => p.onSave(p.vm)}
              style={{ marginRight: "10px" }}
            >
              {p.isCreating ? "Create" : "Save"}
            </Button>
          )}
          <Button onClick={p.onCancel} variant="outlined">
            Cancel
          </Button>
        </span>
      }
    >
      <Grid container spacing={2}>
        {/* Metadata section */}
        <EditSection title="Metadata">
          <TextInput
            label="Name"
            editable={true}
            value={p.vm.name}
            onValueChange={(v) => {
              p.vm.name = v ?? "";
              valueChanged();
            }}
            size={ServerApi.Config.constraints.name_size}
          />

          <TextInput label="UUID" editable={false} value={p.vm.uuid} />

          <TextInput
            label="VM genid"
            editable={true}
            value={p.vm.genid}
            onValueChange={(v) => {
              p.vm.genid = v;
              valueChanged();
            }}
            checkValue={(v) => validateUUID(v)}
          />

          <TextInput
            label="Title"
            editable={true}
            value={p.vm.title}
            onValueChange={(v) => {
              p.vm.title = v;
              valueChanged();
            }}
            size={ServerApi.Config.constraints.title_size}
          />

          <TextInput
            label="Description"
            editable={true}
            value={p.vm.description}
            onValueChange={(v) => {
              p.vm.description = v;
              valueChanged();
            }}
            multiline={true}
          />
        </EditSection>

        {/* General section */}
        <EditSection title="General">
          <SelectInput
            editing={true}
            label="CPU Architecture"
            onValueChange={(v) => {
              p.vm.architecture = v! as any;
              valueChanged();
            }}
            value={p.vm.architecture}
            options={[
              { label: "i686", value: "i686" },
              { label: "x86_64", value: "x86_64" },
            ]}
          />

          <SelectInput
            editing={true}
            label="Boot type"
            onValueChange={(v) => {
              p.vm.boot_type = v! as any;
              valueChanged();
            }}
            value={p.vm.boot_type}
            options={[
              { label: "UEFI with Secure Boot", value: "UEFISecureBoot" },
              { label: "UEFI", value: "UEFI" },
            ]}
          />

          <TextInput
            label="Memory (MB)"
            editable={true}
            type="number"
            value={p.vm.memory.toString()}
            onValueChange={(v) => {
              p.vm.memory = Number(v ?? "0");
              valueChanged();
            }}
            checkValue={(v) =>
              Number(v) > ServerApi.Config.constraints.memory_size.min &&
              Number(v) < ServerApi.Config.constraints.memory_size.max
            }
          />

          <CheckboxInput
            editable={true}
            label="Enable VNC access"
            checked={p.vm.vnc_access}
            onValueChange={(v) => {
              p.vm.vnc_access = v;
              valueChanged();
            }}
          />
        </EditSection>
      </Grid>
    </VirtWebRouteContainer>
  );
}

function EditSection(
  p: { title: string } & PropsWithChildren
): React.ReactElement {
  return (
    <Grid item sm={12} md={6}>
      <Paper style={{ margin: "10px", padding: "10px" }}>
        <Typography variant="h5" style={{ marginBottom: "15px" }}>
          {p.title}
        </Typography>
        {p.children}
      </Paper>
    </Grid>
  );
}