VirtWeb/virtweb_frontend/src/widgets/vms/VMDetails.tsx

import AddIcon from "@mui/icons-material/Add";
import ListIcon from "@mui/icons-material/List";
import { Button, IconButton, Tooltip } from "@mui/material";
import Grid from "@mui/material/Grid";
import React from "react";
import { useNavigate } from "react-router-dom";
import { validate as validateUUID } from "uuid";
import { GroupApi } from "../../api/GroupApi";
import { IsoFile, IsoFilesApi } from "../../api/IsoFilesApi";
import { NWFilter, NWFilterApi } from "../../api/NWFilterApi";
import { NetworkApi, NetworkInfo } from "../../api/NetworksApi";
import { ServerApi } from "../../api/ServerApi";
import { VMApi, VMInfo } from "../../api/VMApi";
import { useAlert } from "../../hooks/providers/AlertDialogProvider";
import { useConfirm } from "../../hooks/providers/ConfirmDialogProvider";
import { useSnackbar } from "../../hooks/providers/SnackbarProvider";
import { AsyncWidget } from "../AsyncWidget";
import { TabsWidget } from "../TabsWidget";
import { XMLAsyncWidget } from "../XMLWidget";
import { CheckboxInput } from "../forms/CheckboxInput";
import { EditSection } from "../forms/EditSection";
import { ResAutostartInput } from "../forms/ResAutostartInput";
import { SelectInput } from "../forms/SelectInput";
import { TextInput } from "../forms/TextInput";
import { VMDisksList } from "../forms/VMDisksList";
import { VMNetworksList } from "../forms/VMNetworksList";
import { VMSelectIsoInput } from "../forms/VMSelectIsoInput";
import { VMScreenshot } from "./VMScreenshot";

interface DetailsProps {
  vm: VMInfo;
  editable: boolean;
  onChange?: () => void;
  screenshot?: boolean;
}

export function VMDetails(p: DetailsProps): React.ReactElement {
  const [groupsList, setGroupsList] = React.useState<string[] | undefined>();
  const [isoList, setIsoList] = React.useState<IsoFile[] | undefined>();
  const [vcpuCombinations, setVCPUCombinations] = React.useState<
    number[] | undefined
  >();
  const [networksList, setNetworksList] = React.useState<
    NetworkInfo[] | undefined
  >();
  const [networkFiltersList, setNetworkFiltersList] = React.useState<
    NWFilter[] | undefined
  >();

  const load = async () => {
    setGroupsList(await GroupApi.GetList());
    setIsoList(await IsoFilesApi.GetList());
    setVCPUCombinations(await ServerApi.NumberVCPUs());
    setNetworksList(await NetworkApi.GetList());
    setNetworkFiltersList(await NWFilterApi.GetList());
  };

  return (
    <AsyncWidget
      loadKey={"1"}
      load={load}
      errMsg="Failed to load the list of ISO files"
      build={() => (
        <VMDetailsInner
          groupsList={groupsList!}
          isoList={isoList!}
          vcpuCombinations={vcpuCombinations!}
          networksList={networksList!}
          networkFiltersList={networkFiltersList!}
          {...p}
        />
      )}
    />
  );
}

enum VMTab {
  General = 0,
  Storage,
  Network,
  XML,
  Danger,
}

type DetailsInnerProps = DetailsProps & {
  groupsList: string[];
  isoList: IsoFile[];
  vcpuCombinations: number[];
  networksList: NetworkInfo[];
  networkFiltersList: NWFilter[];
};

function VMDetailsInner(p: DetailsInnerProps): React.ReactElement {
  const [currTab, setCurrTab] = React.useState(VMTab.General);

  return (
    <>
      <TabsWidget
        currTab={currTab}
        onTabChange={setCurrTab}
        options={[
          { label: "General", value: VMTab.General, visible: true },
          { label: "Storage", value: VMTab.Storage, visible: true },
          { label: "Network", value: VMTab.Network, visible: true },
          {
            label: "XML",
            value: VMTab.XML,
            visible: !p.editable,
          },
          {
            label: "Danger zone",
            value: VMTab.Danger,
            visible: !p.editable,
            color: "red",
          },
        ]}
      />

      {currTab === VMTab.General && <VMDetailsTabGeneral {...p} />}
      {currTab === VMTab.Storage && <VMDetailsTabStorage {...p} />}
      {currTab === VMTab.Network && <VMDetailsTabNetwork {...p} />}
      {currTab === VMTab.XML && <VMDetailsTabXML {...p} />}
      {currTab === VMTab.Danger && <VMDetailsTabDanger {...p} />}
    </>
  );
}

function VMDetailsTabGeneral(p: DetailsInnerProps): React.ReactElement {
  const [addGroup, setAddGroup] = React.useState(false);

  return (
    <Grid container spacing={2}>
      {
        /* Screenshot section */ p.screenshot && (
          <EditSection title="Screenshot">
            <VMScreenshot vm={p.vm} />
          </EditSection>
        )
      }

      {/* Metadata section */}
      <EditSection title="Metadata">
        <TextInput
          label="Name"
          editable={p.editable}
          value={p.vm.name}
          onValueChange={(v) => {
            p.vm.name = v ?? "";
            p.onChange?.();
          }}
          checkValue={(v) => /^[a-zA-Z0-9]+$/.test(v)}
          size={ServerApi.Config.constraints.vm_name_size}
        />

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

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

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

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

        <div style={{ display: "flex" }}>
          {addGroup ? (
            <TextInput
              label="Group"
              editable={p.editable}
              value={p.vm.group}
              onValueChange={(v) => {
                p.vm.group = v;
                p.onChange?.();
              }}
              size={ServerApi.Config.constraints.group_id_size}
            />
          ) : (
            <SelectInput
              editable={p.editable}
              label="Group"
              onValueChange={(v) => {
                p.vm.group = v!;
                p.onChange?.();
              }}
              value={p.vm.group}
              options={[
                { label: "None" },
                ...p.groupsList.map((g) => {
                  return { value: g, label: g };
                }),
              ]}
            />
          )}
          {p.editable && (
            <Tooltip
              title={
                addGroup
                  ? "Use an existing group"
                  : "Add a new group instead of using existing one"
              }
            >
              <IconButton
                onClick={() => {
                  setAddGroup(!addGroup);
                }}
              >
                {addGroup ? <ListIcon /> : <AddIcon />}
              </IconButton>
            </Tooltip>
          )}
        </div>
      </EditSection>

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

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

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

        <SelectInput
          editable={p.editable}
          label="Number of vCPU"
          options={p.vcpuCombinations.map((v) => {
            return { label: v.toString(), value: v.toString() };
          })}
          value={p.vm.number_vcpu.toString()}
          onValueChange={(v) => {
            p.vm.number_vcpu = Number(v ?? "0");
            p.onChange?.();
          }}
        />

        <CheckboxInput
          editable={p.editable}
          label="Enable VNC access"
          checked={p.vm.vnc_access}
          onValueChange={(v) => {
            p.vm.vnc_access = v;
            p.onChange?.();
          }}
        />
        <br />

        <CheckboxInput
          editable={p.editable}
          label="Enable TPM 2.0 module"
          checked={p.vm.tpm_module}
          onValueChange={(v) => {
            p.vm.tpm_module = v;
            p.onChange?.();
          }}
        />

        {p.vm.uuid && (
          <ResAutostartInput
            editable={p.editable}
            ressourceName="VM"
            checkAutotostart={() => VMApi.IsAutostart(p.vm)}
            setAutotostart={(e) => VMApi.SetAutostart(p.vm, e)}
          />
        )}
      </EditSection>
    </Grid>
  );
}

/**
 * Storage section
 */
function VMDetailsTabStorage(p: DetailsInnerProps): React.ReactElement {
  return (
    <Grid container spacing={2}>
      {(p.editable || p.vm.file_disks.length > 0) && (
        <EditSection title="File disks storage">
          <VMDisksList {...p} />
        </EditSection>
      )}

      {(p.editable || p.vm.iso_files.length > 0) && (
        <EditSection title="ISO storage">
          <VMSelectIsoInput
            editable={p.editable}
            isoList={p.isoList}
            attachedISOs={p.vm.iso_files}
            onChange={(v) => {
              p.vm.iso_files = v;
              p.onChange?.();
            }}
          />
        </EditSection>
      )}
    </Grid>
  );
}

function VMDetailsTabNetwork(p: DetailsInnerProps): React.ReactElement {
  return <VMNetworksList {...p} />;
}

function VMDetailsTabXML(p: DetailsInnerProps): React.ReactElement {
  return (
    <XMLAsyncWidget
      errMsg="Failed to load VM XML source definition!"
      identifier={p.vm.uuid!}
      load={() => VMApi.GetSingleXML(p.vm.uuid!)}
    />
  );
}

function VMDetailsTabDanger(p: DetailsInnerProps): React.ReactElement {
  const confirm = useConfirm();
  const alert = useAlert();
  const snackbar = useSnackbar();
  const navigate = useNavigate();

  const deleteVM = async () => {
    try {
      if (
        !(await confirm(
          `Do you really want to delete the vm ${p.vm.name}? The operation CANNOT be undone!`,
          "Delete a VM",
          "DELETE"
        ))
      )
        return;

      const keepData = !(await confirm(
        "Do you want to delete the files of the VM?",
        "Delete a VM",
        "Delete the data",
        "keep the data"
      ));

      if (
        !(await confirm(
          `[LAST CALL] Do you really want to procede with removal? Again, the operation CANNOT be undone!`,
          "Delete a VM",
          "DELETE"
        ))
      )
        return;

      await VMApi.Delete(p.vm, keepData);
      snackbar("The VM was successfully deleted!");

      navigate("/vms");
    } catch (e) {
      console.error(e);
      alert(`Failed to delete VM!\n${e}`);
    }
  };

  return (
    <Button color="error" onClick={deleteVM}>
      Delete the VM
    </Button>
  );
}