foreman_fog_proxmox 0.15.1 → 0.16.0

data/webpack/components/ProxmoxServer/ProxmoxServerNetwork.js

@@ -0,0 +1,161 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { Title, PageSection, Button } from '@patternfly/react-core';
+import { TimesIcon } from '@patternfly/react-icons';
+import { sprintf, translate as __ } from 'foremanReact/common/I18n';
+import PropTypes from 'prop-types';
+import NetworkInterface from './components/NetworkInterface';
+
+const ProxmoxServerNetwork = ({ network, bridges, paramScope }) => {
+  const [interfaces, setInterfaces] = useState([]);
+  const [nextId, setNextId] = useState(0);
+  const [availableIds, setAvailableIds] = useState([]);
+  const [usedIds, setUsedIds] = useState(new Set());
+  useEffect(() => {
+    if (network?.length > 0) {
+      const existingIds = new Set();
+      network.forEach(net => {
+        if (!net.value.model.value) return;
+        const id = parseInt(net.value.id.value.replace('net', ''), 10);
+        existingIds.add(id);
+        addInterface(null, net.value);
+      });
+      setUsedIds(existingIds);
+    }
+  }, [network]);
+
+  const getLowestAvailableId = useCallback(() => {
+    let id = 0;
+    while (usedIds.has(id)) {
+      id += 1;
+    }
+    return id;
+  }, [usedIds]);
+  const addInterface = useCallback(
+    (event, initialData = null) => {
+      if (event) event.preventDefault();
+      const netId = getLowestAvailableId();
+      const initData = initialData || {
+        id: {
+          name: `${paramScope}[interfaces_attributes][${nextId}][id]`,
+          value: `net${netId}`,
+        },
+        model: {
+          name: `${paramScope}[interfaces_attributes][${nextId}][model]`,
+          value: 'virtio',
+        },
+        bridge: {
+          name: `${paramScope}[interfaces_attributes][${nextId}][bridge]`,
+          value: bridges?.[0]?.iface || '',
+        },
+        tag: {
+          name: `${paramScope}[interfaces_attributes][${nextId}][tag]`,
+          value: '',
+        },
+        rate: {
+          name: `${paramScope}[interfaces_attributes][${nextId}][rate]`,
+          value: '',
+        },
+        queues: {
+          name: `${paramScope}[interfaces_attributes][${nextId}][queues]`,
+          value: '',
+        },
+        firewall: {
+          name: `${paramScope}[interfaces_attributes][${nextId}][firewall]`,
+          value: '0',
+        },
+        link_down: {
+          name: `${paramScope}[interfaces_attributes][${nextId}][link_down]`,
+          value: '0',
+        },
+      };
+      setNextId(prevId => {
+        if (availableIds.length > 0) {
+          setAvailableIds(availableIds.slice(1));
+        } else {
+          prevId += 1;
+        }
+        setUsedIds(prevIds => new Set(prevIds).add(netId));
+        const newId = availableIds.length > 0 ? availableIds[0] : prevId;
+        const newInterface = {
+          id: newId,
+          data: initData,
+          networks: network,
+        };
+
+        setInterfaces(prevInterfaces => [...prevInterfaces, newInterface]);
+        return prevId;
+      });
+    },
+    [bridges, network, paramScope, availableIds, nextId, getLowestAvailableId]
+  );
+
+  const removeInterface = idToRemove => {
+    const newInterfaces = interfaces.filter(nic => nic.id !== idToRemove);
+    setInterfaces(newInterfaces);
+    setAvailableIds([...availableIds, idToRemove].sort((a, b) => a - b));
+    setUsedIds(prevIds => {
+      const newIds = new Set(prevIds);
+      newIds.delete(idToRemove);
+      return newIds;
+    });
+  };
+
+  const updateNetworkData = (id, updatedData) => {
+    setInterfaces(
+      interfaces.map(net =>
+        net.id === id ? { ...net, data: updatedData } : net
+      )
+    );
+  };
+
+  return (
+    <div>
+      <PageSection padding={{ default: 'noPadding' }}>
+        <Button onClick={addInterface} variant="secondary">
+          {__('Add Interface')}
+        </Button>
+        {interfaces.map(nic => (
+          <div key={nic.id} style={{ position: 'relative' }}>
+            <div
+              style={{
+                marginTop: '10px',
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+              }}
+            >
+              <Title headingLevel="h4">
+                {sprintf(__('Nic %(nicId)s'), { nicId: nic.id })}
+              </Title>
+              <button onClick={() => removeInterface(nic.id)} type="button">
+                <TimesIcon />
+              </button>
+            </div>
+            <NetworkInterface
+              id={nic.id}
+              data={nic.data}
+              bridges={bridges}
+              networks={nic.networks}
+              updateNetworkData={updateNetworkData}
+              existingInterfaces={interfaces}
+            />
+          </div>
+        ))}
+      </PageSection>
+    </div>
+  );
+};
+
+ProxmoxServerNetwork.propTypes = {
+  network: PropTypes.object,
+  bridges: PropTypes.array,
+  paramScope: PropTypes.string,
+};
+
+ProxmoxServerNetwork.defaultProps = {
+  network: {},
+  bridges: [],
+  paramScope: '',
+};
+
+export default ProxmoxServerNetwork;

data/webpack/components/ProxmoxServer/ProxmoxServerOptions.js

@@ -0,0 +1,105 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { translate as __ } from 'foremanReact/common/I18n';
+import InputField from '../common/FormInputs';
+import ProxmoxComputeSelectors from '../ProxmoxComputeSelectors';
+
+const ProxmoxServerOptions = ({ options }) => {
+  const [opts, setOpts] = useState(options);
+
+  const handleChange = e => {
+    const { name, type, checked, value: targetValue } = e.target;
+    let value;
+    if (type === 'checkbox') {
+      value = checked ? '1' : '0';
+    } else {
+      value = targetValue;
+    }
+    const updatedKey = Object.keys(opts).find(key => opts[key].name === name);
+    setOpts(prevOpts => ({
+      ...prevOpts,
+      [updatedKey]: { ...prevOpts[updatedKey], value },
+    }));
+  };
+
+  return (
+    <div>
+      <InputField
+        name={opts?.boot?.name}
+        label={__('Boot device order')}
+        info={__(
+          'Order your devices, e.g. order=net0;ide2;scsi0. Default empty (any)'
+        )}
+        value={opts?.boot?.value}
+        onChange={handleChange}
+      />
+      <InputField
+        name={opts?.onboot?.name}
+        label={__('Start at boot')}
+        type="checkbox"
+        value={opts?.onboot?.value}
+        checked={opts?.onboot?.value === '1'}
+        onChange={handleChange}
+      />
+      <InputField
+        name={opts?.agent?.name}
+        label={__('Qemu Agent')}
+        type="checkbox"
+        value={opts?.agent?.value}
+        checked={opts?.agent?.value === '1'}
+        onChange={handleChange}
+      />
+      <InputField
+        name={opts?.kvm?.name}
+        label={__('KVM')}
+        info={__('Enable/disable KVM hardware virtualization')}
+        type="checkbox"
+        value={opts?.kvm?.value}
+        checked={opts?.kvm?.value === '1'}
+        onChange={handleChange}
+      />
+      <InputField
+        name={opts?.vga?.name}
+        label={__('VGA')}
+        type="select"
+        value={opts?.vga?.value}
+        options={ProxmoxComputeSelectors.proxmoxVgasMap}
+        onChange={handleChange}
+      />
+      <InputField
+        name={opts?.scsihw?.name}
+        label={__('SCSI Controller')}
+        type="select"
+        value={opts?.scsihw?.value}
+        options={ProxmoxComputeSelectors.proxmoxScsiControllersMap}
+        onChange={handleChange}
+      />
+      <InputField
+        name={opts?.bios?.name}
+        label={__('BIOS')}
+        type="select"
+        options={ProxmoxComputeSelectors.proxmoxBiosMap}
+        value={opts?.bios?.value}
+        onChange={handleChange}
+      />
+      <InputField
+        name={opts?.ostype?.name}
+        label={__('OS Type')}
+        type="select"
+        options={ProxmoxComputeSelectors.proxmoxOperatingSystemsMap}
+        value={opts?.ostype?.value}
+        onChange={handleChange}
+      />
+    </div>
+  );
+};
+
+ProxmoxServerOptions.propTypes = {
+  options: PropTypes.object,
+};
+
+ProxmoxServerOptions.defaultProps = {
+  options: {},
+};
+
+export default ProxmoxServerOptions;

data/webpack/components/ProxmoxServer/ProxmoxServerStorage.js

@@ -0,0 +1,272 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { Title, PageSection, Button } from '@patternfly/react-core';
+import { TimesIcon } from '@patternfly/react-icons';
+import { sprintf, translate as __ } from 'foremanReact/common/I18n';
+import HardDisk from './components/HardDisk';
+import CDRom from './components/CDRom';
+
+const ProxmoxServerStorage = ({ storage, storages, paramScope, nodeId }) => {
+  const [hardDisks, setHardDisks] = useState([]);
+  const [nextId, setNextId] = useState(0);
+  const [cdRom, setCdRom] = useState(false);
+  const [cdRomData, setCdRomData] = useState(null);
+  const [nextDeviceNumbers, setNextDeviceNumbers] = useState({
+    ide: 0,
+    sata: 0,
+    scsi: 0,
+    virtio: 0,
+  });
+  const controllerRanges = {
+    ide: { min: 0, max: 3 },
+    sata: { min: 0, max: 5 },
+    scsi: { min: 0, max: 30 },
+    virtio: { min: 0, max: 15 },
+  };
+
+  useEffect(() => {
+    if (storage?.length > 0) {
+      const updatedCounts = { ...nextDeviceNumbers };
+      storage.forEach(disk => {
+        if (disk.name === 'hard_disk') {
+          const controller = disk.value.controller.value;
+          const device = parseInt(disk.value.device.value, 10);
+          if (device >= updatedCounts[controller]) {
+            updatedCounts[controller] = device + 1;
+          }
+          addHardDisk(null, disk.value, true);
+        }
+        if (disk.name === 'cdrom') {
+          addCDRom(null, disk.value, true);
+        }
+      });
+      setNextDeviceNumbers(updatedCounts);
+    }
+  }, [storage]);
+
+  const getNextDevice = useCallback(
+    (controller, type = null) => {
+      const isDevice2Reserved = controller === 'ide' && type !== 'cdrom';
+      for (
+        let i = controllerRanges[controller].min;
+        i <= controllerRanges[controller].max;
+        i++
+      ) {
+        if (!(isDevice2Reserved && i === 2)) {
+          if (
+            !hardDisks.some(
+              disk =>
+                disk.data.controller.value === controller &&
+                disk.data.device.value === i
+            )
+          ) {
+            return i;
+          }
+        }
+      }
+      return null;
+    },
+    [hardDisks, controllerRanges]
+  );
+
+  const createUniqueDevice = useCallback(
+    (type, selectedController = 'virtio') => {
+      let controller = selectedController;
+      if (type === 'cdrom') {
+        controller = 'ide';
+        return { controller, device: 2, id: 'ide2' };
+      }
+
+      const device = getNextDevice(controller, type);
+      if (device !== null) {
+        const id = `${controller}${device}`;
+        const newCounts = {
+          ...nextDeviceNumbers,
+          [controller]: nextDeviceNumbers[controller] + 1,
+        };
+        setNextDeviceNumbers(newCounts);
+        return { controller, device, id };
+      }
+      return null;
+    },
+    [getNextDevice, nextDeviceNumbers]
+  );
+
+  const addHardDisk = useCallback(
+    (event, initialData = null, isPreExisting = false) => {
+      if (event) event.preventDefault();
+      let deviceInfo = null;
+      if (!isPreExisting) {
+        const selectedController = initialData?.controller?.value || 'virtio';
+        deviceInfo = createUniqueDevice('hard_disk', selectedController);
+        if (!deviceInfo) return;
+      }
+      const { controller, device, id } = deviceInfo || {};
+      const initHdd = initialData || {
+        id: {
+          name: `${paramScope}[volumes_attributes][${nextId}][id]`,
+          value: id,
+        },
+        device: {
+          name: `${paramScope}[volumes_attributes][${nextId}][device]`,
+          value: device,
+        },
+        storageType: {
+          name: `${paramScope}[volumes_attributes][${nextId}][storage_type]`,
+          value: 'hard_disk',
+        },
+        storage: {
+          name: `${paramScope}[volumes_attributes][${nextId}][storage]`,
+          value: 'local',
+        },
+        cache: {
+          name: `${paramScope}[volumes_attributes][${nextId}][cache]`,
+          value: null,
+        },
+        size: {
+          name: `${paramScope}[volumes_attributes][${nextId}][size]`,
+          value: 8,
+        },
+        controller: {
+          name: `${paramScope}[volumes_attributes][${nextId}][controller]`,
+          value: controller,
+        },
+      };
+
+      setNextId(prevNextId => {
+        const newNextId = prevNextId + 1;
+        const newHardDisk = {
+          id: newNextId,
+          storages,
+          data: initHdd,
+          disks: storage,
+        };
+        setHardDisks(prevHardDisks => [...prevHardDisks, newHardDisk]);
+        return newNextId;
+      });
+    },
+    [nextId, paramScope, storage, storages, createUniqueDevice]
+  );
+
+  const removeHardDisk = idToRemove => {
+    const newHardDisks = hardDisks.filter(
+      hardDisk => hardDisk.id !== idToRemove
+    );
+    setHardDisks(newHardDisks);
+  };
+
+  const updateHardDiskData = (id, updatedData) => {
+    setHardDisks(
+      hardDisks.map(disk =>
+        disk.id === id ? { ...disk, data: updatedData } : disk
+      )
+    );
+  };
+
+  const addCDRom = useCallback(
+    (event, initialData = null, isPreExisting = false) => {
+      if (event) event.preventDefault();
+      if (!initialData && cdRom) return;
+
+      const deviceInfo = initialData
+        ? { controller: 'ide', device: 2, id: 'ide2' }
+        : createUniqueDevice('cdrom');
+      if (!deviceInfo) return;
+
+      const initCDRom = initialData || {
+        id: {
+          name: `${paramScope}[volumes_attributes][${nextId}][id]`,
+          value: deviceInfo.id,
+        },
+        volid: {
+          name: `${paramScope}[volumes_attributes][${nextId}][volid]`,
+          value: '',
+        },
+        storageType: {
+          name: `${paramScope}[volumes_attributes][${nextId}][storageType]`,
+          value: 'cdrom',
+        },
+        storage: {
+          name: `${paramScope}[volumes_attributes][${nextId}][storage]`,
+          value: 'local',
+        },
+        cdrom: {
+          name: `${paramScope}[volumes_attributes][${nextId}][cdrom]`,
+          value: '',
+        },
+      };
+      setCdRom(true);
+      setCdRomData(initCDRom);
+    },
+    [cdRom, nextId, paramScope, createUniqueDevice]
+  );
+
+  const removeCDRom = () => {
+    setCdRom(false);
+  };
+  return (
+    <div>
+      <PageSection padding={{ default: 'noPadding' }}>
+        <Button onClick={addCDRom} variant="secondary" isDisabled={cdRom}>
+          {' '}
+          {__('Add CD-ROM')}
+        </Button>
+        {'  '}
+        <Button onClick={addHardDisk} variant="secondary">
+          {__('Add HardDisk')}
+        </Button>
+        {cdRom && cdRomData && (
+          <CDRom
+            onRemove={removeCDRom}
+            data={cdRomData}
+            storages={storages}
+            nodeId={nodeId}
+          />
+        )}
+        {hardDisks.map(hardDisk => (
+          <div style={{ position: 'relative' }}>
+            <div
+              style={{
+                marginTop: '10px',
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+              }}
+            >
+              <Title headingLevel="h4">
+                {sprintf(__('Hard Disk %(hddId)s'), { hddId: hardDisk.id })}
+              </Title>
+              <button onClick={() => removeHardDisk(hardDisk.id)} type="button">
+                <TimesIcon />
+              </button>
+            </div>
+            <HardDisk
+              id={hardDisk.id}
+              data={hardDisk.data}
+              storages={hardDisk.storages}
+              disks={hardDisk.disks}
+              updateHardDiskData={updateHardDiskData}
+              createUniqueDevice={createUniqueDevice}
+            />
+          </div>
+        ))}
+      </PageSection>
+    </div>
+  );
+};
+
+ProxmoxServerStorage.propTypes = {
+  storage: PropTypes.object,
+  storages: PropTypes.array,
+  paramScope: PropTypes.string,
+  nodeId: PropTypes.string,
+};
+
+ProxmoxServerStorage.defaultProps = {
+  storage: {},
+  storages: [],
+  paramScope: '',
+  nodeId: '',
+};
+
+export default ProxmoxServerStorage;

data/webpack/components/ProxmoxServer/components/CDRom.js

@@ -0,0 +1,149 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Title, Divider, PageSection, Radio } from '@patternfly/react-core';
+import { TimesIcon } from '@patternfly/react-icons';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { imagesByStorage, createStoragesMap } from '../../ProxmoxStoragesUtils';
+import InputField from '../../common/FormInputs';
+
+const CDRom = ({ onRemove, data, storages, nodeId }) => {
+  const [cdrom, setCdrom] = useState(data);
+  const storagesMap = createStoragesMap(storages, 'iso', nodeId);
+  const imagesMap = imagesByStorage(
+    storages,
+    nodeId,
+    cdrom?.storage?.value,
+    'iso'
+  );
+
+  const handleMediaChange = (_, e) => {
+    setCdrom({
+      ...cdrom,
+      cdrom: {
+        ...cdrom.cdrom,
+        value: e.target.value,
+      },
+    });
+  };
+
+  const handleChange = e => {
+    const { name, type, checked, value: targetValue } = e.target;
+    let value;
+    if (type === 'checkbox') {
+      value = checked ? '1' : '0';
+    } else {
+      value = targetValue;
+    }
+    const updatedKey = Object.keys(cdrom).find(key => cdrom[key].name === name);
+    const updatedData = {
+      ...cdrom,
+      [updatedKey]: { ...cdrom[updatedKey], value },
+    };
+    setCdrom(updatedData);
+  };
+
+  return (
+    <div style={{ position: 'relative' }}>
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+        }}
+      >
+        <Title headingLevel="h4">{__('CD-ROM')}</Title>
+        <button onClick={onRemove}>
+          <TimesIcon />
+        </button>
+      </div>
+      <Divider component="li" style={{ marginBottom: '1rem' }} />
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+        }}
+      >
+        <Title headingLevel="h5">{__('Media')}</Title>
+      </div>
+      <Divider component="li" style={{ marginBottom: '1rem' }} />
+      <div style={{ display: 'flex', gap: '1rem' }}>
+        <Radio
+          id="radio-none"
+          name={cdrom?.cdrom?.name}
+          label={__('None')}
+          value="none"
+          isChecked={cdrom?.cdrom?.value === 'none'}
+          onChange={handleMediaChange}
+        />
+        <Radio
+          id="radio-physical"
+          name={cdrom?.cdrom?.name}
+          label={__('Physical')}
+          value="physical"
+          isChecked={cdrom?.cdrom?.value === 'physical'}
+          onChange={handleMediaChange}
+        />
+        <Radio
+          id="radio-image"
+          name={cdrom?.cdrom?.name}
+          label={__('Image')}
+          value="image"
+          isChecked={cdrom?.cdrom?.value === 'image'}
+          onChange={handleMediaChange}
+        />
+      </div>
+      {cdrom?.cdrom?.value === 'image' && (
+        <PageSection padding={{ default: 'noPadding' }}>
+          <Title headingLevel="h5">{__('Image')}</Title>
+          <Divider component="li" style={{ marginBottom: '2rem' }} />
+          <InputField
+            label={__('Storage')}
+            name={cdrom?.storage?.name}
+            type="select"
+            value={
+              cdrom?.storage?.value ||
+              (storagesMap?.length > 0 ? storagesMap[0].value : '')
+            }
+            options={storagesMap}
+            onChange={handleChange}
+          />
+          <InputField
+            name={cdrom?.volid?.name}
+            label={__('Image ISO')}
+            type="select"
+            value={cdrom?.volid?.value}
+            options={imagesMap}
+            onChange={handleChange}
+          />
+          <input name={cdrom?.storageType?.name} type="hidden" value="cdrom" />
+        </PageSection>
+      )}
+    </div>
+  );
+};
+
+CDRom.propTypes = {
+  onRemove: PropTypes.func.isRequired,
+  data: PropTypes.shape({
+    cdrom: PropTypes.shape({
+      name: PropTypes.string.isRequired,
+      value: PropTypes.string.isRequired,
+    }).isRequired,
+    storage: PropTypes.shape({
+      name: PropTypes.string.isRequired,
+      value: PropTypes.string,
+    }).isRequired,
+    volid: PropTypes.shape({
+      name: PropTypes.string.isRequired,
+      value: PropTypes.string,
+    }).isRequired,
+    storageType: PropTypes.shape({
+      name: PropTypes.string.isRequired,
+    }).isRequired,
+  }).isRequired,
+  storages: PropTypes.array.isRequired,
+  nodeId: PropTypes.string.isRequired,
+};
+
+export default CDRom;