VirtWeb/virtweb_frontend/src/routes/EditVMRoute.tsx

import { Button } from "@mui/material";
import React from "react";
import { useNavigate, useParams } from "react-router-dom";
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 { VMDetails } from "../widgets/vms/VMDetails";

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>
      }
    >
      <VMDetails vm={p.vm} editable={true} onChange={valueChanged} />
    </VirtWebRouteContainer>
  );
}