openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/editor/SoftwareProductDeploymentEditorView.jsx

   1 import React from 'react';
   2 import i18n from 'nfvo-utils/i18n/i18n.js';
   3 import Input from 'nfvo-components/input/validation/Input.jsx';
   4 import Form from 'nfvo-components/input/validation/Form.jsx';
   5 import GridSection from 'nfvo-components/grid/GridSection.jsx';
   6 import GridItem from 'nfvo-components/grid/GridItem.jsx';
   7 import SelectInput from 'nfvo-components/input/SelectInput.jsx';
   8 import SelectActionTable from 'nfvo-components/table/SelectActionTable.jsx';
   9 import SelectActionTableRow from 'nfvo-components/table/SelectActionTableRow.jsx';
  10 import SelectActionTableCell from 'nfvo-components/table/SelectActionTableCell.jsx';
  11 import Validator from 'nfvo-utils/Validator.js';
  12
  13 export default class SoftwareProductDeploymentEditorView extends React.Component {
  14         render() {
  15                 let {data, isEdit, onClose, onDataChanged, isReadOnlyMode, selectedFeatureGroupsList, componentsList, computesList, genericFieldInfo} = this.props;
  16                 let {model, description, featureGroupId, componentComputeAssociations = []} = data;
  17                 let featureGroupsExist = selectedFeatureGroupsList.length > 0;
  18                 return (
  19                         <div>
  20                                 {genericFieldInfo && <Form
  21                                         ref='validationForm'
  22                                         hasButtons={true}
  23                                         labledButtons={true}
  24                                         isReadOnlyMode={isReadOnlyMode}
  25                                         onSubmit={ () => this.submit() }
  26                                         submitButtonText={isEdit ? i18n('Save') : i18n('Create')}
  27                                         onReset={ () => onClose() }
  28                                         onValidateForm={() => this.validate() }
  29                                         isValid={this.props.isFormValid}
  30                                         formReady={this.props.formReady}
  31                                         className='vsp-deployment-editor'>
  32                                         <GridSection>
  33                                                 <GridItem colSpan={1}>
  34                                                         <Input
  35                                                                 onChange={model => onDataChanged({model}, {model: model => this.validateName(model)})}
  36                                                                 label={i18n('Model')}
  37                                                                 value={model}
  38                                                                 data-test-id='deployment-model'
  39                                                                 isValid={genericFieldInfo.model.isValid}
  40                                                                 errorText={genericFieldInfo.model.errorText}
  41                                                                 isRequired={true}
  42                                                                 type='text'/>
  43                                                 </GridItem>
  44                                                 <GridItem colSpan={3}>
  45                                                         <Input
  46                                                                 onChange={description => onDataChanged({description})}
  47                                                                 label={i18n('Description')}
  48                                                                 value={description}
  49                                                                 data-test-id='deployment-description'
  50                                                                 isValid={genericFieldInfo.description.isValid}
  51                                                                 errorText={genericFieldInfo.description.errorText}
  52                                                                 type='text'/>
  53                                                 </GridItem>
  54                                         </GridSection>
  55                                         <GridSection className={`deployment-feature-groups-section${!featureGroupsExist ? ' no-feature-groups' : ''}`} title={i18n('License Details')}>
  56                                                 <GridItem colSpan={1}>
  57                                                         <SelectInput
  58                                                                 data-test-id='deployment-feature-groups'
  59                                                                 label={i18n('Feature Group')}
  60                                                                 value={featureGroupId}
  61                                                                 onChange={featureGroup => onDataChanged({featureGroupId: featureGroup ? featureGroup.value : null})}
  62                                                                 type='select'
  63                                                                 clearable={true}
  64                                                                 disabled={isReadOnlyMode || !featureGroupsExist}
  65                                                                 className='field-section'
  66                                                                 options={selectedFeatureGroupsList}/>
  67                                                 </GridItem>
  68                                         </GridSection>
  69                                         {!featureGroupsExist && <GridSection className='deployment-feature-group-warning-section'>
  70                                                 <GridItem colSpan={3}>
  71                                                         <span>{i18n('Please assign Feature Groups in VSP General')}</span>
  72                                                 </GridItem>
  73                                         </GridSection>}
  74                                         <GridSection title={i18n('Assign VFCs and Compute Flavors')} className='vfc-table'>
  75                                                 <GridItem colSpan={4}>
  76                                                         <SelectActionTable
  77                                                                 columns={['Virtual Function Components', 'Compute Flavors']}
  78                                                                 numOfIcons={0}>
  79                                                                 {componentComputeAssociations.map( (association, index) =>
  80                                                                         <SelectActionTableRow key={association.componentId}>
  81                                                                                 <SelectActionTableCell
  82                                                                                         options={
  83                                                                                                 componentsList
  84                                                                                                 .map(component => ({value: component.id, label: component.displayName}) )
  85                                                                                         }
  86                                                                                         selected={association.componentId}
  87                                                                                         onChange={componentId => {
  88                                                                                                 let newAssociations = [...componentComputeAssociations];
  89                                                                                                 newAssociations[index] = {...newAssociations[index], componentId};
  90                                                                                                 onDataChanged({componentComputeAssociations: newAssociations});
  91                                                                                         }}
  92                                                                                         disabled={true}/>
  93                                                                                 <SelectActionTableCell
  94                                                                                         options={
  95                                                                                                 computesList
  96                                                                                                 .filter(compute => compute.componentId === association.componentId)
  97                                                                                                 .map(compute => ({value: compute.computeFlavorId, label: compute.name}) )
  98                                                                                         }
  99                                                                                         selected={association.computeFlavorId}
 100                                                                                         onChange={computeFlavorId => {
 101                                                                                                 let newAssociations = [...componentComputeAssociations];
 102                                                                                                 newAssociations[index] = {...newAssociations[index], computeFlavorId};
 103                                                                                                 onDataChanged({componentComputeAssociations: newAssociations});
 104                                                                                         }}
 105                                                                                         disabled={isReadOnlyMode}/>
 106                                                                         </SelectActionTableRow>
 107                                                                 )}
 108                                                         </SelectActionTable>
 109                                                 </GridItem>
 110                                         </GridSection>
 111                                 </Form>}
 112                         </div>
 113                 );
 114         }
 115
 116         validateName(value) {
 117                 const {data: {id = ''}, DFNames} = this.props;
 118                 const isExists = Validator.isItemNameAlreadyExistsInList({itemId: id, itemName: value, list: DFNames});
 119
 120                 return !isExists ?  {isValid: true, errorText: ''} :
 121                         {isValid: false, errorText: i18n('Deployment flavor by the name \'' + value + '\' already exists. Deployment flavor name must be unique')};
 122         }
 123
 124         submit(){
 125                 let {isEdit, onCreate, onEdit, onClose, data} = this.props;
 126                 if (isEdit) {
 127                         onEdit(data);
 128                 } else {
 129                         onCreate(data);
 130                 }
 131                 onClose();
 132         }
 133
 134         validate() {
 135                 this.props.onValidateForm();
 136         }
 137 }