diff options
Diffstat (limited to 'openecomp-ui/src/sdc-app/onboarding/softwareProduct/details/SoftwareProductDetailsView.jsx')
-rw-r--r-- | openecomp-ui/src/sdc-app/onboarding/softwareProduct/details/SoftwareProductDetailsView.jsx | 264 |
1 files changed, 264 insertions, 0 deletions
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/details/SoftwareProductDetailsView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/details/SoftwareProductDetailsView.jsx new file mode 100644 index 0000000000..75a5797dec --- /dev/null +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/details/SoftwareProductDetailsView.jsx @@ -0,0 +1,264 @@ +import React, {Component, PropTypes} from 'react'; + +import i18n from 'nfvo-utils/i18n/i18n.js'; +import Form from 'nfvo-components/input/validation/ValidationForm.jsx'; +import ValidationInput from 'nfvo-components/input/validation/ValidationInput.jsx'; +import SoftwareProductCategoriesHelper from 'sdc-app/onboarding/softwareProduct/SoftwareProductCategoriesHelper.js'; + +class SoftwareProductDetails extends Component { + + static propTypes = { + vendorName: PropTypes.string, + currentSoftwareProduct: PropTypes.shape({ + id: PropTypes.string, + name: PropTypes.string, + description: PropTypes.string, + category: PropTypes.string, + subCategory: PropTypes.string, + vendorId: PropTypes.string, + vendorName: PropTypes.string, + licensingVersion: PropTypes.string, + licensingData: PropTypes.shape({ + licenceAgreement: PropTypes.string, + featureGroups: PropTypes.array + }) + }), + softwareProductCategories: PropTypes.array, + finalizedLicenseModelList: PropTypes.array, + licenseAgreementList: PropTypes.array, + featureGroupsList: PropTypes.array, + onSubmit: PropTypes.func.isRequired, + onDataChanged: PropTypes.func.isRequired, + onValidityChanged: PropTypes.func.isRequired, + qdata: PropTypes.object.isRequired, + qschema: PropTypes.object.isRequired, + onQDataChanged: PropTypes.func.isRequired, + onVendorParamChanged: PropTypes.func.isRequired + }; + + state = { + licensingVersionsList: [] + }; + + render() { + let {softwareProductCategories, finalizedLicenseModelList, onDataChanged, featureGroupsList, licenseAgreementList, currentSoftwareProduct} = this.props; + let {name, description, vendorId, licensingVersion, subCategory, licensingData = {}} = currentSoftwareProduct; + let licensingVersionsList = this.state.licensingVersionsList.length > 0 ? this.state.licensingVersionsList : this.refreshVendorVersionsList(vendorId); + let {qdata, qschema, onQDataChanged} = this.props; + let {isReadOnlyMode} = this.props; + + return ( + <div className='vsp-details-page'> + <Form + ref='validationForm' + className='vsp-general-tab' + hasButtons={false} + onSubmit={() => this.props.onSubmit(currentSoftwareProduct, qdata)} + onValidityChanged={(isValidityData) => this.props.onValidityChanged(isValidityData)} + isReadOnlyMode={isReadOnlyMode}> + <div className='section-title general'>{i18n('General')}</div> + <div className='vsp-general-tab-inline-section'> + <div className='vsp-general-tab-sub-section'> + <ValidationInput + label={i18n('Name')} + type='text' + value={name} + onChange={name => onDataChanged({name})} + validations={{validateName: true, maxLength: 120, required: true}} + className='field-section'/> + <ValidationInput + label={i18n('Vendor')} + type='select' + selectedEnum={vendorId} + onEnumChange={vendorId => this.onVendorParamChanged({vendorId})} + className='field-section'> + {finalizedLicenseModelList.map(lm => <option key={lm.id} value={lm.id}>{lm.vendorName}</option>)} + </ValidationInput> + <div className='input-row'> + <ValidationInput + label={i18n('Category')} + type='select' + selectedEnum={subCategory} + onEnumChange={subCategory => this.onSelectSubCategory(subCategory)} + className='field-section'> + { + softwareProductCategories.map(category => + category.subcategories && + <optgroup + key={category.name} + label={category.name}>{category.subcategories.map(sub => + <option + key={sub.uniqueId} + value={sub.uniqueId}>{`${sub.name} (${category.name})`}</option>)} + </optgroup> + ) + } + </ValidationInput> + </div> + </div> + <div className='vsp-general-tab-sub-section input-row'> + <ValidationInput + label={i18n('Description')} + type='textarea' + value={description} + onChange={description => onDataChanged({description})} + className='field-section' + validations={{required: true}}/> + </div> + </div> + <div className='vsp-general-tab-section licenses'> + <div className='section-title'>{i18n('Licenses')}</div> + <div className='vsp-general-tab-inline-section input-row'> + <ValidationInput + onEnumChange={licensingVersion => this.onVendorParamChanged({vendorId, licensingVersion})} + selectedEnum={licensingVersion} + label={i18n('Licensing Version')} + values={licensingVersionsList} + type='select' + className='field-section'/> + <ValidationInput + label={i18n('License Agreement')} + type='select' + selectedEnum={licensingData.licenseAgreement} + className='field-section' + onEnumChange={(licenseAgreement) => this.onLicensingDataChanged({licenseAgreement, featureGroups: []})}> + <option key='placeholder' value=''>{i18n('Select...')}</option> + {licenseAgreementList.map(la => <option value={la.id} key={la.id}>{la.name}</option>)} + </ValidationInput> + </div> + <div className='vsp-general-tab-inline-section input-row'> + {licensingData.licenseAgreement && ( + <ValidationInput + type='select' + isMultiSelect={true} + onEnumChange={featureGroups => this.onFeatureGroupsChanged({featureGroups})} + multiSelectedEnum={licensingData.featureGroups} + name='feature-groups' + label={i18n('Feature Groups')} + clearable={false} + values={featureGroupsList}/>) + } + </div> + </div> + </Form> + <Form + data={qdata} + schema={qschema} + onDataChanged={onQDataChanged} + className='vsp-general-tab' + hasButtons={false} + isReadOnlyMode={isReadOnlyMode}> + <div className='vsp-general-tab-section'> + <div className='section-title'> {i18n('Availability')} </div> + <div className='vsp-general-tab-inline-section'> + <div className='vsp-general-tab-sub-section input-row'> + <ValidationInput + label={i18n('Use Availability Zones for High Availability')} + type='checkbox' + pointer='/general/availability/useAvailabilityZonesForHighAvailability'/> + </div> + </div> + <div className='section-title'> {i18n('Regions')} </div> + <div className='vsp-general-tab-inline-section'> + <div className='vsp-general-tab-sub-section input-row'> + <ValidationInput + type='select' + laebl='Ziv' + pointer='/general/regionsData/regions'/> + </div> + </div> + <div className='section-title'> {i18n('Storage Data Replication')} </div> + <div className='vsp-general-tab-inline-section'> + <div className='vsp-general-tab-sub-section'> + <ValidationInput + label={i18n('Storage Replication Size (GB)')} + type='text' + pointer='/general/storageDataReplication/storageReplicationSize' + className='field-section'/> + <ValidationInput + label={i18n('Storage Replication Source')} + type='text' + pointer='/general/storageDataReplication/storageReplicationSource' + className='field-section'/> + </div> + <div className='vsp-general-tab-sub-section'> + <ValidationInput + label={i18n('Storage Replication Frequency (minutes)')} + type='text' + pointer='/general/storageDataReplication/storageReplicationFrequency' + className='field-section'/> + <ValidationInput + label={i18n('Storage Replication Destination')} + type='text' + pointer='/general/storageDataReplication/storageReplicationDestination' + className='field-section'/> + </div> + </div> + </div> + </Form> + </div> + ); + } + + onVendorParamChanged({vendorId, licensingVersion}) { + let {finalizedLicenseModelList, onVendorParamChanged} = this.props; + if(!licensingVersion) { + const licensingVersionsList = this.refreshVendorVersionsList(vendorId); + licensingVersion = licensingVersionsList.length > 0 ? licensingVersionsList[0].enum : ''; + } + let vendorName = finalizedLicenseModelList.find(licenseModelItem => licenseModelItem.id === vendorId).vendorName || ''; + let deltaData = { + vendorId, + vendorName, + licensingVersion, + licensingData: {} + }; + onVendorParamChanged(deltaData); + } + + refreshVendorVersionsList(vendorId) { + if(!vendorId) { + return []; + } + + let {finalVersions} = this.props.finalizedLicenseModelList.find(vendor => vendor.id === vendorId); + + let licensingVersionsList = [{ + enum: '', + title: i18n('Select...') + }]; + if(finalVersions) { + finalVersions.forEach(version => licensingVersionsList.push({ + enum: version, + title: version + })); + } + + return licensingVersionsList; + } + + onSelectSubCategory(subCategory) { + let {softwareProductCategories, onDataChanged} = this.props; + let category = SoftwareProductCategoriesHelper.getCurrentCategoryOfSubCategory(subCategory, softwareProductCategories); + onDataChanged({category, subCategory}); + } + + onFeatureGroupsChanged({featureGroups}) { + this.onLicensingDataChanged({featureGroups}); + } + + onLicensingDataChanged(deltaData) { + this.props.onDataChanged({ + licensingData: { + ...this.props.currentSoftwareProduct.licensingData, + ...deltaData + } + }); + } + + save(){ + return this.refs.validationForm.handleFormSubmit(new Event('dummy')); + } +} + +export default SoftwareProductDetails; |