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 | 309 |
1 files changed, 309 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..3a90c8042f --- /dev/null +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/vnfMarketPlace/VNFImportView.jsx @@ -0,0 +1,309 @@ +/* + * 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> + ); + } 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; |