foreman_fog_proxmox 0.15.1 → 0.16.0

data/webpack/components/ProxmoxContainer/ProxmoxContainerOptions.js

@@ -0,0 +1,104 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { createStoragesMap, imagesByStorage } from '../ProxmoxStoragesUtils';
+import ProxmoxComputeSelectors from '../ProxmoxComputeSelectors';
+import InputField from '../common/FormInputs';
+
+const ProxmoxContainerOptions = ({ options, storages, nodeId }) => {
+  const [opts, setOpts] = useState(options);
+  const storagesMap = createStoragesMap(storages, 'vztmpl', nodeId);
+  const volumesMap = imagesByStorage(storages, nodeId, 'local', 'vztmpl');
+  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?.ostemplateStorage?.name}
+        label={__('Template Storage')}
+        value={opts?.ostemplateStorage?.value}
+        options={storagesMap}
+        type="select"
+        onChange={handleChange}
+      />
+      <InputField
+        name={opts?.ostemplateFile?.name}
+        label={__('OS Template')}
+        required
+        options={volumesMap}
+        value={opts?.ostemplateFile?.value}
+        type="select"
+        onChange={handleChange}
+      />
+      <InputField
+        name={opts?.password?.name}
+        label={__('Root Password')}
+        required
+        type="password"
+        value={opts?.password?.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?.ostype?.name}
+        label={__('OS Type')}
+        type="select"
+        options={ProxmoxComputeSelectors.proxmoxOperatingSystemsMap}
+        value={opts?.ostype?.value}
+        onChange={handleChange}
+      />
+      <InputField
+        name={opts?.hostname?.name}
+        label={__('Hostname')}
+        value={opts?.hostname?.value}
+        onChange={handleChange}
+      />
+      <InputField
+        name={opts?.nameserver?.name}
+        label={__('DNS server')}
+        value={opts?.nameserver?.value}
+        onChange={handleChange}
+      />
+      <InputField
+        name={opts?.searchdomain?.name}
+        label={__('Search Domain')}
+        value={opts?.searchdomain?.value}
+        onChange={handleChange}
+      />
+    </div>
+  );
+};
+
+ProxmoxContainerOptions.propTypes = {
+  options: PropTypes.object,
+  storages: PropTypes.array,
+  nodeId: PropTypes.string,
+};
+
+ProxmoxContainerOptions.defaultProps = {
+  options: {},
+  storages: [],
+  nodeId: '',
+};
+
+export default ProxmoxContainerOptions;

data/webpack/components/ProxmoxContainer/ProxmoxContainerStorage.js

@@ -0,0 +1,194 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { Button, Title, Divider, PageSection } from '@patternfly/react-core';
+import { TimesIcon } from '@patternfly/react-icons';
+import { sprintf, translate as __ } from 'foremanReact/common/I18n';
+import PropTypes from 'prop-types';
+import { createStoragesMap } from '../ProxmoxStoragesUtils';
+import InputField from '../common/FormInputs';
+import MountPoint from './MountPoint';
+
+const ProxmoxContainerStorage = ({ storage, storages, nodeId, paramScope }) => {
+  const initData = {
+    id: {
+      name: `${paramScope}[volumes_attributes][0][id]`,
+      value: 'rootfs',
+    },
+    device: {
+      name: `${paramScope}[volumes_attributes][0][device]`,
+      value: '8',
+    },
+    storage: {
+      name: `${paramScope}[volumes_attributes][0][storage]`,
+      value: '',
+    },
+    size: {
+      name: `${paramScope}[volumes_attributes][0][size]`,
+      value: 8,
+    },
+    volid: {
+      name: `${paramScope}[volumes_attributes][0][volid]`,
+      value: null,
+    },
+  };
+  const [rootfs, setRootfs] = useState(initData);
+  useEffect(() => {
+    if (storage && storage.length > 0) {
+      storage.forEach(disk => {
+        if (disk.name === 'rootfs') {
+          setRootfs(disk.value);
+        }
+        if (disk.name === 'mount_point') {
+          addMountPoint(null, disk.value);
+        }
+      });
+    }
+  }, [storage]);
+
+  const handleChange = e => {
+    const { name, value } = e.target;
+    const updatedKey = Object.keys(rootfs).find(
+      key => rootfs[key].name === name
+    );
+    const updatedData = {
+      ...rootfs,
+      [updatedKey]: { ...rootfs[updatedKey], value },
+    };
+    setRootfs(updatedData);
+  };
+  const [mountPoints, setMountPoints] = useState([]);
+  const [nextId, setNextId] = useState(0);
+  const storagesMap = createStoragesMap(storages, null, nodeId);
+  const addMountPoint = useCallback(
+    (event, initialData = null) => {
+      if (event) event.preventDefault();
+      const initMP = initialData || {
+        id: {
+          name: `${paramScope}[volumes_attributes][${nextId}][id]`,
+          value: `mp${nextId}`,
+        },
+        device: {
+          name: `${paramScope}[volumes_attributes][${nextId}][device]`,
+          value: `${nextId}`,
+        },
+        storage: {
+          name: `${paramScope}[volumes_attributes][${nextId}][storage]`,
+          value: '',
+        },
+        size: {
+          name: `${paramScope}[volumes_attributes][${nextId}][size]`,
+          value: 8,
+        },
+        mp: {
+          name: `${paramScope}[volumes_attributes][${nextId}][mp]`,
+          value: '',
+        },
+        volid: {
+          name: `${paramScope}[volumes_attributes][${nextId}][volid]`,
+          value: null,
+        },
+      };
+
+      setNextId(prevNextId => {
+        const newNextId = prevNextId + 1;
+        const newMountPoint = {
+          id: newNextId,
+          data: initMP,
+          storagesMap,
+        };
+        setMountPoints(prevMountPoints => [...prevMountPoints, newMountPoint]);
+        return newNextId;
+      });
+    },
+    [nextId, paramScope, setMountPoints, setNextId, storagesMap]
+  );
+
+  const removeMountPoint = idToRemove => {
+    const newMountPoints = mountPoints.filter(
+      mountPoint => mountPoint.props.id !== idToRemove
+    );
+    setMountPoints(newMountPoints);
+  };
+
+  return (
+    <div>
+      <PageSection padding={{ default: 'noPadding' }}>
+        <Title headingLevel="h3">{__('Rootfs')}</Title>
+        <Divider component="li" style={{ marginBottom: '2rem' }} />
+        <InputField
+          name={rootfs?.storage?.name}
+          label="Storage"
+          type="select"
+          value={rootfs?.storage?.value}
+          options={storagesMap}
+          onChange={handleChange}
+        />
+        <InputField
+          name={rootfs?.size?.name}
+          label={__('Size')}
+          type="number"
+          value={rootfs?.size?.value}
+          onChange={handleChange}
+        />
+        <input
+          name={rootfs?.id?.name}
+          type="hidden"
+          value={rootfs?.id?.value || 'rootfs'}
+          onChange={handleChange}
+        />
+        <input
+          name={rootfs?.volid?.name}
+          type="hidden"
+          value={rootfs?.volid?.value}
+        />
+      </PageSection>
+      <PageSection padding={{ default: 'noPadding' }}>
+        <Title headingLevel="h3">Storage</Title>
+        <Divider component="li" style={{ marginBottom: '2rem' }} />
+        <Button onClick={addMountPoint} variant="secondary">
+          {__('Add MountPoint')}
+        </Button>
+        {mountPoints.map(mountPoint => (
+          <div key={mountPoint.id} style={{ position: 'relative' }}>
+            <div
+              style={{
+                marginTop: '10px',
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+              }}
+            >
+              <Title headingLevel="h4">
+                {sprintf(__('Mount Point %(mp)s'), { mp: mountPoint.id })}
+              </Title>
+              <button onClick={() => removeMountPoint(mountPoint.id)}>
+                <TimesIcon />
+              </button>
+            </div>
+            <MountPoint
+              key={mountPoint.id}
+              id={mountPoint.id}
+              data={mountPoint.data}
+              storagesMap={mountPoint.storagesMap}
+            />
+          </div>
+        ))}
+      </PageSection>
+    </div>
+  );
+};
+
+ProxmoxContainerStorage.propTypes = {
+  storage: PropTypes.object,
+  storages: PropTypes.array,
+  nodeId: PropTypes.string,
+  paramScope: PropTypes.string,
+};
+
+ProxmoxContainerStorage.defaultProps = {
+  storage: {},
+  storages: [],
+  nodeId: '',
+  paramScope: '',
+};
+
+export default ProxmoxContainerStorage;

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;