foreman_fog_proxmox 0.15.0 → 0.16.0

data/webpack/components/ProxmoxContainer/MountPoint.js

@@ -0,0 +1,91 @@
+import React, { useState } from 'react';
+import { Divider } from '@patternfly/react-core';
+import { translate as __ } from 'foremanReact/common/I18n';
+import PropTypes from 'prop-types';
+import InputField from '../common/FormInputs';
+
+const MountPoint = ({ id, data, storagesMap }) => {
+  const [mp, setMp] = useState(data);
+  const [error, setError] = useState('');
+
+  const handleChange = e => {
+    const { name, value } = e.target;
+    const updatedKey = Object.keys(mp).find(key => mp[key].name === name);
+    const updatedData = {
+      ...mp,
+      [updatedKey]: { ...mp[updatedKey], value },
+    };
+    setMp(updatedData);
+
+    if (updatedKey === 'mp' && value.trim() === '') {
+      setError(__('Path cannot be empty'));
+    } else {
+      setError('');
+    }
+  };
+
+  return (
+    <div>
+      <Divider component="li" style={{ marginBottom: '2rem' }} />
+      <InputField
+        name={mp?.storage?.name}
+        label={__('Storage')}
+        type="select"
+        options={storagesMap}
+        value={mp?.storage?.value}
+        onChange={handleChange}
+      />
+      <InputField
+        name={mp?.mp?.name}
+        label={__('Path')}
+        required
+        value={mp?.mp?.value}
+        onChange={handleChange}
+        error={error}
+      />
+      <InputField
+        name={mp?.size?.name}
+        label={__('Size')}
+        type="number"
+        value={mp?.size?.value}
+        onChange={handleChange}
+      />
+      <input
+        name={mp?.device?.name}
+        type="hidden"
+        value={mp?.device?.value}
+        onChange={handleChange}
+      />
+      <input
+        name={mp?.id?.name}
+        type="hidden"
+        value={mp?.id?.value}
+        onChange={handleChange}
+      />
+      <input
+        name={mp?.volid?.name}
+        type="hidden"
+        value={mp?.volid?.value}
+        onChange={handleChange}
+      />
+      <input
+        name={mp?.storageType?.name}
+        type="hidden"
+        value={mp?.storageType?.value}
+      />
+    </div>
+  );
+};
+
+MountPoint.propTypes = {
+  id: PropTypes.any.isRequired,
+  data: PropTypes.object,
+  storagesMap: PropTypes.array,
+};
+
+MountPoint.defaultProps = {
+  data: {},
+  storagesMap: [],
+};
+
+export default MountPoint;

data/webpack/components/ProxmoxContainer/ProxmoxContainerHardware.js

@@ -0,0 +1,85 @@
+import React, { useState } from 'react';
+import { PageSection, Title, Divider } 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';
+
+const ProxmoxContainerHardware = ({ hardware }) => {
+  const [hw, setHw] = useState(hardware);
+  const handleChange = e => {
+    const { name, value } = e.target;
+    const updatedKey = Object.keys(hw).find(key => hw[key].name === name);
+
+    setHw(prevHw => ({
+      ...prevHw,
+      [updatedKey]: { ...prevHw[updatedKey], value },
+    }));
+  };
+
+  return (
+    <div>
+      <PageSection padding={{ default: 'noPadding' }}>
+        <Title headingLevel="h3">{__('CPU')}</Title>
+        <Divider component="li" style={{ marginBottom: '2rem' }} />
+        <InputField
+          name={hw?.arch?.name}
+          label={__('Architecture')}
+          type="select"
+          options={ProxmoxComputeSelectors.proxmoxArchsMap}
+          value={hw?.arch?.value}
+          onChange={handleChange}
+        />
+        <InputField
+          name={hw?.cores?.name}
+          label={__('Cores')}
+          type="number"
+          value={hw?.cores?.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}
+        />
+      </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?.swap?.name}
+          label={__('Swap (MB)')}
+          type="text"
+          value={hw?.swap?.value}
+          onChange={handleChange}
+        />
+      </PageSection>
+    </div>
+  );
+};
+
+ProxmoxContainerHardware.propTypes = {
+  hardware: PropTypes.object,
+};
+
+ProxmoxContainerHardware.defaultProps = {
+  hardware: {},
+};
+
+export default ProxmoxContainerHardware;

data/webpack/components/ProxmoxContainer/ProxmoxContainerNetwork.js

@@ -0,0 +1,179 @@
+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 ProxmoxContainerNetwork = ({ 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.name.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}`,
+        },
+        name: {
+          name: `${paramScope}[interfaces_attributes][${nextId}][name]`,
+          value: `eth${netId}`,
+        },
+        bridge: {
+          name: `${paramScope}[interfaces_attributes][${nextId}][bridge]`,
+          value: bridges?.[0]?.iface || '',
+        },
+        dhcp: {
+          name: `${paramScope}[interfaces_attributes][${nextId}][dhcp]`,
+          value: '0',
+        },
+        cidr: {
+          name: `${paramScope}[interfaces_attributes][${nextId}][cidr]`,
+          value: '0',
+        },
+        gw: {
+          name: `${paramScope}[interfaces_attributes][${nextId}][gw]`,
+          value: '',
+        },
+        dhcp6: {
+          name: `${paramScope}[interfaces_attributes][${nextId}][dhcp6]`,
+          value: '0',
+        },
+        cidr6: {
+          name: `${paramScope}[interfaces_attributes][${nextId}][cidr6]`,
+          value: '0',
+        },
+        gw6: {
+          name: `${paramScope}[interfaces_attributes][${nextId}][gw6]`,
+          value: '',
+        },
+        tag: {
+          name: `${paramScope}[interfaces_attributes][${nextId}][tag]`,
+          value: '',
+        },
+        rate: {
+          name: `${paramScope}[interfaces_attributes][${nextId}][rate]`,
+          value: '',
+        },
+        firewall: {
+          name: `${paramScope}[interfaces_attributes][${nextId}][firewall]`,
+          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,
+          bridges,
+          data: initData,
+          networks: network,
+        };
+
+        setInterfaces(prevInterfaces => [...prevInterfaces, newInterface]);
+        return prevId;
+      });
+    },
+    [availableIds, bridges, network, nextId, paramScope, 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={nic.bridges}
+              networks={nic.networks}
+              updateNetworkData={updateNetworkData}
+              existingInterfaces={interfaces}
+            />
+          </div>
+        ))}
+      </PageSection>
+    </div>
+  );
+};
+
+ProxmoxContainerNetwork.propTypes = {
+  network: PropTypes.object,
+  bridges: PropTypes.array,
+  paramScope: PropTypes.string,
+};
+
+ProxmoxContainerNetwork.defaultProps = {
+  network: {},
+  bridges: [],
+  paramScope: '',
+};
+
+export default ProxmoxContainerNetwork;

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;