diff options
Diffstat (limited to 'openecomp-ui/src/sdc-app/onboarding/softwareProduct/vnfMarketPlace/VNFImportView.jsx')
| -rw-r--r-- | openecomp-ui/src/sdc-app/onboarding/softwareProduct/vnfMarketPlace/VNFImportView.jsx | 176 |
1 files changed, 176 insertions, 0 deletions
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/vnfMarketPlace/VNFImportView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/vnfMarketPlace/VNFImportView.jsx new file mode 100644 index 0000000000..f56396f48d --- /dev/null +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/vnfMarketPlace/VNFImportView.jsx @@ -0,0 +1,176 @@ +/* + * Copyright 2017 Huawei Technologies Co., Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React from 'react'; +import GridSection from 'nfvo-components/grid/GridSection.jsx'; +import GridItem from 'nfvo-components/grid/GridItem.jsx'; +import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx'; +import i18n from 'nfvo-utils/i18n/i18n.js'; +import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js'; +import Button from 'sdc-ui/lib/react/Button.js'; +import VNFImportActionHelper from '../vnfMarketPlace/VNFImportActionHelper.js'; + + +function VNFAction({action, isHeader, downloadCSAR, id, currSoftwareProduct}) { + if (isHeader) { + return <span>{action}</span>; + } + return ( + <span> + <SVGIcon name='download' color='positive' onClick={() => {downloadCSAR(id, currSoftwareProduct);}}/> + </span> + ); +} + +function VNFSortableCellHeader({isHeader, data, isDes, onSort, activeSortColumn}) { + //TODO check icon sdc-ui + if (isHeader) { + if(activeSortColumn === data) { + return ( + <span className='vnf-table-header' onClick={()=>{onSort(activeSortColumn);}}> + <span>{data}</span> + <span className={`header-sort-arrow ${isDes ? 'up' : 'down'}`}></span> + </span> + ); + } + else { + return ( + <span className='vnf-table-header' onClick={()=>{activeSortColumn = data; onSort(activeSortColumn);}}> + <span>{data}</span> + </span> + ); + } + } + return ( + <span className='vnf-table-cell'> + <span>{data}</span> + </span> + ); +} + +export function VNFItemList({vnf, isHeader, isDes, onSort, activeSortColumn, downloadCSAR, selectTableRow, selectedRow, currentSoftwareProduct}) { + let {csarId, name, version, provider, shortDesc, action} = vnf; + return ( + <li className={`vnfBrowse-list-item ${isHeader ? 'header' : ''} ${csarId === selectedRow ? 'selectedRow' : ''}`} + data-test-id='vnfBrowse-list-item' onClick={() => {selectTableRow(csarId);}}> + <div className='table-cell vnftable-name' data-test-id='vnftable-name'> + <VNFSortableCellHeader isHeader={isHeader} data={name} isDes={isDes} onSort={(activeSort)=> {onSort('name', activeSort);}} activeSortColumn={activeSortColumn}/> + </div> + <div className='table-cell vnftable-version' data-test-id='vnftable-version'> + <VNFSortableCellHeader isHeader={isHeader} data={version} isDes={isDes} onSort={(activeSort)=> {onSort('version', activeSort);}} activeSortColumn={activeSortColumn}/> + </div> + <div className='table-cell vnftable-provider' data-test-id='vnftable-provider'> + <VNFSortableCellHeader isHeader={isHeader} data={provider} isDes={isDes} onSort={(activeSort)=> {onSort('provider', activeSort);}} activeSortColumn={activeSortColumn}/> + </div> + <div className='table-cell vnftable-shortDesc' data-test-id='vnftable-shortDesc'> + <VNFSortableCellHeader isHeader={isHeader} data={shortDesc} isDes={isDes} onSort={(activeSort)=> {onSort('shortDesc', activeSort);}} activeSortColumn={activeSortColumn}/> + </div> + <div className='table-cell vnftable-action' data-test-id='vnftable-action'> + <VNFAction isHeader={isHeader} action={action} downloadCSAR= {downloadCSAR} id={csarId} currSoftwareProduct={currentSoftwareProduct}/> + </div> + </li> + ); +} + +class VNFImportView extends React.Component { + + state = { + localFilter: '', + sortDescending: true, + sortCrit: 'name', + activeSortColumn : 'Name', + selectedRow: '' + }; + + render() { + let {onCancel, onSubmit, currentSoftwareProduct} = this.props; + + return ( + <div className='vnf-creation-page'> + <GridSection className='vnf-grid-section'> + <GridItem colSpan='4'> + <ListEditorView + title={i18n('VNF List Title')} + filterValue={this.state.localFilter} + onFilter={filter => this.setState({localFilter: filter})}> + <VNFItemList + isHeader={true} + vnf={{csarId: 0, name: i18n('VNF Header Name'), version: i18n('VNF Header Version'), + provider: i18n('VNF Header Vendor'), shortDesc: i18n('VNF Header Desc'), action: i18n('VNF Header Action')}} + isDes={this.state.sortDescending} + onSort={(sortCriteria, activeSortCol) => this.setState({sortDescending: !this.state.sortDescending, sortCrit: sortCriteria, activeSortColumn: activeSortCol})} + activeSortColumn={this.state.activeSortColumn}/> + {this.sortVNFItems(this.filterVNFItems(), + this.state.sortDescending, this.state.sortCrit).map(vnf => <VNFItemList key={vnf.id} vnf={vnf} + downloadCSAR={this.downloadCSAR} selectTableRow={(selID) => + {this.setState({selectedRow: selID});this.selectTableRow(selID);}} selectedRow={this.state.selectedRow} currentSoftwareProduct={currentSoftwareProduct}/>)} + </ListEditorView> + </GridItem> + <GridItem colSpan='4'> + <div className='vnf-modal'> + <Button className='vnf-submit' type='button' btnType='default' onClick={() => + onSubmit(this.state.selectedRow, currentSoftwareProduct)}>{i18n('OK')} + </Button> + <Button className='Cancel' type='button' btnType='outline' onClick={onCancel}>{i18n('Cancel')} + </Button> + </div> + </GridItem> + </GridSection> + </div> + ); + } + + filterVNFItems() { + let {vnfItems} = this.props; + let {localFilter} = this.state; + if (localFilter.trim()) { + const filter = new RegExp(escape(localFilter), 'i'); + return vnfItems.filter( + ({name = '', provider = '', version = '', shortDesc = ''}) => + escape(name).match(filter) || escape(provider).match(filter) || escape(version).match(filter) || escape(shortDesc).match(filter)); + } + else { + return vnfItems; + } + } + + sortVNFItems(vnfItems, sortDesc, sortCrit) { + if (sortDesc) { + return vnfItems.sort((a, b) => + { + if(a[sortCrit] < b[sortCrit]){ + return -1; + } + else if(a[sortCrit] > b[sortCrit]){ + return 1; + } + else { + return 0; + } + }); + } + else { + return vnfItems.reverse(); + } + } + + downloadCSAR(id, currSoftwareProduct) { + VNFImportActionHelper.download(id, currSoftwareProduct); + } + +} + +export default VNFImportView; |