foreman_fog_proxmox 0.15.0 → 0.16.0

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;

data/webpack/components/ProxmoxVmUtils.js

@@ -0,0 +1,62 @@
+import $ from 'jquery';
+
+function networkSelected(value) {
+  const fieldSets = [];
+  fieldSets.push({
+    id: 'network',
+    toggle: true,
+    newVm: true,
+    selected: value,
+  });
+  fieldSets.forEach(toggleFieldsets);
+  return false;
+}
+
+function enableFieldSet(fieldSetId, fieldSet) {
+  if (fieldSet.toggle && fieldSet.newVm) {
+    getFieldSetById(fieldSetId, fieldSet).show();
+  }
+  getFieldSetById(fieldSetId, fieldSet).removeAttr('disabled');
+  getInputHiddenById(fieldSetId).removeAttr('disabled');
+}
+
+function disableFieldSet(fieldSetId, fieldSet) {
+  if (fieldSet.toggle && fieldSet.newVm) {
+    getFieldSetById(fieldSetId, fieldSet).hide();
+  }
+  getFieldSetById(fieldSetId, fieldSet).attr('disabled', 'disabled');
+  getInputHiddenById(fieldSetId).attr('disabled', 'disabled');
+}
+
+function toggleFieldSet(fieldSetId, fieldSet, type1, type2) {
+  type1 === type2
+    ? enableFieldSet(fieldSetId, fieldSet)
+    : disableFieldSet(fieldSetId, fieldSet);
+}
+
+function getInputHiddenById(volumeId) {
+  return $(`div[id^='${volumeId}_volumes'] + input:hidden`);
+}
+
+function getFieldSetById(fieldSetId, fieldSet) {
+  return $(`fieldset[id^='${fieldSetId}_${fieldSet.id}']`);
+}
+
+function getFieldSets(type) {
+  return type === 'qemu' ? ['server'] : ['container'];
+}
+
+function toggleFieldsets(fieldSet) {
+  const removableInputHidden = $(
+    `div.removable-item[style='display: none;'] + input:hidden`
+  );
+  removableInputHidden.attr('disabled', 'disabled');
+  ['qemu', 'lxc'].forEach(type => {
+    getFieldSets(type).forEach(fieldSetId => {
+      toggleFieldSet(fieldSetId, fieldSet, fieldSet.selected, type);
+    });
+  });
+}
+
+window.networkSelected = networkSelected;
+export { networkSelected };

data/webpack/components/common/FormInputs.js

@@ -0,0 +1,143 @@
+import React, { Fragment } from 'react';
+import { FieldLevelHelp } from 'patternfly-react';
+import PropTypes from 'prop-types';
+import CommonForm from 'foremanReact/components/common/forms/CommonForm';
+
+const InputField = ({
+  name,
+  label,
+  info,
+  value,
+  onChange,
+  required,
+  type,
+  disabled,
+  options,
+  checked,
+  error,
+}) => {
+  const renderOptions = opts =>
+    opts.map(option => <option value={option.value}>{option.label}</option>);
+
+  let renderComponent;
+
+  switch (type) {
+    case 'textarea':
+      renderComponent = (
+        <textarea
+          name={name}
+          className="form-control"
+          rows="3"
+          cols="50"
+          value={value}
+          onChange={onChange}
+        />
+      );
+      break;
+    case 'select':
+      renderComponent = (
+        <select
+          disabled={disabled}
+          name={name}
+          className="form-control"
+          value={value}
+          onChange={onChange}
+        >
+          {renderOptions(options)}
+        </select>
+      );
+      break;
+    case 'checkbox':
+      renderComponent = (
+        <input
+          name={name}
+          type={type}
+          className=""
+          value={value}
+          checked={checked}
+          onChange={onChange}
+          disabled={disabled}
+        />
+      );
+      break;
+    default:
+      renderComponent = (
+        <input
+          name={name}
+          type={type}
+          className="form-control"
+          value={value}
+          onChange={onChange}
+          disabled={disabled}
+        />
+      );
+      break;
+  }
+
+  return (
+    <CommonForm
+      label={label}
+      required={required}
+      className="common-textInput"
+      tooltipHelp={
+        info && (
+          <FieldLevelHelp
+            buttonClass="field-help"
+            content={<Fragment>{info}</Fragment>}
+          />
+        )
+      }
+    >
+      {renderComponent}
+      {error && (
+        <div style={{ color: 'red', marginTop: '0.5rem' }}>{error}</div>
+      )}
+    </CommonForm>
+  );
+};
+
+InputField.propTypes = {
+  name: PropTypes.string,
+  label: PropTypes.string,
+  info: PropTypes.string,
+  value: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+    PropTypes.bool,
+  ]),
+  onChange: PropTypes.func.isRequired,
+  required: PropTypes.bool,
+  type: PropTypes.oneOf([
+    'text',
+    'number',
+    'password',
+    'textarea',
+    'select',
+    'checkbox',
+  ]),
+  disabled: PropTypes.bool,
+  checked: PropTypes.bool,
+  options: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.string.isRequired,
+      value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+        .isRequired,
+    })
+  ),
+  error: PropTypes.string,
+};
+
+InputField.defaultProps = {
+  name: '',
+  label: '',
+  info: undefined,
+  value: '',
+  required: false,
+  type: 'text',
+  disabled: false,
+  checked: false,
+  options: [],
+  error: '',
+};
+
+export default InputField;

data/webpack/global_index.js

@@ -0,0 +1,15 @@
+// Placeholder to initialize routes (compare foreman_ansible)
+
+/*
+import { addGlobalFill } from 'foremanReact/components/common/Fill/GlobalFill';
+import { registerReducer } from 'foremanReact/common/MountingService';
+import { registerRoutes } from 'foremanReact/routes/RoutingService';
+import Routes from './src/Router/routes'
+
+register client routes
+registerRoutes('PluginTemplate', Routes);
+
+register fills for extending foreman core
+http://foreman.surge.sh/?path=/docs/introduction-slot-and-fill--page
+addGlobalFill('<slotId>', '<fillId>', <div key='plugin-template-example' />, 300);
+*/

data/webpack/index.js

@@ -0,0 +1,7 @@
+import componentRegistry from 'foremanReact/components/componentRegistry';
+import ProxmoxVmType from './components/ProxmoxVmType';
+
+componentRegistry.register({
+  name: 'ProxmoxVmType',
+  type: ProxmoxVmType,
+});