foreman_fog_proxmox 0.15.0 → 0.16.0

data/webpack/components/ProxmoxContainer/components/NetworkInterface.js

@@ -0,0 +1,193 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { Divider } from '@patternfly/react-core';
+import { translate as __ } from 'foremanReact/common/I18n';
+import InputField from '../../common/FormInputs';
+
+const NetworkInterface = ({
+  id,
+  networks,
+  bridges,
+  data,
+  updateNetworkData,
+  existingInterfaces,
+}) => {
+  const [network, setNetwork] = useState(data);
+  const [error, setError] = useState('');
+  useEffect(() => {
+    const currentNetData = JSON.stringify(network);
+    const parentNetData = JSON.stringify(data);
+
+    if (currentNetData !== parentNetData) {
+      updateNetworkData(id, network);
+    }
+  }, [network, id, data, updateNetworkData]);
+  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(network).find(
+      key => network[key].name === name
+    );
+    const updatedData = {
+      ...network,
+      [updatedKey]: { ...network[updatedKey], value },
+    };
+    setNetwork(updatedData);
+
+    if (updatedKey === 'id') {
+      const idValue = value;
+      if (
+        Object.values(existingInterfaces).some(
+          net =>
+            net.data.id.value === idValue &&
+            net.data.id.value !== network.id.value
+        )
+      ) {
+        setError(__('Error: Duplicate ID found.'));
+        return;
+      }
+      setError('');
+    }
+    if (updatedKey === 'name') {
+      const idValue = value;
+      if (
+        Object.values(existingInterfaces).some(
+          net =>
+            net.data.id.value === idValue &&
+            net.data.id.value !== network.id.value
+        )
+      ) {
+        setError(__('Error: Duplicate Name found.'));
+      } else {
+        setError('');
+      }
+    }
+  };
+  const bridgesMap = bridges.map(bridge => ({
+    value: bridge.iface,
+    label: bridge.iface,
+  }));
+
+  return (
+    <div style={{ position: 'relative' }}>
+      <Divider component="li" style={{ marginBottom: '2rem' }} />
+      <InputField
+        name={network?.id?.name}
+        label={__('Identifier')}
+        info={__('net[n] with n integer >= 0, e.g. net0')}
+        type="text"
+        value={network?.id?.value}
+        onChange={handleChange}
+        error={error}
+      />
+      <InputField
+        name={network?.name?.name}
+        label={__('Name')}
+        info={__('eth[n] with n integer >= 0, e.g. eth0')}
+        type="text"
+        value={network?.name?.value}
+        onChange={handleChange}
+        error={error}
+      />
+      <InputField
+        name={network?.bridge?.name}
+        label={__('Bridge')}
+        type="select"
+        options={bridgesMap}
+        value={network?.bridge?.value}
+        onChange={handleChange}
+      />
+      <InputField
+        name={network?.dhcp?.name}
+        label={__('DHCP IPv4')}
+        type="checkbox"
+        value={network?.dhcp?.value}
+        checked={network?.dhcp?.value === '1'}
+        onChange={handleChange}
+      />
+      <InputField
+        name={network?.cidr?.name}
+        label={__('CIDR IPv4')}
+        info={__('integer within [0..32]')}
+        type="text"
+        value={network?.cidr?.value}
+        onChange={handleChange}
+      />
+      <InputField
+        name={network?.gw?.name}
+        label={__('Gateway IPv4')}
+        type="text"
+        value={network?.gw?.value}
+        onChange={handleChange}
+      />
+      <InputField
+        name={network?.dhcp6?.name}
+        label={__('DHCP IPv6')}
+        type="checkbox"
+        value={network?.dhcp6?.value}
+        checked={network?.dhcp6?.value === '1'}
+        onChange={handleChange}
+      />
+      <InputField
+        name={network?.cidr6?.name}
+        label={__('CIDR IPv6')}
+        info={__('integer within [0..128]')}
+        type="text"
+        value={network?.cidr6?.value}
+        onChange={handleChange}
+      />
+      <InputField
+        name={network?.gw6?.name}
+        label={__('Gateway IPv6')}
+        type="text"
+        value={network?.gw6?.value}
+        onChange={handleChange}
+      />
+      <InputField
+        name={network?.tag?.name}
+        label={__('VLAN Tag')}
+        type="text"
+        value={network?.tag?.value}
+        onChange={handleChange}
+      />
+      <InputField
+        name={network?.rate?.name}
+        label={__('Rate limit')}
+        type="text"
+        value={network?.rate?.value}
+        onChange={handleChange}
+      />
+      <InputField
+        name={network?.firewall?.name}
+        label={__('Firewall')}
+        type="checkbox"
+        value={network?.firewall?.value}
+        checked={network?.firewall?.value === '1'}
+        onChange={handleChange}
+      />
+    </div>
+  );
+};
+
+NetworkInterface.propTypes = {
+  id: PropTypes.number.isRequired,
+  networks: PropTypes.array,
+  bridges: PropTypes.array,
+  data: PropTypes.object,
+  updateNetworkData: PropTypes.func,
+  existingInterfaces: PropTypes.array,
+};
+
+NetworkInterface.defaultProps = {
+  networks: [],
+  bridges: [],
+  data: {},
+  updateNetworkData: Function.prototype,
+  existingInterfaces: [],
+};
+export default NetworkInterface;

data/webpack/components/ProxmoxServer/ProxmoxServerHardware.js

@@ -0,0 +1,204 @@
+import React, { useState } from 'react';
+import { Button, Title, Divider, PageSection } from '@patternfly/react-core';
+import { translate as __ } from 'foremanReact/common/I18n';
+import PropTypes from 'prop-types';
+import InputField from '../common/FormInputs';
+import ProxmoxComputeSelectors from '../ProxmoxComputeSelectors';
+import CPUFlagsModal from './components/CPUFlagsModal';
+
+const cpuFlagNames = [
+  'md_clear',
+  'pcid',
+  'spec_ctrl',
+  'ssbd',
+  'ibpb',
+  'virt_ssbd',
+  'amd_ssbd',
+  'amd_no_ssb',
+  'pdpe1gb',
+  'hv_tlbflush',
+  'hv_evmcs',
+  'aes',
+];
+
+const cpuFlagDescriptions = {
+  md_clear: __(
+    'Required to let the guest OS know if MDS is mitigated correctly'
+  ),
+  pcid: __(
+    'Meltdown fix cost reduction on Westmere, Sandy-, and IvyBridge Intel CPUs'
+  ),
+  spec_ctrl: __('Allows improved Spectre mitigation with Intel CPUs'),
+  ssbd: __('Protection for "Speculative Store Bypass" for Intel models'),
+  ibpb: __('Allows improved Spectre mitigation with AMD CPUs'),
+  virt_ssbd: __(
+    'Basis for "Speculative Store Bypass" protection for AMD models'
+  ),
+  amd_ssbd: __(
+    'Improves Spectre mitigation performance with AMD CPUs, best used with "virt-ssbd"'
+  ),
+  amd_no_ssb: __(
+    'Notifies guest OS that host is not vulnerable for Spectre on AMD CPUs'
+  ),
+  pdpe1gb: __('Allow guest OS to use 1GB size pages, if host HW supports it'),
+  hv_tlbflush: __(
+    'Improve performance in overcommitted Windows guests. May lead to guest bluescreens on old CPUs.'
+  ),
+  hv_evmcs: __(
+    'Improve performance for nested virtualization. Only supported on Intel CPUs.'
+  ),
+  aes: __('Activate AES instruction set for HW instruction'),
+};
+
+const filterAndAddDescriptions = hardware =>
+  Object.keys(hardware)
+    .filter(key => cpuFlagNames.includes(key))
+    .reduce((acc, key) => {
+      acc[key] = {
+        ...hardware[key],
+        description: cpuFlagDescriptions[key] || '',
+        label: key,
+      };
+      return acc;
+    }, {});
+
+const ProxmoxServerHardware = ({ hardware }) => {
+  const [hw, setHw] = useState(hardware);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  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(hw).find(key => hw[key].name === name);
+
+    setHw(prevHw => ({
+      ...prevHw,
+      [updatedKey]: { ...prevHw[updatedKey], value },
+    }));
+  };
+
+  const handleModalToggle = _event => {
+    setIsModalOpen(prevIsModalOpen => !prevIsModalOpen);
+  };
+
+  const cpuFlags = filterAndAddDescriptions(hw);
+
+  return (
+    <div>
+      <PageSection padding={{ default: 'noPadding' }}>
+        <Title headingLevel="h3">{__('CPU')}</Title>
+        <Divider component="li" style={{ marginBottom: '2rem' }} />
+        <InputField
+          name={hw?.cpuType?.name}
+          label={__('Type')}
+          type="select"
+          value={hw?.cpuType?.value}
+          options={ProxmoxComputeSelectors.proxmoxCpusMap}
+          onChange={handleChange}
+        />
+        <InputField
+          name={hw?.sockets?.name}
+          label={__('Sockets')}
+          type="number"
+          value={hw?.sockets?.value}
+          onChange={handleChange}
+        />
+        <InputField
+          name={hw?.cores?.name}
+          label={__('Cores')}
+          type="number"
+          value={hw?.cores?.value}
+          onChange={handleChange}
+        />
+        <InputField
+          name={hw?.vcpus?.name}
+          label={__('VCPUs')}
+          type="number"
+          value={hw?.vcpus?.value}
+          onChange={handleChange}
+        />
+        <InputField
+          name={hw?.cpulimit?.name}
+          label={__('CPU limit')}
+          type="number"
+          value={hw?.cpulimit?.value}
+          onChange={handleChange}
+        />
+        <InputField
+          name={hw?.cpuunits?.name}
+          label={__('CPU units')}
+          type="number"
+          value={hw?.cpuunits?.value}
+          onChange={handleChange}
+        />
+        <InputField
+          name={hw?.numa?.name}
+          label={__('Enable NUMA')}
+          type="checkbox"
+          value={hw?.numa?.value}
+          checked={hw?.numa?.value === '1'}
+          onChange={handleChange}
+        />
+        <div style={{ marginLeft: '5%', display: 'inline-block' }}>
+          <Button variant="link" onClick={handleModalToggle}>
+            {__('Extra CPU Flags')}
+          </Button>
+        </div>
+        <CPUFlagsModal
+          isOpen={isModalOpen}
+          onClose={handleModalToggle}
+          flags={cpuFlags}
+          handleChange={handleChange}
+        />
+        {Object.keys(cpuFlags).map(key => (
+          <input
+            key={hw[key].name}
+            name={hw[key].name}
+            type="hidden"
+            value={hw[key].value}
+          />
+        ))}
+      </PageSection>
+      <PageSection padding={{ default: 'noPadding' }}>
+        <Title headingLevel="h3">{__('Memory')}</Title>
+        <Divider component="li" style={{ marginBottom: '2rem' }} />
+        <InputField
+          name={hw?.memory?.name}
+          label={__('Memory (MB)')}
+          type="text"
+          value={hw?.memory?.value}
+          onChange={handleChange}
+        />
+        <InputField
+          name={hw?.balloon?.name}
+          label={__('Minimum Memory (MB)')}
+          type="text"
+          value={hw?.balloon?.value}
+          onChange={handleChange}
+        />
+        <InputField
+          name={hw?.shares?.name}
+          label={__('Shares (MB)')}
+          type="text"
+          value={hw?.shares?.value}
+          onChange={handleChange}
+        />
+      </PageSection>
+    </div>
+  );
+};
+
+ProxmoxServerHardware.propTypes = {
+  hardware: PropTypes.object,
+};
+
+ProxmoxServerHardware.defaultProps = {
+  hardware: {},
+};
+
+export default ProxmoxServerHardware;

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;