Angular to react conversion Reconfigure form

app/helpers/vm_infra_helper.rb

@@ -1,4 +1,37 @@
 module VmInfraHelper
   include VmHelper
   include DataTableHelper
+
+  # rubocop:disable Rails/HelperInstanceVariable
+  def reconfigure_form_data(vm = @reconfigitems.first)
+    {
+      :recordId  => @reconfigitems.collect(&:id),
+      :requestId => @request_id || 'new',
+      :roles     => {
+        :allowMemoryChange   => role_allows?(:feature => 'vm_reconfigure_memory'),
+        :allowCpuChange      => role_allows?(:feature => 'vm_reconfigure_cpu'),
+        :allowDiskChange     => role_allows?(:feature => 'vm_reconfigure_disks') && item_supports?(:reconfigure_disks),
+        :allowDiskSizeChange => item_supports?(:reconfigure_disksize),
+        :allowNetworkChange  => item_supports?(:reconfigure_network_adapters) && role_allows?(:feature => 'vm_reconfigure_networks'),
+        :allowCdromsChange   => item_supports?(:reconfigure_cdroms) && role_allows?(:feature => 'vm_reconfigure_drives'),
+        :isVmwareInfra       => vm.vendor == 'vmware' && vm.type.include?('InfraManager'),
+        :isVmwareCloud       => vm.vendor == 'vmware' && vm.type.include?('CloudManager'),
+        :isRedhat            => vm.vendor == 'redhat',
+      },
+      :memory    => {
+        :min     => @reconfig_limits[:min__vm_memory],
+        :max     => @reconfig_limits[:max__vm_memory],
+        :max_cpu => @reconfig_limits[:max__total_vcpus],
+      },
+      :options   => {
+        :controller_types    => @reconfigitems.first.try(:scsi_controller_types) || [],
+        :vlan_options        => @vlan_options || [],
+        :avail_adapter_names => @avail_adapter_names || [],
+        :host_file_options   => @iso_options || [],
+        :socket_options      => @socket_options || [],
+        :cores_options       => @cores_options || [],
+      }
+    }
+  end
+  # rubocop:enable Rails/HelperInstanceVariable
 end

app/javascript/components/miq-data-table/index.jsx

@@ -95,6 +95,7 @@ const MiqDataTable = ({
         onClick={() => sortable && onSort(header)}
         isSortHeader={sortHeader}
         sortDirection={sortDirection}
+        className={classNames('miq-data-table-header', (header.contentButton ? 'header-button' : ''))}
       >
         {headerLabel(header.header)}
       </TableHeader>

app/javascript/components/reconfigure-vm-form/disk-form-fields.js

@@ -0,0 +1,118 @@
+import { componentTypes, validatorTypes } from '@@ddf';
+import { restructureOptions } from './helper';
+import { TYPES, getCellData, getObjectData } from './helpers/general';
+
+const getSwitchData = (row, field) => (getCellData(row, field) === 'Yes');
+
+const nameField = (data) => ({
+  component: componentTypes.TEXT_FIELD,
+  id: 'name',
+  name: 'name',
+  label: __('Name'),
+  isReadOnly: true,
+  initialValue: data.form.action === TYPES.RESIZE ? getCellData(data.editingRow, 'name') : '',
+  hideField: data.form.action === 'add',
+});
+
+const sizeField = (data) => ({
+  component: componentTypes.TEXT_FIELD,
+  id: 'size',
+  name: 'size',
+  label: __('Size'),
+  isRequired: true,
+  initialValue: data.form.action === TYPES.RESIZE ? getCellData(data.editingRow, 'size') : '',
+  validate: [
+    {
+      type: 'diskMemoryCheck',
+      size: data.form.action === TYPES.RESIZE ? Number(getObjectData(data.editingRow.id.substring(4), data.dataTable.disks, 'orgHdSize')) + 1 : 1,
+      unit: data.form.action === TYPES.RESIZE ? getObjectData(data.editingRow.id.substring(4), data.dataTable.disks, 'orgHdUnit') : __('MB'),
+    },
+  ],
+});
+
+const unitField = (data) => ({
+  component: componentTypes.SELECT,
+  id: 'unit',
+  name: 'unit',
+  label: __('Unit'),
+  initialValue: data.form.action === TYPES.RESIZE ? getCellData(data.editingRow, 'unit') : '',
+  options: restructureOptions([__('GB'), __('MB')]),
+});
+
+const typeField = (data) => ({
+  component: componentTypes.SELECT,
+  id: 'type',
+  name: 'type',
+  label: __('Type'),
+  autoFocus: true,
+  options: restructureOptions(['thin', 'thick']),
+  validate: [{ type: validatorTypes.REQUIRED }],
+  isReadOnly: data.form.action !== 'add',
+  isRequired: true,
+  placeholder: __('<Choose>'),
+  includeEmpty: true,
+  disabled: data.form.action === TYPES.RESIZE,
+  initialValue: data.form.action === TYPES.RESIZE ? getCellData(data.editingRow, 'type') : '',
+});
+
+const modeField = (data, roles) => ({
+  component: componentTypes.SELECT,
+  id: 'mode',
+  name: 'mode',
+  label: __('Mode'),
+  options: restructureOptions(['persistent', 'nonpersistent']),
+  isReadOnly: data.form.action !== 'add',
+  hideField: !roles.isVmwareInfra,
+  isRequired: true,
+  placeholder: __('<Choose>'),
+  includeEmpty: true,
+  disabled: data.form.action === TYPES.RESIZE,
+  validate: [{ type: 'customRequired', hideField: !roles.isVmwareInfra }],
+  initialValue: data.form.action === TYPES.RESIZE ? getCellData(data.editingRow, 'mode') : '',
+});
+
+const controllerField = (data, roles, options) => ({
+  component: componentTypes.SELECT,
+  id: 'controller',
+  name: 'controller',
+  label: __('Controller'),
+  options: restructureOptions(options),
+  isReadOnly: data.form.action !== 'add',
+  hideField: !roles.isVmwareInfra,
+  disabled: data.form.action === TYPES.RESIZE,
+  initialValue: data.form.action === TYPES.RESIZE ? getCellData(data.editingRow, 'controller') : '',
+});
+
+const dependentField = (data, roles) => ({
+  component: 'switch',
+  id: 'dependent',
+  name: 'dependent',
+  label: __('Dependent'),
+  onText: __('Yes'),
+  offText: __('No'),
+  hideField: !roles.isVmwareInfra,
+  disabled: data.form.action === TYPES.RESIZE,
+  initialValue: data.form.action === TYPES.RESIZE ? getSwitchData(data.editingRow, 'dependent') : '',
+});
+
+const bootableField = (data, roles) => ({
+  component: 'switch',
+  name: 'bootable',
+  label: __('Bootable'),
+  onText: __('Yes'),
+  offText: __('No'),
+  isReadOnly: data.form.action !== 'add',
+  hideField: !roles.isRedhat,
+  initialValue: data.form.action === TYPES.RESIZE ? getSwitchData(data.editingRow, 'bootable') : '',
+});
+
+export const diskFormFields = (data, roles, options, memory) => ([
+  nameField(data),
+  typeField(data),
+  sizeField(data),
+  unitField(data, memory),
+  modeField(data, roles),
+  controllerField(data, roles, options.controller_types),
+  dependentField(data, roles),
+  bootableField(data, roles),
+]);

app/javascript/components/reconfigure-vm-form/drive-form-fields.js

@@ -0,0 +1,31 @@
+import { componentTypes, validatorTypes } from '@@ddf';
+import { restructureOptions } from './helper';
+import { getCellData } from './helpers/general';
+
+const nameField = (data) => ({
+  component: componentTypes.TEXT_FIELD,
+  id: 'name',
+  name: 'name',
+  label: __('Name'),
+  initialValue: getCellData(data.editingRow, 'name'),
+  autoFocus: true,
+  isReadOnly: true,
+});
+
+const hostField = (data, options) => ({
+  component: componentTypes.SELECT,
+  id: 'host_file',
+  name: 'host_file',
+  label: __('Host File'),
+  options: restructureOptions(options),
+  validate: [{ type: validatorTypes.REQUIRED }],
+  isRequired: true,
+  placeholder: __('<Choose>'),
+  includeEmpty: true,
+  initialValue: getCellData(data.editingRow, 'hostFile'),
+});
+
+export const driveFormFields = (data, options) => ([
+  nameField(data),
+  hostField(data, options.host_file_options),
+]);

app/javascript/components/reconfigure-vm-form/helper.js

@@ -0,0 +1,178 @@
+import { http } from '../../http_api';
+import {
+  deleteDisk,
+  cancelDeleteDisk,
+  cancelResizeDisk,
+  getDiskTableHeaders,
+  setDiskFormSubmit,
+  formatDiskData,
+} from './helpers/disk';
+import {
+  cancelEditNetwork,
+  deleteNetwork,
+  cancelDeleteNetwork,
+  getNetworkTableHeaders,
+  setNetworkFormSubmit,
+} from './helpers/network';
+import {
+  getDriveTableHeaders,
+  cancelConnectDrives,
+  setDriveFormSubmit,
+  cancelDisconnectDrives,
+  disconnectDrives,
+} from './helpers/drive';
+import { TYPES, formsData, sizeInMB } from './helpers/general';
+
+/** Function to check if an item is array. if yes, returns true, else returns false */
+const isArray = (item) => Array.isArray(item);
+
+/** Function to get the options.
+ * The data is either array of strings eg: ['aaa','bbb'] or
+ * array of string arrays eg: [['aaa','bbb], ['ccc','ddd']] */
+export const restructureOptions = (data) => {
+  if (!data) { return []; } return data.map((item) => (
+    isArray(item)
+      ? ({ label: item[0], value: item[1] })
+      : ({ label: item.toString(), value: item })));
+};
+
+/** Function to set the submit button status based on change counters */
+export const getFormSubmitStatus = (data) => {
+  if (data.form.type === TYPES.RECONFIGURE && data.changeCounter > 0) {
+    return true;
+  }
+  return false;
+};
+
+/** Function to execute all button actions */
+export const setButtonActions = (item, data, setData, roles) => {
+  switch (item.callbackAction) {
+    case 'deleteDisk': deleteDisk(item, data, setData); break;
+    case 'cancelDeleteDisk': cancelDeleteDisk(item, data, setData); break;
+    case 'cancelEditNetwork': cancelEditNetwork(item, data, setData, roles); break;
+    case 'deleteNetwork': deleteNetwork(item, data, setData, roles); break;
+    case 'cancelDeleteNetwork': cancelDeleteNetwork(item, data, setData); break;
+    case 'cancelConnectDrives': cancelConnectDrives(item, data, setData); break;
+    case 'cancelResizeDisk': cancelResizeDisk(item, data, setData); break;
+    case 'cancelDisconnectDrives': cancelDisconnectDrives(item, data, setData); break;
+    case 'disconnectDrives': disconnectDrives(item, data, setData); break;
+    default: return true;
+  }
+  return true;
+};
+
+/** Function to load the datatable headers values  */
+export const dataTableHeaders = (table, roles) => {
+  switch (table) {
+    case 'network':
+      return getNetworkTableHeaders(roles);
+    case 'drive':
+      return getDriveTableHeaders();
+    default:
+      return getDiskTableHeaders(roles);
+  }
+};
+
+/** validate the memory size field.
+ * return false when the validation fails
+ */
+export const validateMemory = (value, checkValue, unit, limit) => {
+  if (checkValue) {
+    const valueInMB = sizeInMB(value, unit);
+    const remainder = valueInMB % 4;
+    if (valueInMB < limit.min || valueInMB > limit.max || remainder !== 0) {
+      return false;
+    }
+  }
+  return true;
+};
+
+/** validate the memory size field.
+ * return false when the validation fails
+ */
+export const validateCpu = (value, allValues, field, limit) => {
+  const cpuValue = field === 'socket' ? allValues.cores_per_socket_count : allValues.socket_count;
+  if ((cpuValue * value) > limit) {
+    return false;
+  }
+
+  return true;
+};
+
+/** Setting up the sub forms submit data when the form submit action gets called */
+export const subFormSubmit = (data, setData, formData, roles) => {
+  switch (data.form.type) {
+    case TYPES.DISK:
+    case TYPES.RESIZE:
+      setDiskFormSubmit(data, setData, formData, roles, formsData.reconfigure);
+      break;
+    case TYPES.NETWORK:
+    case TYPES.EDITNETWORK:
+      setNetworkFormSubmit(data, setData, formData, roles, formsData.reconfigure);
+      break;
+    case TYPES.DRIVE:
+      setDriveFormSubmit(data, setData, formData, formsData.reconfigure);
+      break;
+    default:
+      break;
+  }
+};
+
+/** Setting up the final reconfigure submit data when the form submit button clicked */
+export const reconfigureSubmitData = (recordId, data, formData) => ({
+  objectIds: recordId,
+  cb_memory: formData.cb_memory,
+  cb_cpu: formData.processor,
+  memory: formData.memory,
+  memory_type: formData.mem_type,
+  socket_count: formData.socket_count,
+  cores_per_socket_count: formData.cores_per_socket_count,
+  vmAddDisks: data.submitParams.disks.add || [],
+  vmRemoveDisks: data.submitParams.disks.delete || [],
+  vmResizeDisks: data.submitParams.disks.resize || [],
+  vmAddNetworkAdapters: data.submitParams.networks.add || [],
+  vmRemoveNetworkAdapters: data.submitParams.networks.delete || [],
+  vmEditNetworkAdapters: data.submitParams.networks.edit || [],
+  vmConnectCDRoms: data.submitParams.drives.connect || [],
+  vmDisconnectCDRoms: data.submitParams.drives.disconnect || [],
+});
+
+/** function to save the processor field changes to show total processors */
+export const socketChange = (value, data, setData, field) => {
+  if (data[field] !== value) {
+    data[field] = value;
+    data.initialValues.total_cpus = data.socket * data.cores;
+    setData({
+      ...data,
+    });
+  }
+};
+
+/** Setting up the reconfigure form details when the form loads
+ * TODO: replace with API endpoints.
+*/
+export const setInitialData = (value, requestId, data, setData) => {
+  http.get(`/vm_infra/reconfigure_form_fields/${requestId},${value}`).then((response) => {
+    setData({
+      ...data,
+      initialValues: {
+        processor: response.cb_cpu,
+        cb_memory: response.cb_memory,
+        cores_per_socket_count: response.cores_per_socket_count,
+        memory: response.memory,
+        mem_type: response.memory_type,
+        socket_count: response.socket_count,
+      },
+      socket: response.socket_count,
+      cores: response.cores_per_socket_count,
+      orchestration_stack_id: response.orchestration_stack_id,
+      isLoading: false,
+      dataTable: {
+        ...data.dataTable,
+        disks: formatDiskData(response.disks),
+        networkAdapters: response.network_adapters,
+        drives: response.cdroms,
+      },
+    });
+  });
+};