src/app/specializedSearch/SpecializedSearch.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 Filter from 'generic-components/filter/Filter.jsx';
  23 import {GlobalExtConstants} from 'utils/GlobalExtConstants.js';
  24 import Col from 'react-bootstrap/lib/Col';
  25 import Row from 'react-bootstrap/lib/Row';
  26 import Grid from 'react-bootstrap/lib/Grid';
  27 import Panel from 'react-bootstrap/lib/Panel';
  28 import BootstrapSwitchButton from 'bootstrap-switch-button-react';
  29
  30 let INVLIST = GlobalExtConstants.INVLIST;
  31 let OXM = GlobalExtConstants.OXM;
  32
  33 let invList = null;
  34 let APERTURE_SERVICE = JSON.parse(sessionStorage.getItem(GlobalExtConstants.ENVIRONMENT + 'APERTURE_SERVICE'));
  35
  36 class SpecializedSearch extends Component {
  37
  38   state = {
  39     data: [],
  40     filterList: [],
  41     filterSelected: '',
  42     filterDisplay: 'Select Filter',
  43     filterTypeDisplay: 'Filter Type',
  44     errorMsg: '',
  45     showFilter:false,
  46     filterMessage:[],
  47     filterValue:'',
  48     filterSelectedList:[],
  49     isRunEnable:true,
  50     enableRealTime: JSON.parse(sessionStorage.getItem(GlobalExtConstants.ENVIRONMENT + 'ENABLE_ANALYSIS'))
  51   };
  52
  53   constructor(){
  54     super();
  55     APERTURE_SERVICE=JSON.parse(sessionStorage.getItem(GlobalExtConstants.ENVIRONMENT + 'APERTURE_SERVICE'));
  56   }
  57   componentDidMount(){
  58
  59     if(this.state.filterSelected === ''){
  60       const invKeys = Object.keys(INVLIST.INVENTORYLIST);
  61       invKeys.sort().map((item,i) => {
  62         if(i === 0 && this.state.filterSelected === ''){
  63           this.setState(
  64             { filterSelected: INVLIST.INVENTORYLIST[item].modelPath,filterDisplay:'Select Filter',filterTypeDisplay:'Filter Type'},
  65             function(){this.populateFilteringOptions();}.bind(this));
  66         }
  67       });
  68     }
  69   };
  70   isContaining(nameKey, listArray){
  71     var found = false;
  72     listArray.map((lists) => {
  73       if(lists.id === nameKey){
  74         console.log('foundName key in list',lists.id);
  75         found = true;
  76       }
  77     });
  78     return found;
  79   };
  80   radioButtonSelectedHandler(event) {
  81     console.log('radio button clicked');
  82     this.setState(
  83       { filterSelected: event.target.value,filterList:[],filterSelectedList:[],filterDisplay:'Select Filter',filterTypeDisplay:'Filter Type',filterMessage:[]},
  84       function(){this.populateFilteringOptions();}.bind(this)
  85     );
  86   };
  87   camelToDash = (str) => {
  88     return (str.replace(/\W+/g, '-')
  89         .replace(/([a-z\d])([A-Z])/g, '$1-$2')).toLowerCase();
  90   }
  91   populateFilteringOptions = () => {
  92
  93     let result = JSON.parse(OXM);
  94     let arrayOfTypes = result['xml-bindings']['java-types'][0]['java-type'];
  95     console.log('arrayOfTypes ', arrayOfTypes);
  96     let foundIndex = -1;
  97     let searchParam = this.state.filterSelected;
  98     if(['PSERVER', 'COMPLEX', 'CLOUDREGION', 'NETWORKPROFILE', 'VIRTUALDATACENTER'].indexOf(this.state.filterSelected.toUpperCase()) === -1){
  99       searchParam = this.state.filterSelected.substring(0, this.state.filterSelected.length - 1);
 100     }
 101     if('CHASSIES'.indexOf(this.state.filterSelected.toUpperCase()) !== -1){
 102       searchParam = this.state.filterSelected.substring(0, this.state.filterSelected.length - 2) + 's';
 103     }else if(this.state.filterSelected.substr(this.state.filterSelected.length - 3) === 'ies'){
 104       searchParam = this.state.filterSelected.substring(0, this.state.filterSelected.length - 3) + 'y';
 105     }else if('COMPLEXES'.indexOf(this.state.filterSelected.toUpperCase()) !== -1){
 106       searchParam = this.state.filterSelected.substring(0, this.state.filterSelected.length - 2);
 107     }
 108     if(searchParam === 'PINTERFACE'){
 109       searchParam = 'pInterface';
 110     }
 111     if(this.state.filterSelected.toUpperCase() === 'LINESOFBUSINESS'){
 112       searchParam = 'lineOfBusiness';
 113     }
 114     console.log('searchParam Node type',searchParam);
 115     for (var i = 0; i < arrayOfTypes.length && foundIndex === -1; i++) {
 116       if (arrayOfTypes[i]['xml-root-element'][0]['$']['name'] === this.camelToDash(searchParam)) {
 117         console.log(arrayOfTypes[i]);
 118         foundIndex = i;
 119       }
 120     }
 121     var tempState = this.state;
 122     tempState.filterList = [];
 123     if(foundIndex !== -1){
 124       tempState.errorMsg = '';
 125       //build the filter list
 126       if (arrayOfTypes[foundIndex]['java-attributes']) {
 127         let elementLength = 0;
 128         if (arrayOfTypes[foundIndex]['java-attributes'][0]['xml-element']) {
 129           elementLength = arrayOfTypes[foundIndex]['java-attributes'][0]['xml-element'].length;
 130         }
 131         for (var j = 0; j < elementLength; j++) {
 132           let isPrimitive = JSON.stringify(arrayOfTypes[foundIndex]['java-attributes'][0]['xml-element'][j]['$']['type']).indexOf('java.lang') > -1;
 133           if(isPrimitive) { //add to the list
 134             let node = {value: arrayOfTypes[foundIndex]['java-attributes'][0]['xml-element'][j]['$']['name']};
 135             tempState.filterList.push(node);
 136           }
 137         }
 138       }
 139
 140       //sort the filter list
 141       tempState.filterList = tempState.filterList.sort(function(filter1, filter2) {
 142         if ( filter1.value < filter2.value ){
 143           return -1;
 144         }else if( filter1.value > filter2.value ){
 145           return 1;
 146         }else{
 147           return 0;
 148         }
 149       });
 150     }
 151     this.setState(tempState);
 152     console.log('tempState.filterList ' + JSON.stringify(tempState.filterList));
 153   };
 154   initialUpdateOfFilter = (filter) => {
 155     this.setState(
 156       { filterSelected: filter,filterDisplay:'Select Filter',filterTypeDisplay:'Filter Type'},
 157       function(){this.populateFilteringOptions();}.bind(this)
 158     );
 159   };
 160   toggleRealTimeAnalysisCallback=(checked)=>{
 161     console.log('toggleRealTimeAnalysisCallback>>>>',checked);
 162     sessionStorage.setItem(GlobalExtConstants.ENVIRONMENT + 'ENABLE_ANALYSIS', !checked);
 163
 164     this.setState({ enableRealTime: !checked,
 165                     filterList:[],
 166                     filterSelectedList:[],
 167                     filterDisplay:'Select Filter',
 168                     filterTypeDisplay:'Filter Type',
 169                     filterMessage:[],
 170                     errorMsg: "",
 171                     filterMessage: [],
 172                     filterValue: "",
 173                     isRunEnable: true,
 174                     showFilter: false},function(){this.populateFilteringOptions();}.bind(this));
 175   }
 176   render(){
 177     var toggelRealtimeAnalysis = '';
 178           if(APERTURE_SERVICE){
 179                   toggelRealtimeAnalysis = <div className='toggleSwitch'><BootstrapSwitchButton
 180                                                                         checked={!this.state.enableRealTime}
 181                                                                         onlabel='Real Time'
 182                                                                         onstyle='danger'
 183                                                                         offlabel='Analysis'
 184                                                                         offstyle='success'
 185                                                                         style='w-100 mx-3'
 186                                                                         onChange={(checked) => {
 187                                                                                 this.toggleRealTimeAnalysisCallback(checked);
 188                                                                         }}
 189                                                                 /></div>
 190          }
 191     let pagetitle = '';
 192     if(this.state.filterSelected !== ''){
 193       pagetitle = INVLIST.INVENTORYLIST[this.state.filterSelected.replace(/\s/g,'').toUpperCase()].display;
 194     }
 195     const invKeys = Object.keys(INVLIST.INVENTORYLIST);
 196     invList = invKeys.sort().map((item,i) => {
 197       let checkedStatus = INVLIST.INVENTORYLIST[item].modelPath === this.state.filterSelected;
 198       if(i === 0 && this.state.filterSelected === ''){
 199         checkedStatus = true;
 200       }
 201       let selectedClass = 'leftNavSelection';
 202       if(checkedStatus){
 203         selectedClass = 'leftNavSelected ';
 204       }
 205       return (
 206         <div key={INVLIST.INVENTORYLIST[item].display} className={'form-row ' + selectedClass}>
 207         <label role='radio' className='radio'>
 208               <input type='radio' name='optionsRadios' className='optionsRadios'
 209                 value={INVLIST.INVENTORYLIST[item].modelPath}
 210                 checked={checkedStatus}
 211                 onChange={(event)=> this.radioButtonSelectedHandler(event)}/>
 212             <i className='skin'></i>
 213             <span>{INVLIST.INVENTORYLIST[item].display}</span>
 214         </label>
 215         </div>
 216       );
 217     });
 218
 219     return(
 220       <div>
 221           {toggelRealtimeAnalysis}
 222           <div id='specialSearch'>
 223                 <header className='addPadding jumbotron my-4'>
 224                     <h1 className='display-2'>Network Element Specialized Search</h1>
 225                     <p className='lead'>
 226                       On this page you have the ability to build a set of query criteria per network element type and run a query. Simply choose the network element type from the radio buttons, build your filters, and run.
 227                     </p>
 228                 </header>
 229           </div>
 230             <div className='addPadding'>
 231                 <Row className='show-grid' style={{margin: '0px'}}>
 232                   <Col md={3} className='leftNavSelection'>
 233                     <header>List of Network Element Types</header>
 234                     <form id='filters'  name='myForm'>
 235                       <fieldset role='radiogroup' aria-labelledby='radiolabel1' className='leftNavSelection'>
 236                         {invList}
 237                       </fieldset>
 238                     </form>
 239                   </Col>
 240                   <Col md={9} className='mainSectionSelection'>
 241                     <Panel bsStyle='primary'>
 242                       <Panel.Heading>
 243                         <Panel.Title componentClass='h3'>Filter Section : {pagetitle} </Panel.Title>
 244                       </Panel.Heading>
 245                       <Panel.Body>
 246                         <Filter key='specializedSearch'
 247                           nodeType={this.state.filterSelected}
 248                           filterList={this.state.filterList}
 249                           filterDisplay={this.state.filterDisplay}
 250                           filterTypeDisplay={this.state.filterTypeDisplay}
 251                           isRunEnable={this.state.isRunEnable}
 252                           filterMessage={this.state.filterMessage}
 253                           filterSelectedList={this.state.filterSelectedList}
 254                           isFilterEnable={true}
 255                           errorMsg={this.state.errorMsg}
 256                           enableRealTime={this.state.enableRealTime}/>
 257                       </Panel.Body>
 258                     </Panel>
 259                   </Col>
 260                 </Row>
 261               </div>
 262           </div>
 263     );
 264   }
 265 }
 266 export default SpecializedSearch;