openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreationView.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 import Input from 'nfvo-components/input/validation/Input.jsx';
  19 import Form from 'nfvo-components/input/validation/Form.jsx';
  20 import GridSection from 'nfvo-components/grid/GridSection.jsx';
  21 import GridItem from 'nfvo-components/grid/GridItem.jsx';
  22
  23 const NICPropType = React.PropTypes.shape({
  24         id: React.PropTypes.string,
  25         name: React.PropTypes.string,
  26         description: React.PropTypes.string,
  27         networkId: React.PropTypes.string
  28 });
  29
  30 class NICCreationView extends React.Component {
  31
  32         static propTypes = {
  33                 data: NICPropType,
  34                 onDataChanged: React.PropTypes.func.isRequired,
  35                 onSubmit: React.PropTypes.func.isRequired,
  36                 onCancel: React.PropTypes.func.isRequired
  37         };
  38
  39         render() {
  40                 let {data = {}, onDataChanged, genericFieldInfo, isFormValid, onValidateForm, formReady} = this.props;
  41                 let {name, description, networkDescription} = data;
  42                 return (
  43                         <div>
  44                         {genericFieldInfo && <Form
  45                                 ref={(form) => this.form = form}
  46                                 hasButtons={true}
  47                                 onSubmit={ () => this.submit() }
  48                                 submitButtonText={data.id ? i18n('Save') : i18n('Create')}
  49                                 onReset={ () => this.props.onCancel() }
  50                                 labledButtons={true}
  51                                 isValid={isFormValid}
  52                                 onValidateForm={() => onValidateForm()}
  53                                 formReady={formReady} >
  54                                 <GridSection>
  55                                         <GridItem colSpan={4}>
  56                                                 <Input
  57                                                         value={name}
  58                                                         label={i18n('Name')}
  59                                                         data-test-id='nic-name'
  60                                                         onChange={name => onDataChanged({name})}
  61                                                         isRequired={true}
  62                                                         type='text'
  63                                                         isValid={genericFieldInfo['name'].isValid}
  64                                                         errorText={genericFieldInfo['name'].errorText}
  65                                                         className='field-section'/>
  66                                                 <Input
  67                                                         value={description}
  68                                                         label={i18n('Description')}
  69                                                         data-test-id='nic-description'
  70                                                         onChange={description => onDataChanged({description})}
  71                                                         isValid={genericFieldInfo['description'].isValid}
  72                                                         errorText={genericFieldInfo['description'].errorText}
  73                                                         type='textarea'
  74                                                         className='field-section'/>
  75                                         </GridItem>
  76                                 </GridSection>
  77                                 <GridSection title={i18n('Network')}>
  78                                         <GridItem colSpan={2}>
  79                                                 <div className='form-group'>
  80                                                         <label className='control-label'>{i18n('Network Type')}</label>
  81                                                         <div className='network-type-radio'>
  82                                                                 <Input
  83                                                                         label={i18n('Internal')}
  84                                                                         disabled
  85                                                                         checked={false}
  86                                                                         data-test-id='nic-internal'
  87                                                                         className='network-radio disabled'
  88                                                                         type='radio'/>
  89                                                                 <Input
  90                                                                         label={i18n('External')}
  91                                                                         disabled
  92                                                                         checked={true}
  93                                                                         data-test-id='nic-external'
  94                                                                         className='network-radio disabled'
  95                                                                         type='radio'/>
  96                                                         </div>
  97                                                 </div>
  98                                         </GridItem>
  99                                         <GridItem colSpan={2}>
 100                                                 <Input
 101                                                         value={networkDescription}
 102                                                         label={i18n('Network Description')}
 103                                                         data-test-id='nic-network-description'
 104                                                         onChange={networkDescription => onDataChanged({networkDescription})}
 105                                                         isValid={genericFieldInfo['networkDescription'].isValid}
 106                                                         errorText={genericFieldInfo['networkDescription'].errorText}
 107                                                         type='text'
 108                                                         className='field-section'/>
 109                                         </GridItem>
 110                                 </GridSection>
 111                         </Form>}
 112                         </div>
 113                 );
 114         }
 115
 116
 117         submit() {
 118                 const {data: nic, softwareProductId, componentId, currentSoftwareProduct} = this.props;
 119                 this.props.onSubmit({nic, softwareProductId, componentId, version: currentSoftwareProduct.version});
 120         }
 121 }
 122
 123 export default NICCreationView;