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