Remove reducer

theforeman · May 7, 2024 · 3ed7dc1 · 3ed7dc1
1 parent 9a7be43
commit 3ed7dc1
Show file tree

Hide file tree

Showing 7 changed files with 2,130 additions and 2,007 deletions.
diff --git a/app/views/compute_resources_vms/form/proxmox/_base.html.erb b/app/views/compute_resources_vms/form/proxmox/_base.html.erb
@@ -26,4 +26,4 @@ along with ForemanFogProxmox. If not, see <http://www.gnu.org/licenses/>. %>
 <%= javascript_include_tag 'foreman_fog_proxmox/proxmox_vm', "data-turbolinks-track" => true %>
 <%= f.object %>
 <% logger.debug("************** the base obj is #{f.object.config} #{object_to_attributes_hash(f.object)}") %>
-<%= react_component('ProxmoxVmType',  { vm_attributes: object_to_attributes_hash(f.object), nodes: nodes, images: images, pools: compute_resource.pools, from_profile: true, new_vm: new_vm, vmType: f.object.type, paramsScope: "#{f.object_name}"}) %>
+<%= react_component('ProxmoxVmType',  { vm_attributes: object_to_attributes_hash(f.object), nodes: nodes, images: images, pools: compute_resource.pools, from_profile: true, new_vm: new_vm, paramsScope: "#{f.object_name}"}) %>
diff --git a/package-lock.json b/package-lock.json
diff --git a/webpack/components/ProxmoxServer/ProxmoxServerOptions.js b/webpack/components/ProxmoxServer/ProxmoxServerOptions.js
@@ -16,10 +16,10 @@ import './customStyles.css';
 import {Tabs, Tab, TabTitleText, Tooltip} from '@patternfly/react-core';
 const cacheOptions = { key: 'Cached', value: 'No Cached' };
 
-const ProxmoxServerOptions = () => {
-  const [hdStorage, setHdStorage] = useState('');
-  const handleHdStorage = (hdStorage, event) => {
-    setHdStorage(hdStorage);
+const ProxmoxServerOptions = ({options, onOptionsChange}) => {
+  console.log('Props in ChildComponent:', {options, onOptionsChange});
+  const handleChange = (e) => {
+    onOptionsChange({...options, [e.target.name]:e.target.value});
   };
 
 
@@ -46,55 +46,63 @@ const ProxmoxServerOptions = () => {
   return (
     <div>
             <InputField
+	      name='boot'
               label="Boot device order"
-              value={hdStorage}
-              onChange={e => setHdStorage(e.target.value)}
+              value={options.boot}
+              onChange={handleChange}
             />
             <InputField
+	      name='onboot'
               label="Start at boot"
               type="checkbox"
-              value={hdStorage}
-              onChange={e => setHdStorage(e.target.value)}
+              value={options.onboot}
+              onChange={handleChange}
             />
             <InputField
+	      name='agent'
               label="Qemu Agent"
               type="checkbox"
-              value={hdStorage}
-              onChange={e => setHdStorage(e.target.value)}
+              value={options.agent}
+              onChange={handleChange}
             />
             <InputField
+	      name='kvm'
               label="KVM"
               type="checkbox"
-              value={hdStorage}
-              onChange={e => setHdStorage(e.target.value)}
+              value={options.kvm}
+              onChange={handleChange}
             />
             <InputField
+	      name='vga'
               label="VGA"
               type="select"
-              value={hdStorage}
+              value={options.vga}
               options={ProxmoxComputeSelectors.proxmoxVgasMap}
-              onChange={e => setHdStorage(e.target.value)}
+              onChange={handleChange}
             />
             <InputField
+	      name='scsihw'
               label="SCSI Controller"
               type="select"
-              value={hdStorage}
+              value={options.scsihw}
               options={ProxmoxComputeSelectors.proxmoxScsiControllersMap}
-              onChange={e => setHdStorage(e.target.value)}
+              onChange={handleChange}
             />
             <InputField
+	      name='bios'
               label="BIOS"
               type="select"
               options={ProxmoxComputeSelectors.proxmoxBiosMap}
-              value={hdStorage}
-              onChange={e => setHdStorage(e.target.value)}
+              value={options.bios}
+              onChange={handleChange}
             />
             <InputField
+	      name='ostype'
               label="OS Type"
               type="select"
               options={ProxmoxComputeSelectors.proxmoxOperatingSystemsMap}
-              value={hdStorage}
-              onChange={e => setHdStorage(e.target.value)}
+              value={options.ostype}
+              onChange={handleChange}
             />
     </div>
   );

diff --git a/webpack/components/ProxmoxVmType.js b/webpack/components/ProxmoxVmType.js
@@ -21,42 +21,13 @@ import ProxmoxContainerOptions from './ProxmoxContainer';
 import ProxmoxContainerStorage from './ProxmoxContainer';
 import InputField from './common/FormInputs';
 import { connect } from 'react-redux';
-import {
-  setVmId,
-  setNode,
-  setImage,
-  setPool,
-  setVmType,
-  setDescription,
-} from './ProxmoxVmTypeActions';
-
-import {
-  selectVmId,
-  selectNode,
-  selectImage,
-  selectPool,
-  selectVmType,
-  selectDescription,
-} from './ProxmoxVmTypeSelectors';
 
 const ProxmoxVmType = ({ 
   vm_attributes,
   paramsScope,
-  vmType,
-  setVmType,
-  vmId,
-  node,
-  image,
-  pool,
-  description,
   nodes,
   images,
   pools,
-  setVmId,
-  setNode,
-  setImage,
-  setPool,
-  setDescription,
  from_profile, new_vm }) => {
   const nodesMap = nodes.map(node => ({value: node.node, label: node.node}));
   const imagesMap = images.map(image => ({value: image, label: image}));
@@ -65,15 +36,48 @@ const ProxmoxVmType = ({
   const handleTabClick = (event, tabIndex) => {
     setActiveTabKey(tabIndex);
   };
+  const [vmAttributes, setVmAttributes] = useState(vm_attributes);
+  const [general, setGeneral] = useState(vm_attributes.general);
+  const image = '';
 
-  console.log("*******************8 url",`${window.location.origin.toString()}`);
+  const handleOptionsChange = (newOptionsValues) => {
+    console.log("****************8 vm attrs", vmAttributes);
+    setVmAttributes({
+      ...vmAttributes,
+      options: newOptionsValues,
+    });
+  };
+
+  const componentMap = {
+    'qemu': {
+      options: <ProxmoxServerOptions options={vmAttributes.options} onOptionsChange={handleOptionsChange}/>,
+      hardware: <ProxmoxServerHardware />,
+      network: <ProxmoxServerNetwork />,
+      storage: <ProxmoxServerStorage />,
+    },
+    'lxc': {
+      options: <ProxmoxContainerOptions />,
+      network: <ProxmoxContainerNetwork />,
+      storage: <ProxmoxContainerStorage />
+    },
+  };
+
+  const handleChange = (e) => { 
+    setGeneral({
+      ...general,
+      [e.target.name]: e.target.value,
+    });
+  };
+
+  console.log("*************** vm_attributes", vm_attributes);
   return (
     <div>
       <InputField
+	name='type'
         label="Type"
         required
-        onChange={e => setVmType(e.target.value)}
-        value={vmType}
+        onChange={e => handlechange(e)}
+        value={general.type}
         options={ProxmoxComputeSelectors.proxmoxTypesMap}
         type="select"
       />
@@ -82,73 +86,75 @@ const ProxmoxVmType = ({
       <PageSection padding={{ default: 'noPadding' }}>
         <Divider component="li" style={{ marginBottom: '2rem' }} />
         <InputField
+	  name='vmid'
           label="VM ID"
           required
-          value={vmId}
-          onChange={e => setVmId(e.target.value)}
+          value={general.vmid}
+          onChange={handleChange}
         />
         <InputField
+	  name='node'
           label="Node"
           required
           type="select"
-          value={node}
+          value={general.node_id}
           options={nodesMap}
-          onChange={e => setNode(e.target.value)}
+          onChange={handleChange}
         />
         <InputField
+	  name='image'
           label="Image"
           type="select"
           value={image}
           options={imagesMap}
-          onChange={e => setImage(e.target.value)}
+          onChange={handleChange}
         />
         <InputField
+	  name='pool'
           label="Pool"
           type="select"
-          value={pool}
+          value={general.pool}
           options={poolsMap}
-          onChange={e => setPool(e.target.value)}
+          onChange={handleChange}
         />
 	<InputField
+	  name='description'
               label="Description"
               type="textarea"
-              value={description}
-              onChange={e => setDescription(e.target.value)}
+              value={general.description}
+              onChange={handleChange}
             />
 
       </PageSection>
       </Tab>
       <Tab eventKey={1} title={<TabTitleText>Advanced Options</TabTitleText>} aria-label="advanced options">
         <PageSection padding={{ default: 'noPadding' }}>
         <Divider component="li" style={{ marginBottom: '2rem' }} />
-	  {(vmType === 'qemu') ? (<ProxmoxServerOptions />) : null}
-	  {(vmType === 'lxc') ? (<ProxmoxContainerOptions />) : null }
+	  {componentMap[general.type]?.options}
 	</PageSection>
       </Tab>
       <Tab eventKey={2} title={<TabTitleText>Hardware</TabTitleText>} aria-label="hardware">
         <PageSection padding={{ default: 'noPadding' }}>
         <Divider component="li" style={{ marginBottom: '2rem' }} />
-          {(vmType === 'qemu') ? (<ProxmoxServerHardware />) : null}
+	  {componentMap[general.type]?.hardware}
         </PageSection>
       </Tab>
       <Tab eventKey={3} title={<TabTitleText>Network Interfaces</TabTitleText>} aria-label="Network interface">
         <PageSection padding={{ default: 'noPadding' }}>
         <Divider component="li" style={{ marginBottom: '2rem' }} />
-	  {(vmType === 'qemu') ? (<ProxmoxServerNetwork />) : null }
-	  {(vmType === 'lxc') ? (<ProxmoxContainerNetwork />) : null }
+          {componentMap[general.type]?.network}
         </PageSection>
       </Tab>
       <Tab eventKey={4} title={<TabTitleText>Storage</TabTitleText>} aria-label="storage">
         <PageSection padding={{ default: 'noPadding' }}>
         <Divider component="li" style={{ marginBottom: '2rem' }} />
-	  {(vmType === 'qemu') ? (<ProxmoxServerStorage />) : null }
-	  {(vmType === 'lxc') ? (<ProxmoxContainerStorage />) : null }
+          {componentMap[general.type]?.storage}
         </PageSection>
       </Tab>
       </Tabs>
       <div className="compute-attribute-body">
 	  <input
-	  value={{'type': vmType}}
+	  value={{'type': general.type}}
             id="controller_hidden"
             name={paramsScope}
             type="hidden"
@@ -158,23 +164,5 @@ const ProxmoxVmType = ({
   );
 };
 
-const mapStateToProps = (state) => ({
-  vmType: selectVmType(state),
-  vmId: selectVmId(state),
-  node: selectNode(state),
-  image: selectImage(state),
-  pool: selectPool(state),
-  description: selectDescription(state),
-  state: state // Pass the entire state as a prop
-});
-
-const mapDispatchToProps = {
-  setVmType,
-  setVmId,
-  setNode,
-  setImage,
-  setPool,
-  setDescription,
-};
 
-export default connect(mapStateToProps, mapDispatchToProps)(ProxmoxVmType);
+export default ProxmoxVmType;
diff --git a/webpack/components/common/FormInputs.js b/webpack/components/common/FormInputs.js
@@ -14,6 +14,7 @@ import PropTypes from 'prop-types';
 import CommonForm from 'foremanReact/components/common/forms/CommonForm';
 
 const InputField = ({
+  name,
   label,
   value,
   onChange,
@@ -29,6 +30,7 @@ const InputField = ({
     <CommonForm label={label} required={required} className="common-textInput">
       {type === 'textarea' ? (
         <textarea
+	  name={name}
           className="form-control"
           rows="3"
           cols="50"
@@ -38,6 +40,7 @@ const InputField = ({
       ) : type === 'select' ? (
         <select
           disabled={disabled}
+	  name={name}
           className="form-control"
           value={value}
           onChange={onChange}
@@ -46,6 +49,7 @@ const InputField = ({
         </select>
       ) : (
         <input
+	  name={name}
           type={type}
           className={type === 'checkbox' ? '' : 'form-control'}
           value={value}
@@ -58,12 +62,13 @@ const InputField = ({
 };
 
 InputField.propTypes = {
+  name: PropTypes.string,
   label: PropTypes.string,
   value: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.number,
     PropTypes.bool,
-  ]).isRequired,
+  ]),
   onChange: PropTypes.func.isRequired,
   required: PropTypes.bool,
   type: PropTypes.oneOf(['text', 'number', 'textarea', 'select', 'checkbox']),
@@ -84,6 +89,7 @@ InputField.defaultProps = {
   type: 'text',
   disabled: false,
   options: [],
+  name: '',
 };
 
 export default InputField;
diff --git a/webpack/index.js b/webpack/index.js
@@ -1,10 +1,7 @@
 import componentRegistry from 'foremanReact/components/componentRegistry';
 import Demo from './components/Demo';
 import ProxmoxVmType from './components/ProxmoxVmType';
-import injectReducer from 'foremanReact/redux/reducers/registerReducer';
-import reducer from './reducer';
 
-injectReducer('foremanFogProxmox', reducer);
 
 componentRegistry.register({
   name: 'Demo',

diff --git a/webpack/reducer.js b/webpack/reducer.js