Move from jquery to react js

theforeman · Jul 22, 2024 · 43b7bd0 · 43b7bd0
1 parent 3a6dbd6
commit 43b7bd0
Show file tree

Hide file tree

Showing 20 changed files with 358 additions and 216 deletions.
diff --git a/app/helpers/proxmox_vm_attrs_helper.rb b/app/helpers/proxmox_vm_attrs_helper.rb
@@ -31,11 +31,12 @@ def object_to_attributes_hash(vms, from_profile)
     keys = [:vmid, :node_id, :type, :pool]
     main = vms.attributes.select { |key, _value| keys.include? key }
     vms.config.all_attributes.each do |key, value|
-      vm_h.merge!({ key => { :name => "#{param_scope}[config_attributes][#{key}]", :value => value } }) unless keys.include? key
+      camel_key = key.to_s.include?('_') ? snake_to_camel(key.to_s).to_sym : key
+      vm_h[camel_key] = { :name => "#{param_scope}[config_attributes][#{key}]", :value => value } unless keys.include? key
     end
     main.each do |key, value|
       camel_key = key.to_s.include?('_') ? snake_to_camel(key.to_s).to_sym : key
-      vm_h.merge!({ camel_key => { :name => "#{param_scope}[#{key}]", :value => value } })
+      vm_h[camel_key] = { :name => "#{param_scope}[#{key}]", :value => value } if keys.include? key
     end
 
     vm_h.merge!(additional_attrs(vms, param_scope))

diff --git a/app/views/compute_resources_vms/form/proxmox/_add_react_component_to_host_form.html.erb b/app/views/compute_resources_vms/form/proxmox/_add_react_component_to_host_form.html.erb
@@ -2,4 +2,4 @@
   <%= webpacked_plugins_js_for :foreman_fog_proxmox %>
   <%= javascript_include_tag 'foreman_fog_proxmox/proxmox_vm', "data-turbolinks-track" => true %>
 <% end %>
-<%= react_component('ProxmoxVmType') %>
+<%= react_component('ProxmoxVmType', { registerComp: true }) %>
diff --git a/app/views/compute_resources_vms/form/proxmox/_base.html.erb b/app/views/compute_resources_vms/form/proxmox/_base.html.erb
@@ -34,4 +34,21 @@ along with ForemanFogProxmox. If not, see <http://www.gnu.org/licenses/>. %>
   <%= webpacked_plugins_js_for :foreman_fog_proxmox %>
 <%= javascript_include_tag 'foreman_fog_proxmox/proxmox_vm', "data-turbolinks-track" => true %>
 <% end %>
-<%= react_component('ProxmoxVmType',  { vmAttrs: object_to_attributes_hash(f.object, from_profile), nodes: nodes, images: images.as_json, pools: compute_resource.pools, storages: compute_resource.storages, fromProfile: from_profile, newVm: new_vm, bridges: compute_resource.bridges, hasCloudinit: f.object.cloud_init? }) %>
+<script>
+  document.addEventListener('DOMContentLoaded', function() {
+    // Define the global function to update the div
+    window.updateTypeDiv = function(type) {
+      document.getElementById('type-container').innerText = 'Type: ' + type;
+    };
+
+    // Optionally set initial value from localStorage if needed
+    var type = localStorage.getItem('type');
+    if (type) {
+      document.getElementById('type-container').innerText = 'Type: ' + type;
+    }
+  });
+</script>
+<div id="type-container">
+  <!-- The type value will be injected here -->
+</div>
+<%= react_component('ProxmoxVmType',  { vmAttrs: object_to_attributes_hash(f.object, from_profile), nodes: nodes.as_json, images: images.as_json, pools: compute_resource.pools.as_json, storages: compute_resource.storages.as_json, fromProfile: from_profile, newVm: new_vm, bridges: compute_resource.bridges.as_json }) %>
diff --git a/package.json b/package.json
@@ -28,7 +28,6 @@
   },
   "devDependencies": {
     "@babel/core": "^7.7.0",
-    "@sheerun/mutationobserver-shim": "^0.3.3",
     "@testing-library/react": "^10.4.9",
     "@theforeman/builder": ">=12.0.1",
     "@theforeman/eslint-plugin-foreman": ">=12.0.1",

diff --git a/webpack/components/ProxmoxContainer/MountPoint.js b/webpack/components/ProxmoxContainer/MountPoint.js
@@ -28,50 +28,50 @@ const MountPoint = ({ id, data, storagesMap }) => {
     <div>
       <Divider component="li" style={{ marginBottom: '2rem' }} />
       <InputField
-        name={mp.storage.name}
+        name={mp?.storage?.name}
         label={__('Storage')}
         type="select"
         options={storagesMap}
-        value={mp.storage.value}
+        value={mp?.storage?.value}
         onChange={handleChange}
       />
       <InputField
-        name={mp.mp.name}
+        name={mp?.mp?.name}
         label={__('Path')}
         required
-        value={mp.mp.value}
+        value={mp?.mp?.value}
         onChange={handleChange}
         error={error}
       />
       <InputField
-        name={mp.size.name}
+        name={mp?.size?.name}
         label={__('Size')}
         type="number"
-        value={mp.size.value}
+        value={mp?.size?.value}
         onChange={handleChange}
       />
       <input
-        name={mp.device.name}
+        name={mp?.device?.name}
         type="hidden"
-        value={mp.device.value}
+        value={mp?.device?.value}
         onChange={handleChange}
       />
       <input
-        name={mp.id.name}
+        name={mp?.id?.name}
         type="hidden"
-        value={mp.id.value}
+        value={mp?.id?.value}
         onChange={handleChange}
       />
       <input
-        name={mp.volid.name}
+        name={mp?.volid?.name}
         type="hidden"
-        value={mp.volid.value}
+        value={mp?.volid?.value}
         onChange={handleChange}
       />
       <input
-        name={mp.storageType?.name}
+        name={mp?.storageType?.name}
         type="hidden"
-        value={mp.storageType?.value}
+        value={mp?.storageType?.value}
       />
     </div>
   );

diff --git a/webpack/components/ProxmoxContainer/ProxmoxContainerHardware.js b/webpack/components/ProxmoxContainer/ProxmoxContainerHardware.js
@@ -20,53 +20,53 @@ const ProxmoxContainerHardware = ({ hardware }) => {
   return (
     <div>
       <PageSection padding={{ default: 'noPadding' }}>
-        <Title headingLevel="h3">CPU</Title>
+        <Title headingLevel="h3">{__('CPU')}</Title>
         <Divider component="li" style={{ marginBottom: '2rem' }} />
         <InputField
-          name={hw.arch.name}
+          name={hw?.arch?.name}
           label={__('Architecture')}
           type="select"
           options={ProxmoxComputeSelectors.proxmoxArchsMap}
-          value={hw.arch.value}
+          value={hw?.arch?.value}
           onChange={handleChange}
         />
         <InputField
-          name={hw.cores.name}
+          name={hw?.cores?.name}
           label={__('Cores')}
           type="number"
-          value={hw.cores.value}
+          value={hw?.cores?.value}
           onChange={handleChange}
         />
         <InputField
-          name={hw.cpulimit.name}
+          name={hw?.cpulimit?.name}
           label={__('CPU limit')}
           type="number"
-          value={hw.cpulimit.value}
+          value={hw?.cpulimit?.value}
           onChange={handleChange}
         />
         <InputField
-          name={hw.cpuunits.name}
+          name={hw?.cpuunits?.name}
           label={__('CPU units')}
           type="number"
-          value={hw.cpuunits.value}
+          value={hw?.cpuunits?.value}
           onChange={handleChange}
         />
       </PageSection>
       <PageSection padding={{ default: 'noPadding' }}>
-        <Title headingLevel="h3">Memory</Title>
+        <Title headingLevel="h3">{__('Memory')}</Title>
         <Divider component="li" style={{ marginBottom: '2rem' }} />
         <InputField
-          name={hw.memory.name}
+          name={hw?.memory?.name}
           label={__('Memory (MB)')}
           type="text"
-          value={hw.memory.value}
+          value={hw?.memory?.value}
           onChange={handleChange}
         />
         <InputField
-          name={hw.swap.name}
+          name={hw?.swap?.name}
           label={__('Swap (MB)')}
           type="text"
-          value={hw.swap.value}
+          value={hw?.swap?.value}
           onChange={handleChange}
         />
       </PageSection>

diff --git a/webpack/components/ProxmoxContainer/ProxmoxContainerNetwork.js b/webpack/components/ProxmoxContainer/ProxmoxContainerNetwork.js
@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import { Title, PageSection, Button } from '@patternfly/react-core';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
-import { translate as __ } from 'foremanReact/common/I18n';
+import { sprintf, translate as __ } from 'foremanReact/common/I18n';
 import PropTypes from 'prop-types';
 import NetworkInterface from './components/NetworkInterface';
 
@@ -11,7 +11,7 @@ const ProxmoxContainerNetwork = ({ network, bridges, paramScope }) => {
   const [availableIds, setAvailableIds] = useState([]);
   const [usedIds, setUsedIds] = useState(new Set());
   useEffect(() => {
-    if (network && network.length > 0) {
+    if (network?.length > 0) {
       const existingIds = new Set();
       network.forEach(net => {
         if (!net.value.name.value) return;
@@ -21,7 +21,7 @@ const ProxmoxContainerNetwork = ({ network, bridges, paramScope }) => {
       });
       setUsedIds(existingIds);
     }
-  }, [network, addInterface]);
+  }, [network]);
 
   const getLowestAvailableId = useCallback(() => {
     let id = 0;
@@ -142,7 +142,9 @@ const ProxmoxContainerNetwork = ({ network, bridges, paramScope }) => {
                 alignItems: 'center',
               }}
             >
-              <Title headingLevel="h4"> Nic {nic.id} </Title>
+              <Title headingLevel="h4">
+                {sprintf(__('Nic %(nicId)s'), { nicId: nic.id })}
+              </Title>
               <button onClick={() => removeInterface(nic.id)} type="button">
                 <TimesIcon />
               </button>

diff --git a/webpack/components/ProxmoxContainer/ProxmoxContainerOptions.js b/webpack/components/ProxmoxContainer/ProxmoxContainerOptions.js
@@ -52,37 +52,37 @@ const ProxmoxContainerOptions = ({ options, storages, nodeId }) => {
         onChange={handleChange}
       />
       <InputField
-        name={opts.onboot.name}
+        name={opts?.onboot?.name}
         label={__('Start at boot')}
         type="checkbox"
-        value={opts.onboot.value}
-        checked={opts.onboot.value === '1'}
+        value={opts?.onboot?.value}
+        checked={opts?.onboot?.value === '1'}
         onChange={handleChange}
       />
       <InputField
-        name={opts.ostype.name}
+        name={opts?.ostype?.name}
         label={__('OS Type')}
         type="select"
         options={ProxmoxComputeSelectors.proxmoxOperatingSystemsMap}
-        value={opts.ostype.value}
+        value={opts?.ostype?.value}
         onChange={handleChange}
       />
       <InputField
-        name={opts.hostname.name}
+        name={opts?.hostname?.name}
         label={__('Hostname')}
-        value={opts.hostname.value}
+        value={opts?.hostname?.value}
         onChange={handleChange}
       />
       <InputField
-        name={opts.nameserver.name}
+        name={opts?.nameserver?.name}
         label={__('DNS server')}
-        value={opts.nameserver.value}
+        value={opts?.nameserver?.value}
         onChange={handleChange}
       />
       <InputField
-        name={opts.searchdomain.name}
+        name={opts?.searchdomain?.name}
         label={__('Search Domain')}
-        value={opts.searchdomain.value}
+        value={opts?.searchdomain?.value}
         onChange={handleChange}
       />
     </div>

diff --git a/webpack/components/ProxmoxContainer/ProxmoxContainerStorage.js b/webpack/components/ProxmoxContainer/ProxmoxContainerStorage.js
@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import { Button, Title, Divider, PageSection } from '@patternfly/react-core';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
-import { translate as __ } from 'foremanReact/common/I18n';
+import { sprintf, translate as __ } from 'foremanReact/common/I18n';
 import PropTypes from 'prop-types';
 import { createStoragesMap } from '../ProxmoxStoragesUtils';
 import InputField from '../common/FormInputs';
@@ -42,7 +42,7 @@ const ProxmoxContainerStorage = ({ storage, storages, nodeId, paramScope }) => {
         }
       });
     }
-  }, [storage, addMountPoint]);
+  }, [storage]);
 
   const handleChange = e => {
     const { name, value } = e.target;
@@ -112,7 +112,7 @@ const ProxmoxContainerStorage = ({ storage, storages, nodeId, paramScope }) => {
   return (
     <div>
       <PageSection padding={{ default: 'noPadding' }}>
-        <Title headingLevel="h3">Rootfs</Title>
+        <Title headingLevel="h3">{__('Rootfs')}</Title>
         <Divider component="li" style={{ marginBottom: '2rem' }} />
         <InputField
           name={rootfs?.storage?.name}
@@ -157,7 +157,9 @@ const ProxmoxContainerStorage = ({ storage, storages, nodeId, paramScope }) => {
                 alignItems: 'center',
               }}
             >
-              <Title headingLevel="h4"> Mount Point {mountPoint.id} </Title>
+              <Title headingLevel="h4">
+                {sprintf(__('Mount Point %(mp)s'), { mp: mountPoint.id })}
+              </Title>
               <button onClick={() => removeMountPoint(mountPoint.id)}>
                 <TimesIcon />
               </button>