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

   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, description, isReadOnlyMode, genericFieldInfo}) => (
  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={true}
  41                                 type='text'/>
  42                         <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                 </GridItem>
  52                 <GridItem colSpan={2}>
  53                         <Input
  54                                 label={i18n('Description')}
  55                                 isValid={genericFieldInfo.description.isValid}
  56                                 errorText={genericFieldInfo.description.errorText}
  57                                 onChange={description => onDataChanged({description})}
  58                                 disabled={isReadOnlyMode}
  59                                 value={description}
  60                                 groupClassName='multi-line-textarea'
  61                                 data-test-id='description'
  62                                 type='textarea'/>
  63                 </GridItem>
  64                 <GridItem />
  65         </GridSection>
  66                 );
  67
  68 const HypervisorSection = ({dataMap, onQDataChanged, qgenericFieldInfo}) => (
  69         <GridSection title={i18n('Hypervisor')}>
  70                 <GridItem>
  71                         <Input
  72                                 data-test-id='hypervisor'
  73                                 label={i18n('Supported Hypervisors')}
  74                                 type='select'
  75                                 className='input-options-select'
  76                                 groupClassName='bootstrap-input-options'
  77                                 isValid={qgenericFieldInfo['general/hypervisor/hypervisor'].isValid}
  78                                 errorText={qgenericFieldInfo['general/hypervisor/hypervisor'].errorText}
  79                                 value={dataMap['general/hypervisor/hypervisor']}
  80                                 onChange={(e) => {
  81                                         const selectedIndex = e.target.selectedIndex;
  82                                         const val = e.target.options[selectedIndex].value;
  83                                         onQDataChanged({'general/hypervisor/hypervisor' : val});}
  84                                 }>
  85                                 <option key='placeholder' value=''>{i18n('Select...')}</option>
  86                                 {qgenericFieldInfo['general/hypervisor/hypervisor'].enum.map(hv => <option value={hv.enum} key={hv.enum}>{hv.title}</option>)}
  87                         </Input>
  88                 </GridItem>
  89                 <GridItem colSpan={2}>
  90                         <Input
  91                                 data-test-id='drivers'
  92                                 onChange={(driver) => onQDataChanged({'general/hypervisor/drivers' : driver})}
  93                                 label={i18n('Hypervisor Drivers')}
  94                                 type='text'
  95                                 isValid={qgenericFieldInfo['general/hypervisor/drivers'].isValid}
  96                                 errorText={qgenericFieldInfo['general/hypervisor/drivers'].errorText}
  97                                 value={dataMap['general/hypervisor/drivers']}/>
  98                 </GridItem>
  99                 <GridItem colSpan={3}>
 100                         <Input
 101                                 data-test-id='containerFeaturesDescription'
 102                                 label={i18n('Describe Container Features')}
 103                                 type='textarea'
 104                                 onChange={(containerFeaturesDescription) => onQDataChanged({'general/hypervisor/containerFeaturesDescription' : containerFeaturesDescription})}
 105                                 isValid={qgenericFieldInfo['general/hypervisor/containerFeaturesDescription'].isValid}
 106                                 errorText={qgenericFieldInfo['general/hypervisor/containerFeaturesDescription'].errorText}
 107                                 value={dataMap['general/hypervisor/containerFeaturesDescription']}/>
 108                 </GridItem>
 109         </GridSection>
 110 );
 111
 112 const ImageSection = ({dataMap, onQDataChanged, qgenericFieldInfo}) => (
 113         <GridSection title={i18n('Image')}>
 114                 <GridItem>
 115                         <Input
 116                                 data-test-id='format'
 117                                 label={i18n('Image format')}
 118                                 type='select'
 119                                 className='input-options-select'
 120                                 groupClassName='bootstrap-input-options'
 121                                 isValid={qgenericFieldInfo['general/image/format'].isValid}
 122                                 errorText={qgenericFieldInfo['general/image/format'].errorText}
 123                                 value={dataMap['general/image/format']}
 124                                 onChange={(e) => {
 125                                         const selectedIndex = e.target.selectedIndex;
 126                                         const val = e.target.options[selectedIndex].value;
 127                                         onQDataChanged({'general/image/format' : val});}
 128                                 }>
 129                                 <option key='placeholder' value=''>{i18n('Select...')}</option>
 130                                 {qgenericFieldInfo['general/image/format'].enum.map(hv => <option value={hv.enum} key={hv.enum}>{hv.title}</option>)}
 131                         </Input>
 132                 </GridItem>
 133                 <GridItem>
 134                         <Input
 135                                 data-test-id='providedBy'
 136                                 label={i18n('Image provided by')}
 137                                 type='select'
 138                                 className='input-options-select'
 139                                 groupClassName='bootstrap-input-options'
 140                                 isValid={qgenericFieldInfo['general/image/providedBy'].isValid}
 141                                 errorText={qgenericFieldInfo['general/image/providedBy'].errorText}
 142                                 value={dataMap['general/image/providedBy']}
 143                                 onChange={(e) => {
 144                                         const selectedIndex = e.target.selectedIndex;
 145                                         const val = e.target.options[selectedIndex].value;
 146                                         onQDataChanged({'general/image/providedBy' : val});}
 147                                 }>
 148                                 <option key='placeholder' value=''>{i18n('Select...')}</option>
 149                                 {qgenericFieldInfo['general/image/providedBy'].enum.map(hv => <option value={hv.enum} key={hv.enum}>{hv.title}</option>)}
 150                         </Input>
 151                 </GridItem>
 152                 <GridItem>
 153                         <Input
 154                                 data-test-id='bootDiskSizePerVM'
 155                                 onChange={(bootDiskSizePerVM) => onQDataChanged({'general/image/bootDiskSizePerVM' : bootDiskSizePerVM})}
 156                                 label={i18n('Size of boot disk per VM (GB)')}
 157                                 type='number'
 158                                 isValid={qgenericFieldInfo['general/image/bootDiskSizePerVM'].isValid}
 159                                 errorText={qgenericFieldInfo['general/image/bootDiskSizePerVM'].errorText}
 160                                 value={dataMap['general/image/bootDiskSizePerVM']}/>
 161                 </GridItem>
 162                 <GridItem>
 163                         <Input
 164                                 data-test-id='ephemeralDiskSizePerVM'
 165                                 onChange={(ephemeralDiskSizePerVM) => onQDataChanged({'general/image/ephemeralDiskSizePerVM' : ephemeralDiskSizePerVM})}
 166                                 label={i18n('Size of ephemeral disk per VM (GB)')}
 167                                 type='number'
 168                                 isValid={qgenericFieldInfo['general/image/ephemeralDiskSizePerVM'].isValid}
 169                                 errorText={qgenericFieldInfo['general/image/ephemeralDiskSizePerVM'].errorText}
 170                                 value={dataMap['general/image/ephemeralDiskSizePerVM']}/>
 171                 </GridItem>
 172         </GridSection>
 173 );
 174
 175 const RecoverySection = ({dataMap, onQDataChanged, qgenericFieldInfo}) => (
 176         <GridSection title={i18n('Recovery')}>
 177                 <GridItem>
 178                         <Input
 179                                 data-test-id='pointObjective'
 180                                 label={i18n('VM Recovery Point Objective (Minutes)')}
 181                                 type='number'
 182                                 onChange={(pointObjective) => onQDataChanged({'general/recovery/pointObjective' : pointObjective})}
 183                                 isValid={qgenericFieldInfo['general/recovery/pointObjective'].isValid}
 184                                 errorText={qgenericFieldInfo['general/recovery/pointObjective'].errorText}
 185                                 value={dataMap['general/recovery/pointObjective']}/>
 186                 </GridItem>
 187                 <GridItem>
 188                         <Input
 189                                 data-test-id='timeObjective'
 190                                 label={i18n('VM Recovery Time Objective (Minutes)')}
 191                                 type='number'
 192                                 onChange={(timeObjective) => onQDataChanged({'general/recovery/timeObjective' : timeObjective})}
 193                                 isValid={qgenericFieldInfo['general/recovery/timeObjective'].isValid}
 194                                 errorText={qgenericFieldInfo['general/recovery/timeObjective'].errorText}
 195                                 value={dataMap['general/recovery/timeObjective']}/>
 196                         <div className='empty-two-col' />
 197                 </GridItem>
 198                 <GridItem colSpan={2} />
 199                 <GridItem colSpan={2}>
 200                         <Input
 201                                 data-test-id='vmProcessFailuresHandling'
 202                                 className='textarea'
 203                                 label={i18n('How are in VM process failures handled?')}
 204                                 type='textarea'
 205                                 onChange={(vmProcessFailuresHandling) => onQDataChanged({'general/recovery/vmProcessFailuresHandling' : vmProcessFailuresHandling})}
 206                                 isValid={qgenericFieldInfo['general/recovery/vmProcessFailuresHandling'].isValid}
 207                                 errorText={qgenericFieldInfo['general/recovery/vmProcessFailuresHandling'].errorText}
 208                                 value={dataMap['general/recovery/vmProcessFailuresHandling']}/>
 209                         <div className='empty-two-col' />
 210
 211                 </GridItem>
 212                 {
 213                         /** disabled until backend will be ready to implement it
 214                         <div className='row'>
 215                         <div className='col-md-3'>
 216                         <Input
 217                         label={i18n('VM Recovery Document')}
 218                         type='text'
 219                         pointer='/general/recovery/VMRecoveryDocument'/>
 220                         </div>
 221                         </div>
 222                         */
 223                 }
 224         </GridSection>
 225 );
 226
 227 const DNSConfigurationSection = ({dataMap, onQDataChanged, qgenericFieldInfo}) => (
 228         <GridSection title={i18n('DNS Configuration')}>
 229                 <GridItem colSpan={2}>
 230                         <Input
 231                                 data-test-id='dnsConfiguration'
 232                                 label={i18n('Do you have a need for DNS as a Service? Please describe.')}
 233                                 type='textarea'
 234                                 onChange={(dnsConfiguration) => onQDataChanged({'general/dnsConfiguration' : dnsConfiguration})}
 235                                 isValid={qgenericFieldInfo['general/dnsConfiguration'].isValid}
 236                                 errorText={qgenericFieldInfo['general/dnsConfiguration'].errorText}
 237                                 value={dataMap['general/dnsConfiguration']}/>
 238                 </GridItem>
 239         </GridSection>
 240 );
 241
 242 const CloneSection = ({dataMap, onQDataChanged, qgenericFieldInfo}) => (
 243         <GridSection title={i18n('Clone')}>
 244                 <GridItem colSpan={2}>
 245                         <Input
 246                                 data-test-id='vmCloneUsage'
 247                                 label={i18n('Describe VM Clone Use')}
 248                                 type='textarea'
 249                                 onChange={(vmCloneUsage) => onQDataChanged({'general/vmCloneUsage' : vmCloneUsage})}
 250                                 isValid={qgenericFieldInfo['general/vmCloneUsage'].isValid}
 251                                 errorText={qgenericFieldInfo['general/vmCloneUsage'].errorText}
 252                                 value={dataMap['general/vmCloneUsage']}/>
 253                 </GridItem>
 254         </GridSection>
 255 );
 256
 257 class SoftwareProductComponentsGeneralView extends React.Component {
 258
 259         render() {
 260                 let {onQDataChanged, onDataChanged,     genericFieldInfo, dataMap, qGenericFieldInfo, componentData: {displayName, vfcCode, description}, isReadOnlyMode} =  this.props;
 261                 return(
 262                         <div className='vsp-components-general'>
 263                                 <div className='general-data'>
 264                                         {genericFieldInfo && qGenericFieldInfo && <Form
 265                                                 isValid={this.props.isFormValid}
 266                                                 formReady={null}
 267                                                 isReadOnlyMode={isReadOnlyMode}
 268                                                 onValidityChanged={(isValidityData) => this.props.onValidityChanged(isValidityData)}
 269                                                 hasButtons={false}>
 270                                                 <GeneralSection
 271                                                         onDataChanged={onDataChanged}
 272                                                         displayName={displayName}
 273                                                         vfcCode={vfcCode}
 274                                                         description={description}
 275                                                         isReadOnlyMode={isReadOnlyMode}
 276                                                         genericFieldInfo={genericFieldInfo}/>
 277                                                 <HypervisorSection  onQDataChanged={onQDataChanged} dataMap={dataMap} qgenericFieldInfo={qGenericFieldInfo}/>
 278                                                 <ImageSection  onQDataChanged={onQDataChanged} dataMap={dataMap} qgenericFieldInfo={qGenericFieldInfo}/>
 279                                                 <RecoverySection  onQDataChanged={onQDataChanged} dataMap={dataMap} qgenericFieldInfo={qGenericFieldInfo}/>
 280                                                 <DNSConfigurationSection  onQDataChanged={onQDataChanged} dataMap={dataMap} qgenericFieldInfo={qGenericFieldInfo}/>
 281                                                 <CloneSection  onQDataChanged={onQDataChanged} dataMap={dataMap} qgenericFieldInfo={qGenericFieldInfo}/>
 282                                         </Form> }
 283                                 </div>
 284                         </div>
 285                 );
 286         }
 287
 288         save() {
 289                 let {onSubmit, componentData, qdata} = this.props;
 290                 return onSubmit({componentData, qdata});
 291         }
 292 }
 293
 294 export default SoftwareProductComponentsGeneralView;