diff options
Diffstat (limited to 'openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents')
9 files changed, 654 insertions, 397 deletions
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/ComputeFlavors.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/ComputeFlavors.js index 2b6d84f381..2004c94137 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/ComputeFlavors.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/ComputeFlavors.js @@ -15,103 +15,159 @@ */ import React from 'react'; import PropTypes from 'prop-types'; -import {connect} from 'react-redux'; +import { connect } from 'react-redux'; import i18n from 'nfvo-utils/i18n/i18n.js'; import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx'; import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.jsx'; import ComputeFlavorActionHelper from 'sdc-app/onboarding/softwareProduct/components/compute/ComputeFlavorActionHelper.js'; -import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js'; +import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js'; -const mapActionsToProps = (dispatch, {softwareProductId, componentId, version}) => { - return { - onAddComputeClick: (isReadOnlyMode) => ComputeFlavorActionHelper.openComputeEditor(dispatch, {props: {softwareProductId, componentId, isReadOnlyMode, version}}), - onEditCompute: ({computeId, isReadOnlyMode}) => ComputeFlavorActionHelper.loadCompute(dispatch, {softwareProductId, componentId, version, computeId, isReadOnlyMode}), - onDeleteCompute: ({id, name}) => dispatch({ - type: modalActionTypes.GLOBAL_MODAL_WARNING, - data:{ - msg: i18n('Are you sure you want to delete "{name}"?', {name: name}), - onConfirmed: () => ComputeFlavorActionHelper.deleteCompute(dispatch, {softwareProductId, componentId, computeId: id, version}) - } - }) - }; +const mapActionsToProps = ( + dispatch, + { softwareProductId, componentId, version } +) => { + return { + onAddComputeClick: isReadOnlyMode => + ComputeFlavorActionHelper.openComputeEditor(dispatch, { + props: { + softwareProductId, + componentId, + isReadOnlyMode, + version + } + }), + onEditCompute: ({ computeId, isReadOnlyMode }) => + ComputeFlavorActionHelper.loadCompute(dispatch, { + softwareProductId, + componentId, + version, + computeId, + isReadOnlyMode + }), + onDeleteCompute: ({ id, name }) => + dispatch({ + type: modalActionTypes.GLOBAL_MODAL_WARNING, + data: { + msg: i18n('Are you sure you want to delete "{name}"?', { + name: name + }), + onConfirmed: () => + ComputeFlavorActionHelper.deleteCompute(dispatch, { + softwareProductId, + componentId, + computeId: id, + version + }) + } + }) + }; }; const computeItemPropType = PropTypes.shape({ - id: PropTypes.string, - name: PropTypes.string, - description: PropTypes.string + id: PropTypes.string, + name: PropTypes.string, + description: PropTypes.string }); class ComputeFlavors extends React.Component { + static propTypes = { + isReadOnlyMode: PropTypes.bool, + isManual: PropTypes.bool, + onAddComputeClick: PropTypes.func, + computeFlavorsList: PropTypes.arrayOf(computeItemPropType) + }; - static propTypes = { - isReadOnlyMode: PropTypes.bool, - isManual: PropTypes.bool, - onAddComputeClick: PropTypes.func, - computeFlavorsList: PropTypes.arrayOf(computeItemPropType) - }; + state = { + localFilter: '' + }; - state = { - localFilter: '' - }; + render() { + const { localFilter } = this.state; + const { + isReadOnlyMode, + isManual, + onAddComputeClick, + onEditCompute, + onDeleteCompute + } = this.props; + return ( + <div className="computes-list"> + <ListEditorView + title={i18n('Computes')} + plusButtonTitle={i18n('Add Compute')} + onAdd={ + isManual + ? () => onAddComputeClick(isReadOnlyMode) + : null + } + isReadOnlyMode={isReadOnlyMode} + onFilter={ + isManual + ? value => this.setState({ localFilter: value }) + : null + } + filterValue={localFilter} + twoColumns> + {this.filterList().map(computeItem => ( + <ComputeItem + key={computeItem.id} + computeItem={computeItem} + isReadOnlyMode={isReadOnlyMode} + isManual={isManual} + onEditCompute={onEditCompute} + onDeleteCompute={onDeleteCompute} + /> + ))} + </ListEditorView> + </div> + ); + } - render() { - const {localFilter} = this.state; - const {isReadOnlyMode, isManual, onAddComputeClick, onEditCompute, onDeleteCompute} = this.props; - return ( - <div className='computes-list'> - <ListEditorView - title={i18n('Computes')} - plusButtonTitle={i18n('Add Compute')} - onAdd={isManual ? () => onAddComputeClick(isReadOnlyMode) : null} - isReadOnlyMode={isReadOnlyMode} - onFilter={isManual ? value => this.setState({localFilter: value}) : null} - filterValue={localFilter} - twoColumns> - {this.filterList().map(computeItem => - <ComputeItem key={computeItem.id} - computeItem={computeItem} isReadOnlyMode={isReadOnlyMode} isManual={isManual} - onEditCompute={onEditCompute} onDeleteCompute={onDeleteCompute}/>) - } - </ListEditorView> - </div> - ); - } + filterList() { + const { computeFlavorsList = [] } = this.props; - filterList() { - const {computeFlavorsList = []} = this.props; - - const {localFilter} = this.state; - if (localFilter.trim()) { - const filter = new RegExp(escape(localFilter), 'i'); - return computeFlavorsList.filter(({name = '', description = ''}) => { - return escape(name).match(filter) || escape(description).match(filter); - }); - } - else { - return computeFlavorsList; - } - } + const { localFilter } = this.state; + if (localFilter.trim()) { + const filter = new RegExp(escape(localFilter), 'i'); + return computeFlavorsList.filter( + ({ name = '', description = '' }) => { + return ( + escape(name).match(filter) || + escape(description).match(filter) + ); + } + ); + } else { + return computeFlavorsList; + } + } } -const ComputeItem = ({computeItem, isReadOnlyMode, isManual, onEditCompute, onDeleteCompute}) => { - const {id, name, description} = computeItem; - return ( - <ListEditorItemView - key={'item_' + id} - className='list-editor-item-view' - isReadOnlyMode={isReadOnlyMode} - onSelect={() => onEditCompute({computeId: id, isReadOnlyMode})} - onDelete={isManual ? () => onDeleteCompute({id, name}) : null}> - - <div className='list-editor-item-view-field'> - <div className='name'>{name}</div> - </div> - <div className='list-editor-item-view-field'> - <div className='description'>{description}</div> - </div> - </ListEditorItemView> - ); +const ComputeItem = ({ + computeItem, + isReadOnlyMode, + isManual, + onEditCompute, + onDeleteCompute +}) => { + const { id, name, description } = computeItem; + return ( + <ListEditorItemView + key={'item_' + id} + className="list-editor-item-view" + isReadOnlyMode={isReadOnlyMode} + onSelect={() => onEditCompute({ computeId: id, isReadOnlyMode })} + onDelete={isManual ? () => onDeleteCompute({ id, name }) : null}> + <div className="list-editor-item-view-field"> + <div className="name">{name}</div> + </div> + <div className="list-editor-item-view-field"> + <div className="description">{description}</div> + </div> + </ListEditorItemView> + ); }; -export default connect(null, mapActionsToProps, null, {withRef: true})(ComputeFlavors); +export default connect(null, mapActionsToProps, null, { withRef: true })( + ComputeFlavors +); diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/GuestOs.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/GuestOs.jsx index 8ae9961859..c16ab5cdfe 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/GuestOs.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/GuestOs.jsx @@ -19,57 +19,91 @@ import Input from 'nfvo-components/input/validation/Input.jsx'; import GridSection from 'nfvo-components/grid/GridSection.jsx'; import GridItem from 'nfvo-components/grid/GridItem.jsx'; - -const GuestOs = ({qgenericFieldInfo, dataMap, onQDataChanged}) => { - return( - <div> - <GridSection title={i18n('Guest OS')} hasLastColSet> - <GridItem> - <div className='vertical-flex'> - <label key='label' className='control-label'>{i18n('OS Bit Size')}</label> - <div className='radio-options-content-row'> - {qgenericFieldInfo['compute/guestOS/bitSize'].enum.map(bitSize => ( - <Input - data-test-id='guestOS-bitSize' - type='radio' - key={bitSize.enum} - name={'compute/guestOS/bitSize'} - className='radio-field' - value={bitSize.enum} - label={bitSize.title} - onChange={(bit) => onQDataChanged({'compute/guestOS/bitSize' : Number(bit)})} - isValid={qgenericFieldInfo['compute/guestOS/bitSize'].isValid} - errorText={qgenericFieldInfo['compute/guestOS/bitSize'].errorText} - checked={dataMap['compute/guestOS/bitSize'] === bitSize.enum} /> )) } - </div> - </div> - </GridItem> - <GridItem colSpan={2}/> - <GridItem colSpan={2}> - <Input - data-test-id='guestOS-name' - label={i18n('Guest OS')} - type='textarea' - onChange={(tools) => onQDataChanged({'compute/guestOS/name' : tools})} - isValid={qgenericFieldInfo['compute/guestOS/name'].isValid} - errorText={qgenericFieldInfo['compute/guestOS/name'].errorText} - value={dataMap['compute/guestOS/name']} /> - </GridItem> - <GridItem colSpan={2} lastColInRow> - <Input - data-test-id='guestOS-tools' - type='textarea' - label={i18n('Guest OS Tools:')} - onChange={(tools) => onQDataChanged({'compute/guestOS/tools' : tools})} - isValid={qgenericFieldInfo['compute/guestOS/tools'].isValid} - errorText={qgenericFieldInfo['compute/guestOS/tools'].errorText} - value={dataMap['compute/guestOS/tools']} /> - </GridItem> - </GridSection> - - - </div> - ); +const GuestOs = ({ qgenericFieldInfo, dataMap, onQDataChanged }) => { + return ( + <div> + <GridSection title={i18n('Guest OS')} hasLastColSet> + <GridItem> + <div className="vertical-flex"> + <label key="label" className="control-label"> + {i18n('OS Bit Size')} + </label> + <div className="radio-options-content-row"> + {qgenericFieldInfo[ + 'compute/guestOS/bitSize' + ].enum.map(bitSize => ( + <Input + data-test-id="guestOS-bitSize" + type="radio" + key={bitSize.enum} + name={'compute/guestOS/bitSize'} + className="radio-field" + value={bitSize.enum} + label={bitSize.title} + onChange={bit => + onQDataChanged({ + 'compute/guestOS/bitSize': Number( + bit + ) + }) + } + isValid={ + qgenericFieldInfo[ + 'compute/guestOS/bitSize' + ].isValid + } + errorText={ + qgenericFieldInfo[ + 'compute/guestOS/bitSize' + ].errorText + } + checked={ + dataMap['compute/guestOS/bitSize'] === + bitSize.enum + } + /> + ))} + </div> + </div> + </GridItem> + <GridItem colSpan={2} /> + <GridItem colSpan={2}> + <Input + data-test-id="guestOS-name" + label={i18n('Guest OS')} + type="textarea" + onChange={tools => + onQDataChanged({ 'compute/guestOS/name': tools }) + } + isValid={ + qgenericFieldInfo['compute/guestOS/name'].isValid + } + errorText={ + qgenericFieldInfo['compute/guestOS/name'].errorText + } + value={dataMap['compute/guestOS/name']} + /> + </GridItem> + <GridItem colSpan={2} lastColInRow> + <Input + data-test-id="guestOS-tools" + type="textarea" + label={i18n('Guest OS Tools:')} + onChange={tools => + onQDataChanged({ 'compute/guestOS/tools': tools }) + } + isValid={ + qgenericFieldInfo['compute/guestOS/tools'].isValid + } + errorText={ + qgenericFieldInfo['compute/guestOS/tools'].errorText + } + value={dataMap['compute/guestOS/tools']} + /> + </GridItem> + </GridSection> + </div> + ); }; export default GuestOs; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/NumberOfVms.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/NumberOfVms.jsx index 967c6f7aef..5451354502 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/NumberOfVms.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/NumberOfVms.jsx @@ -20,38 +20,77 @@ import Input from 'nfvo-components/input/validation/Input.jsx'; import GridSection from 'nfvo-components/grid/GridSection.jsx'; import GridItem from 'nfvo-components/grid/GridItem.jsx'; - -const NumberOfVms = ({qgenericFieldInfo, dataMap, onQDataChanged, qValidateData, customValidations}) => { - return( - <GridSection titleClassName='software-product-compute-number-of-vms' title={i18n('NUMBER OF VMs')}> - <GridItem> - <Input - data-test-id='numOfVMs-minimum' - type='number' - label={i18n('Minimum')} - onChange={(tools) => { onQDataChanged({'compute/numOfVMs/minimum' : tools}, customValidations); - qValidateData({'compute/numOfVMs/maximum' : dataMap['compute/numOfVMs/maximum']}, customValidations); } } - isValid={qgenericFieldInfo['compute/numOfVMs/minimum'].isValid} - errorText={qgenericFieldInfo['compute/numOfVMs/minimum'].errorText} - value={dataMap['compute/numOfVMs/minimum']} /> - </GridItem> - <GridItem> - <Input - data-test-id='numOfVMs-maximum' - type='number' - label={i18n('Maximum')} - onChange={(tools) => { onQDataChanged({'compute/numOfVMs/maximum' : tools}, customValidations); - qValidateData({'compute/numOfVMs/minimum' : dataMap['compute/numOfVMs/minimum']}, customValidations); } } - isValid={qgenericFieldInfo['compute/numOfVMs/maximum'].isValid} - errorText={qgenericFieldInfo['compute/numOfVMs/maximum'].errorText} - value={dataMap['compute/numOfVMs/maximum']} /> - </GridItem> - </GridSection> - ); +const NumberOfVms = ({ + qgenericFieldInfo, + dataMap, + onQDataChanged, + qValidateData, + customValidations +}) => { + return ( + <GridSection + titleClassName="software-product-compute-number-of-vms" + title={i18n('NUMBER OF VMs')}> + <GridItem> + <Input + data-test-id="numOfVMs-minimum" + type="number" + label={i18n('Minimum')} + onChange={tools => { + onQDataChanged( + { 'compute/numOfVMs/minimum': tools }, + customValidations + ); + qValidateData( + { + 'compute/numOfVMs/maximum': + dataMap['compute/numOfVMs/maximum'] + }, + customValidations + ); + }} + isValid={ + qgenericFieldInfo['compute/numOfVMs/minimum'].isValid + } + errorText={ + qgenericFieldInfo['compute/numOfVMs/minimum'].errorText + } + value={dataMap['compute/numOfVMs/minimum']} + /> + </GridItem> + <GridItem> + <Input + data-test-id="numOfVMs-maximum" + type="number" + label={i18n('Maximum')} + onChange={tools => { + onQDataChanged( + { 'compute/numOfVMs/maximum': tools }, + customValidations + ); + qValidateData( + { + 'compute/numOfVMs/minimum': + dataMap['compute/numOfVMs/minimum'] + }, + customValidations + ); + }} + isValid={ + qgenericFieldInfo['compute/numOfVMs/maximum'].isValid + } + errorText={ + qgenericFieldInfo['compute/numOfVMs/maximum'].errorText + } + value={dataMap['compute/numOfVMs/maximum']} + /> + </GridItem> + </GridSection> + ); }; NumberOfVms.propTypes = { - minNumberOfVMsSelectedByUser: PropTypes.number + minNumberOfVMsSelectedByUser: PropTypes.number }; export default NumberOfVms; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorConstants.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorConstants.js index 41728eefb0..58c27c6bba 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorConstants.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorConstants.js @@ -19,14 +19,14 @@ import keyMirror from 'nfvo-utils/KeyMirror.js'; export const COMPUTE_FLAVOR_FORM = 'COMPUTE_FLAVOR_FORM'; export const actionTypes = keyMirror({ - ADD_COMPUTE: null, - COMPUTE_FLAVORS_LIST_LOADED: null, - COMPUTE_LIST_EDIT: null, - EDIT_COMPUTE_FLAVOR: null, - DELETE_COMPUTE: null, - CONFIRM_DELETE_COMPUTE: null, - computeEditor: { - LOAD_EDITOR_DATA: null, - CLEAR_DATA: null - } + ADD_COMPUTE: null, + COMPUTE_FLAVORS_LIST_LOADED: null, + COMPUTE_LIST_EDIT: null, + EDIT_COMPUTE_FLAVOR: null, + DELETE_COMPUTE: null, + CONFIRM_DELETE_COMPUTE: null, + computeEditor: { + LOAD_EDITOR_DATA: null, + CLEAR_DATA: null + } }); diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorEditor.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorEditor.js index a3ba5fbc4a..06f9e8fd19 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorEditor.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorEditor.js @@ -13,49 +13,78 @@ * or implied. See the License for the specific language governing * permissions and limitations under the License. */ -import {connect} from 'react-redux'; +import { connect } from 'react-redux'; import ComputeFlavorEditorView from './ComputeFlavorEditorView.jsx'; -import {COMPUTE_FLAVOR_FORM} from './ComputeFlavorConstants.js'; +import { COMPUTE_FLAVOR_FORM } from './ComputeFlavorConstants.js'; import ComputeFlavorActionHelper from 'sdc-app/onboarding/softwareProduct/components/compute/ComputeFlavorActionHelper.js'; import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js'; -import {COMPONENTS_COMPUTE_QUESTIONNAIRE} from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js'; -import {onboardingMethod} from 'sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js'; +import { COMPONENTS_COMPUTE_QUESTIONNAIRE } from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js'; +import { onboardingMethod } from 'sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js'; export const mapStateToProps = ({ - softwareProduct: { - softwareProductEditor, - softwareProductComponents: {computeFlavor: {computeEditor = {}}} - }, - currentScreen: { - props: {isReadOnlyMode} - } + softwareProduct: { + softwareProductEditor, + softwareProductComponents: { computeFlavor: { computeEditor = {} } } + }, + currentScreen: { props: { isReadOnlyMode } } }) => { - const {data: currentSoftwareProduct = {}} = softwareProductEditor; - let {data , qdata, qgenericFieldInfo, dataMap, genericFieldInfo, formReady} = computeEditor; - let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo); + const { data: currentSoftwareProduct = {} } = softwareProductEditor; + let { + data, + qdata, + qgenericFieldInfo, + dataMap, + genericFieldInfo, + formReady + } = computeEditor; + let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo); - return { - data, - qdata, - qgenericFieldInfo, - dataMap, - genericFieldInfo, - isReadOnlyMode, - isFormValid, - formReady, - isManual: currentSoftwareProduct.onboardingMethod === onboardingMethod.MANUAL - }; + return { + data, + qdata, + qgenericFieldInfo, + dataMap, + genericFieldInfo, + isReadOnlyMode, + isFormValid, + formReady, + isManual: + currentSoftwareProduct.onboardingMethod === onboardingMethod.MANUAL + }; }; - -const mapActionsToProps = (dispatch, {softwareProductId, componentId, version}) => { - return { - onDataChanged: deltaData => ValidationHelper.dataChanged(dispatch, {deltaData, formName: COMPUTE_FLAVOR_FORM}), - onQDataChanged: deltaData => ValidationHelper.qDataChanged(dispatch, {deltaData, qName: COMPONENTS_COMPUTE_QUESTIONNAIRE}), - onCancel: () => ComputeFlavorActionHelper.closeComputeEditor(dispatch), - onSubmit: ({data, qdata}) => ComputeFlavorActionHelper.saveComputeDataAndQuestionnaire(dispatch, {softwareProductId, componentId, data, qdata, version}), - onValidateForm: () => ValidationHelper.validateForm(dispatch, COMPUTE_FLAVOR_FORM) - }; +const mapActionsToProps = ( + dispatch, + { softwareProductId, componentId, version } +) => { + return { + onDataChanged: deltaData => + ValidationHelper.dataChanged(dispatch, { + deltaData, + formName: COMPUTE_FLAVOR_FORM + }), + onQDataChanged: deltaData => + ValidationHelper.qDataChanged(dispatch, { + deltaData, + qName: COMPONENTS_COMPUTE_QUESTIONNAIRE + }), + onCancel: () => ComputeFlavorActionHelper.closeComputeEditor(dispatch), + onSubmit: ({ data, qdata }) => + ComputeFlavorActionHelper.saveComputeDataAndQuestionnaire( + dispatch, + { + softwareProductId, + componentId, + data, + qdata, + version + } + ), + onValidateForm: () => + ValidationHelper.validateForm(dispatch, COMPUTE_FLAVOR_FORM) + }; }; -export default connect(mapStateToProps, mapActionsToProps)(ComputeFlavorEditorView); +export default connect(mapStateToProps, mapActionsToProps)( + ComputeFlavorEditorView +); diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorEditorView.jsx index e542ce1fd1..840f722bb2 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorEditorView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorEditorView.jsx @@ -23,75 +23,112 @@ import VmSizing from './VmSizing.jsx'; import i18n from 'nfvo-utils/i18n/i18n.js'; class ComputeEditorView extends React.Component { + static propTypes = { + data: PropTypes.object, + qdata: PropTypes.object, + qschema: PropTypes.object, + isReadOnlyMode: PropTypes.bool, + isManual: PropTypes.bool, + onDataChanged: PropTypes.func.isRequired, + onQDataChanged: PropTypes.func.isRequired, + onSubmit: PropTypes.func.isRequired, + onCancel: PropTypes.func.isRequired + }; - static propTypes = { - data: PropTypes.object, - qdata: PropTypes.object, - qschema: PropTypes.object, - isReadOnlyMode: PropTypes.bool, - isManual: PropTypes.bool, - onDataChanged: PropTypes.func.isRequired, - onQDataChanged: PropTypes.func.isRequired, - onSubmit: PropTypes.func.isRequired, - onCancel: PropTypes.func.isRequired - }; + render() { + let { + data = {}, + qdata = {}, + qgenericFieldInfo, + dataMap, + genericFieldInfo, + isReadOnlyMode, + isManual, + isFormValid, + formReady, + onDataChanged, + onQDataChanged, + onSubmit, + onCancel, + onValidateForm + } = this.props; + const { id, name, description } = data; + const edittingComputeMode = Boolean(id); - render() { - let {data = {}, qdata = {}, qgenericFieldInfo, dataMap, genericFieldInfo, isReadOnlyMode, isManual, isFormValid, formReady, - onDataChanged, onQDataChanged, onSubmit, onCancel, onValidateForm} = this.props; - const {id, name, description} = data; - const edittingComputeMode = Boolean(id); + return ( + <div className="vsp-component-computeFlavor-view"> + {genericFieldInfo && ( + <Form + ref={form => { + this.form = form; + }} + hasButtons={true} + onSubmit={() => onSubmit({ data, qdata })} + onReset={() => onCancel()} + labledButtons={true} + isReadOnlyMode={isReadOnlyMode} + isValid={isFormValid} + formReady={formReady} + onValidateForm={() => onValidateForm()} + className="component-questionnaire-validation-form" + submitButtonText={ + edittingComputeMode ? i18n('Save') : i18n('Create') + }> + <GridSection hasLostColSet> + <GridItem + colSpan={edittingComputeMode ? 2 : 4} + lastColInRow={!edittingComputeMode}> + <Input + disabled={!isManual} + data-test-id="name" + type="text" + label={i18n('Flavor Name')} + value={name} + onChange={name => onDataChanged({ name })} + isValid={genericFieldInfo['name'].isValid} + errorText={ + genericFieldInfo['name'].errorText + } + isRequired + /> + </GridItem> + <GridItem + colSpan={edittingComputeMode ? 2 : 4} + lastColInRow> + <Input + data-test-id="description" + type="textarea" + label={i18n('Description')} + value={description} + onChange={description => + onDataChanged({ description }) + } + isValid={ + genericFieldInfo['description'].isValid + } + errorText={ + genericFieldInfo['description'] + .errorText + } + /> + </GridItem> + </GridSection> + {edittingComputeMode && ( + <VmSizing + qgenericFieldInfo={qgenericFieldInfo} + dataMap={dataMap} + onQDataChanged={onQDataChanged} + /> + )} + </Form> + )} + </div> + ); + } - return ( - <div className='vsp-component-computeFlavor-view'> - {genericFieldInfo && <Form - ref={(form) => { - this.form = form; - }} - hasButtons={true} - onSubmit={ () => onSubmit({data, qdata}) } - onReset={ () => onCancel() } - labledButtons={true} - isReadOnlyMode={isReadOnlyMode} - isValid={isFormValid} - formReady={formReady} - onValidateForm={() => onValidateForm() } - className='component-questionnaire-validation-form' - submitButtonText={edittingComputeMode ? i18n('Save') : i18n('Create')}> - <GridSection hasLostColSet> - <GridItem colSpan={edittingComputeMode ? 2 : 4} lastColInRow={!edittingComputeMode}> - <Input - disabled={!isManual} - data-test-id='name' - type='text' - label={i18n('Flavor Name')} - value={name} - onChange={name => onDataChanged({name})} - isValid={genericFieldInfo['name'].isValid} - errorText={genericFieldInfo['name'].errorText} - isRequired/> - </GridItem> - <GridItem colSpan={edittingComputeMode ? 2 : 4} lastColInRow> - <Input - data-test-id='description' - type='textarea' - label={i18n('Description')} - value={description} - onChange={description => onDataChanged({description})} - isValid={genericFieldInfo['description'].isValid} - errorText={genericFieldInfo['description'].errorText}/> - </GridItem> - </GridSection> - {edittingComputeMode && <VmSizing qgenericFieldInfo={qgenericFieldInfo} dataMap={dataMap} onQDataChanged={onQDataChanged}/>} - </Form> - } - </div> - ); - } - - save(){ - return this.form.handleFormSubmit(new Event('dummy')); - } + save() { + return this.form.handleFormSubmit(new Event('dummy')); + } } export default ComputeEditorView; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorListReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorListReducer.js index 6c02f36c90..b691084cc3 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorListReducer.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorListReducer.js @@ -14,20 +14,26 @@ * permissions and limitations under the License. */ -import {actionTypes} from './ComputeFlavorConstants.js'; +import { actionTypes } from './ComputeFlavorConstants.js'; export default (state = [], action) => { - switch (action.type) { - case actionTypes.COMPUTE_FLAVORS_LIST_LOADED: - return [...action.response.results]; - case actionTypes.ADD_COMPUTE: - return [...state, action.compute]; - case actionTypes.COMPUTE_LIST_EDIT: - const indexForEdit = state.findIndex(({id}) => id === action.compute.id); - return [...state.slice(0, indexForEdit), action.compute, ...state.slice(indexForEdit + 1)]; - case actionTypes.DELETE_COMPUTE: - return state.filter(({id}) => id !== action.computeId); - default: - return state; - } -};
\ No newline at end of file + switch (action.type) { + case actionTypes.COMPUTE_FLAVORS_LIST_LOADED: + return [...action.response.results]; + case actionTypes.ADD_COMPUTE: + return [...state, action.compute]; + case actionTypes.COMPUTE_LIST_EDIT: + const indexForEdit = state.findIndex( + ({ id }) => id === action.compute.id + ); + return [ + ...state.slice(0, indexForEdit), + action.compute, + ...state.slice(indexForEdit + 1) + ]; + case actionTypes.DELETE_COMPUTE: + return state.filter(({ id }) => id !== action.computeId); + default: + return state; + } +}; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorReducer.js index a476f85a19..00d76eff23 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorReducer.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorReducer.js @@ -13,33 +13,32 @@ * or implied. See the License for the specific language governing * permissions and limitations under the License. */ -import {actionTypes, COMPUTE_FLAVOR_FORM} from './ComputeFlavorConstants.js'; +import { actionTypes, COMPUTE_FLAVOR_FORM } from './ComputeFlavorConstants.js'; export default (state = {}, action) => { - switch (action.type) { - case actionTypes.computeEditor.LOAD_EDITOR_DATA: - return { - ...state, - formName: COMPUTE_FLAVOR_FORM, - data: action.compute, - formReady: null, - genericFieldInfo: { - name: { - isValid: true, - errorText: '', - validations: [{type: 'required', data: true }] - }, - description: { - isValid: true, - errorText: '', - validations: [{type: 'maxLength', data: 300}] - } - } - }; - case actionTypes.computeEditor.CLEAR_DATA: - return {}; - default: - return state; - } + switch (action.type) { + case actionTypes.computeEditor.LOAD_EDITOR_DATA: + return { + ...state, + formName: COMPUTE_FLAVOR_FORM, + data: action.compute, + formReady: null, + genericFieldInfo: { + name: { + isValid: true, + errorText: '', + validations: [{ type: 'required', data: true }] + }, + description: { + isValid: true, + errorText: '', + validations: [{ type: 'maxLength', data: 300 }] + } + } + }; + case actionTypes.computeEditor.CLEAR_DATA: + return {}; + default: + return state; + } }; - diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/VmSizing.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/VmSizing.jsx index 54f22e0760..2f40706736 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/VmSizing.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/VmSizing.jsx @@ -18,89 +18,146 @@ import i18n from 'nfvo-utils/i18n/i18n.js'; import Input from 'nfvo-components/input/validation/Input.jsx'; import GridSection from 'nfvo-components/grid/GridSection.jsx'; import GridItem from 'nfvo-components/grid/GridItem.jsx'; -const VmSizing = ({qgenericFieldInfo, dataMap, onQDataChanged}) => { - return( - <GridSection title={i18n('VM Sizing')} hasLastColSet> - <GridItem> - <Input - data-test-id='numOfCPUs' - type='number' - label={i18n('Number of CPUs')} - onChange={(tools) => onQDataChanged({'vmSizing/numOfCPUs' : tools})} - isValid={qgenericFieldInfo['vmSizing/numOfCPUs'].isValid} - errorText={qgenericFieldInfo['vmSizing/numOfCPUs'].errorText} - value={dataMap['vmSizing/numOfCPUs']} /> - </GridItem> - <GridItem> - <Input - data-test-id='fileSystemSizeGB' - type='number' - label={i18n('File System Size (GB)')} - onChange={(tools) => onQDataChanged({'vmSizing/fileSystemSizeGB' : tools})} - isValid={qgenericFieldInfo['vmSizing/fileSystemSizeGB'].isValid} - errorText={qgenericFieldInfo['vmSizing/fileSystemSizeGB'].errorText} - value={dataMap['vmSizing/fileSystemSizeGB']} /> - </GridItem> - <GridItem> - <Input - data-test-id='persistentStorageVolumeSize' - type='number' - label={i18n('Persistent Storage/Volume Size (GB)')} - onChange={(tools) => onQDataChanged({'vmSizing/persistentStorageVolumeSize' : tools})} - isValid={qgenericFieldInfo['vmSizing/persistentStorageVolumeSize'].isValid} - errorText={qgenericFieldInfo['vmSizing/persistentStorageVolumeSize'].errorText} - value={dataMap['vmSizing/persistentStorageVolumeSize']} /> - </GridItem> - <GridItem lastColInRow> - <Input - data-test-id='ioOperationsPerSec' - type='number' - label={i18n('I/O Operations (per second)')} - onChange={(tools) => onQDataChanged({'vmSizing/ioOperationsPerSec' : tools})} - isValid={qgenericFieldInfo['vmSizing/ioOperationsPerSec'].isValid} - errorText={qgenericFieldInfo['vmSizing/ioOperationsPerSec'].errorText} - value={dataMap['vmSizing/ioOperationsPerSec']} /> - </GridItem> - <GridItem> - <Input - data-test-id='numOfVMs-cpuOverSubscriptionRatio' - label={i18n('CPU Oversubscription Ratio')} - type='select' - groupClassName='bootstrap-input-options' - className='input-options-select' - isValid={qgenericFieldInfo['vmSizing/cpuOverSubscriptionRatio'].isValid} - errorText={qgenericFieldInfo['vmSizing/cpuOverSubscriptionRatio'].errorText} - value={dataMap['vmSizing/cpuOverSubscriptionRatio']} - onChange={(e) => { - const selectedIndex = e.target.selectedIndex; - const val = e.target.options[selectedIndex].value; - onQDataChanged({'vmSizing/cpuOverSubscriptionRatio' : val});} - }> - <option key='placeholder' value=''>{i18n('Select...')}</option> - {qgenericFieldInfo['vmSizing/cpuOverSubscriptionRatio'].enum.map(cpuOSR => <option value={cpuOSR.enum} key={cpuOSR.enum}>{cpuOSR.title}</option>)} - </Input> - </GridItem> - <GridItem> - <Input - data-test-id='numOfVMs-memoryRAM' - type='select' - label={i18n('Memory - RAM')} - groupClassName='bootstrap-input-options' - className='input-options-select' - isValid={qgenericFieldInfo['vmSizing/memoryRAM'].isValid} - errorText={qgenericFieldInfo['vmSizing/memoryRAM'].errorText} - value={dataMap['vmSizing/memoryRAM']} - onChange={(e) => { - const selectedIndex = e.target.selectedIndex; - const val = e.target.options[selectedIndex].value; - onQDataChanged({'vmSizing/memoryRAM' : val});} - }> - <option key='placeholder' value=''>{i18n('Select...')}</option> - {qgenericFieldInfo['vmSizing/memoryRAM'].enum.map(mRAM => <option value={mRAM.enum} key={mRAM.enum}>{mRAM.title}</option>)} - </Input> - </GridItem> - </GridSection> - ); +const VmSizing = ({ qgenericFieldInfo, dataMap, onQDataChanged }) => { + return ( + <GridSection title={i18n('VM Sizing')} hasLastColSet> + <GridItem> + <Input + data-test-id="numOfCPUs" + type="number" + label={i18n('Number of CPUs')} + onChange={tools => + onQDataChanged({ 'vmSizing/numOfCPUs': tools }) + } + isValid={qgenericFieldInfo['vmSizing/numOfCPUs'].isValid} + errorText={ + qgenericFieldInfo['vmSizing/numOfCPUs'].errorText + } + value={dataMap['vmSizing/numOfCPUs']} + /> + </GridItem> + <GridItem> + <Input + data-test-id="fileSystemSizeGB" + type="number" + label={i18n('File System Size (GB)')} + onChange={tools => + onQDataChanged({ 'vmSizing/fileSystemSizeGB': tools }) + } + isValid={ + qgenericFieldInfo['vmSizing/fileSystemSizeGB'].isValid + } + errorText={ + qgenericFieldInfo['vmSizing/fileSystemSizeGB'].errorText + } + value={dataMap['vmSizing/fileSystemSizeGB']} + /> + </GridItem> + <GridItem> + <Input + data-test-id="persistentStorageVolumeSize" + type="number" + label={i18n('Persistent Storage/Volume Size (GB)')} + onChange={tools => + onQDataChanged({ + 'vmSizing/persistentStorageVolumeSize': tools + }) + } + isValid={ + qgenericFieldInfo[ + 'vmSizing/persistentStorageVolumeSize' + ].isValid + } + errorText={ + qgenericFieldInfo[ + 'vmSizing/persistentStorageVolumeSize' + ].errorText + } + value={dataMap['vmSizing/persistentStorageVolumeSize']} + /> + </GridItem> + <GridItem lastColInRow> + <Input + data-test-id="ioOperationsPerSec" + type="number" + label={i18n('I/O Operations (per second)')} + onChange={tools => + onQDataChanged({ 'vmSizing/ioOperationsPerSec': tools }) + } + isValid={ + qgenericFieldInfo['vmSizing/ioOperationsPerSec'].isValid + } + errorText={ + qgenericFieldInfo['vmSizing/ioOperationsPerSec'] + .errorText + } + value={dataMap['vmSizing/ioOperationsPerSec']} + /> + </GridItem> + <GridItem> + <Input + data-test-id="numOfVMs-cpuOverSubscriptionRatio" + label={i18n('CPU Oversubscription Ratio')} + type="select" + groupClassName="bootstrap-input-options" + className="input-options-select" + isValid={ + qgenericFieldInfo['vmSizing/cpuOverSubscriptionRatio'] + .isValid + } + errorText={ + qgenericFieldInfo['vmSizing/cpuOverSubscriptionRatio'] + .errorText + } + value={dataMap['vmSizing/cpuOverSubscriptionRatio']} + onChange={e => { + const selectedIndex = e.target.selectedIndex; + const val = e.target.options[selectedIndex].value; + onQDataChanged({ + 'vmSizing/cpuOverSubscriptionRatio': val + }); + }}> + <option key="placeholder" value=""> + {i18n('Select...')} + </option> + {qgenericFieldInfo[ + 'vmSizing/cpuOverSubscriptionRatio' + ].enum.map(cpuOSR => ( + <option value={cpuOSR.enum} key={cpuOSR.enum}> + {cpuOSR.title} + </option> + ))} + </Input> + </GridItem> + <GridItem> + <Input + data-test-id="numOfVMs-memoryRAM" + type="select" + label={i18n('Memory - RAM')} + groupClassName="bootstrap-input-options" + className="input-options-select" + isValid={qgenericFieldInfo['vmSizing/memoryRAM'].isValid} + errorText={ + qgenericFieldInfo['vmSizing/memoryRAM'].errorText + } + value={dataMap['vmSizing/memoryRAM']} + onChange={e => { + const selectedIndex = e.target.selectedIndex; + const val = e.target.options[selectedIndex].value; + onQDataChanged({ 'vmSizing/memoryRAM': val }); + }}> + <option key="placeholder" value=""> + {i18n('Select...')} + </option> + {qgenericFieldInfo['vmSizing/memoryRAM'].enum.map(mRAM => ( + <option value={mRAM.enum} key={mRAM.enum}> + {mRAM.title} + </option> + ))} + </Input> + </GridItem> + </GridSection> + ); }; export default VmSizing; |