src/app/model/modelSearch/components/ModelTabularView.jsx

   1 /*
   2  * ============LICENSE_START=======================================================
   3  * org.onap.aai
   4  * ================================================================================
   5  * Copyright © 2017-2021 AT&T Intellectual Property. All rights reserved.
   6  * ================================================================================
   7  * Licensed under the Apache License, Version 2.0 (the "License");
   8  * you may not use this file except in compliance with the License.
   9  * You may obtain a copy of the License at
  10  *
  11  *       http://www.apache.org/licenses/LICENSE-2.0
  12  *
  13  * Unless required by applicable law or agreed to in writing, software
  14  * distributed under the License is distributed on an "AS IS" BASIS,
  15  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  16  * See the License for the specific language governing permissions and
  17  * limitations under the License.
  18  * ============LICENSE_END=========================================================
  19  */
  20
  21 import React, { Component } from 'react';
  22 import BootstrapTable from 'react-bootstrap-table-next';
  23 import filterFactory, { textFilter, customFilter } from 'react-bootstrap-table2-filter';
  24 import PropTypes from 'prop-types';
  25 import { Link } from 'react-router-dom';
  26 import Label from 'react-bootstrap/lib/Label';
  27 import {GlobalExtConstants} from 'utils/GlobalExtConstants.js';
  28 import {ExportExcel} from 'utils/ExportExcel.js';
  29 let buildAttrList = ExportExcel.buildAttrList;
  30
  31 let INVLIST = GlobalExtConstants.INVLIST;
  32
  33   class RelationshipList extends Component {
  34
  35
  36         constructor(props) {
  37           super(props);
  38           this.props = props;
  39           this.relationships = null;
  40           this.relativesArray = [];
  41           this.state = {
  42                   filteron:false
  43
  44           }
  45         }
  46         render() {
  47
  48
  49           let navigateByoq = null;
  50           this.nodeDisplay = this.props.nodeType + ' : ' + (this.props.nodeUrl).split(this.props.nodeType + '\/').pop();
  51           this.historyClick = () => {
  52                 this.props.openHistoryModal(this.nodeDisplay, this.props.nodeUrl,this.props.nodeType);
  53           }
  54           this.filter = (e) =>{
  55                         let filterValue = e.target.value;
  56                         this.returnFilterList(filterValue);
  57                         this.setState({filteron:true});
  58           }
  59           this.returnFilterList = (filterValue) =>{
  60           if (this.props.nodeRelatives && this.props.nodeRelatives.length > 0) {
  61                 this.relationships = null;
  62                 this.relationships = this.props.nodeRelatives.sort(function(a, b) {
  63                                                                                                            var compareA = (a['node-type'] + (a.url).split(a['node-type']+'\/').pop()).toLowerCase();
  64                                                                                                            var compareB = (b['node-type'] + (b.url).split(a['node-type']+'\/').pop()).toLowerCase();
  65                                                                                                            if(compareA < compareB) return -1;
  66                                                                                                            if(compareA > compareB) return 1;
  67                                                                                                            return 0;
  68                                                                                                           }).map((relative, idx) => {
  69                                                                                                           if (this.relativesArray.includes(relative['node-type']) === false) this.relativesArray.push(relative['node-type']);
  70                                                                                                           if(filterValue === '' || filterValue === ':' || relative['node-type'].toLowerCase().search(filterValue.toLowerCase()) != -1 || (decodeURI((relative.url).split(relative['node-type']+'\/').pop())).replace(/%2F/g,'/').toLowerCase().search(filterValue.toLowerCase()) != -1){
  71                   return (
  72                         <li key={idx + '' +relative.id}>
  73                           <Link
  74                                 key={idx}
  75                                 to={{
  76                                   pathname: '/model/' + relative['node-type'] + '/' + relative.id + '/'+ this.props.enableRealTime,
  77                                   uri: relative.url,
  78                                   historyStackString: this.props.historyStackString
  79                                 }}>
  80                                                 {relative['node-type']}: {(decodeURI((relative.url).split(relative['node-type']+'\/').pop())).replace(/%2F/g,'/')}</Link> <Label bsStyle='default'>{relative['relationship-label'].slice(33)}</Label>
  81                                         </li>
  82                   );
  83                                 }
  84                 });
  85           }
  86                 }
  87                 if(!this.state.filteron){
  88                         this.returnFilterList('');
  89                 }
  90                 let relativesArray = (this.relativesArray.length > 0) ? this.relativesArray.join('&') : this.relativesArray;
  91                 var propKey = '';
  92                         var requiredParams = buildAttrList(this.props.nodeType,[],'mandatory');
  93                         var aliasColumnFilters = (this.props.aliasColumnList && this.props.aliasColumnList[this.props.nodeType])?this.props.aliasColumnList[this.props.nodeType][0]:[];
  94       Object.keys(this.props.nodeProps).map((prop, idx) => {
  95               for(var a in requiredParams){
  96                                         let alias='';
  97                                         if(aliasColumnFilters && aliasColumnFilters[requiredParams[a].value]){
  98                                                 alias=requiredParams[a].value;
  99                                                 requiredParams[a].value=aliasColumnFilters[requiredParams[a].value];
 100                                         }
 101                 if(requiredParams[a].value === prop){
 102                                                 let tag= (alias!='')? alias: prop;
 103                   if(propKey === ''){
 104                     propKey =  tag + ':' + btoa(this.props.nodeProps[prop].toString());
 105                   }else{
 106                     propKey = propKey + ';' + tag + ':' + btoa(this.props.nodeProps[prop].toString());
 107                   }
 108                 }
 109               }
 110             });
 111             let editModalIcon = <a className={this.props.isWriteAllowed ? 'show' : 'hidden'} onClick={e => {this.props.openEditNodeModal(this.props.nodeUrl)}}><i style={{cursor: 'pointer'}} className="pull-right fa fa-pencil-square-o" aria-hidden="true"></i></a>;
 112             let pathNameStr = (relativesArray.length>0) ? '/customDsl/' + this.props.nodeType + '/' + propKey + '/' + relativesArray : '/customDsl/' + this.props.nodeType + '/' + propKey;
 113             navigateByoq = <Link
 114                             to={{
 115                               pathname: pathNameStr
 116                              }}>
 117                              <button type='button' className='btn btn-primary pull-right'>>>BYOQ</button>
 118                            </Link>;
 119           let relationships = [];
 120           if(this.relationships){
 121                 for(var n=0 ; n < this.relationships.length ; n++){
 122                   if(this.relationships[n]){
 123                         relationships.push(this.relationships[n]);
 124                   }
 125                 }
 126           }
 127           if (this.props.nodeRelatives && this.props.nodeRelatives.length > 0) {
 128                 return (
 129                   <div>
 130                         <div style={{float: 'left'}}>
 131                                 <table className='relationshipTable table-striped table-hover table-bordered table-sm'>
 132                                         <thead>
 133                                                 <tr className='table-header-view'>
 134                                                         <th titlename='Relationships'>
 135                                                                 Relationships
 136                                                                 <div>
 137                                                                         <input
 138                                                                                 key='input'
 139                                                                                 type='text'
 140                                                                                 placeholder='Enter Relationship...'
 141                                                                                 onChange={(e) => this.filter(e)}
 142                                           />
 143                                                                 </div>
 144                                                         </th>
 145                                                 </tr>
 146                                         </thead>
 147                                         <tbody>
 148                                         <tr>
 149                                                 <td>
 150                                                         <ul>
 151                                                                 {relationships}
 152                                                         </ul>
 153                                                 </td>
 154                                         </tr>
 155                                         </tbody>
 156                                 </table>
 157                         </div>
 158                         <div style={{float: 'left', margin: '10px'}}>
 159                                 { INVLIST.isHistoryEnabled && (<button type='button' className='btn btn-primary pull-right' onClick={this.historyClick}>
 160                                         History
 161                                   </button>)}
 162                         </div>
 163                         <div style={{float: 'left',margin: '10px'}}>
 164                                 {navigateByoq}
 165                         </div>
 166                         <div style={{float: 'left',margin: '10px'}}>
 167                 {editModalIcon}
 168             </div>
 169                   </div>
 170                 )
 171           } else {
 172                 return (
 173                   <div>
 174                         <div style={{float: 'left', margin: '10px'}}>
 175                                 <button type='button' className='btn btn-outline-disabled'>
 176                                   No relationships
 177                                 </button>
 178                         </div>
 179                         <div style={{float: 'left', margin: '10px'}}>
 180                                 { INVLIST.isHistoryEnabled && (<button type='button' className='btn btn-primary' onClick={this.historyClick}>
 181                                   History
 182                                 </button>)}
 183                         </div>
 184                         <div style={{float: 'left', margin: '10px'}}>
 185                                 {navigateByoq}
 186                         </div>
 187                         <div style={{float: 'left',margin: '10px'}}>
 188                 {editModalIcon}
 189             </div>
 190                   </div>
 191                 );
 192           }
 193         }
 194   }
 195
 196 export default RelationshipList;
 197 //export default AttributeFilter;