openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/storage/SoftwareProductComponentStorageView.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 SoftwareProductComponentStorageView extends React.Component {
   8
   9         static propTypes = {
  10                 componentId: React.PropTypes.string,
  11                 onQDataChanged: React.PropTypes.func,
  12                 onSubmit: React.PropTypes.func,
  13                 isReadOnlyMode: React.PropTypes.bool
  14         };
  15
  16         render() {
  17                 let {qdata, qschema, onQDataChanged, onSubmit, isReadOnlyMode} = this.props;
  18
  19                 return(
  20                         <div className='vsp-component-questionnaire-view'>
  21                                 <ValidationForm
  22                                         ref='storageValidationForm'
  23                                         hasButtons={false}
  24                                         onSubmit={() => onSubmit({qdata})}
  25                                         className='component-questionnaire-validation-form'
  26                                         isReadOnlyMode={isReadOnlyMode}
  27                                         onDataChanged={onQDataChanged}
  28                                         data={qdata}
  29                                         schema={qschema}>
  30
  31                                         <div className='section-title'>{i18n('Backup')}</div>
  32                                         <div className='rows-section'>
  33                                                 <div className='row-flex-components input-row'>
  34                                                         <div className='single-col'>
  35                                                                 <div className='vertical-flex'>
  36                                                                         <label key='label' className='control-label'>{i18n('Backup Type')}</label>
  37                                                                         <div className='radio-options-content-row'>
  38                                                                                 <ValidationInput
  39                                                                                         label={i18n('On Site')}
  40                                                                                         type='radiogroup'
  41                                                                                         pointer={'/storage/backup/backupType'}
  42                                                                                         className='radio-field'/>
  43                                                                         </div>
  44                                                                 </div>
  45                                                         </div>
  46                                                         <div className='single-col'>
  47                                                                 <ValidationInput
  48                                                                         type='text'
  49                                                                         label={i18n('Backup Solution')}
  50                                                                         pointer={'/storage/backup/backupSolution'}
  51                                                                         className='section-field'/>
  52                                                         </div>
  53                                                         <div className='single-col'>
  54                                                                 <ValidationInput
  55                                                                         type='text'
  56                                                                         label={i18n('Backup Storage Size (GB)')}
  57                                                                         pointer={'/storage/backup/backupStorageSize'}
  58                                                                         className='section-field'/>
  59                                                         </div>
  60                                                         <ValidationInput
  61                                                                 type='select'
  62                                                                 label={i18n('Backup NIC')}
  63                                                                 pointer={'/storage/backup/backupNIC'}
  64                                                                 className='section-field'/>
  65                                                 </div>
  66                                         </div>
  67
  68                                         <div className='section-title'>{i18n('Snapshot Backup')}</div>
  69                                         <div className='rows-section'>
  70                                                 <div className='row-flex-components input-row'>
  71                                                         <div className='single-col'>
  72                                                                 <ValidationInput
  73                                                                         type='text'
  74                                                                         label={i18n('Snapshot Frequency (hours)')}
  75                                                                         pointer={'/storage/snapshotBackup/snapshotFrequency'}
  76                                                                         className='section-field'/>
  77                                                         </div>
  78                                                         <div className='empty-two-col' />
  79                                                         <div className='empty-col' />
  80                                                 </div>
  81                                         </div>
  82
  83                                         <div className='section-title'>{i18n('Log Backup')}</div>
  84                                         <div className='rows-section'>
  85                                                 <div className='row-flex-components input-row'>
  86                                                         <div className='single-col'>
  87                                                                 <ValidationInput
  88                                                                         type='text'
  89                                                                         label={i18n('Size of Log Files (GB)')}
  90                                                                         pointer={'/storage/logBackup/sizeOfLogFiles'}
  91                                                                         className='section-field'/>
  92                                                                 </div>
  93                                                         <div className='single-col'>
  94                                                         <ValidationInput
  95                                                                 type='text'
  96                                                                 label={i18n('Log Retention Period (days)')}
  97                                                                 pointer={'/storage/logBackup/logRetentionPeriod'}
  98                                                                 className='section-field'/>
  99                                                                 </div>
 100                                                         <div className='single-col'>
 101                                                         <ValidationInput
 102                                                                 type='text'
 103                                                                 label={i18n('Log Backup Frequency (days)')}
 104                                                                 pointer={'/storage/logBackup/logBackupFrequency'}
 105                                                                 className='section-field'/>
 106                                                         </div>
 107                                                         <ValidationInput
 108                                                                 type='text'
 109                                                                 label={i18n('Log File Location')}
 110                                                                 pointer={'/storage/logBackup/logFileLocation'}
 111                                                                 className='section-field'/>
 112                                                 </div>
 113                                         </div>
 114                                 </ValidationForm>
 115                         </div>
 116                 );
 117         }
 118
 119         save(){
 120                 return this.refs.storageValidationForm.handleFormSubmit(new Event('dummy'));
 121         }
 122 }
 123
 124 export default SoftwareProductComponentStorageView;