openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/SoftwareProductComponentComputeView.jsx

   1 import React from 'react';
   2 import i18n from 'nfvo-utils/i18n/i18n.js';
   3 import ValidationForm from 'nfvo-components/input/validation/ValidationForm.jsx';
   4 import ValidationInput from'nfvo-components/input/validation/ValidationInput.jsx';
   5
   6
   7 class SoftwareProductComponentComputeView extends React.Component {
   8
   9         static propTypes = {
  10                 qdata: React.PropTypes.object,
  11                 qschema: React.PropTypes.object,
  12                 isReadOnlyMode: React.PropTypes.bool,
  13                 minNumberOfVMsSelectedByUser: React.PropTypes.number,
  14                 onQDataChanged: React.PropTypes.func.isRequired,
  15                 onSubmit: React.PropTypes.func.isRequired
  16         };
  17
  18         render() {
  19                 let {qdata, qschema, isReadOnlyMode, minNumberOfVMsSelectedByUser, onQDataChanged, onSubmit} = this.props;
  20
  21                 return (
  22                         <div className='vsp-component-questionnaire-view'>
  23                                 <ValidationForm
  24                                         ref='computeValidationForm'
  25                                         hasButtons={false}
  26                                         onSubmit={() => onSubmit({qdata})}
  27                                         className='component-questionnaire-validation-form'
  28                                         isReadOnlyMode={isReadOnlyMode}
  29                                         onDataChanged={onQDataChanged}
  30                                         data={qdata}
  31                                         schema={qschema}>
  32
  33                                         <div className='section-title'>{i18n('VM Sizing')}</div>
  34                                         <div className='rows-section'>
  35                                                 <div className='row-flex-components input-row'>
  36                                                         <div className='single-col'>
  37                                                                 <ValidationInput
  38                                                                         type='text'
  39                                                                         label={i18n('Number of CPUs')}
  40                                                                         pointer={'/compute/vmSizing/numOfCPUs'}/>
  41                                                         </div>
  42                                                         <div className='single-col'>
  43                                                                 <ValidationInput
  44                                                                         type='text'
  45                                                                         label={i18n('File System Size (GB)')}
  46                                                                         pointer={'/compute/vmSizing/fileSystemSizeGB'}/>
  47                                                         </div>
  48                                                         <div className='single-col'>
  49                                                                 <ValidationInput
  50                                                                         type='text'
  51                                                                         label={i18n('Persistent Storage/Volume Size (GB)')}
  52                                                                         pointer={'/compute/vmSizing/persistentStorageVolumeSize'}/>
  53                                                         </div>
  54                                                         <ValidationInput
  55                                                                 type='text'
  56                                                                 label={i18n('I/O Operations (per second)')}
  57                                                                 pointer={'/compute/vmSizing/IOOperationsPerSec'}/>
  58                                                 </div>
  59                                         </div>
  60                                         <div className='section-title'>{i18n('Number of VMs')}</div>
  61                                         <div className='rows-section'>
  62                                                 <div className='row-flex-components input-row'>
  63                                                         <div className='single-col'>
  64                                                                 <ValidationInput
  65                                                                         type='text'
  66                                                                         label={i18n('Minimum')}
  67                                                                         pointer={'/compute/numOfVMs/minimum'}/>
  68                                                         </div>
  69                                                         <div className='single-col'>
  70                                                                 <ValidationInput
  71                                                                         type='text'
  72                                                                         label={i18n('Maximum')}
  73                                                                         pointer={'/compute/numOfVMs/maximum'}
  74                                                                         validations={{minValue: minNumberOfVMsSelectedByUser}}/>
  75                                                         </div>
  76                                                         <div className='single-col'>
  77                                                                 <ValidationInput
  78                                                                         type='select'
  79                                                                         label={i18n('CPU Oversubscription Ratio')}
  80                                                                         pointer={'/compute/numOfVMs/CpuOverSubscriptionRatio'}/>
  81                                                         </div>
  82                                                         <ValidationInput
  83                                                                 type='select'
  84                                                                 label={i18n('Memory - RAM')}
  85                                                                 pointer={'/compute/numOfVMs/MemoryRAM'}/>
  86                                                 </div>
  87                                         </div>
  88
  89                                         <div className='section-title'>{i18n('Guest OS')}</div>
  90                                         <div className='rows-section'>
  91                                                 <div className='section-field row-flex-components input-row'>
  92                                                         <div className='two-col'>
  93                                                                 <ValidationInput
  94                                                                         label={i18n('Guest OS')}
  95                                                                         type='text'
  96                                                                         pointer={'/compute/guestOS/name'}/>
  97                                                         </div>
  98                                                         <div className='empty-two-col'/>
  99                                                 </div>
 100                                                 <div className='vertical-flex input-row'>
 101                                                         <label key='label' className='control-label'>{i18n('OS Bit Size')}</label>
 102                                                         <div className='radio-options-content-row input-row'>
 103                                                                 <ValidationInput
 104                                                                         type='radiogroup'
 105                                                                         pointer={'/compute/guestOS/bitSize'}
 106                                                                         className='radio-field'/>
 107                                                         </div>
 108                                                 </div>
 109                                                 <div className='section-field row-flex-components input-row'>
 110                                                         <div className='two-col'>
 111                                                                 <ValidationInput
 112                                                                         type='textarea'
 113                                                                         label={i18n('Guest OS Tools:')}
 114                                                                         pointer={'/compute/guestOS/tools'}/>
 115                                                         </div>
 116                                                         <div className='empty-two-col'/>
 117                                                 </div>
 118                                         </div>
 119                                 </ValidationForm>
 120                         </div>
 121                 );
 122         }
 123
 124         save(){
 125                 return this.refs.computeValidationForm.handleFormSubmit(new Event('dummy'));
 126         }
 127 }
 128
 129 export default SoftwareProductComponentComputeView;