src/generic-components/InfoToggle.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 Modal from 'react-bootstrap/lib/Modal';
  23 import Col from 'react-bootstrap/lib/Col';
  24 import Row from 'react-bootstrap/lib/Row';
  25 import Tabs from 'react-bootstrap/lib/Tabs';
  26 import Button from 'react-bootstrap/lib/Button';
  27 import Tab from 'react-bootstrap/lib/Tab';
  28 import BootstrapTable from 'react-bootstrap-table-next';
  29 import {GlobalExtConstants} from 'utils/GlobalExtConstants.js';
  30
  31
  32 class InfoToggle extends Component {
  33   constructor(props){
  34       console.log(props);
  35       super(props);
  36       this.props = props;
  37       this.state = {
  38                      showInfoModal: false
  39                    };
  40   }
  41   openInfoModal = () =>{
  42         this.setState({showInfoModal:true});
  43   }
  44   closeInfoModal = () =>{
  45         this.setState({showInfoModal:false});
  46   }
  47   getReferenceJson = (reference) =>{
  48     return require('app/assets/configuration/' + GlobalExtConstants.PATHNAME + '/reference/' + reference + '.json');
  49   }
  50   render(){
  51     let tableColumnsList = [];
  52     let tableDataList = [];
  53     let types = this.getReferenceJson('types');
  54     types.map(type => {
  55          tableColumnsList[type] = [];
  56          tableDataList[type] = this.getReferenceJson(type);
  57          for(var key in tableDataList[type][0]){
  58             var isHidden = key === 'id';
  59             tableColumnsList[type].push({dataField: key, text: key, hidden: isHidden });
  60          }
  61     });
  62     let tabs=types.map((nodeType,index) => {
  63       return(
  64         <Tab eventKey={nodeType} title={nodeType}>
  65           <BootstrapTable
  66               id={nodeType}
  67               keyField='id'
  68               data={tableDataList[nodeType]}
  69               columns={tableColumnsList[nodeType]}
  70               bordered={ true }
  71               headerClasses='table-header-view'
  72               bootstrap4 striped hover condensed
  73           />
  74         </Tab>
  75       )
  76     });
  77       if (!GlobalExtConstants.INVLIST.IS_ONAP){
  78             return (
  79             <div>
  80               <div className='static-modal'>
  81                                         <Modal show={this.state.showInfoModal} onHide={this.closeInfoModal}>
  82                                                 <Modal.Header>
  83                                                         <Modal.Title>Information</Modal.Title>
  84                                                 </Modal.Header>
  85                                                 <Modal.Body>
  86                                             <Tabs defaultActiveKey={types[0]} id="multipleTabularView">
  87                                               {tabs}
  88                                             </Tabs>
  89                                                 </Modal.Body>
  90                                                 <Modal.Footer>
  91                                                         <Button onClick={this.closeInfoModal}>Close</Button>
  92                                                 </Modal.Footer>
  93                                         </Modal>
  94               </div>
  95               <div className='col-xs-1'>
  96                   <i className='dsl-hint icon-documents-manual' onClick={this.openInfoModal} ></i>
  97                   <pre>Info</pre>
  98               </div>
  99             </div>);
 100       }else{
 101             return (<span></span>);
 102       }
 103   }
 104 };
 105
 106 export default InfoToggle;