diff --git a/app/controllers/vm_common.rb b/app/controllers/vm_common.rb index 02565030db72..1d76bb477bf5 100644 --- a/app/controllers/vm_common.rb +++ b/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" diff --git a/app/javascript/components/reconfigure-vm-form/helper.js b/app/javascript/components/reconfigure-vm-form/helper.js new file mode 100644 index 000000000000..a5a8174dab0b --- /dev/null +++ b/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), +// }, +// }); +// }); +// } +// }; diff --git a/app/javascript/components/reconfigure-vm-form/index.jsx b/app/javascript/components/reconfigure-vm-form/index.jsx new file mode 100644 index 000000000000..73acc18378d6 --- /dev/null +++ b/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 ; + return !data.isLoading && ( + onCancel(data)} + validatorMapper={customValidatorMapper} + buttonsLabels={{ + submitLabel: recordId ? __('Save') : __('Add'), + }} + > + {}} + /> + + ); +}; + +// 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; diff --git a/app/javascript/components/reconfigure-vm-form/reconfigure-form-fields.js b/app/javascript/components/reconfigure-vm-form/reconfigure-form-fields.js new file mode 100644 index 000000000000..aa06811fb209 --- /dev/null +++ b/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(), +]); diff --git a/app/javascript/components/reconfigure-vm-form/reconfigure-form.schema.js b/app/javascript/components/reconfigure-vm-form/reconfigure-form.schema.js new file mode 100644 index 000000000000..960cea50fccf --- /dev/null +++ b/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 }; +}; diff --git a/app/javascript/components/tenant-quota-form/index.jsx b/app/javascript/components/tenant-quota-form/index.jsx index b0fb5329a857..7b2019300898 100644 --- a/app/javascript/components/tenant-quota-form/index.jsx +++ b/app/javascript/components/tenant-quota-form/index.jsx @@ -66,6 +66,7 @@ const TenantQuotaForm = ({ recordId }) => { return !isLoading && (
+ {/* hvhv */} "vm_common/right_size" - elsif @reconfigure - = render :partial => "vm_common/reconfigure" + = render :partial => "vm_common/reconfigure_react" - else - case @showtype - when "details" diff --git a/app/views/vm/show.html.haml b/app/views/vm/show.html.haml index 945f5235742c..018e741c5cda 100644 --- a/app/views/vm/show.html.haml +++ b/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 diff --git a/app/views/vm_common/_reconfigure_react.html.haml b/app/views/vm_common/_reconfigure_react.html.haml new file mode 100644 index 000000000000..161424464d24 --- /dev/null +++ b/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"