openecomp-ui/src/sdc-app/onboarding/softwareProduct/details/SoftwareProductDetailsView.jsx

   1 import React, {Component, PropTypes} from 'react';
   2
   3 import i18n from 'nfvo-utils/i18n/i18n.js';
   4 import Form from 'nfvo-components/input/validation/ValidationForm.jsx';
   5 import ValidationInput from 'nfvo-components/input/validation/ValidationInput.jsx';
   6 import SoftwareProductCategoriesHelper from 'sdc-app/onboarding/softwareProduct/SoftwareProductCategoriesHelper.js';
   7
   8 class SoftwareProductDetails extends Component {
   9
  10         static propTypes = {
  11                 vendorName: PropTypes.string,
  12                 currentSoftwareProduct: PropTypes.shape({
  13                         id: PropTypes.string,
  14                         name: PropTypes.string,
  15                         description: PropTypes.string,
  16                         category: PropTypes.string,
  17                         subCategory: PropTypes.string,
  18                         vendorId: PropTypes.string,
  19                         vendorName: PropTypes.string,
  20                         licensingVersion: PropTypes.string,
  21                         licensingData: PropTypes.shape({
  22                                 licenceAgreement: PropTypes.string,
  23                                 featureGroups: PropTypes.array
  24                         })
  25                 }),
  26                 softwareProductCategories: PropTypes.array,
  27                 finalizedLicenseModelList: PropTypes.array,
  28                 licenseAgreementList: PropTypes.array,
  29                 featureGroupsList: PropTypes.array,
  30                 onSubmit: PropTypes.func.isRequired,
  31                 onDataChanged: PropTypes.func.isRequired,
  32                 onValidityChanged: PropTypes.func.isRequired,
  33                 qdata: PropTypes.object.isRequired,
  34                 qschema: PropTypes.object.isRequired,
  35                 onQDataChanged: PropTypes.func.isRequired,
  36                 onVendorParamChanged: PropTypes.func.isRequired
  37         };
  38
  39         state = {
  40                 licensingVersionsList: []
  41         };
  42
  43         render() {
  44                 let {softwareProductCategories, finalizedLicenseModelList, onDataChanged, featureGroupsList, licenseAgreementList, currentSoftwareProduct} = this.props;
  45                 let {name, description, vendorId, licensingVersion, subCategory, licensingData = {}} = currentSoftwareProduct;
  46                 let licensingVersionsList = this.state.licensingVersionsList.length > 0 ? this.state.licensingVersionsList : this.refreshVendorVersionsList(vendorId);
  47                 let {qdata, qschema, onQDataChanged} = this.props;
  48                 let {isReadOnlyMode} = this.props;
  49
  50                 return (
  51                         <div className='vsp-details-page'>
  52                                 <Form
  53                                         ref='validationForm'
  54                                         className='vsp-general-tab'
  55                                         hasButtons={false}
  56                                         onSubmit={() => this.props.onSubmit(currentSoftwareProduct, qdata)}
  57                                         onValidityChanged={(isValidityData) => this.props.onValidityChanged(isValidityData)}
  58                                         isReadOnlyMode={isReadOnlyMode}>
  59                                         <div className='section-title general'>{i18n('General')}</div>
  60                                         <div className='vsp-general-tab-inline-section'>
  61                                                 <div className='vsp-general-tab-sub-section'>
  62                                                         <ValidationInput
  63                                                                 label={i18n('Name')}
  64                                                                 type='text'
  65                                                                 value={name}
  66                                                                 onChange={name => onDataChanged({name})}
  67                                                                 validations={{validateName: true, maxLength: 120, required: true}}
  68                                                                 className='field-section'/>
  69                                                         <ValidationInput
  70                                                                 label={i18n('Vendor')}
  71                                                                 type='select'
  72                                                                 selectedEnum={vendorId}
  73                                                                 onEnumChange={vendorId => this.onVendorParamChanged({vendorId})}
  74                                                                 className='field-section'>
  75                                                                 {finalizedLicenseModelList.map(lm => <option key={lm.id} value={lm.id}>{lm.vendorName}</option>)}
  76                                                         </ValidationInput>
  77                                                         <div className='input-row'>
  78                                                                 <ValidationInput
  79                                                                         label={i18n('Category')}
  80                                                                         type='select'
  81                                                                         selectedEnum={subCategory}
  82                                                                         onEnumChange={subCategory => this.onSelectSubCategory(subCategory)}
  83                                                                         className='field-section'>
  84                                                                         {
  85                                                                                 softwareProductCategories.map(category =>
  86                                                                                         category.subcategories &&
  87                                                                                         <optgroup
  88                                                                                                 key={category.name}
  89                                                                                                 label={category.name}>{category.subcategories.map(sub =>
  90                                                                                                 <option
  91                                                                                                         key={sub.uniqueId}
  92                                                                                                         value={sub.uniqueId}>{`${sub.name} (${category.name})`}</option>)}
  93                                                                                         </optgroup>
  94                                                                                 )
  95                                                                         }
  96                                                                 </ValidationInput>
  97                                                         </div>
  98                                                 </div>
  99                                                 <div className='vsp-general-tab-sub-section input-row'>
 100                                                         <ValidationInput
 101                                                                 label={i18n('Description')}
 102                                                                 type='textarea'
 103                                                                 value={description}
 104                                                                 onChange={description => onDataChanged({description})}
 105                                                                 className='field-section'
 106                                                                 validations={{required: true}}/>
 107                                                 </div>
 108                                         </div>
 109                                         <div className='vsp-general-tab-section licenses'>
 110                                                 <div className='section-title'>{i18n('Licenses')}</div>
 111                                                 <div className='vsp-general-tab-inline-section input-row'>
 112                                                         <ValidationInput
 113                                                                 onEnumChange={licensingVersion => this.onVendorParamChanged({vendorId, licensingVersion})}
 114                                                                 selectedEnum={licensingVersion}
 115                                                                 label={i18n('Licensing Version')}
 116                                                                 values={licensingVersionsList}
 117                                                                 type='select'
 118                                                                 className='field-section'/>
 119                                                         <ValidationInput
 120                                                                 label={i18n('License Agreement')}
 121                                                                 type='select'
 122                                                                 selectedEnum={licensingData.licenseAgreement}
 123                                                                 className='field-section'
 124                                                                 onEnumChange={(licenseAgreement) => this.onLicensingDataChanged({licenseAgreement, featureGroups: []})}>
 125                                                                 <option key='placeholder' value=''>{i18n('Select...')}</option>
 126                                                                 {licenseAgreementList.map(la => <option value={la.id} key={la.id}>{la.name}</option>)}
 127                                                         </ValidationInput>
 128                                                 </div>
 129                                                 <div className='vsp-general-tab-inline-section input-row'>
 130                                                         {licensingData.licenseAgreement && (
 131                                                                 <ValidationInput
 132                                                                         type='select'
 133                                                                         isMultiSelect={true}
 134                                                                         onEnumChange={featureGroups => this.onFeatureGroupsChanged({featureGroups})}
 135                                                                         multiSelectedEnum={licensingData.featureGroups}
 136                                                                         name='feature-groups'
 137                                                                         label={i18n('Feature Groups')}
 138                                                                         clearable={false}
 139                                                                         values={featureGroupsList}/>)
 140                                                         }
 141                                                 </div>
 142                                         </div>
 143                                 </Form>
 144                                 <Form
 145                                         data={qdata}
 146                                         schema={qschema}
 147                                         onDataChanged={onQDataChanged}
 148                                         className='vsp-general-tab'
 149                                         hasButtons={false}
 150                                         isReadOnlyMode={isReadOnlyMode}>
 151                                         <div className='vsp-general-tab-section'>
 152                                                 <div className='section-title'> {i18n('Availability')} </div>
 153                                                 <div className='vsp-general-tab-inline-section'>
 154                                                         <div className='vsp-general-tab-sub-section input-row'>
 155                                                                 <ValidationInput
 156                                                                         label={i18n('Use Availability Zones for High Availability')}
 157                                                                         type='checkbox'
 158                                                                         pointer='/general/availability/useAvailabilityZonesForHighAvailability'/>
 159                                                         </div>
 160                                                 </div>
 161                                                 <div className='section-title'> {i18n('Regions')} </div>
 162                                                 <div className='vsp-general-tab-inline-section'>
 163                                                         <div className='vsp-general-tab-sub-section input-row'>
 164                                                                 <ValidationInput
 165                                                                         type='select'
 166                                                                         laebl='Ziv'
 167                                                                         pointer='/general/regionsData/regions'/>
 168                                                         </div>
 169                                                 </div>
 170                                                 <div className='section-title'> {i18n('Storage Data Replication')} </div>
 171                                                 <div className='vsp-general-tab-inline-section'>
 172                                                         <div className='vsp-general-tab-sub-section'>
 173                                                                 <ValidationInput
 174                                                                         label={i18n('Storage Replication Size (GB)')}
 175                                                                         type='text'
 176                                                                         pointer='/general/storageDataReplication/storageReplicationSize'
 177                                                                         className='field-section'/>
 178                                                                 <ValidationInput
 179                                                                         label={i18n('Storage Replication Source')}
 180                                                                         type='text'
 181                                                                         pointer='/general/storageDataReplication/storageReplicationSource'
 182                                                                         className='field-section'/>
 183                                                         </div>
 184                                                         <div className='vsp-general-tab-sub-section'>
 185                                                                 <ValidationInput
 186                                                                         label={i18n('Storage Replication Frequency (minutes)')}
 187                                                                         type='text'
 188                                                                         pointer='/general/storageDataReplication/storageReplicationFrequency'
 189                                                                         className='field-section'/>
 190                                                                 <ValidationInput
 191                                                                         label={i18n('Storage Replication Destination')}
 192                                                                         type='text'
 193                                                                         pointer='/general/storageDataReplication/storageReplicationDestination'
 194                                                                         className='field-section'/>
 195                                                         </div>
 196                                                 </div>
 197                                         </div>
 198                                 </Form>
 199                         </div>
 200                 );
 201         }
 202
 203         onVendorParamChanged({vendorId, licensingVersion}) {
 204                 let {finalizedLicenseModelList, onVendorParamChanged} = this.props;
 205                 if(!licensingVersion) {
 206                         const licensingVersionsList = this.refreshVendorVersionsList(vendorId);
 207                         licensingVersion = licensingVersionsList.length > 0 ? licensingVersionsList[0].enum : '';
 208                 }
 209                 let vendorName = finalizedLicenseModelList.find(licenseModelItem => licenseModelItem.id === vendorId).vendorName || '';
 210                 let deltaData = {
 211                         vendorId,
 212                         vendorName,
 213                         licensingVersion,
 214                         licensingData: {}
 215                 };
 216                 onVendorParamChanged(deltaData);
 217         }
 218
 219         refreshVendorVersionsList(vendorId) {
 220                 if(!vendorId) {
 221                         return [];
 222                 }
 223
 224                 let {finalVersions} = this.props.finalizedLicenseModelList.find(vendor => vendor.id === vendorId);
 225
 226                 let licensingVersionsList = [{
 227                         enum: '',
 228                         title: i18n('Select...')
 229                 }];
 230                 if(finalVersions) {
 231                         finalVersions.forEach(version => licensingVersionsList.push({
 232                                 enum: version,
 233                                 title: version
 234                         }));
 235                 }
 236
 237                 return licensingVersionsList;
 238         }
 239
 240         onSelectSubCategory(subCategory) {
 241                 let {softwareProductCategories, onDataChanged} = this.props;
 242                 let category = SoftwareProductCategoriesHelper.getCurrentCategoryOfSubCategory(subCategory, softwareProductCategories);
 243                 onDataChanged({category, subCategory});
 244         }
 245
 246         onFeatureGroupsChanged({featureGroups}) {
 247                 this.onLicensingDataChanged({featureGroups});
 248         }
 249
 250         onLicensingDataChanged(deltaData) {
 251                 this.props.onDataChanged({
 252                         licensingData: {
 253                                 ...this.props.currentSoftwareProduct.licensingData,
 254                                 ...deltaData
 255                         }
 256                 });
 257         }
 258
 259         save(){
 260                 return this.refs.validationForm.handleFormSubmit(new Event('dummy'));
 261         }
 262 }
 263
 264 export default SoftwareProductDetails;