diff options
Diffstat (limited to 'openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/editor/SoftwareProductDeploymentEditorView.jsx')
-rw-r--r-- | openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/editor/SoftwareProductDeploymentEditorView.jsx | 351 |
1 files changed, 232 insertions, 119 deletions
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/editor/SoftwareProductDeploymentEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/editor/SoftwareProductDeploymentEditorView.jsx index 7c9ae438d9..e44d2bd966 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/editor/SoftwareProductDeploymentEditorView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/editor/SoftwareProductDeploymentEditorView.jsx @@ -11,127 +11,240 @@ import SelectActionTableCell from 'nfvo-components/table/SelectActionTableCell.j import Validator from 'nfvo-utils/Validator.js'; export default class SoftwareProductDeploymentEditorView extends React.Component { - render() { - let {data, isEdit, onClose, onDataChanged, isReadOnlyMode, selectedFeatureGroupsList, componentsList, computesList, genericFieldInfo} = this.props; - let {model, description, featureGroupId, componentComputeAssociations = []} = data; - let featureGroupsExist = selectedFeatureGroupsList.length > 0; - return ( - <div> - {genericFieldInfo && <Form - ref='validationForm' - hasButtons={true} - labledButtons={true} - isReadOnlyMode={isReadOnlyMode} - onSubmit={ () => this.submit() } - submitButtonText={isEdit ? i18n('Save') : i18n('Create')} - onReset={ () => onClose() } - onValidateForm={() => this.validate() } - isValid={this.props.isFormValid} - formReady={this.props.formReady} - className='vsp-deployment-editor'> - <GridSection hasLastColSet> - <GridItem colSpan={1}> - <Input - onChange={model => onDataChanged({model}, {model: model => this.validateName(model)})} - label={i18n('Model')} - value={model} - data-test-id='deployment-model' - isValid={genericFieldInfo.model.isValid} - errorText={genericFieldInfo.model.errorText} - isRequired={true} - type='text'/> - </GridItem> - <GridItem colSpan={3} lastColInRow> - <Input - onChange={description => onDataChanged({description})} - label={i18n('Description')} - value={description} - data-test-id='deployment-description' - isValid={genericFieldInfo.description.isValid} - errorText={genericFieldInfo.description.errorText} - type='text'/> - </GridItem> - </GridSection> - <GridSection className={`deployment-feature-groups-section${!featureGroupsExist ? ' no-feature-groups' : ''}`} title={i18n('License Details')} hasLastColSet> - <GridItem colSpan={1}> - <SelectInput - data-test-id='deployment-feature-groups' - label={i18n('Feature Group')} - value={featureGroupId} - onChange={featureGroup => onDataChanged({featureGroupId: featureGroup ? featureGroup.value : null})} - type='select' - clearable={true} - disabled={isReadOnlyMode || !featureGroupsExist} - className='field-section' - options={selectedFeatureGroupsList}/> - </GridItem> - </GridSection> - {!featureGroupsExist && <GridSection className='deployment-feature-group-warning-section'> - <GridItem colSpan={3}> - <span>{i18n('Please assign Feature Groups in VSP General')}</span> - </GridItem> - </GridSection>} - <GridSection title={i18n('Assign VFCs and Compute Flavors')} className='vfc-table' hasLastColSet> - <GridItem colSpan={4} lastColInRow> - <SelectActionTable - columns={['Virtual Function Components', 'Compute Flavors']} - numOfIcons={0}> - {componentComputeAssociations.map( (association, index) => - <SelectActionTableRow key={association.componentId}> - <SelectActionTableCell - options={ - componentsList - .map(component => ({value: component.id, label: component.displayName}) ) - } - selected={association.componentId} - onChange={componentId => { - let newAssociations = [...componentComputeAssociations]; - newAssociations[index] = {...newAssociations[index], componentId}; - onDataChanged({componentComputeAssociations: newAssociations}); - }} - disabled={true}/> - <SelectActionTableCell - options={ - computesList - .filter(compute => compute.componentId === association.componentId) - .map(compute => ({value: compute.computeFlavorId, label: compute.name}) ) - } - selected={association.computeFlavorId} - onChange={computeFlavorId => { - let newAssociations = [...componentComputeAssociations]; - newAssociations[index] = {...newAssociations[index], computeFlavorId}; - onDataChanged({componentComputeAssociations: newAssociations}); - }} - disabled={isReadOnlyMode}/> - </SelectActionTableRow> - )} - </SelectActionTable> - </GridItem> - </GridSection> - </Form>} - </div> - ); - } + render() { + let { + data, + isEdit, + onClose, + onDataChanged, + isReadOnlyMode, + selectedFeatureGroupsList, + componentsList, + computesList, + genericFieldInfo + } = this.props; + let { + model, + description, + featureGroupId, + componentComputeAssociations = [] + } = data; + let featureGroupsExist = selectedFeatureGroupsList.length > 0; + return ( + <div> + {genericFieldInfo && ( + <Form + ref="validationForm" + hasButtons={true} + labledButtons={true} + isReadOnlyMode={isReadOnlyMode} + onSubmit={() => this.submit()} + submitButtonText={ + isEdit ? i18n('Save') : i18n('Create') + } + onReset={() => onClose()} + onValidateForm={() => this.validate()} + isValid={this.props.isFormValid} + formReady={this.props.formReady} + className="vsp-deployment-editor"> + <GridSection hasLastColSet> + <GridItem colSpan={1}> + <Input + onChange={model => + onDataChanged( + { model }, + { + model: model => + this.validateName(model) + } + ) + } + label={i18n('Model')} + value={model} + data-test-id="deployment-model" + isValid={genericFieldInfo.model.isValid} + errorText={genericFieldInfo.model.errorText} + isRequired={true} + type="text" + /> + </GridItem> + <GridItem colSpan={3} lastColInRow> + <Input + onChange={description => + onDataChanged({ description }) + } + label={i18n('Description')} + value={description} + data-test-id="deployment-description" + isValid={ + genericFieldInfo.description.isValid + } + errorText={ + genericFieldInfo.description.errorText + } + type="text" + /> + </GridItem> + </GridSection> + <GridSection + className={`deployment-feature-groups-section${ + !featureGroupsExist ? ' no-feature-groups' : '' + }`} + title={i18n('License Details')} + hasLastColSet> + <GridItem colSpan={1}> + <SelectInput + data-test-id="deployment-feature-groups" + label={i18n('Feature Group')} + value={featureGroupId} + onChange={featureGroup => + onDataChanged({ + featureGroupId: featureGroup + ? featureGroup.value + : null + }) + } + type="select" + clearable={true} + disabled={ + isReadOnlyMode || !featureGroupsExist + } + className="field-section" + options={selectedFeatureGroupsList} + /> + </GridItem> + </GridSection> + {!featureGroupsExist && ( + <GridSection className="deployment-feature-group-warning-section"> + <GridItem colSpan={3}> + <span> + {i18n( + 'Please assign Feature Groups in VSP General' + )} + </span> + </GridItem> + </GridSection> + )} + <GridSection + title={i18n('Assign VFCs and Compute Flavors')} + className="vfc-table" + hasLastColSet> + <GridItem colSpan={4} lastColInRow> + <SelectActionTable + columns={[ + 'Virtual Function Components', + 'Compute Flavors' + ]} + numOfIcons={0}> + {componentComputeAssociations.map( + (association, index) => ( + <SelectActionTableRow + key={association.componentId}> + <SelectActionTableCell + options={componentsList.map( + component => ({ + value: component.id, + label: + component.displayName + }) + )} + selected={ + association.componentId + } + onChange={componentId => { + let newAssociations = [ + ...componentComputeAssociations + ]; + newAssociations[ + index + ] = { + ...newAssociations[ + index + ], + componentId + }; + onDataChanged({ + componentComputeAssociations: newAssociations + }); + }} + disabled={true} + /> + <SelectActionTableCell + options={computesList + .filter( + compute => + compute.componentId === + association.componentId + ) + .map(compute => ({ + value: + compute.computeFlavorId, + label: compute.name + }))} + selected={ + association.computeFlavorId + } + onChange={computeFlavorId => { + let newAssociations = [ + ...componentComputeAssociations + ]; + newAssociations[ + index + ] = { + ...newAssociations[ + index + ], + computeFlavorId + }; + onDataChanged({ + componentComputeAssociations: newAssociations + }); + }} + disabled={isReadOnlyMode} + /> + </SelectActionTableRow> + ) + )} + </SelectActionTable> + </GridItem> + </GridSection> + </Form> + )} + </div> + ); + } - validateName(value) { - const {data: {id = ''}, DFNames} = this.props; - const isExists = Validator.isItemNameAlreadyExistsInList({itemId: id, itemName: value, list: DFNames}); + validateName(value) { + const { data: { id = '' }, DFNames } = this.props; + const isExists = Validator.isItemNameAlreadyExistsInList({ + itemId: id, + itemName: value, + list: DFNames + }); - return !isExists ? {isValid: true, errorText: ''} : - {isValid: false, errorText: i18n('Deployment flavor by the name \'' + value + '\' already exists. Deployment flavor name must be unique')}; - } + return !isExists + ? { isValid: true, errorText: '' } + : { + isValid: false, + errorText: i18n( + "Deployment flavor by the name '" + + value + + "' already exists. Deployment flavor name must be unique" + ) + }; + } - submit(){ - let {isEdit, onCreate, onEdit, onClose, data} = this.props; - if (isEdit) { - onEdit(data); - } else { - onCreate(data); - } - onClose(); - } + submit() { + let { isEdit, onCreate, onEdit, onClose, data } = this.props; + if (isEdit) { + onEdit(data); + } else { + onCreate(data); + } + onClose(); + } - validate() { - this.props.onValidateForm(); - } + validate() { + this.props.onValidateForm(); + } } |