gerrit.onap Code Review - sdc.git/blob

   1 /*!
   2  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
   3  *
   4  * Licensed under the Apache License, Version 2.0 (the "License");
   5  * you may not use this file except in compliance with the License.
   6  * You may obtain a copy of the License at
   7  *
   8  * http://www.apache.org/licenses/LICENSE-2.0
   9  *
  10  * Unless required by applicable law or agreed to in writing, software
  11  * distributed under the License is distributed on an "AS IS" BASIS,
  12  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
  13  * or implied. See the License for the specific language governing
  14  * permissions and limitations under the License.
  15  */
  16 import React from 'react';
  17 import i18n from 'nfvo-utils/i18n/i18n.js';
  18
  19 import Input from 'nfvo-components/input/validation/Input.jsx';
  20 import Form from 'nfvo-components/input/validation/Form.jsx';
  21 import GridSection from 'nfvo-components/grid/GridSection.jsx';
  22 import GridItem from 'nfvo-components/grid/GridItem.jsx';
  23
  24 const GeneralSection = ({onDataChanged, displayName, vfcCode, nfcFunction, description, isReadOnlyMode, genericFieldInfo, isManual}) => (
  25         <GridSection title={i18n('General')}>
  26                 {/* disabled until backend will be ready to implement it
  27                         <div className='validation-input-wrapper'>
  28                         <div className='form-group'>
  29                         <label className='control-label'>{i18n('Name')}</label>
  30                         <div>{name}</div>
  31                         </div>
  32                         </div>
  33
  34                 */}
  35                 <GridItem>
  36                         <Input
  37                                 data-test-id='name'
  38                                 label={i18n('Name')}
  39                                 value={displayName}
  40                                 disabled={!isManual || isReadOnlyMode}
  41                                 type='text'/>
  42                         {!isManual  && <Input
  43                                 data-test-id='vfcCode'
  44                                 label={i18n('Naming Code')}
  45                                 value={vfcCode}
  46                                 isValid={genericFieldInfo.vfcCode.isValid}
  47                                 errorText={genericFieldInfo.vfcCode.errorText}
  48                                 onChange={vfcCode => onDataChanged({vfcCode})}
  49                                 disabled={isReadOnlyMode}
  50                                 type='text'/> }
  51                         <Input
  52                                 data-test-id='nfcFunction'
  53                                 label={i18n('Function')}
  54                                 value={nfcFunction}
  55                                 isValid={genericFieldInfo.nfcFunction.isValid}
  56                                 errorText={genericFieldInfo.nfcFunction.errorText}
  57                                 onChange={nfcFunction => onDataChanged({nfcFunction})}
  58                                 disabled={isReadOnlyMode}
  59                                 type='text'/>
  60                 </GridItem>
  61                 <GridItem colSpan={2}>
  62                         <Input
  63                                 label={i18n('Description')}
  64                                 isValid={genericFieldInfo.description.isValid}
  65                                 errorText={genericFieldInfo.description.errorText}
  66                                 onChange={description => onDataChanged({description})}
  67                                 disabled={isReadOnlyMode}
  68                                 value={description}
  69                                 groupClassName='multi-line-textarea'
  70                                 data-test-id='description'
  71                                 type='textarea'/>
  72                 </GridItem>
  73                 <GridItem />
  74         </GridSection>
  75 );
  76
  77 const HypervisorSection = ({dataMap, onQDataChanged, qgenericFieldInfo}) => (
  78         <GridSection title={i18n('Hypervisor')}>
  79                 <GridItem>
  80                         <Input
  81                                 data-test-id='hypervisor'
  82                                 label={i18n('Supported Hypervisors')}
  83                                 type='select'
  84                                 className='input-options-select'
  85                                 groupClassName='bootstrap-input-options'
  86                                 isValid={qgenericFieldInfo['general/hypervisor/hypervisor'].isValid}
  87                                 errorText={qgenericFieldInfo['general/hypervisor/hypervisor'].errorText}
  88                                 value={dataMap['general/hypervisor/hypervisor']}
  89                                 onChange={(e) => {
  90                                         const selectedIndex = e.target.selectedIndex;
  91                                         const val = e.target.options[selectedIndex].value;
  92                                         onQDataChanged({'general/hypervisor/hypervisor' : val});}
  93                                 }>
  94                                 <option key='placeholder' value=''>{i18n('Select...')}</option>
  95                                 {qgenericFieldInfo['general/hypervisor/hypervisor'].enum.map(hv => <option value={hv.enum} key={hv.enum}>{hv.title}</option>)}
  96                         </Input>
  97                 </GridItem>
  98                 <GridItem colSpan={2}>
  99                         <Input
 100                                 data-test-id='drivers'
 101                                 onChange={(driver) => onQDataChanged({'general/hypervisor/drivers' : driver})}
 102                                 label={i18n('Hypervisor Drivers')}
 103                                 type='text'
 104                                 isValid={qgenericFieldInfo['general/hypervisor/drivers'].isValid}
 105                                 errorText={qgenericFieldInfo['general/hypervisor/drivers'].errorText}
 106                                 value={dataMap['general/hypervisor/drivers']}/>
 107                 </GridItem>
 108                 <GridItem colSpan={3}>
 109                         <Input
 110                                 data-test-id='containerFeaturesDescription'
 111                                 label={i18n('Describe Container Features')}
 112                                 type='textarea'
 113                                 onChange={(containerFeaturesDescription) => onQDataChanged({'general/hypervisor/containerFeaturesDescription' : containerFeaturesDescription})}
 114                                 isValid={qgenericFieldInfo['general/hypervisor/containerFeaturesDescription'].isValid}
 115                                 errorText={qgenericFieldInfo['general/hypervisor/containerFeaturesDescription'].errorText}
 116                                 value={dataMap['general/hypervisor/containerFeaturesDescription']}/>
 117                 </GridItem>
 118         </GridSection>
 119 );
 120
 121 const ImageSection = ({dataMap, onQDataChanged, qgenericFieldInfo}) => (
 122         <GridSection title={i18n('Disk')}>
 123                 <GridItem>
 124                         <Input
 125                                 data-test-id='bootDiskSizePerVM'
 126                                 onChange={(bootDiskSizePerVM) => onQDataChanged({'general/disk/bootDiskSizePerVM' : bootDiskSizePerVM})}
 127                                 label={i18n('Size of boot disk per VM (GB)')}
 128                                 type='number'
 129                                 isValid={qgenericFieldInfo['general/disk/bootDiskSizePerVM'].isValid}
 130                                 errorText={qgenericFieldInfo['general/disk/bootDiskSizePerVM'].errorText}
 131                                 value={dataMap['general/disk/bootDiskSizePerVM']}/>
 132                 </GridItem>
 133                 <GridItem>
 134                         <Input
 135                                 data-test-id='ephemeralDiskSizePerVM'
 136                                 onChange={(ephemeralDiskSizePerVM) => onQDataChanged({'general/disk/ephemeralDiskSizePerVM' : ephemeralDiskSizePerVM})}
 137                                 label={i18n('Size of ephemeral disk per VM (GB)')}
 138                                 type='number'
 139                                 isValid={qgenericFieldInfo['general/disk/ephemeralDiskSizePerVM'].isValid}
 140                                 errorText={qgenericFieldInfo['general/disk/ephemeralDiskSizePerVM'].errorText}
 141                                 value={dataMap['general/disk/ephemeralDiskSizePerVM']}/>
 142                 </GridItem>
 143         </GridSection>
 144 );
 145
 146 const RecoverySection = ({dataMap, onQDataChanged, qgenericFieldInfo}) => (
 147         <GridSection title={i18n('Recovery')}>
 148                 <GridItem>
 149                         <Input
 150                                 data-test-id='pointObjective'
 151                                 label={i18n('VM Recovery Point Objective (Minutes)')}
 152                                 type='number'
 153                                 onChange={(pointObjective) => onQDataChanged({'general/recovery/pointObjective' : pointObjective})}
 154                                 isValid={qgenericFieldInfo['general/recovery/pointObjective'].isValid}
 155                                 errorText={qgenericFieldInfo['general/recovery/pointObjective'].errorText}
 156                                 value={dataMap['general/recovery/pointObjective']}/>
 157                 </GridItem>
 158                 <GridItem>
 159                         <Input
 160                                 data-test-id='timeObjective'
 161                                 label={i18n('VM Recovery Time Objective (Minutes)')}
 162                                 type='number'
 163                                 onChange={(timeObjective) => onQDataChanged({'general/recovery/timeObjective' : timeObjective})}
 164                                 isValid={qgenericFieldInfo['general/recovery/timeObjective'].isValid}
 165                                 errorText={qgenericFieldInfo['general/recovery/timeObjective'].errorText}
 166                                 value={dataMap['general/recovery/timeObjective']}/>
 167                         <div className='empty-two-col' />
 168                 </GridItem>
 169                 <GridItem colSpan={2} />
 170                 <GridItem colSpan={2}>
 171                         <Input
 172                                 data-test-id='vmProcessFailuresHandling'
 173                                 className='textarea'
 174                                 label={i18n('How are in VM process failures handled?')}
 175                                 type='textarea'
 176                                 onChange={(vmProcessFailuresHandling) => onQDataChanged({'general/recovery/vmProcessFailuresHandling' : vmProcessFailuresHandling})}
 177                                 isValid={qgenericFieldInfo['general/recovery/vmProcessFailuresHandling'].isValid}
 178                                 errorText={qgenericFieldInfo['general/recovery/vmProcessFailuresHandling'].errorText}
 179                                 value={dataMap['general/recovery/vmProcessFailuresHandling']}/>
 180                         <div className='empty-two-col' />
 181
 182                 </GridItem>
 183                 {
 184                         /** disabled until backend will be ready to implement it
 185                         <div className='row'>
 186                         <div className='col-md-3'>
 187                         <Input
 188                         label={i18n('VM Recovery Document')}
 189                         type='text'
 190                         pointer='/general/recovery/VMRecoveryDocument'/>
 191                         </div>
 192                         </div>
 193                         */
 194                 }
 195         </GridSection>
 196 );
 197
 198 const DNSConfigurationSection = ({dataMap, onQDataChanged, qgenericFieldInfo}) => (
 199         <GridSection title={i18n('DNS Configuration')}>
 200                 <GridItem colSpan={2}>
 201                         <Input
 202                                 data-test-id='dnsConfiguration'
 203                                 label={i18n('Do you have a need for DNS as a Service? Please describe.')}
 204                                 type='textarea'
 205                                 onChange={(dnsConfiguration) => onQDataChanged({'general/dnsConfiguration' : dnsConfiguration})}
 206                                 isValid={qgenericFieldInfo['general/dnsConfiguration'].isValid}
 207                                 errorText={qgenericFieldInfo['general/dnsConfiguration'].errorText}
 208                                 value={dataMap['general/dnsConfiguration']}/>
 209                 </GridItem>
 210         </GridSection>
 211 );
 212
 213 const CloneSection = ({dataMap, onQDataChanged, qgenericFieldInfo}) => (
 214         <GridSection title={i18n('Clone')}>
 215                 <GridItem colSpan={2}>
 216                         <Input
 217                                 data-test-id='vmCloneUsage'
 218                                 label={i18n('Describe VM Clone Use')}
 219                                 type='textarea'
 220                                 onChange={(vmCloneUsage) => onQDataChanged({'general/vmCloneUsage' : vmCloneUsage})}
 221                                 isValid={qgenericFieldInfo['general/vmCloneUsage'].isValid}
 222                                 errorText={qgenericFieldInfo['general/vmCloneUsage'].errorText}
 223                                 value={dataMap['general/vmCloneUsage']}/>
 224                 </GridItem>
 225         </GridSection>
 226 );
 227
 228 class SoftwareProductComponentsGeneralView extends React.Component {
 229
 230         render() {
 231                 let {isManual, onQDataChanged, onDataChanged, genericFieldInfo, dataMap, qGenericFieldInfo, componentData: {displayName, vfcCode, nfcFunction, description}, isReadOnlyMode} =  this.props;
 232                 return(
 233                         <div className='vsp-components-general'>
 234                                 <div className='general-data'>
 235                                         {genericFieldInfo && qGenericFieldInfo && <Form
 236                                                 isValid={this.props.isFormValid}
 237                                                 formReady={null}
 238                                                 isReadOnlyMode={isReadOnlyMode}
 239                                                 onValidityChanged={(isValidityData) => this.props.onValidityChanged(isValidityData)}
 240                                                 hasButtons={false}>
 241                                                 <GeneralSection
 242                                                         onDataChanged={onDataChanged}
 243                                                         displayName={displayName}
 244                                                         vfcCode={vfcCode}
 245                                                         nfcFunction={nfcFunction}
 246                                                         description={description}
 247                                                         isManual={isManual}
 248                                                         isReadOnlyMode={isReadOnlyMode}
 249                                                         genericFieldInfo={genericFieldInfo}/>
 250                                                 <HypervisorSection  onQDataChanged={onQDataChanged} dataMap={dataMap} qgenericFieldInfo={qGenericFieldInfo}/>
 251                                                 <ImageSection  onQDataChanged={onQDataChanged} dataMap={dataMap} qgenericFieldInfo={qGenericFieldInfo}/>
 252                                                 <RecoverySection  onQDataChanged={onQDataChanged} dataMap={dataMap} qgenericFieldInfo={qGenericFieldInfo}/>
 253                                                 <DNSConfigurationSection  onQDataChanged={onQDataChanged} dataMap={dataMap} qgenericFieldInfo={qGenericFieldInfo}/>
 254                                                 <CloneSection  onQDataChanged={onQDataChanged} dataMap={dataMap} qgenericFieldInfo={qGenericFieldInfo}/>
 255                                         </Form> }
 256                                 </div>
 257                         </div>
 258                 );
 259         }
 260
 261         save() {
 262                 let {onSubmit, componentData, qdata} = this.props;
 263                 return onSubmit({componentData, qdata});
 264         }
 265 }
 266
 267 export default SoftwareProductComponentsGeneralView;