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