Move from jquery to react js

.eslintrc

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

.github/workflows/js_ci.yml

@@ -0,0 +1,26 @@
+name: JS
+on:
+  pull_request:
+    paths:
+      - 'webpack/**'
+      - 'package.json'
+      - '.github/workflows/js_ci.yml'
+jobs:
+  test_js:
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        node-version: [14]
+    steps:
+      - uses: actions/checkout@v2
+      - name: Setup Node
+        uses: actions/setup-node@v1
+        with:
+          node-version:  ${{ matrix.node-version }}
+      - name: Npm install
+        run: |
+          npm install
+      - name: Run plugin linter
+        run: |
+          npm run lint

.gitignore

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

app/helpers/proxmox_vm_attrs_helper.rb

@@ -0,0 +1,129 @@
+# 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, start_checked)
+    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|
+      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[camel_key] = { :name => "#{param_scope}[#{key}]", :value => value } if keys.include? key
+    end
+
+    vm_h.merge!(additional_attrs(vms, param_scope))
+    vm_h[:interfaces] = network_attrs(param_scope, vms.interfaces)
+    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 = ['id', 'volid', 'storage', 'size', 'storage_type']
+        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_type', '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|
+      camel_key = key.to_s.include?('_') ? snake_to_camel(key.to_s).to_sym : key
+      attrs[camel_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
+
+  def additional_attrs(vms, param_scope)
+    attributes = {
+      pool: vms.pool,
+      image_id: vms.image_id,
+      cpu_type: vms.config.cpu_type,
+      nameserver: vms.config.nameserver,
+      searchdomain: vms.config.searchdomain,
+      hostname: vms.config.hostname,
+      ostemplate_storage: vms.ostemplate_storage,
+      ostemplate_file: vms.ostemplate_file,
+      start_after_create: vms.start_after_create,
+      templated: vms.templated,
+    }
+    extra_attrs = ActiveSupport::HashWithIndifferentAccess.new
+    attributes.each do |key, value|
+      camel_key = key.to_s.include?('_') ? snake_to_camel(key.to_s).to_sym : key
+      nested_key = [:pool, :start_after_create].include?(key) ? key : "config_attributes[#{key}]"
+      value = start_checked if key == :start_after_create
+      extra_attrs[camel_key] = { name: "#{param_scope}[#{nested_key}]", value: value }
+    end
+    extra_attrs
+  end
+
+  def snake_to_camel(str)
+    str.split('_').inject([]) { |buffer, e| buffer.push(buffer.empty? ? e : e.capitalize) }.join
+  end
+end

app/helpers/proxmox_vm_volumes_helper.rb

@@ -52,9 +52,9 @@ def parse_hard_disk_volume(args)
     logger.debug(format(_('parse_hard_disk_volume(): args=%<args>s'), args: args))
     disk = {}
     disk[:id] = args['id'] if args.key?('id')
-    disk[:volid] = args['volid'] if args.key?('volid')
-    disk[:storage] = args['storage'].to_s if args.key?('storage')
-    disk[:size] = args['size'].to_i if args.key?('size')
+    disk[:volid] = args['volid'] if args.key?('volid') && !args['volid'].empty?
+    disk[:storage] = args['storage'].to_s if args.key?('storage') && !args['storage'].empty?
+    disk[:size] = args['size'].to_i if args.key?('size') && !args['size'].empty?
     add_disk_options(disk, args) unless args.key?('options')
     disk[:options] = args['options'] if args.key?('options')
     disk.key?(:storage) ? disk : {}

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', { registerComp: true }) %>

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

@@ -14,25 +14,26 @@ 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'),
+      :no_label => from_profile,
+      :label_size => "col-md-2" %>
+    </div>
+<% end %>
+<% untemplatable = new_vm || f.object.templated? %>
+<% checked = params[:host] && params[:host][:compute_attributes] && params[:host][:compute_attributes][:start_after_create] || '1' %>
+<% 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 %>
+<%= react_component('ProxmoxVmType',  { vmAttrs: object_to_attributes_hash(f.object, from_profile, checked), 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, untemplatable: untemplatable }) %>

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

@@ -0,0 +1,26 @@
+<%# 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 %>
+<%= 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'],
+};

foreman_fog_proxmox.gemspec

@@ -30,7 +30,7 @@ Gem::Specification.new do |s|
   # also update locale/gemspec.rb
   s.description = 'Foreman plugin adds Proxmox VE compute resource using fog-proxmox. It is compatible with Foreman 1.22+'
 
-  s.files = Dir['{app,config,db,lib,locale}/**/*'] + ['LICENSE', 'Rakefile', 'README.md']
+  s.files = Dir['{app,config,db,lib,locale,webpack}/**/*'] + ['LICENSE', 'package.json', 'Rakefile', 'README.md']
   s.test_files = Dir['test/**/*']
 
   s.add_dependency 'deface'

jsconfig.json

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