diff options
Diffstat (limited to 'openecomp-ui/src/sdc-app/onboarding/softwareProduct/networks/SoftwareProductNetworksView.jsx')
-rw-r--r-- | openecomp-ui/src/sdc-app/onboarding/softwareProduct/networks/SoftwareProductNetworksView.jsx | 73 |
1 files changed, 73 insertions, 0 deletions
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/networks/SoftwareProductNetworksView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/networks/SoftwareProductNetworksView.jsx new file mode 100644 index 0000000000..bd47467fe1 --- /dev/null +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/networks/SoftwareProductNetworksView.jsx @@ -0,0 +1,73 @@ +import React from 'react'; +import i18n from 'nfvo-utils/i18n/i18n.js'; + +import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx'; +import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.jsx'; + +class SoftwareProductNetworksView extends React.Component { + + static propTypes = { + networksList: React.PropTypes.arrayOf(React.PropTypes.shape({ + id: React.PropTypes.string.isRequired, + name: React.PropTypes.string.isRequired, + dhcp: React.PropTypes.bool.isRequired + })).isRequired + }; + + state = { + localFilter: '' + }; + + render() { + const {localFilter} = this.state; + + return ( + <div className='vsp-networks-page'> + <ListEditorView + title={i18n('Networks')} + filterValue={localFilter} + placeholder={i18n('Filter Networks')} + onFilter={filter => this.setState({localFilter: filter})}> + {this.filterList().map(network => this.renderNetworksListItem(network))} + </ListEditorView> + </div> + ); + } + + renderNetworksListItem(network) { + let {id, name, dhcp} = network; + return ( + <ListEditorItemView + key={id} + className='list-editor-item-view' + isReadOnlyMode={true}> + + <div className='list-editor-item-view-field'> + <div className='title'>{i18n('Name')}</div> + <div className='name'>{name}</div> + </div> + <div className='list-editor-item-view-field'> + <div className='title'>{i18n('DHCP')}</div> + <div className='artifact-name'>{dhcp ? i18n('YES') : i18n('NO')}</div> + </div> + </ListEditorItemView> + ); + } + + filterList() { + let {networksList} = this.props; + + let {localFilter} = this.state; + if (localFilter.trim()) { + const filter = new RegExp(escape(localFilter), 'i'); + return networksList.filter(({name = ''}) => { + return escape(name).match(filter); + }); + } + else { + return networksList; + } + } +} + +export default SoftwareProductNetworksView; |