foreman_fog_proxmox 0.15.0 → 0.16.0

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;

data/webpack/components/ProxmoxServer/components/CPUFlagsModal.js

@@ -0,0 +1,88 @@
+import React from 'react';
+import { Modal, Button } from '@patternfly/react-core';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+import PropTypes from 'prop-types';
+import ProxmoxComputeSelectors from '../../ProxmoxComputeSelectors';
+
+const CPUFlagsModal = ({ isOpen, onClose, flags, handleChange }) => {
+  const resetFlags = () => {
+    Object.keys(flags).forEach(key => {
+      handleChange({
+        target: {
+          name: flags[key].name,
+          value: '0',
+        },
+      });
+    });
+  };
+
+  return (
+    <div>
+      <Modal
+        bodyAriaLabel="Scrollable modal content"
+        width="60%"
+        tabIndex={0}
+        title="CPU Flags"
+        isOpen={isOpen}
+        onClose={onClose}
+        actions={[
+          <Button key="confirm" variant="primary" onClick={onClose}>
+            {__('Confirm')}
+          </Button>,
+          <Button key="reset" variant="secondary" onClick={resetFlags}>
+            {__('Reset')}
+          </Button>,
+        ]}
+      >
+        <Table aria-label="Simple table" variant="compact">
+          <Thead>
+            <Tr>
+              <Th>Name</Th>
+              <Th />
+              <Th>Description</Th>
+            </Tr>
+          </Thead>
+          <Tbody>
+            {Object.keys(flags).map(key => {
+              const item = flags[key];
+              return (
+                <Tr key={item.label}>
+                  <Td>{item.label}</Td>
+                  <Td>
+                    <select
+                      name={item.name}
+                      value={item.value}
+                      onChange={handleChange}
+                    >
+                      {ProxmoxComputeSelectors.proxmoxCpuFlagsMap.map(flag => (
+                        <option value={flag.value}>{flag.label}</option>
+                      ))}
+                    </select>
+                  </Td>
+                  <Td>{item.description}</Td>
+                </Tr>
+              );
+            })}
+          </Tbody>
+        </Table>
+      </Modal>
+    </div>
+  );
+};
+
+CPUFlagsModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  flags: PropTypes.objectOf(
+    PropTypes.shape({
+      name: PropTypes.string.isRequired,
+      label: PropTypes.string.isRequired,
+      value: PropTypes.string.isRequired,
+      description: PropTypes.string.isRequired,
+    })
+  ).isRequired,
+  handleChange: PropTypes.func.isRequired,
+};
+
+export default CPUFlagsModal;

data/webpack/components/ProxmoxServer/components/HardDisk.js

@@ -0,0 +1,143 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { Divider } from '@patternfly/react-core';
+import { sprintf, translate as __ } from 'foremanReact/common/I18n';
+import InputField from '../../common/FormInputs';
+import ProxmoxComputeSelectors from '../../ProxmoxComputeSelectors';
+import { createStoragesMap } from '../../ProxmoxStoragesUtils';
+
+const HardDisk = ({
+  id,
+  data,
+  storages,
+  disks,
+  updateHardDiskData,
+  createUniqueDevice,
+  nodeId,
+}) => {
+  const [hdd, setHdd] = useState(data);
+  const [error, setError] = useState(null);
+  const storagesMap = createStoragesMap(storages, null, nodeId);
+  useEffect(() => {
+    const currentHddData = JSON.stringify(hdd);
+    const parentHddData = JSON.stringify(data);
+
+    if (currentHddData !== parentHddData) {
+      updateHardDiskData(id, hdd);
+    }
+  }, [hdd, id, data, updateHardDiskData]);
+  const handleChange = e => {
+    const { name, value } = e.target;
+    const updatedKey = Object.keys(hdd).find(key => hdd[key].name === name);
+
+    if (updatedKey === 'controller') {
+      const updatedDeviceInfo = createUniqueDevice('hard_disk', value);
+      if (updatedDeviceInfo) {
+        setHdd({
+          ...hdd,
+          controller: { ...hdd.controller, value },
+          device: { ...hdd.device, value: updatedDeviceInfo.device },
+          id: { ...hdd.id, value: updatedDeviceInfo.id },
+        });
+        setError(null);
+      } else {
+        setError(
+          sprintf(
+            __(
+              'Reached maximum number of devices for controller %(value)s. Please select another controller.'
+            ),
+            { value }
+          )
+        );
+        setHdd({
+          ...hdd,
+          controller: { ...hdd.controller, value },
+          device: { ...hdd.device, value: '' },
+          id: { ...hdd.id, value: '' },
+        });
+      }
+    } else {
+      const updatedData = {
+        ...hdd,
+        [updatedKey]: { ...hdd[updatedKey], value },
+      };
+      setHdd(updatedData);
+    }
+  };
+  return (
+    <div>
+      <Divider component="li" style={{ marginBottom: '2rem' }} />
+      <input
+        name={hdd?.storageType?.name}
+        type="hidden"
+        value={hdd?.storageType?.value}
+        onChange={handleChange}
+      />
+      <input
+        name={hdd?.device?.name}
+        type="hidden"
+        value={hdd?.device?.value}
+        onChange={handleChange}
+      />
+      <input
+        name={hdd?.id?.name}
+        type="hidden"
+        value={hdd?.id?.value}
+        onChange={handleChange}
+      />
+      <InputField
+        name={hdd?.storage?.name}
+        label={__('Storage')}
+        type="select"
+        value={hdd?.storage?.value}
+        options={storagesMap}
+        onChange={handleChange}
+      />
+      <InputField
+        name={hdd?.controller?.name}
+        label={__('Controller')}
+        type="select"
+        value={hdd?.controller?.value}
+        options={ProxmoxComputeSelectors.proxmoxControllersHDDMap}
+        onChange={handleChange}
+        error={error}
+      />
+      <InputField
+        name={hdd?.cache?.name}
+        label={__('Cache')}
+        type="select"
+        value={hdd?.cache?.value}
+        options={ProxmoxComputeSelectors.proxmoxCachesMap}
+        onChange={handleChange}
+      />
+      <InputField
+        name={hdd?.size?.name}
+        label={__('Size')}
+        type="number"
+        value={hdd?.size?.value}
+        onChange={handleChange}
+      />
+    </div>
+  );
+};
+
+HardDisk.propTypes = {
+  id: PropTypes.number.isRequired,
+  data: PropTypes.object,
+  storages: PropTypes.array,
+  disks: PropTypes.array,
+  updateHardDiskData: PropTypes.func,
+  createUniqueDevice: PropTypes.func,
+  nodeId: PropTypes.string,
+};
+
+HardDisk.defaultProps = {
+  data: {},
+  storages: [],
+  disks: [],
+  nodeId: '',
+  updateHardDiskData: Function.prototype,
+  createUniqueDevice: Function.prototype,
+};
+
+export default HardDisk;