openecomp-ui/src/sdc-app/onboarding/softwareProduct/vnfMarketPlace/VNFImportView.jsx

   1 /*
   2  * Copyright 2017 Huawei Technologies Co., Ltd.
   3  *
   4  * Licensed under the Apache License, Version 2.0 (the "License");
   5  * you may not use this file except in compliance with the License.
   6  * You may obtain a copy of the License at
   7  *
   8  *     http://www.apache.org/licenses/LICENSE-2.0
   9  *
  10  * Unless required by applicable law or agreed to in writing, software
  11  * distributed under the License is distributed on an "AS IS" BASIS,
  12  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13  * See the License for the specific language governing permissions and
  14  * limitations under the License.
  15  */
  16
  17 import React from 'react';
  18 import GridSection from 'nfvo-components/grid/GridSection.jsx';
  19 import GridItem from 'nfvo-components/grid/GridItem.jsx';
  20 import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx';
  21 import i18n from 'nfvo-utils/i18n/i18n.js';
  22 import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
  23 import Button from 'sdc-ui/lib/react/Button.js';
  24 import VNFImportActionHelper from '../vnfMarketPlace/VNFImportActionHelper.js';
  25
  26 function VNFAction({
  27     action,
  28     isHeader,
  29     downloadCSAR,
  30     id,
  31     currSoftwareProduct
  32 }) {
  33     if (isHeader) {
  34         return <span>{action}</span>;
  35     }
  36     return (
  37         <span>
  38             <SVGIcon
  39                 name="download"
  40                 color="positive"
  41                 onClick={() => {
  42                     downloadCSAR(id, currSoftwareProduct);
  43                 }}
  44             />
  45         </span>
  46     );
  47 }
  48
  49 function VNFSortableCellHeader({
  50     isHeader,
  51     data,
  52     isDes,
  53     onSort,
  54     activeSortColumn
  55 }) {
  56     //TODO check icon sdc-ui
  57     if (isHeader) {
  58         if (activeSortColumn === data) {
  59             return (
  60                 <span
  61                     className="vnf-table-header"
  62                     onClick={() => {
  63                         onSort(activeSortColumn);
  64                     }}>
  65                     <span>{data}</span>
  66                     <span
  67                         className={`header-sort-arrow ${isDes ? 'up' : 'down'}`}
  68                     />
  69                 </span>
  70             );
  71         } else {
  72             return (
  73                 <span
  74                     className="vnf-table-header"
  75                     onClick={() => {
  76                         activeSortColumn = data;
  77                         onSort(activeSortColumn);
  78                     }}>
  79                     <span>{data}</span>
  80                 </span>
  81             );
  82         }
  83     }
  84     return (
  85         <span className="vnf-table-cell">
  86             <span>{data}</span>
  87         </span>
  88     );
  89 }
  90
  91 export function VNFItemList({
  92     vnf,
  93     isHeader,
  94     isDes,
  95     onSort,
  96     activeSortColumn,
  97     downloadCSAR,
  98     selectTableRow,
  99     selectedRow,
 100     currentSoftwareProduct
 101 }) {
 102     let { csarId, name, version, provider, shortDesc, action } = vnf;
 103     return (
 104         <li
 105             className={`vnfBrowse-list-item ${isHeader ? 'header' : ''} ${
 106                 csarId === selectedRow ? 'selectedRow' : ''
 107             }`}
 108             data-test-id="vnfBrowse-list-item"
 109             onClick={() => {
 110                 selectTableRow(csarId);
 111             }}>
 112             <div
 113                 className="table-cell vnftable-name"
 114                 data-test-id="vnftable-name">
 115                 <VNFSortableCellHeader
 116                     isHeader={isHeader}
 117                     data={name}
 118                     isDes={isDes}
 119                     onSort={activeSort => {
 120                         onSort('name', activeSort);
 121                     }}
 122                     activeSortColumn={activeSortColumn}
 123                 />
 124             </div>
 125             <div
 126                 className="table-cell vnftable-version"
 127                 data-test-id="vnftable-version">
 128                 <VNFSortableCellHeader
 129                     isHeader={isHeader}
 130                     data={version}
 131                     isDes={isDes}
 132                     onSort={activeSort => {
 133                         onSort('version', activeSort);
 134                     }}
 135                     activeSortColumn={activeSortColumn}
 136                 />
 137             </div>
 138             <div
 139                 className="table-cell vnftable-provider"
 140                 data-test-id="vnftable-provider">
 141                 <VNFSortableCellHeader
 142                     isHeader={isHeader}
 143                     data={provider}
 144                     isDes={isDes}
 145                     onSort={activeSort => {
 146                         onSort('provider', activeSort);
 147                     }}
 148                     activeSortColumn={activeSortColumn}
 149                 />
 150             </div>
 151             <div
 152                 className="table-cell vnftable-shortDesc"
 153                 data-test-id="vnftable-shortDesc">
 154                 <VNFSortableCellHeader
 155                     isHeader={isHeader}
 156                     data={shortDesc}
 157                     isDes={isDes}
 158                     onSort={activeSort => {
 159                         onSort('shortDesc', activeSort);
 160                     }}
 161                     activeSortColumn={activeSortColumn}
 162                 />
 163             </div>
 164             <div
 165                 className="table-cell vnftable-action"
 166                 data-test-id="vnftable-action">
 167                 <VNFAction
 168                     isHeader={isHeader}
 169                     action={action}
 170                     downloadCSAR={downloadCSAR}
 171                     id={csarId}
 172                     currSoftwareProduct={currentSoftwareProduct}
 173                 />
 174             </div>
 175         </li>
 176     );
 177 }
 178
 179 class VNFImportView extends React.Component {
 180     state = {
 181         localFilter: '',
 182         sortDescending: true,
 183         sortCrit: 'name',
 184         activeSortColumn: 'Name',
 185         selectedRow: ''
 186     };
 187
 188     render() {
 189         let { onCancel, onSubmit, currentSoftwareProduct } = this.props;
 190
 191         return (
 192             <div className="vnf-creation-page">
 193                 <GridSection className="vnf-grid-section">
 194                     <GridItem colSpan="4">
 195                         <ListEditorView
 196                             title={i18n('VNF List Title')}
 197                             filterValue={this.state.localFilter}
 198                             onFilter={filter =>
 199                                 this.setState({ localFilter: filter })
 200                             }>
 201                             <VNFItemList
 202                                 isHeader={true}
 203                                 vnf={{
 204                                     csarId: 0,
 205                                     name: i18n('VNF Header Name'),
 206                                     version: i18n('VNF Header Version'),
 207                                     provider: i18n('VNF Header Vendor'),
 208                                     shortDesc: i18n('VNF Header Desc'),
 209                                     action: i18n('VNF Header Action')
 210                                 }}
 211                                 isDes={this.state.sortDescending}
 212                                 onSort={(sortCriteria, activeSortCol) =>
 213                                     this.setState({
 214                                         sortDescending: !this.state
 215                                             .sortDescending,
 216                                         sortCrit: sortCriteria,
 217                                         activeSortColumn: activeSortCol
 218                                     })
 219                                 }
 220                                 activeSortColumn={this.state.activeSortColumn}
 221                             />
 222                             {this.sortVNFItems(
 223                                 this.filterVNFItems(),
 224                                 this.state.sortDescending,
 225                                 this.state.sortCrit
 226                             ).map(vnf => (
 227                                 <VNFItemList
 228                                     key={vnf.id}
 229                                     vnf={vnf}
 230                                     downloadCSAR={this.downloadCSAR}
 231                                     selectTableRow={selID => {
 232                                         this.setState({ selectedRow: selID });
 233                                         this.selectTableRow(selID);
 234                                     }}
 235                                     selectedRow={this.state.selectedRow}
 236                                     currentSoftwareProduct={
 237                                         currentSoftwareProduct
 238                                     }
 239                                 />
 240                             ))}
 241                         </ListEditorView>
 242                     </GridItem>
 243                     <GridItem colSpan="4">
 244                         <div className="vnf-modal">
 245                             <Button
 246                                 className="vnf-submit"
 247                                 type="button"
 248                                 btnType="primary"
 249                                 onClick={() =>
 250                                     onSubmit(
 251                                         this.state.selectedRow,
 252                                         currentSoftwareProduct
 253                                     )
 254                                 }>
 255                                 {i18n('OK')}
 256                             </Button>
 257                             <Button
 258                                 className="Cancel"
 259                                 type="button"
 260                                 btnType="secondary"
 261                                 onClick={onCancel}>
 262                                 {i18n('Cancel')}
 263                             </Button>
 264                         </div>
 265                     </GridItem>
 266                 </GridSection>
 267             </div>
 268         );
 269     }
 270
 271     filterVNFItems() {
 272         let { vnfItems } = this.props;
 273         let { localFilter } = this.state;
 274         if (localFilter.trim()) {
 275             const filter = new RegExp(escape(localFilter), 'i');
 276             return vnfItems.filter(
 277                 ({ name = '', provider = '', version = '', shortDesc = '' }) =>
 278                     escape(name).match(filter) ||
 279                     escape(provider).match(filter) ||
 280                     escape(version).match(filter) ||
 281                     escape(shortDesc).match(filter)
 282             );
 283         } else {
 284             return vnfItems;
 285         }
 286     }
 287
 288     sortVNFItems(vnfItems, sortDesc, sortCrit) {
 289         if (sortDesc) {
 290             return vnfItems.sort((a, b) => {
 291                 if (a[sortCrit] < b[sortCrit]) {
 292                     return -1;
 293                 } else if (a[sortCrit] > b[sortCrit]) {
 294                     return 1;
 295                 } else {
 296                     return 0;
 297                 }
 298             });
 299         } else {
 300             return vnfItems.reverse();
 301         }
 302     }
 303
 304     downloadCSAR(id, currSoftwareProduct) {
 305         VNFImportActionHelper.download(id, currSoftwareProduct);
 306     }
 307 }
 308
 309 export default VNFImportView;