openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/general/SoftwareProductComponentsGeneralView.jsx

   1 import React from 'react';
   2 import i18n from 'nfvo-utils/i18n/i18n.js';
   3
   4 import ValidationForm from 'nfvo-components/input/validation/ValidationForm.jsx';
   5 import ValidationInput from'nfvo-components/input/validation/ValidationInput.jsx';
   6
   7
   8 class SoftwareProductComponentsGeneralView extends React.Component {
   9
  10         render() {
  11                 let {qdata, qschema, onQDataChanged, onDataChanged, componentData: {displayName, description}, isReadOnlyMode} =  this.props;
  12                 return(
  13                         <div className='vsp-components-general'>
  14                                 <div className='general-data'>
  15                                         <ValidationForm
  16                                                 isReadOnlyMode={isReadOnlyMode}
  17                                                 hasButtons={false}>
  18                                         <div className=''>
  19                                                 <h3 className='section-title'>{i18n('General')}</h3>
  20                                                 <div className='rows-section'>
  21                                                         <div className='row-flex-components input-row'>
  22                                                         {/** disabled until backend will be ready to implement it
  23                                                          <div className='validation-input-wrapper'>
  24                                                          <div className='form-group'>
  25                                                          <label className='control-label'>{i18n('Name')}</label>
  26                                                          <div>{name}</div>
  27                                                          </div>
  28                                                          </div>
  29
  30                                                         */}
  31                                                                 <div className='single-col'>
  32                                                                         <ValidationInput label={i18n('Name')} value={displayName}       disabled={true} type='text'/>
  33                                                                 </div>
  34                                                                 <div className='two-col'>
  35                                                                 <ValidationInput
  36                                                                         label={i18n('Description')}
  37                                                                         onChange={description => onDataChanged({description})}
  38                                                                         disabled={isReadOnlyMode}
  39                                                                         value={description}
  40                                                                         type='textarea'/>
  41                                                                 </div>
  42                                                                 <div className='empty-col' />
  43                                                         </div>
  44                                                 </div>
  45                                         </div>
  46                                                 </ValidationForm>
  47                                         {
  48                                                 qschema &&
  49                                         <ValidationForm
  50                                                 onDataChanged={onQDataChanged}
  51                                                 data={qdata}
  52                                                 schema={qschema}
  53                                                 isReadOnlyMode={isReadOnlyMode}
  54                                                 hasButtons={false}>
  55                                                         <h3 className='section-title additional-validation-form'>{i18n('Hypervisor')}</h3>
  56                                                         <div className='rows-section'>
  57                                                                 <div className='row-flex-components input-row'>
  58                                                                         <div className='single-col'>
  59                                                                                 <ValidationInput
  60                                                                                         label={i18n('Supported Hypervisors')}
  61                                                                                         type='select'
  62                                                                                         pointer='/general/hypervisor/hypervisor'/>
  63                                                                                 </div>
  64                                                                         <div className='two-col'>
  65                                                                                 <ValidationInput
  66                                                                                         label={i18n('Hypervisor Drivers')}
  67                                                                                         type='text'
  68                                                                                         pointer='/general/hypervisor/drivers'/>
  69                                                                         </div>
  70                                                                         <div className='empty-col' />
  71                                                                 </div>
  72                                                                 <div className='row-flex-components input-row'>
  73                                                                         <div className='three-col'>
  74                                                                                 <ValidationInput
  75                                                                                         label={i18n('Describe Container Features')}
  76                                                                                         type='textarea'
  77                                                                                         pointer='/general/hypervisor/containerFeaturesDescription'/>
  78                                                                         </div>
  79                                                                         <div className='empty-col' />
  80                                                                 </div>
  81                                                         </div>
  82                                                         <h3 className='section-title'>{i18n('Image')}</h3>
  83                                                         <div className='rows-section'>
  84                                                                 <div className='row-flex-components input-row'>
  85                                                                         <div className='single-col'>
  86                                                                                 <ValidationInput
  87                                                                                         label={i18n('Image format')}
  88                                                                                         type='select'
  89                                                                                         pointer='/general/image/format'/>
  90                                                                         </div>
  91                                                                         <div className='single-col'>
  92                                                                                 <ValidationInput
  93                                                                                         label={i18n('Image provided by')}
  94                                                                                         type='select'
  95                                                                                         pointer='/general/image/providedBy'/>
  96                                                                         </div>
  97                                                                         <div className='single-col'>
  98                                                                                 <ValidationInput
  99                                                                                         label={i18n('Size of boot disk per VM (GB)')}
 100                                                                                         type='text'
 101                                                                                         pointer='/general/image/bootDiskSizePerVM'/>
 102                                                                         </div>
 103                                                                         <ValidationInput
 104                                                                                 label={i18n('Size of ephemeral disk per VM (GB)')}
 105                                                                                 type='text'
 106                                                                                 pointer='/general/image/ephemeralDiskSizePerVM'/>
 107                                                                 </div>
 108                                                         </div>
 109                                                         <h3 className='section-title'>{i18n('Recovery')}</h3>
 110                                                         <div className='rows-section'>
 111                                                                 <div className='row-flex-components input-row'>
 112                                                                         <div className='single-col'>
 113                                                                                 <ValidationInput
 114                                                                                         label={i18n('VM Recovery Point Objective (Minutes)')}
 115                                                                                         type='text'
 116                                                                                         pointer='/general/recovery/pointObjective'/>
 117                                                                         </div>
 118                                                                         <ValidationInput
 119                                                                                 label={i18n('VM Recovery Time Objective (Minutes)')}
 120                                                                                 type='text'
 121                                                                                 pointer='/general/recovery/timeObjective'/>
 122                                                                         <div className='empty-two-col' />
 123                                                                 </div>
 124
 125
 126                                                                 <div className='row-flex-components input-row'>
 127                                                                         <div className='two-col'>
 128                                                                                 <ValidationInput
 129                                                                                         className='textarea'
 130                                                                                         label={i18n('How are in VM process failures handled?')}
 131                                                                                         type='textarea'
 132                                                                                         pointer='/general/recovery/vmProcessFailuresHandling'/>
 133                                                                         </div>
 134                                                                         <div className='empty-two-col' />
 135                                                                         {
 136                                                                                 /** disabled until backend will be ready to implement it
 137                                                                                         <div className='row'>
 138                                                                                                 <div className='col-md-3'>
 139                                                                                                         <ValidationInput
 140                                                                                                                 label={i18n('VM Recovery Document')}
 141                                                                                                                 type='text'
 142                                                                                                                 pointer='/general/recovery/VMRecoveryDocument'/>
 143                                                                                                 </div>
 144                                                                                         </div>
 145                                                                                  */
 146                                                                         }
 147                                                                         </div>
 148                                                                 </div>
 149                                                                 <h3 className='section-title'>{i18n('DNS Configuration')}</h3>
 150                                                                 <div className='rows-section'>
 151                                                                         <div className='row-flex-components input-row'>
 152                                                                                 <div className='two-col'>
 153                                                                                         <ValidationInput
 154                                                                                                 label={i18n('Do you have a need for DNS as a Service? Please describe.')}
 155                                                                                                 type='textarea'
 156                                                                                                 pointer='/general/dnsConfiguration'/>
 157                                                                                 </div>
 158                                                                                 <div className='empty-two-col' />
 159                                                                         </div>
 160                                                                 </div>
 161                                                                 <h3 className='section-title'>{i18n('Clone')}</h3>
 162                                                                 <div className='rows-section'>
 163                                                                         <div className='row-flex-components input-row'>
 164                                                                                 <div className='two-col'>
 165                                                                                         <ValidationInput
 166                                                                                                 label={i18n('Describe VM Clone Use')}
 167                                                                                                 type='textarea'
 168                                                                                                 pointer='/general/vmCloneUsage'/>
 169                                                                                 </div>
 170                                                                                 <div className='empty-two-col' />
 171                                                                         </div>
 172                                                                 </div>
 173                                         </ValidationForm>
 174                                         }
 175                                 </div>
 176                         </div>
 177                 );
 178         }
 179
 180         save() {
 181                 let {onSubmit, componentData, qdata} = this.props;
 182                 return onSubmit({componentData, qdata});
 183         }
 184 }
 185
 186 export default SoftwareProductComponentsGeneralView;