Reconfigure form angular to react conversion

app/controllers/vm_common.rb

@@ -1267,7 +1267,7 @@ def set_right_cell_vars(options = {})
       header = _("%{vm_or_template} Policy Assignment") % {:vm_or_template => ui_lookup(:table => table)}
       action = "protect"
     when "reconfigure"
-      partial = "vm_common/reconfigure"
+      partial = "vm_common/reconfigure_react"
       header = _("Reconfigure %{vm_or_template}") % {:vm_or_template => ui_lookup(:table => table)}
       action = "reconfigure_update"
     when "rename"

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

@@ -0,0 +1,36 @@
+/* eslint-disable camelcase */
+import { API, http } from '../../http_api';
+
+/** Function to check if an item is object. if yes, returns true, else returns false */
+export const isObject = (data) => typeof (data) === 'object';
+
+/** 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, value: item })));
+};
+
+/** Function to load the object items when the 'Object Type' drop-down-list selection is changed  */
+// export const objectTypeChange = (value, setData, data) => {
+//   if (value && data.displayFields.automationFields === false) {
+//     http.post(`/ops/fetch_target_ids/?target_class=${value}`).then(({ targets }) => {
+//       setData({
+//         ...data,
+//         displayFields: {
+//           ...data.displayFields, objectItem: false,
+//         },
+//         options: {
+//           ...data.options,
+//           objectItem: restructureOptions(targets),
+//         },
+//       });
+//     });
+//   }
+// };

app/javascript/components/reconfigure-vm-form/index.jsx

@@ -0,0 +1,109 @@
+/* eslint-disable camelcase */
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { Loading } from 'carbon-components-react';
+import MiqFormRenderer from '../../forms/data-driven-form';
+import { createSchema } from './reconfigure-form.schema';
+import { API } from '../../http_api';
+import miqRedirectBack from '../../helpers/miq-redirect-back';
+import {
+  setInitialData,
+} from './helper';
+import MiqDataTable from '../miq-data-table';
+
+const ReconfigureVmForm = ({
+  recordId,
+}) => {
+  const [data, setData] = useState({
+    initialValues: {},
+    isLoading: true,
+    options: {
+      timezone: [],
+      subAction: [],
+      target: [],
+      zone: [],
+      request: [],
+      objectType: [],
+      objectItem: [],
+      everyTime: [],
+    },
+    displayFields: {
+      target: true,
+      filterType: false,
+      automationFields: true,
+      objectItem: true,
+      everyTime: true,
+    },
+  });
+
+  useEffect(() => {
+    setData({
+      ...data,
+      isLoading: false,
+    });
+    // setInitialData(recordId, data, setData);
+  }, [recordId]);
+
+  const onSubmit = (formData) => {
+    miqSparkleOn();
+    console.log(formData);
+    // const URL = `/ops/schedule_edit/${recordId}?button=save`;
+    // miqAjaxButton(URL, getSubmitData(formData));
+  };
+
+  const onCancel = (data) => {
+    // miqSparkleOn();
+    // const returnURL = '/ops/explorer/';
+    // let message = sprintf(__('Add was cancelled by the user'));
+    // if (data.initialValues.name) {
+    //   message = sprintf(__('Edit of "%s" was cancelled by the user'), data.initialValues.name);
+    // }
+    // miqRedirectBack(message, 'success', returnURL);
+  };
+
+  const customValidatorMapper = {
+    customRequired: ({ hideField }) => (value) => (!value && !hideField ? __('Required') : undefined),
+  };
+
+  if (data.isLoading) return <Loading className="export-spinner" withOverlay={false} small />;
+  return !data.isLoading && (
+    <MiqFormRenderer
+      schema={createSchema(recordId, data, setData)}
+      initialValues={data.initialValues}
+      canReset
+      onSubmit={onSubmit}
+      onCancel={() => onCancel(data)}
+      validatorMapper={customValidatorMapper}
+      buttonsLabels={{
+        submitLabel: recordId ? __('Save') : __('Add'),
+      }}
+    >
+      <MiqDataTable
+        headers={[
+          { key: 'Enforced', header: __('Enforced') },
+          { key: 'Description', header: __('Description') },
+          { key: 'Value', header: __('Value') },
+          { key: 'Units', header: __('Units') },
+        ]}
+        // rows={createRows(initialValues, enforced, setEnforced, values, setValues, setDisabled, setChanged, invalid, setInvalid)}
+        rows={[]}
+        onCellClick={() => {}}
+      />
+    </MiqFormRenderer>
+  );
+};
+
+// const optionProps = PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.any));
+
+ReconfigureVmForm.propTypes = {
+  recordId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  // actionOptions: optionProps,
+  // filterOptions: PropTypes.arrayOf(PropTypes.any),
+};
+
+// ReconfigureVmForm.defaultProps = {
+//   actionOptions: undefined,
+//   filterOptions: undefined,
+// };
+
+export default ReconfigureVmForm;

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

@@ -0,0 +1,95 @@
+import { componentTypes, validatorTypes } from '@@ddf';
+import {
+  restructureOptions,
+} from './helper';
+
+export const attributeValueLimit = 5;
+
+export const memoryField = () => ({
+  component: 'switch',
+  name: 'cb_memory',
+  label: __('Memory'),
+  onText: __('Yes'),
+  offText: __('No'),
+});
+
+export const memoryValueField = () => ({
+  component: componentTypes.TEXT_FIELD,
+  name: 'memory',
+  label: __('Memory Value'),
+  initialValue: 16,
+  isRequired: true,
+  validate: [{ type: validatorTypes.REQUIRED }],
+  helperText: __('Between 4MB and 2048GB'),
+  condition: {
+    when: 'cb_memory',
+    is: true,
+  },
+});
+
+export const memoryTypeField = () => ({
+  component: componentTypes.SELECT,
+  id: 'memoryType',
+  name: 'mem_type',
+  label: __('Memory Type'),
+  initialValue: 'GB',
+  options: restructureOptions(['GB', 'MB']),
+  condition: {
+    when: 'cb_memory',
+    is: true,
+  },
+});
+
+export const processorField = () => ({
+  component: 'switch',
+  name: 'processor',
+  label: __('Processor'),
+  onText: __('Yes'),
+  offText: __('No'),
+});
+
+export const socketField = () => ({
+  component: componentTypes.SELECT,
+  id: 'socket',
+  name: 'socket_count',
+  label: __('Sockets'),
+  options: restructureOptions(['1', '2', '3', '4', '5']),
+  condition: {
+    when: 'processor',
+    is: true,
+  },
+});
+
+export const coresPerSocketField = () => ({
+  component: componentTypes.SELECT,
+  id: 'cores',
+  name: 'cores_per_socket_count',
+  label: __('Cores Per Socket '),
+  options: restructureOptions(['1', '2', '3', '4', '5']),
+  condition: {
+    when: 'processor',
+    is: true,
+  },
+});
+
+export const totalProcessorsField = () => ({
+  component: componentTypes.TEXT_FIELD,
+  id: 'total_cpus',
+  name: 'total_cpus',
+  label: __('Total Processors'),
+  isReadOnly: true,
+  condition: {
+    when: 'processor',
+    is: true,
+  },
+});
+
+export const reconfigureFormFields = (setData, data) => ([
+  memoryField(),
+  memoryValueField(),
+  memoryTypeField(),
+  processorField(),
+  socketField(),
+  coresPerSocketField(),
+  totalProcessorsField(),
+]);

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

@@ -0,0 +1,16 @@
+import { componentTypes } from '@@ddf';
+import { reconfigureFormFields } from './reconfigure-form-fields';
+
+export const createSchema = (_recordId, data, setData) => {
+  const formFields = reconfigureFormFields(setData, data);
+  const fields = [
+    {
+      component: componentTypes.SUB_FORM,
+      name: 'BasicInformation',
+      title: __('Reconfigure Virtual Machine'),
+      className: 'reconfigure_form',
+      fields: [formFields],
+    },
+  ];
+  return { fields };
+};

app/javascript/components/tenant-quota-form/index.jsx

@@ -66,6 +66,7 @@ const TenantQuotaForm = ({ recordId }) => {
 
   return !isLoading && (
     <div className="tenant-quota-data-table">
+      {/* hvhv */}
       <MiqDataTable
         headers={[
           { key: 'Enforced', header: __('Enforced') },

app/javascript/packs/component-definitions-common.js

@@ -89,6 +89,7 @@ import PolicyProfileForm from '../components/policy-profile-form';
 import PfAggregateStatusCard from '../components/pf_aggregate_status_card';
 import RecentHostGraph from '../components/provider-dashboard-charts/recent-host-chart';
 import RecentVmGraph from '../components/provider-dashboard-charts/recent-vm-chart';
+import ReconfigureVmForm from '../components/reconfigure-vm-form';
 import RefreshDataNotification from '../components/refresh-data-notification';
 import RegionForm from '../components/region-form';
 import RemoveCatalogItemModal from '../components/remove-catalog-item-modal';
@@ -246,6 +247,7 @@ ManageIQ.component.addReact('PfAggregateStatusCard', PfAggregateStatusCard);
 ManageIQ.component.addReact('Quadicon', Quadicon);
 ManageIQ.component.addReact('RecentHostGraph', RecentHostGraph);
 ManageIQ.component.addReact('RecentVmGraph', RecentVmGraph);
+ManageIQ.component.addReact('ReconfigureVmForm', ReconfigureVmForm);
 ManageIQ.component.addReact('RefreshDataNotification', RefreshDataNotification);
 ManageIQ.component.addReact('RegionForm', RegionForm);
 ManageIQ.component.addReact('RemoveCatalogItemModal', RemoveCatalogItemModal);

app/views/miq_template/show.html.haml

@@ -4,7 +4,7 @@
   - elsif @rightsize
     = render :partial => "vm_common/right_size"
   - elsif @reconfigure
-    = render :partial => "vm_common/reconfigure"
+    = render :partial => "vm_common/reconfigure_react"
   - else
     - case @showtype
     - when "details"

app/views/vm/show.html.haml

@@ -4,7 +4,7 @@
   - elsif @rightsize
     = render :partial => "vm_common/right_size"
   - elsif @reconfigure
-    = render :partial => "vm_common/reconfigure"
+    = render :partial => "vm_common/reconfigure_react"
   - elsif @resize
     = render :partial => "vm_common/resize"
   - elsif @live_migrate

app/views/vm_common/_reconfigure_react.html.haml

@@ -0,0 +1,9 @@
+- @angular_form = true
+= react('ReconfigureVmForm', {:recordId => @reconfigitems.length == 1 ? @reconfigitems[0].id : ''})
+
+%h3= _('Affected VMs')
+- if @reconfigitems
+  - @edit ||={}
+  - @edit[:object_ids] = @reconfigitems.collect(&:id)
+  - @embedded = true
+  = render :partial => "layouts/gtl"