openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkListView.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 Form from 'nfvo-components/input/validation/Form.jsx';
  19
  20 import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx';
  21 import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.jsx';
  22 import ListEditorItemViewField from 'nfvo-components/listEditor/ListEditorItemViewField.jsx';
  23 import Input from'nfvo-components/input/validation/Input.jsx';
  24
  25
  26 class SoftwareProductComponentsNetworkView extends React.Component {
  27
  28         state = {
  29                 localFilter: ''
  30         };
  31
  32         render() {
  33                 let {dataMap, qgenericFieldInfo, onQDataChanged, isReadOnlyMode} = this.props;
  34
  35                 return(
  36                         <div className='vsp-components-network'>
  37                                 <div className='network-data'>
  38                                         <div>
  39 { qgenericFieldInfo && <Form
  40         formReady={null}
  41         isValid={true}
  42         onSubmit={() => this.save()}
  43         isReadOnlyMode={isReadOnlyMode}
  44         hasButtons={false}>
  45                                                         <h3 className='section-title'>{i18n('Network Capacity')}</h3>
  46                                                         <div className='rows-section'>
  47                                                                 <div className='row-flex-components'>
  48                                                                         <div className='single-col'>
  49                                                                                 <Input
  50                                                                                         data-test-id='protocolWithHighestTrafficProfileAcrossAllNICs'
  51                                                                                         label={i18n('Protocol with Highest Traffic Profile across all NICs')}
  52                                                                                         type='select'
  53                                                                                         groupClassName='bootstrap-input-options'
  54                                                                                         className='input-options-select'
  55                                                                                         isValid={qgenericFieldInfo['network/networkCapacity/protocolWithHighestTrafficProfileAcrossAllNICs'].isValid}
  56                                                                                         errorText={qgenericFieldInfo['network/networkCapacity/protocolWithHighestTrafficProfileAcrossAllNICs'].errorText}
  57                                                                                         value={dataMap['network/networkCapacity/protocolWithHighestTrafficProfileAcrossAllNICs']}
  58                                                                                         onChange={(e) => {
  59                                                                                                 const selectedIndex = e.target.selectedIndex;
  60                                                                                                 const val = e.target.options[selectedIndex].value;
  61                                                                                                 onQDataChanged({'network/networkCapacity/protocolWithHighestTrafficProfileAcrossAllNICs' : val});}
  62                                                                                         }>
  63                                                                                         <option key='placeholder' value=''>{i18n('Select...')}</option>
  64                                                                                         { qgenericFieldInfo['network/networkCapacity/protocolWithHighestTrafficProfileAcrossAllNICs'].enum.map(proto =>
  65                                                                                                 <option value={proto.enum} key={proto.enum}>{proto.title}</option>) }
  66                                                                                 </Input>
  67                                                                         </div>
  68                                                                         <div className='single-col add-line-break'>
  69                                                                                 <Input
  70                                                                                         data-test-id='networkTransactionsPerSecond'
  71                                                                                         label={i18n('Network Transactions per Second')}
  72                                                                                         type='number'
  73                                                                                         onChange={(ntps) => onQDataChanged({'network/networkCapacity/networkTransactionsPerSecond' : ntps})}
  74                                                                                         isValid={qgenericFieldInfo['network/networkCapacity/networkTransactionsPerSecond'].isValid}
  75                                                                                         errorText={qgenericFieldInfo['network/networkCapacity/networkTransactionsPerSecond'].errorText}
  76                                                                                         value={dataMap['network/networkCapacity/networkTransactionsPerSecond']} />
  77                                                                         </div>
  78                                                                         <div className='empty-two-col' />
  79                                                                 </div>
  80                                                         </div>
  81
  82                                                 </Form> }
  83                                         </div>
  84                                         {this.renderNicList()}
  85                                 </div>
  86
  87                         </div>
  88                 );
  89         }
  90
  91         renderNicList() {
  92                 const {localFilter} = this.state;
  93                 let {isReadOnlyMode, onAddNic, isManual} = this.props;
  94                 return (
  95                         <ListEditorView
  96                                 title={i18n('Interfaces')}
  97                                 filterValue={localFilter}
  98                                 placeholder={i18n('Filter NICs by Name')}
  99                                 isReadOnlyMode={isReadOnlyMode}
 100                                 onFilter={value => this.setState({localFilter: value})}
 101                                 onAdd={isManual ? onAddNic : null}
 102                                 plusButtonTitle={i18n('Add NIC')}
 103                                 twoColumns>
 104                                 {this.filterList().map(nic => this.renderNicListItem(nic, isReadOnlyMode))}
 105                         </ListEditorView>
 106                 );
 107         }
 108
 109         renderNicListItem(nic, isReadOnlyMode) {
 110                 let {id, name, description, networkName = ''} = nic;
 111                 let {onEditNicClick, version, isManual, onDeleteNic} =  this.props;
 112                 return (
 113                         <ListEditorItemView
 114                                 key={id}
 115                                 isReadOnlyMode={isReadOnlyMode}
 116                                 onSelect={() => onEditNicClick(nic, version, isReadOnlyMode)}
 117                                 onDelete={isManual ? () => onDeleteNic(nic, version) : null}>
 118
 119                                 <ListEditorItemViewField>
 120                                         <div className='name'>{name}</div>
 121                                 </ListEditorItemViewField>
 122                                 <ListEditorItemViewField>
 123                                         <div className={isManual ? 'details-col' : 'details'}>
 124                                                 <div className={isManual ? 'manual-title' : 'title'}>{i18n('Purpose of NIC')}</div>
 125                                                 <div className={isManual ? 'description' : ''}>{description ? description : i18n('N/A')}</div>
 126                                         </div>
 127                                         {!isManual && <div className='details'>
 128                                                 <div className='title'>{i18n('Network')}</div>
 129                                                 <div className='artifact-name'>{networkName}</div>
 130                                         </div>}
 131                                 </ListEditorItemViewField>
 132
 133                         </ListEditorItemView>
 134                 );
 135         }
 136
 137         filterList() {
 138                 let {nicList} = this.props;
 139                 let {localFilter} = this.state;
 140                 if (localFilter.trim()) {
 141                         const filter = new RegExp(escape(localFilter), 'i');
 142                         return nicList.filter(({name = '', description = ''}) => {
 143                                 return escape(name).match(filter) || escape(description).match(filter);
 144                         });
 145                 }
 146                 else {
 147                         return nicList;
 148                 }
 149         }
 150
 151         save() {
 152                 let {onSubmit, qdata, version} = this.props;
 153                 return onSubmit({qdata, version});
 154         }
 155 }
 156
 157 export default SoftwareProductComponentsNetworkView;