VirtWeb/virtweb_frontend/src/routes/EditVMRoute.tsx

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

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

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

  const create = async (v: VMInfo) => {
    const res = await VMApi.Create(v);
    snackbar("The virtual machine was successfully created!");
    v.uuid = res.uuid;
    navigate(v.ViewURL);
  };

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

export function EditVMRoute(): React.ReactElement {
  return <>todo</>;
}

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>
      }
    >
      {/* 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>
    </VirtWebRouteContainer>
  );
}

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