Move from jquery to react js

.eslintignore

@@ -0,0 +1,3 @@
+# Ignore all files except webpack directory
+**/*.js
+!webpack/**/*.js

.eslintrc

@@ -0,0 +1,4 @@
+{
+  "plugins": ["@theforeman/foreman"],
+  "extends": ["plugin:@theforeman/foreman/core", "plugin:@theforeman/foreman/plugins"]
+}

.gitignore

@@ -16,3 +16,4 @@ public/
 TAGS
 *.lock
 coverage/
+node_modules/

app/helpers/proxmox_vm_attrs_helper.rb

@@ -0,0 +1,99 @@
+# frozen_string_literal: true
+
+# Copyright 2018 Tristan Robert
+
+# This file is part of ForemanFogProxmox.
+
+# ForemanFogProxmox is free software: you can redistribute it and/or modify
+# it under the terms of the GNU General Public License as published by
+# the Free Software Foundation, either version 3 of the License, or
+# (at your option) any later version.
+
+# ForemanFogProxmox is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+# GNU General Public License for more details.
+
+# You should have received a copy of the GNU General Public License
+# along with ForemanFogProxmox. If not, see <http://www.gnu.org/licenses/>.
+
+require 'fog/proxmox/helpers/disk_helper'
+require 'fog/proxmox/helpers/nic_helper'
+require 'fog/proxmox/helpers/cpu_helper'
+require 'foreman_fog_proxmox/value'
+require 'foreman_fog_proxmox/hash_collection'
+
+# Convert a foreman form server hash into a fog-proxmox server attributes hash
+module ProxmoxVmAttrsHelper
+  def object_to_attributes_hash(vms, from_profile)
+    param_scope = from_profile ? "compute_attribute[vm_attrs]" : "host[compute_attributes]"
+    vm_h = ActiveSupport::HashWithIndifferentAccess.new
+    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
+    end
+    main.each do |key, value|
+      vm_h.merge!({ key => { :name => "#{param_scope}[#{key}]", :value => value } })
+    end
+    vm_h[:interfaces] = network_attrs(param_scope, vm.interfaces)
+    vm_h[:pool] = { :name => "#{param_scope}[pool]", :value => vms.pool }
+    vm_h[:cpu_type] = { :name => "#{param_scope}[config_attributes][cpu_type]", :value => vms.config.cpu_type }
+    vm_h[:disks] = volumes_attrs(param_scope, vms.volumes)
+    vm_h.merge(cpu_flags_attrs(param_scope, vms.config))
+  end
+
+  def cpu_flags_attrs(param_scope, config)
+    flag_attrs = ActiveSupport::HashWithIndifferentAccess.new
+    Fog::Proxmox::CpuHelper.flags.each do |key, _val|
+      flag_attrs.merge!({ key => { :name => "#{param_scope}[config_attributes][#{key}]", :value => config.public_send(key) } })
+    end
+    flag_attrs
+  end
+
+  def volumes_attrs(param_scope, volumes)
+    vol_attrs = []
+    volumes.each_with_index do |vol, id|
+      keys = []
+      type = ""
+      if vol.rootfs?
+        keys = ['volid', 'storage', 'size']
+        type = 'rootfs'
+      elsif vol.hard_disk?
+        keys = ['id', 'volid', 'storage_type', 'storage', 'controller', 'device', 'cache', 'size']
+        type = 'hard_disk'
+      elsif  vol.cdrom?
+        keys = ['id', 'storage_type', 'cdrom', 'storage', 'volid']
+        type = 'cdrom'
+      elsif vol.cloud_init?
+        keys = ['id', 'volid', 'storage_type', 'storage', 'controller', 'device']
+        type = 'cloud_init'
+      elsif vol.mount_point?
+        keys = ['id', 'volid', 'storage', 'device', 'mp', 'size']
+        type = 'mount_point'
+      end
+      vol_attrs << { :name => type, :value => vol_keys(param_scope, keys, vol, id) }
+    end
+    vol_attrs
+  end
+
+  def vol_keys(param_scope, keys, vol, id)
+    attrs = ActiveSupport::HashWithIndifferentAccess.new
+    keys.each do |key|
+      attrs[key] = { :name => "#{param_scope}[volumes_attributes][#{id}][#{key}]", :value => vol.public_send(key) }
+    end
+    attrs
+  end
+
+  def network_attrs(param_scope, interfaces)
+    networks_attrs = []
+    interfaces.each_with_index do |interface, id|
+      attrs = ActiveSupport::HashWithIndifferentAccess.new
+      interface.all_attributes.each do |key, value|
+        attrs[key] = { :name => "#{param_scope}[interfaces_attributes][#{id}][#{key}]", :value => value }
+      end
+      networks_attrs << { :name => 'interface', :value => attrs }
+    end
+    networks_attrs
+  end
+end

app/overrides/compute_resources_vms/form/add_from_profile_to_compute_attributes_form.rb

@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 # Copyright 2018 Tristan Robert
 
 # This file is part of ForemanFogProxmox.
@@ -15,6 +17,12 @@
 # You should have received a copy of the GNU General Public License
 # along with ForemanFogProxmox. If not, see <http://www.gnu.org/licenses/>.
 
+Deface::Override.new(
+  virtual_path: 'compute_attributes/_compute_form',
+  name: 'remove_networks_and_volumes_partial',
+  remove: "erb[loud]:contains('compute_resources_vms/form/networks'), erb[loud]:contains('compute_resources_vms/form/volumes')"
+)
+
 Deface::Override.new(
   :virtual_path => 'compute_attributes/_form',
   :name => 'add_from_profile_to_compute_attributes_form',

app/overrides/compute_resources_vms/form/add_react_component_to_host.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+# Copyright 2018 Tristan Robert
+
+# This file is part of ForemanFogProxmox.
+
+# ForemanFogProxmox is free software: you can redistribute it and/or modify
+# it under the terms of the GNU General Public License as published by
+# the Free Software Foundation, either version 3 of the License, or
+# (at your option) any later version.
+
+# ForemanFogProxmox is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+# GNU General Public License for more details.
+
+# You should have received a copy of the GNU General Public License
+# along with ForemanFogProxmox. If not, see <http://www.gnu.org/licenses/>.
+
+Deface::Override.new(
+  virtual_path: 'hosts/_form',
+  name: 'add_react_component_to_virtual_machine_tab',
+  insert_after: "li.active",
+  partial: 'compute_resources_vms/form/proxmox/add_react_component_to_host_form'
+)

app/overrides/compute_resources_vms/form/update_react_component_to_host_form.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+# Copyright 2018 Tristan Robert
+
+# This file is part of ForemanFogProxmox.
+
+# ForemanFogProxmox is free software: you can redistribute it and/or modify
+# it under the terms of the GNU General Public License as published by
+# the Free Software Foundation, either version 3 of the License, or
+# (at your option) any later version.
+
+# ForemanFogProxmox is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+# GNU General Public License for more details.
+
+# You should have received a copy of the GNU General Public License
+# along with ForemanFogProxmox. If not, see <http://www.gnu.org/licenses/>.
+
+Deface::Override.new(
+  :virtual_path => 'hosts/_compute',
+  :name => 'update_react_component_to_virtual_machine_tab',
+  :replace => "erb[loud]:contains('hosts/compute_detail')",
+  :partial => 'compute_resources_vms/form/proxmox/update_react_component_to_host_form'
+)

app/views/compute_resources_vms/form/proxmox/_add_react_component_to_host_form.html.erb

@@ -0,0 +1,5 @@
+<% content_for(:javascripts) do %>
+  <%= webpacked_plugins_js_for :foreman_fog_proxmox %>
+  <%= javascript_include_tag 'foreman_fog_proxmox/proxmox_vm', "data-turbolinks-track" => true %>
+<% end %>
+<%= react_component('ProxmoxVmType') %>

app/views/compute_resources_vms/form/proxmox/_base.html.erb

@@ -14,25 +14,24 @@ GNU General Public License for more details.
 
 You should have received a copy of the GNU General Public License
 along with ForemanFogProxmox. If not, see <http://www.gnu.org/licenses/>. %>
-
+<% nodes = compute_resource.nodes %>
+<% unless local_assigns[:hide_image] && !new_vm %>
+    <%
+      arch ||= nil ; os ||= nil
+      images = possible_images(compute_resource, arch, os)
+    -%>
+    <div id='image_selection'>
+    <%= select_f f, :image_id, images, :uuid, :name, { :include_blank => true },
+      :disabled => true,
+      :help_inline => :indicator,
+      :class => ('hide' if from_profile),
+      :label => _('Image'),
+      :label_size => "col-md-2" %>
+    </div>
+<% end %>
+<% content_for(:javascripts) do %>
+  <%= webpacked_plugins_js_for :foreman_fog_proxmox %>
 <%= javascript_include_tag 'foreman_fog_proxmox/proxmox_vm', "data-turbolinks-track" => true %>
-
-<%= select_f f, :type, proxmox_types_map, :id, :name, { }, :label => _('Type'), :label_size => "col-md-2", :required => true, :onchange => "vmTypeSelected()", :disabled => !new_vm %>
-
-<!-- VM General Settings -->
-<%= render :partial => "compute_resources_vms/form/proxmox/general", :locals => { :f => f, :compute_resource =>  compute_resource, :new_vm => new_vm, :from_profile => from_profile } %>
-
-<!-- VM Extended Settings -->
-<%= render :partial => "compute_resources_vms/form/proxmox/container/extended", :locals => { :f => f, :compute_resource =>  compute_resource, :new_vm => new_vm } %>
-
-<!-- VM Advanced Settings -->
-<%= render :partial => "compute_resources_vms/form/proxmox/server/advanced", :locals => { :f => f, :compute_resource =>  compute_resource, :new_vm => new_vm } %>
-<%= render :partial => "compute_resources_vms/form/proxmox/container/advanced", :locals => { :f => f, :compute_resource =>  compute_resource, :new_vm => new_vm } %>
-
-<!-- Config Options Settings-->
-<%= f.fields_for :config, compute_resource.new_typed_vm(object_to_config_hash(f.object, 'qemu'), 'qemu').config, include_id: false do |server_config|%>
-  <%= render :partial => "compute_resources_vms/form/proxmox/server/config", :locals => { :f => server_config, :cloudinit => f.object.cloud_init?, :compute_resource =>  compute_resource, :host => @host, :new_vm => new_vm, :item_layout => 'removable', :type => f.object.type, :node_id => f.object.node_id } %>
 <% end %>
-<%= f.fields_for :config, compute_resource.new_typed_vm(object_to_config_hash(f.object, 'lxc'), 'lxc').config, include_id: false do |container_config|%>
-  <%= render :partial => "compute_resources_vms/form/proxmox/container/config", :locals => { :f => container_config, :compute_resource =>  compute_resource, :host => @host, :new_vm => new_vm, :item_layout => 'removable', :type => f.object.type, :node_id => f.object.node_id } %>
-<% end %>
+<% node_id = f.object.node_id %>
+<%= react_component('ProxmoxVmType',  { vm_attributes: object_to_attributes_hash(f.object, from_profile), nodes: nodes, images: images.as_json, pools: compute_resource.pools, storages: compute_resource.storages, from_profile: from_profile, new_vm: new_vm, bridges: compute_resource.bridges, hasCloudinit: f.object.cloud_init? }) %>

app/views/compute_resources_vms/form/proxmox/_update_react_component_to_host_form.html.erb

@@ -0,0 +1,27 @@
+<%# Copyright 2018 Tristan Robert
+
+This file is part of ForemanFogProxmox.
+
+ForemanFogProxmox is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+ForemanFogProxmox is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with ForemanFogProxmox. If not, see <http://www.gnu.org/licenses/>. %>
+
+<% if compute_resource.class == ForemanFogProxmox::Proxmox %>
+	     <% logger.warn("*******************^^^^^^^^^^^^^^^^^^^^^^^^^^ I am after compute resource selection #{compute_resource}")%>   
+<%= render :partial => provider_partial(compute_resource, 'base'),
+            locals: { f: compute, host: host, compute_resource: compute_resource, new_host: host.new_record?, new_vm: !compute.object.persisted?,
+                     arch: host.architecture_id, os: host.operatingsystem_id, from_profile: false } %>
+<% else %>
+<%= render :partial => provider_partial(compute_resource, 'base'),
+            locals: { f: compute, host: host, compute_resource: compute_resource, new_host: host.new_record?, new_vm: !compute.object.persisted?,
+                     arch: host.architecture_id, os: host.operatingsystem_id } %>
+<% end %>

babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ['@theforeman/builder/babel'],
+};

eslint.config.js

@@ -0,0 +1,12 @@
+import globals from "globals";
+import pluginJs from "@eslint/js";
+import pluginReactConfig from "eslint-plugin-react/configs/recommended.js";
+
+
+export default [
+  {files: ["**/*.{js,mjs,cjs,jsx}"]},
+  { languageOptions: { parserOptions: { ecmaFeatures: { jsx: true } } } },
+  {languageOptions: { globals: globals.browser }},
+  pluginJs.configs.recommended,
+  pluginReactConfig,
+];

global_test_setup.js

@@ -0,0 +1,11 @@
+// runs before each test to make sure console.error output will
+// fail a test (i.e. default PropType missing). Check the error
+// output and traceback for actual error.
+global.console.error = (error, stack) => {
+  /* eslint-disable-next-line no-console */
+  if (stack) console.log(stack); // Prints out original stack trace
+  throw new Error(error);
+};
+
+// Increase jest timeout as some tests using multiple http mocks can time out on CI systems.
+jest.setTimeout(10000);

jest.config.js

@@ -0,0 +1,35 @@
+// Find where foreman is located
+const { foremanRelativePath, foremanLocation } = require('@theforeman/find-foreman');
+const foremanReactRelative = 'webpack/assets/javascripts/react_app';
+const foremanFull = foremanLocation();
+const foremanReactFull = foremanRelativePath(foremanReactRelative);
+
+module.exports = {
+  testURL: 'http://localhost/',
+  setupFiles: [
+    './webpack/test_setup.js',
+  ],
+  setupFilesAfterEnv: [
+    './webpack/global_test_setup.js',
+    '@testing-library/jest-dom'
+  ],
+  testPathIgnorePatterns: [
+    '/node_modules/',
+    '<rootDir>/foreman/',
+    '<rootDir>/.+fixtures.+',
+    '<rootDir>/engines',
+  ],
+  moduleDirectories: [
+    `${foremanFull}/node_modules`,
+    `${foremanFull}/node_modules/@theforeman/vendor-core/node_modules`,
+    'node_modules',
+    'webpack/test-utils',
+  ],
+  modulePathIgnorePatterns: [
+    '<rootDir>/foreman/',
+  ],
+  moduleNameMapper: {
+    '^.+\\.(css|scss)$': 'identity-obj-proxy',
+    '^foremanReact(.*)$': `${foremanReactFull}/$1`,
+  },
+};

jsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "target": "es6",
+    "paths": {
+      "foremanReact/*": ["../foreman/webpack/assets/javascripts/react_app/*"]
+    }
+  }
+}