foreman_fog_proxmox 0.15.1 → 0.16.0

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;

data/webpack/components/ProxmoxServer/components/NetworkInterface.js

@@ -0,0 +1,150 @@
+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';
+import ProxmoxComputeSelectors from '../../ProxmoxComputeSelectors';
+
+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('');
+    }
+  };
+  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?.model?.name}
+        label={__('Card')}
+        type="select"
+        options={ProxmoxComputeSelectors.proxmoxNetworkcardsMap}
+        value={network?.model?.value}
+        onChange={handleChange}
+      />
+      <InputField
+        name={network?.bridge?.name}
+        label={__('Bridge')}
+        type="select"
+        options={bridgesMap}
+        value={network?.bridge?.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?.queues?.name}
+        label={__('Multiqueue')}
+        type="text"
+        value={network?.queues?.value}
+        onChange={handleChange}
+      />
+      <InputField
+        name={network?.firewall?.name}
+        label={__('Firewall')}
+        type="checkbox"
+        value={network?.firewall?.value}
+        checked={network?.firewall?.value === '1'}
+        onChange={handleChange}
+      />
+      <InputField
+        name={network?.linkDown?.name}
+        label={__('Disconnect')}
+        type="checkbox"
+        value={network?.linkDown?.value}
+        checked={network?.linkDown?.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/ProxmoxStoragesUtils.js

@@ -0,0 +1,50 @@
+import { sprintf, translate as __ } from 'foremanReact/common/I18n';
+
+const humanSize = size => {
+  const i = Math.floor(Math.log(size) / Math.log(1024));
+  return `${(size / 1000 ** i).toFixed(2) * 1} ${
+    ['B', 'kB', 'MB', 'GB', 'TB'][i]
+  }`;
+};
+
+export const createStoragesMap = (
+  storages,
+  filterContent = null,
+  nodeId = null
+) =>
+  storages
+    .filter(st => {
+      const contentMatch = filterContent
+        ? st.content.includes(filterContent)
+        : true;
+      const nodeMatch = nodeId ? st.node_id === nodeId : true;
+      return contentMatch && nodeMatch;
+    })
+    .map(st => ({
+      value: st.storage,
+      label: sprintf(
+        __('%(name)s (free: %(free)s, used: %(used)s, total: %(total)s)'),
+        {
+          name: st.storage,
+          free: humanSize(st.avail),
+          used: humanSize(st.used),
+          total: humanSize(st.total),
+        }
+      ),
+    }));
+
+export const imagesByStorage = (storages, nodeId, storageId, type = 'iso') => {
+  const storage = storages.find(
+    st => st.node_id === nodeId && st.storage === storageId
+  );
+
+  const filteredVolumes = storage.volumes
+    .filter(volume => volume.content.includes(type))
+    .sort((a, b) => a.volid.localeCompare(b.volid))
+    .map(volume => ({
+      value: volume.volid,
+      label: volume.volid,
+    }));
+
+  return filteredVolumes;
+};

data/webpack/components/ProxmoxVmType.js

@@ -0,0 +1,256 @@
+import React, { useState, useEffect } from 'react';
+import {
+  PageSection,
+  Divider,
+  Tabs,
+  Tab,
+  TabTitleText,
+} from '@patternfly/react-core';
+import { translate as __ } from 'foremanReact/common/I18n';
+import PropTypes from 'prop-types';
+import { networkSelected } from './ProxmoxVmUtils';
+import ProxmoxComputeSelectors from './ProxmoxComputeSelectors';
+import ProxmoxServerStorage from './ProxmoxServer/ProxmoxServerStorage';
+import ProxmoxServerOptions from './ProxmoxServer/ProxmoxServerOptions';
+import ProxmoxServerNetwork from './ProxmoxServer/ProxmoxServerNetwork';
+import ProxmoxServerHardware from './ProxmoxServer/ProxmoxServerHardware';
+import ProxmoxContainerNetwork from './ProxmoxContainer/ProxmoxContainerNetwork';
+import ProxmoxContainerOptions from './ProxmoxContainer/ProxmoxContainerOptions';
+import ProxmoxContainerStorage from './ProxmoxContainer/ProxmoxContainerStorage';
+import ProxmoxContainerHardware from './ProxmoxContainer/ProxmoxContainerHardware';
+import InputField from './common/FormInputs';
+import GeneralTabContent from './GeneralTabContent';
+
+const ProxmoxVmType = ({
+  vmAttrs,
+  nodes,
+  images,
+  pools,
+  fromProfile,
+  newVm,
+  storages,
+  bridges,
+  registerComp,
+  untemplatable,
+}) => {
+  const nodesMap = nodes
+    ? nodes.map(node => ({ value: node.node, label: node.node }))
+    : [];
+  const imagesMap = images
+    ? [
+        { value: '', label: '' },
+        ...images.map(image => ({
+          value: image.uuid,
+          label: image.name,
+        })),
+      ]
+    : [];
+  const poolsMap = pools
+    ? [
+        { value: '', label: '' },
+        ...pools.map(pool => ({
+          value: pool.poolid,
+          label: pool.poolid,
+        })),
+      ]
+    : [];
+  const [activeTabKey, setActiveTabKey] = useState(0);
+  const handleTabClick = (event, tabIndex) => {
+    setActiveTabKey(tabIndex);
+  };
+  const [general, setGeneral] = useState(vmAttrs);
+  const paramScope = fromProfile
+    ? 'compute_attribute[vm_attrs]'
+    : 'host[compute_attributes]';
+  const [filteredBridges, setFilteredBridges] = useState([]);
+  useEffect(() => {
+    if (!registerComp && !fromProfile) {
+      networkSelected(general?.type?.value);
+    }
+  }, [general?.type?.value]);
+
+  useEffect(() => {
+    if (!registerComp) {
+      const filtered = bridges.filter(
+        bridge => bridge.node_id === general?.nodeId?.value
+      );
+      setFilteredBridges(filtered);
+    }
+  }, [general?.nodeId?.value, bridges]);
+  if (registerComp) {
+    return null;
+  }
+  const componentMap = {
+    qemu: {
+      options: <ProxmoxServerOptions options={vmAttrs} />,
+      hardware: <ProxmoxServerHardware hardware={vmAttrs} />,
+      network: (
+        <ProxmoxServerNetwork
+          network={vmAttrs?.interfaces || {}}
+          bridges={filteredBridges}
+          paramScope={paramScope}
+        />
+      ),
+      storage: (
+        <ProxmoxServerStorage
+          storage={vmAttrs?.disks || {}}
+          storages={storages}
+          nodeId={general?.nodeId?.value}
+          paramScope={paramScope}
+        />
+      ),
+    },
+    lxc: {
+      options: (
+        <ProxmoxContainerOptions
+          options={vmAttrs}
+          storages={storages}
+          paramScope={paramScope}
+          nodeId={general?.nodeId?.value}
+        />
+      ),
+      hardware: <ProxmoxContainerHardware hardware={vmAttrs} />,
+      network: (
+        <ProxmoxContainerNetwork
+          network={vmAttrs?.interfaces || {}}
+          bridges={filteredBridges}
+          paramScope={paramScope}
+        />
+      ),
+      storage: (
+        <ProxmoxContainerStorage
+          storage={vmAttrs?.disks || {}}
+          storages={storages}
+          nodeId={general?.nodeId?.value}
+          paramScope={paramScope}
+        />
+      ),
+    },
+  };
+
+  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(general).find(
+      key => general[key].name === name
+    );
+
+    setGeneral(prevGeneral => ({
+      ...prevGeneral,
+      [updatedKey]: { ...prevGeneral[updatedKey], value },
+    }));
+  };
+
+  return (
+    <div>
+      <InputField
+        name={general?.type?.name}
+        label={__('Type')}
+        required
+        onChange={handleChange}
+        value={general?.type?.value}
+        options={ProxmoxComputeSelectors.proxmoxTypesMap}
+        disabled={!newVm}
+        type="select"
+      />
+      <Tabs
+        activeKey={activeTabKey}
+        onSelect={handleTabClick}
+        aria-label="Options tabs"
+        role="region"
+      >
+        <Tab
+          eventKey={0}
+          title={<TabTitleText>{__('General')}</TabTitleText>}
+          aria-label="Default content - general"
+        >
+          <GeneralTabContent
+            general={general}
+            fromProfile={fromProfile}
+            newVm={newVm}
+            nodesMap={nodesMap}
+            poolsMap={poolsMap}
+            imagesMap={imagesMap}
+            handleChange={handleChange}
+            untemplatable={untemplatable}
+          />
+        </Tab>
+        <Tab
+          eventKey={1}
+          title={<TabTitleText>{__('Advanced Options')}</TabTitleText>}
+          aria-label="advanced options"
+        >
+          <PageSection padding={{ default: 'noPadding' }}>
+            <Divider component="li" style={{ marginBottom: '2rem' }} />
+            {componentMap[general?.type?.value]?.options}
+          </PageSection>
+        </Tab>
+        <Tab
+          eventKey={2}
+          title={<TabTitleText>{__('Hardware')}</TabTitleText>}
+          aria-label="hardware"
+        >
+          <PageSection padding={{ default: 'noPadding' }}>
+            <Divider component="li" style={{ marginBottom: '2rem' }} />
+            {componentMap[general?.type?.value]?.hardware}
+          </PageSection>
+        </Tab>
+        {fromProfile && (
+          <Tab
+            eventKey={3}
+            title={<TabTitleText>{__('Network Interfaces')}</TabTitleText>}
+            aria-label="Network interface"
+          >
+            <PageSection padding={{ default: 'noPadding' }}>
+              <Divider component="li" style={{ marginBottom: '2rem' }} />
+              {componentMap[general?.type?.value]?.network}
+            </PageSection>
+          </Tab>
+        )}
+        <Tab
+          eventKey={4}
+          title={<TabTitleText>{__('Storage')}</TabTitleText>}
+          aria-label="storage"
+        >
+          <PageSection padding={{ default: 'noPadding' }}>
+            <Divider component="li" style={{ marginBottom: '2rem' }} />
+            {componentMap[general?.type?.value]?.storage}
+          </PageSection>
+        </Tab>
+      </Tabs>
+    </div>
+  );
+};
+
+ProxmoxVmType.propTypes = {
+  vmAttrs: PropTypes.object,
+  nodes: PropTypes.array,
+  images: PropTypes.array,
+  pools: PropTypes.array,
+  fromProfile: PropTypes.bool,
+  newVm: PropTypes.bool,
+  storages: PropTypes.array,
+  bridges: PropTypes.array,
+  registerComp: PropTypes.bool,
+  untemplatable: PropTypes.bool,
+};
+
+ProxmoxVmType.defaultProps = {
+  vmAttrs: {},
+  nodes: [],
+  images: [],
+  pools: [],
+  fromProfile: false,
+  newVm: false,
+  storages: [],
+  bridges: [],
+  registerComp: false,
+  untemplatable: false,
+};
+
+export default ProxmoxVmType;