openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkListView.jsx

   1 import React from 'react';
   2 import i18n from 'nfvo-utils/i18n/i18n.js';
   3 import ValidationForm from 'nfvo-components/input/validation/ValidationForm.jsx';
   4
   5 import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx';
   6 import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.jsx';
   7 import ValidationInput from'nfvo-components/input/validation/ValidationInput.jsx';
   8 import Modal from 'nfvo-components/modal/Modal.jsx';
   9
  10 import SoftwareProductComponentsNICEditor from './SoftwareProductComponentsNICEditor.js';
  11
  12 class SoftwareProductComponentsNetworkView extends React.Component {
  13
  14         state = {
  15                 localFilter: ''
  16         };
  17
  18         render() {
  19                 let {qdata, qschema, onQDataChanged, isModalInEditMode, isDisplayModal, softwareProductId, componentId, isReadOnlyMode} = this.props;
  20
  21                 return(
  22                         <div className='vsp-components-network'>
  23                                 <div className='network-data'>
  24                                         <div>
  25                                                 <ValidationForm
  26                                                         onDataChanged={onQDataChanged}
  27                                                         data={qdata}
  28                                                         isReadOnlyMode={isReadOnlyMode}
  29                                                         schema={qschema}
  30                                                         hasButtons={false}>
  31                                                         <h3 className='section-title'>{i18n('Network Capacity')}</h3>
  32                                                         <div className='rows-section'>
  33                                                                 <div className='row-flex-components input-row'>
  34                                                                         <div className='single-col'>
  35                                                                                 <ValidationInput
  36                                                                                         label={i18n('Protocol with Highest Traffic Profile across all NICs')}
  37                                                                                         type='select'
  38                                                                                         pointer='/network/networkCapacity/protocolWithHighestTrafficProfileAcrossAllNICs'/>
  39                                                                         </div>
  40                                                                         <div className='single-col add-line-break'>
  41                                                                                 <ValidationInput
  42                                                                                         label={i18n('Network Transactions per Second')}
  43                                                                                         type='text'
  44                                                                                         pointer='/network/networkCapacity/networkTransactionsPerSecond'/>
  45                                                                         </div>
  46                                                                         <div className='empty-two-col' />
  47                                                                 </div>
  48                                                         </div>
  49
  50                                                 </ValidationForm>
  51                                         </div>
  52                                         {this.renderNicList()}
  53                                 </div>
  54                                 <Modal show={isDisplayModal} bsSize='large' animation={true} className='network-nic-modal'>
  55                                         <Modal.Header>
  56                                                 <Modal.Title>{isModalInEditMode ? i18n('Edit NIC') : i18n('Create New NIC')}</Modal.Title>
  57                                         </Modal.Header>
  58                                         <Modal.Body>
  59                                                 {
  60                                                         <SoftwareProductComponentsNICEditor
  61                                                                 softwareProductId={softwareProductId}
  62                                                                 componentId={componentId}
  63                                                                 isReadOnlyMode={isReadOnlyMode}/>
  64                                                 }
  65                                         </Modal.Body>
  66                                 </Modal>
  67                         </div>
  68                 );
  69         }
  70
  71         renderNicList() {
  72                 const {localFilter} = this.state;
  73                 let {onAddNIC, manualMode, isReadOnlyMode} = this.props;
  74                 let onAdd = manualMode ? onAddNIC : false;
  75                 return (
  76                         <ListEditorView
  77                                 title={i18n('Interfaces')}
  78                                 plusButtonTitle={i18n('Add NIC')}
  79                                 filterValue={localFilter}
  80                                 placeholder={i18n('Filter NICs by Name')}
  81                                 onAdd={onAdd}
  82                                 isReadOnlyMode={isReadOnlyMode}
  83                                 onFilter={filter => this.setState({localFilter: filter})}>
  84                                 {!manualMode && this.filterList().map(nic => this.renderNicListItem(nic, isReadOnlyMode))}
  85                         </ListEditorView>
  86                 );
  87         }
  88
  89         renderNicListItem(nic, isReadOnlyMode) {
  90                 let {id, name, description, networkName = ''} = nic;
  91                 let {onEditNicClick, version} =  this.props;
  92                 return (
  93                         <ListEditorItemView
  94                                 key={id}
  95                                 className='list-editor-item-view'
  96                                 isReadOnlyMode={isReadOnlyMode}
  97                                 onSelect={() => onEditNicClick(nic, version)}>
  98
  99                                 <div className='list-editor-item-view-field'>
 100                                         <div className='title'>{i18n('Name')}</div>
 101                                         <div className='name'>{name}</div>
 102                                 </div>
 103                                 <div className='list-editor-item-view-field'>
 104                                         <div className='title'>{i18n('Purpose of NIC')}</div>
 105                                         <div className='description'>{description}</div>
 106                                 </div>
 107                                 <div className='list-editor-item-view-field'>
 108                                         <div className='title'>{i18n('Network')}</div>
 109                                         <div className='artifact-name'>{networkName}</div>
 110                                 </div>
 111
 112                         </ListEditorItemView>
 113                 );
 114         }
 115
 116         filterList() {
 117                 let {nicList} = this.props;
 118                 let {localFilter} = this.state;
 119                 if (localFilter.trim()) {
 120                         const filter = new RegExp(escape(localFilter), 'i');
 121                         return nicList.filter(({name = '', description = ''}) => {
 122                                 return escape(name).match(filter) || escape(description).match(filter);
 123                         });
 124                 }
 125                 else {
 126                         return nicList;
 127                 }
 128         }
 129
 130         save() {
 131                 let {onSubmit, qdata} = this.props;
 132                 return onSubmit({qdata});
 133         }
 134 }
 135
 136 export default SoftwareProductComponentsNetworkView;