From 280f8015d06af1f41a3ef12e8300801c7a5e0d54 Mon Sep 17 00:00:00 2001 From: AviZi Date: Fri, 9 Jun 2017 02:39:56 +0300 Subject: [SDC-29] Amdocs OnBoard 1707 initial commit. Change-Id: Ie4d12a3f574008b792899b368a0902a8b46b5370 Signed-off-by: AviZi --- .../details/SoftwareProductDetailsView.jsx | 480 ++++++++++++++------- 1 file changed, 320 insertions(+), 160 deletions(-) (limited to 'openecomp-ui/src/sdc-app/onboarding/softwareProduct/details/SoftwareProductDetailsView.jsx') diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/details/SoftwareProductDetailsView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/details/SoftwareProductDetailsView.jsx index 75a5797dec..1d52da38b0 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/details/SoftwareProductDetailsView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/details/SoftwareProductDetailsView.jsx @@ -1,9 +1,266 @@ +/*! + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express + * or implied. See the License for the specific language governing + * permissions and limitations under the License. + */ 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 sortByStringProperty from 'nfvo-utils/sortByStringProperty.js'; +import Form from 'nfvo-components/input/validation/Form.jsx'; +import Input from 'nfvo-components/input/validation/Input.jsx'; +import InputOptions from 'nfvo-components/input/inputOptions/InputOptions.jsx'; +import GridSection from 'nfvo-components/grid/GridSection.jsx'; +import GridItem from 'nfvo-components/grid/GridItem.jsx'; import SoftwareProductCategoriesHelper from 'sdc-app/onboarding/softwareProduct/SoftwareProductCategoriesHelper.js'; +import {forms} from 'sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js'; + +class GeneralSection extends React.Component { + static propTypes = { + vendorId: PropTypes.string, + name: PropTypes.string, + description: PropTypes.string, + subCategory: PropTypes.string, + softwareProductCategories: PropTypes.array, + finalizedLicenseModelList: PropTypes.array, + onDataChanged: PropTypes.func.isRequired, + onVendorParamChanged: PropTypes.func.isRequired, + onSelectSubCategory: PropTypes.func.isRequired + }; + + onVendorParamChanged(e) { + const selectedIndex = e.target.selectedIndex; + const vendorId = e.target.options[selectedIndex].value; + this.props.onVendorParamChanged({vendorId}, forms.VENDOR_SOFTWARE_PRODUCT_DETAILS); + + } + + onSelectSubCategory(e) { + const selectedIndex = e.target.selectedIndex; + const subCategory = e.target.options[selectedIndex].value; + this.props.onSelectSubCategory(subCategory); + } + + render (){ + let {genericFieldInfo} = this.props; + return ( +
+ {genericFieldInfo && + + this.props.onDataChanged({name}, forms.VENDOR_SOFTWARE_PRODUCT_DETAILS)}/> + this.onVendorParamChanged(e)}> + {sortByStringProperty( + this.props.finalizedLicenseModelList, + 'vendorName' + ).map(lm => ) + } + + this.onSelectSubCategory(e)}> + { + this.props.softwareProductCategories.map(category => + category.subcategories && + {category.subcategories.map(sub => + )} + + ) + } + + + + this.props.onDataChanged({description}, forms.VENDOR_SOFTWARE_PRODUCT_DETAILS)}/> + + } +
); + } +} +class LicensesSection extends React.Component { + static propTypes = { + onVendorParamChanged: PropTypes.func.isRequired, + vendorId: PropTypes.string, + licensingVersion: PropTypes.object, + licensingVersionsList: PropTypes.array, + licensingData: PropTypes.shape({ + licenceAgreement: PropTypes.string, + featureGroups: PropTypes.array + }), + onFeatureGroupsChanged: PropTypes.func.isRequired, + onLicensingDataChanged: PropTypes.func.isRequired, + featureGroupsList: PropTypes.array, + licenseAgreementList: PropTypes.array + }; + + onVendorParamChanged(e) { + const selectedIndex = e.target.selectedIndex; + const licensingVersion = e.target.options[selectedIndex].value; + this.props.onVendorParamChanged({vendorId: this.props.vendorId, licensingVersion:{id:licensingVersion, label: licensingVersion}}, forms.VENDOR_SOFTWARE_PRODUCT_DETAILS); + } + + onLicensingDataChanged(e) { + const selectedIndex = e.target.selectedIndex; + const licenseAgreement = e.target.options[selectedIndex].value; + this.props.onLicensingDataChanged({licenseAgreement, featureGroups: []}); + } + + render(){ + return ( + + + this.onVendorParamChanged(e)} + value={this.props.licensingVersion ? this.props.licensingVersion.id : ''} + label={i18n('Licensing Version')} + type='select'> + {this.props.licensingVersionsList.map(version => + + )} + + + + this.onLicensingDataChanged(e)}> + + {this.props.licenseAgreementList.map(la => )} + + + + {this.props.licensingData.licenseAgreement && ( + {}} + onEnumChange={featureGroups => this.props.onFeatureGroupsChanged({featureGroups})} + multiSelectedEnum={this.props.licensingData.featureGroups} + name='feature-groups' + label={i18n('Feature Groups')} + clearable={false} + values={this.props.featureGroupsList}/>) + } + + + ); + } +} +const AvailabilitySection = (props) => ( + + + props.onQDataChanged({'general/availability/useAvailabilityZonesForHighAvailability' : aZone})} /> + + +); +const RegionsSection = (props) => ( + + + {}} + onEnumChange={(regions) => props.onQDataChanged({'general/regionsData/regions' : regions})} + multiSelectedEnum={props.dataMap['general/regionsData/regions']} + name='vsp-regions' + clearable={false} + values={props.genericFieldInfo['general/regionsData/regions'].enum} /> + + +); +const StorageDataReplicationSection = (props) => ( + + + props.onQDataChanged({'general/storageDataReplication/storageReplicationSize' : sRep})} /> + + + props.onQDataChanged({'general/storageDataReplication/storageReplicationSource' : sRepSource})} /> + + + props.onQDataChanged({'general/storageDataReplication/storageReplicationFrequency' : sRepFreq})} /> + + + props.onQDataChanged({'general/storageDataReplication/storageReplicationDestination' : sRepDest})} /> + + +); class SoftwareProductDetails extends Component { @@ -17,7 +274,7 @@ class SoftwareProductDetails extends Component { subCategory: PropTypes.string, vendorId: PropTypes.string, vendorName: PropTypes.string, - licensingVersion: PropTypes.string, + licensingVersion: PropTypes.object, licensingData: PropTypes.shape({ licenceAgreement: PropTypes.string, featureGroups: PropTypes.array @@ -31,7 +288,6 @@ class SoftwareProductDetails extends Component { onDataChanged: PropTypes.func.isRequired, onValidityChanged: PropTypes.func.isRequired, qdata: PropTypes.object.isRequired, - qschema: PropTypes.object.isRequired, onQDataChanged: PropTypes.func.isRequired, onVendorParamChanged: PropTypes.func.isRequired }; @@ -40,161 +296,63 @@ class SoftwareProductDetails extends Component { licensingVersionsList: [] }; - render() { - let {softwareProductCategories, finalizedLicenseModelList, onDataChanged, featureGroupsList, licenseAgreementList, currentSoftwareProduct} = this.props; - let {name, description, vendorId, licensingVersion, subCategory, licensingData = {}} = currentSoftwareProduct; + prepareDataForGeneralSection(){ + let {softwareProductCategories, finalizedLicenseModelList, onDataChanged, currentSoftwareProduct, genericFieldInfo} = this.props; + let {name, description, vendorId, subCategory} = currentSoftwareProduct; + return { + name, + description, + vendorId, + subCategory, + softwareProductCategories, + finalizedLicenseModelList, + onDataChanged, + onVendorParamChanged: args => this.onVendorParamChanged(args), + onSelectSubCategory: args => this.onSelectSubCategory(args), + genericFieldInfo + }; + + } + + prepareDataForLicensesSection(){ + let { featureGroupsList, licenseAgreementList, currentSoftwareProduct } = this.props; + let {vendorId, licensingVersion, licensingData = {}} = currentSoftwareProduct; let licensingVersionsList = this.state.licensingVersionsList.length > 0 ? this.state.licensingVersionsList : this.refreshVendorVersionsList(vendorId); - let {qdata, qschema, onQDataChanged} = this.props; + return { + onVendorParamChanged: args => this.onVendorParamChanged(args), + vendorId, + licensingVersion, + licensingVersionsList, + licensingData, + onFeatureGroupsChanged: args => this.onFeatureGroupsChanged(args), + onLicensingDataChanged: args => this.onLicensingDataChanged(args), + featureGroupsList, + licenseAgreementList, + }; + + } + + render() { + let {currentSoftwareProduct} = this.props; + let {qdata, onQDataChanged, dataMap, qGenericFieldInfo} = this.props; let {isReadOnlyMode} = this.props; return ( -
+
this.validationForm = validationForm} className='vsp-general-tab' hasButtons={false} + formReady={null} + isValid={this.props.isFormValid} onSubmit={() => this.props.onSubmit(currentSoftwareProduct, qdata)} onValidityChanged={(isValidityData) => this.props.onValidityChanged(isValidityData)} isReadOnlyMode={isReadOnlyMode}> -
{i18n('General')}
-
-
- onDataChanged({name})} - validations={{validateName: true, maxLength: 120, required: true}} - className='field-section'/> - this.onVendorParamChanged({vendorId})} - className='field-section'> - {finalizedLicenseModelList.map(lm => )} - -
- this.onSelectSubCategory(subCategory)} - className='field-section'> - { - softwareProductCategories.map(category => - category.subcategories && - {category.subcategories.map(sub => - )} - - ) - } - -
-
-
- onDataChanged({description})} - className='field-section' - validations={{required: true}}/> -
-
-
-
{i18n('Licenses')}
-
- this.onVendorParamChanged({vendorId, licensingVersion})} - selectedEnum={licensingVersion} - label={i18n('Licensing Version')} - values={licensingVersionsList} - type='select' - className='field-section'/> - this.onLicensingDataChanged({licenseAgreement, featureGroups: []})}> - - {licenseAgreementList.map(la => )} - -
-
- {licensingData.licenseAgreement && ( - this.onFeatureGroupsChanged({featureGroups})} - multiSelectedEnum={licensingData.featureGroups} - name='feature-groups' - label={i18n('Feature Groups')} - clearable={false} - values={featureGroupsList}/>) - } -
-
-
-
-
-
{i18n('Availability')}
-
-
- -
-
-
{i18n('Regions')}
-
-
- -
-
-
{i18n('Storage Data Replication')}
-
-
- - -
-
- - -
-
-
+ + + + +
); @@ -213,7 +371,9 @@ class SoftwareProductDetails extends Component { licensingVersion, licensingData: {} }; - onVendorParamChanged(deltaData); + + onVendorParamChanged(deltaData, forms.VENDOR_SOFTWARE_PRODUCT_DETAILS); + } refreshVendorVersionsList(vendorId) { @@ -229,20 +389,14 @@ class SoftwareProductDetails extends Component { }]; if(finalVersions) { finalVersions.forEach(version => licensingVersionsList.push({ - enum: version, - title: version + enum: version.id, + title: version.label })); } return licensingVersionsList; } - onSelectSubCategory(subCategory) { - let {softwareProductCategories, onDataChanged} = this.props; - let category = SoftwareProductCategoriesHelper.getCurrentCategoryOfSubCategory(subCategory, softwareProductCategories); - onDataChanged({category, subCategory}); - } - onFeatureGroupsChanged({featureGroups}) { this.onLicensingDataChanged({featureGroups}); } @@ -253,11 +407,17 @@ class SoftwareProductDetails extends Component { ...this.props.currentSoftwareProduct.licensingData, ...deltaData } - }); + }, forms.VENDOR_SOFTWARE_PRODUCT_DETAILS); + } + + onSelectSubCategory(subCategory) { + let {softwareProductCategories, onDataChanged} = this.props; + let category = SoftwareProductCategoriesHelper.getCurrentCategoryOfSubCategory(subCategory, softwareProductCategories); + onDataChanged({category, subCategory}, forms.VENDOR_SOFTWARE_PRODUCT_DETAILS); } save(){ - return this.refs.validationForm.handleFormSubmit(new Event('dummy')); + return this.validationForm.handleFormSubmit(new Event('dummy')); } } -- cgit 1.2.3-korg