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;