anvil/striker-ui/components/ProvisionServerDialog.tsx

import { useEffect, useState } from 'react';
import {
  Box,
  Dialog,
  DialogProps,
  FormControl,
  FormGroup,
} from '@mui/material';
import { dSize, dSizeStr } from 'format-data-size';

import MenuItem from './MenuItem';
import OutlinedInput from './OutlinedInput';
import OutlinedInputLabel from './OutlinedInputLabel';
import { Panel, PanelHeader } from './Panels';
import Select from './Select';
import Slider, { SliderProps } from './Slider';
import { BodyText, HeaderText } from './Text';

type ProvisionServerDialogProps = {
  dialogProps: DialogProps;
};

const BIGINT_ZERO = BigInt(0);

const createOutlinedInput = (id: string, label: string): JSX.Element => (
  <FormControl>
    <OutlinedInputLabel {...{ htmlFor: id }}>{label}</OutlinedInputLabel>
    <OutlinedInput {...{ id, label }} />
  </FormControl>
);

const createOutlinedSelect = (
  id: string,
  label: string | undefined,
  value: string,
  selectItems: string[][] | string[],
): JSX.Element => (
  <FormControl>
    {label && (
      <OutlinedInputLabel {...{ htmlFor: id }}>{label}</OutlinedInputLabel>
    )}
    <Select {...{ id, input: <OutlinedInput {...{ label }} />, value }}>
      {selectItems.map((item) => {
        let itemValue;
        let itemDisplayValue;

        if (item instanceof Array) {
          [itemValue, itemDisplayValue] = item;
        } else {
          itemValue = item;
          itemDisplayValue = item;
        }

        return (
          <MenuItem key={`${id}-${itemValue}`} value={itemValue}>
            {itemDisplayValue}
          </MenuItem>
        );
      })}
    </Select>
  </FormControl>
);

const createOutlinedSlider = (
  id: string,
  label: string,
  sliderProps?: Partial<SliderProps>,
): JSX.Element => (
  <FormControl>
    <Slider
      // eslint-disable-next-line react/jsx-props-no-spreading
      {...{
        isAllowTextInput: true,
        label,
        labelId: `${id}-label`,
        value: 1,
        ...sliderProps,
      }}
    />
  </FormControl>
);

const ProvisionServerDialog = ({
  dialogProps: { open },
}: ProvisionServerDialogProps): JSX.Element => {
  const [sliderMaxAvailableCPUCores, setSliderMaxAvailableCPUCores] =
    useState<number>(0);
  const [sliderMaxAvailableMemory, setSliderMaxAvailableMemory] =
    useState<number>(0);

  const [memory, setMemory] = useState<bigint>(BIGINT_ZERO);
  const [memoryUnit, setMemoryUnit] = useState<string>('');

  const data = {
    anvils: [
      {
        anvilUUID: 'ad590bcb-24e1-4592-8cd1-9cd6229b7bf2',
        anvilName: 'yan-anvil-03',
        anvilTotalCPUCores: 4,
        anvilTotalMemory: '17179869184',
        anvilTotalAllocatedCPUCores: 1,
        anvilTotalAllocatedMemory: '1073741824',
        anvilTotalAvailableCPUCores: 3,
        anvilTotalAvailableMemory: '7516192768',
        hosts: [
          {
            hostUUID: 'c9b25b77-f9a1-41fa-9f04-677c58d0d9e1',
            hostName: 'yan-a03n01.alteeve.com',
            hostCPUCores: 4,
            hostMemory: '17179869184',
          },
          {
            hostUUID: 'c0a1c2c8-3418-4dbc-80c6-c4c0cea6a511',
            hostName: 'yan-a03n02.alteeve.com',
            hostCPUCores: 4,
            hostMemory: '17179869184',
          },
          {
            hostUUID: '8815a6dd-239d-4f8d-b248-ac8a5cac4a30',
            hostName: 'yan-a03dr01.alteeve.com',
            hostCPUCores: 4,
            hostMemory: '17179869184',
          },
        ],
        servers: [
          {
            serverUUID: 'd128c15a-0e21-4ba3-9084-1972dad31bd4',
            serverName: 'alpine-x86_64-01',
            serverCPUCores: 1,
            serverMemory: '1073741824',
          },
        ],
        storageGroups: [
          {
            storageGroupUUID: 'b594f417-852a-4bd4-a215-fae32d226b0b',
            storageGroupName: 'Storage group 1',
            storageGroupSize: '137325707264',
            storageGroupFree: '42941284352',
          },
        ],
        files: [
          {
            fileUUID: '5d6fc6d9-03f8-40ec-9bff-38e31b3a5bc5',
            fileName: 'alpine-virt-3.15.0-x86_64.iso',
          },
        ],
      },
      {
        anvilUUID: '85e0fd96-ea38-403d-992f-441d20cad679',
        anvilName: 'mock-anvil-01',
        anvilTotalCPUCores: 8,
        anvilTotalMemory: '34359738368',
        anvilTotalAllocatedCPUCores: 0,
        anvilTotalAllocatedMemory: '2147483648',
        anvilTotalAvailableCPUCores: 8,
        anvilTotalAvailableMemory: '32212254720',
        hosts: [
          {
            hostUUID: '2198ae4a-db3a-4685-8d98-db56af75d53d',
            hostName: 'mock-a03n01.alteeve.com',
            hostCPUCores: 8,
            hostMemory: '34359738368',
          },
          {
            hostUUID: '928f12b4-1be0-4872-adbc-f78579323d50',
            hostName: 'mock-a03n02.alteeve.com',
            hostCPUCores: 8,
            hostMemory: '34359738368',
          },
          {
            hostUUID: 'c4837341-fd09-4b36-b1f0-e16115b704b4',
            hostName: 'mock-a03dr01.alteeve.com',
            hostCPUCores: 8,
            hostMemory: '34359738368',
          },
        ],
        servers: [],
        storageGroups: [],
        files: [
          {
            fileUUID: '5d6fc6d9-03f8-40ec-9bff-38e31b3a5bc5',
            fileName: 'alpine-virt-3.15.0-x86_64.iso',
          },
        ],
      },
    ],
    osList: [
      'os_list_almalinux8,AlmaLinux 8',
      'os_list_alpinelinux3.14,Alpine Linux 3.14',
      'os_list_alt.p10,ALT p10 StarterKits',
      'os_list_alt9.1,ALT 9.1',
      'os_list_alt9.2,ALT 9.2',
      'os_list_centos-stream9,CentOS Stream 9',
      'os_list_cirros0.5.0,CirrOS 0.5.0',
      'os_list_cirros0.5.1,CirrOS 0.5.1',
      'os_list_cirros0.5.2,CirrOS 0.5.2',
      'os_list_debian11,Debian 11',
      'os_list_fedora34,Fedora 34',
      'os_list_freebsd13.0,FreeBSD 13.0',
      'os_list_haikur1beta2,Haiku R1/Beta2',
      'os_list_haikur1beta3,Haiku R1/Beta3',
      'os_list_mageia8,Mageia 8',
      'os_list_nixos-21.05,NixOS 21.05',
      'os_list_openbsd6.8,OpenBSD 6.8',
      'os_list_openbsd6.9,OpenBSD 6.9',
      'os_list_opensuse15.3,openSUSE Leap 15.3',
      'os_list_rhel8.5,Red Hat Enterprise Linux 8.5',
      'os_list_silverblue34,Fedora Silverblue 34',
      'os_list_sle15sp3,SUSE Linux Enterprise 15 SP3',
      'os_list_slem5.0,SUSE Linux Enterprise Micro',
      'os_list_ubuntu21.04,Ubuntu 21.04',
      'os_list_win2k22,Microsoft Windows Server 2022',
    ],
  };

  const { maxAvailableCPUCores, maxAvailableMemory } = data.anvils.reduce<{
    maxAvailableCPUCores: number;
    maxAvailableMemory: bigint;
  }>(
    (
      reducedValues,
      { anvilTotalAvailableCPUCores, anvilTotalAvailableMemory },
    ) => {
      const convertedAnvilTotalAvailableMemory = BigInt(
        anvilTotalAvailableMemory,
      );

      reducedValues.maxAvailableCPUCores = Math.max(
        anvilTotalAvailableCPUCores,
        reducedValues.maxAvailableCPUCores,
      );

      if (
        convertedAnvilTotalAvailableMemory > reducedValues.maxAvailableMemory
      ) {
        reducedValues.maxAvailableMemory = convertedAnvilTotalAvailableMemory;
      }

      return reducedValues;
    },
    {
      maxAvailableCPUCores: 0,
      maxAvailableMemory: BIGINT_ZERO,
    },
  );

  const optimizeOSList = data.osList.map((keyValuePair) =>
    keyValuePair.split(','),
  );

  useEffect(() => {
    setSliderMaxAvailableCPUCores(maxAvailableCPUCores);

    const formattedMaxAvailableMemory = dSize(maxAvailableMemory, {
      precision: 2,
    });

    console.dir(formattedMaxAvailableMemory, { depth: null });

    if (formattedMaxAvailableMemory) {
      setSliderMaxAvailableMemory(
        parseFloat(formattedMaxAvailableMemory.value),
      );

      setMemoryUnit(formattedMaxAvailableMemory.unit);
    }
  }, [maxAvailableCPUCores, maxAvailableMemory]);

  return (
    <Dialog
      {...{
        fullWidth: true,
        maxWidth: 'sm',
        open,
        PaperComponent: Panel,
        PaperProps: { sx: { overflow: 'visible' } },
      }}
    >
      <PanelHeader>
        <HeaderText text="Provision a Server" />
      </PanelHeader>
      <FormGroup>
        {createOutlinedInput('ps-server-name', 'Server name')}
        {createOutlinedSlider('ps-cpu-cores', 'CPU cores', {
          sliderProps: { max: sliderMaxAvailableCPUCores, min: 1 },
        })}
        <BodyText text={`Memory: ${memory.toString()}`} />
        <Box
          sx={{
            display: 'flex',
            flexDirection: 'row',

            '& > :first-child': {
              flexGrow: 1,
            },
          }}
        >
          {createOutlinedSlider('ps-memory', 'Memory', {
            sliderProps: {
              max: sliderMaxAvailableMemory,
              min: 1,
              onChange: (event, newValue) => {
                console.log(`newValue=${newValue}`);
              },
            },
          })}
          {createOutlinedSelect('ps-memory-unit', undefined, memoryUnit, [
            'B',
            'KiB',
            'kB',
            'MiB',
            'MB',
            'GiB',
            'GB',
            'TiB',
            'TB',
          ])}
        </Box>
        {/* {createOutlinedSlider('ps-memory', 'Memory')}
        {createOutlinedSelect('ps-storage-group', 'Storage group', [
          ['b594f417-852a-4bd4-a215-fae32d226b0b', 'Storage group 1'],
        ])}
        {createOutlinedSlider('ps-image-size', 'Virtual disk size')}
        {createOutlinedSelect('ps-install-image', 'Install ISO', [])}
        {createOutlinedSelect('ps-driver-image', 'Driver ISO', [])}
        {createOutlinedSelect(
          'ps-optimize-for-os',
          'Optimize for OS',
          optimizeOSList,
        )} */}
      </FormGroup>
    </Dialog>
  );
};

export default ProvisionServerDialog;