openecomp-ui/src/sdc-app/onboarding/softwareProduct/networks/SoftwareProductNetworksView.jsx

   1 import React from 'react';
   2 import i18n from 'nfvo-utils/i18n/i18n.js';
   3
   4 import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx';
   5 import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.jsx';
   6
   7 class SoftwareProductNetworksView extends React.Component {
   8
   9         static propTypes = {
  10                 networksList: React.PropTypes.arrayOf(React.PropTypes.shape({
  11                         id: React.PropTypes.string.isRequired,
  12                         name: React.PropTypes.string.isRequired,
  13                         dhcp: React.PropTypes.bool.isRequired
  14                 })).isRequired
  15         };
  16
  17         state = {
  18                 localFilter: ''
  19         };
  20
  21         render() {
  22                 const {localFilter} = this.state;
  23
  24                 return (
  25                         <div className='vsp-networks-page'>
  26                                 <ListEditorView
  27                                         title={i18n('Networks')}
  28                                         filterValue={localFilter}
  29                                         placeholder={i18n('Filter Networks')}
  30                                         onFilter={filter => this.setState({localFilter: filter})}>
  31                                         {this.filterList().map(network => this.renderNetworksListItem(network))}
  32                                 </ListEditorView>
  33                         </div>
  34                 );
  35         }
  36
  37         renderNetworksListItem(network) {
  38                 let {id, name, dhcp} = network;
  39                 return (
  40                         <ListEditorItemView
  41                                 key={id}
  42                                 className='list-editor-item-view'
  43                                 isReadOnlyMode={true}>
  44
  45                                 <div className='list-editor-item-view-field'>
  46                                         <div className='title'>{i18n('Name')}</div>
  47                                         <div className='name'>{name}</div>
  48                                 </div>
  49                                 <div className='list-editor-item-view-field'>
  50                                         <div className='title'>{i18n('DHCP')}</div>
  51                                         <div className='artifact-name'>{dhcp ? i18n('YES') : i18n('NO')}</div>
  52                                 </div>
  53                         </ListEditorItemView>
  54                 );
  55         }
  56
  57         filterList() {
  58                 let {networksList} = this.props;
  59
  60                 let {localFilter} = this.state;
  61                 if (localFilter.trim()) {
  62                         const filter = new RegExp(escape(localFilter), 'i');
  63                         return networksList.filter(({name = ''}) => {
  64                                 return escape(name).match(filter);
  65                         });
  66                 }
  67                 else {
  68                         return networksList;
  69                 }
  70         }
  71 }
  72
  73 export default SoftwareProductNetworksView;