2 * ============LICENSE_START=======================================================
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
11 * http://www.apache.org/licenses/LICENSE-2.0
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=========================================================
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';
30 let INVLIST = GlobalExtConstants.INVLIST;
31 let OXM = GlobalExtConstants.OXM;
34 let APERTURE_SERVICE = JSON.parse(sessionStorage.getItem(GlobalExtConstants.ENVIRONMENT + 'APERTURE_SERVICE'));
36 class SpecializedSearch extends Component {
42 filterDisplay: 'Select Filter',
43 filterTypeDisplay: 'Filter Type',
48 filterSelectedList:[],
50 enableRealTime: JSON.parse(sessionStorage.getItem(GlobalExtConstants.ENVIRONMENT + 'ENABLE_ANALYSIS'))
55 APERTURE_SERVICE=JSON.parse(sessionStorage.getItem(GlobalExtConstants.ENVIRONMENT + 'APERTURE_SERVICE'));
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 === ''){
64 { filterSelected: INVLIST.INVENTORYLIST[item].modelPath,filterDisplay:'Select Filter',filterTypeDisplay:'Filter Type'},
65 function(){this.populateFilteringOptions();}.bind(this));
70 isContaining(nameKey, listArray){
72 listArray.map((lists) => {
73 if(lists.id === nameKey){
74 console.log('foundName key in list',lists.id);
80 radioButtonSelectedHandler(event) {
81 console.log('radio button clicked');
83 { filterSelected: event.target.value,filterList:[],filterSelectedList:[],filterDisplay:'Select Filter',filterTypeDisplay:'Filter Type',filterMessage:[]},
84 function(){this.populateFilteringOptions();}.bind(this)
87 camelToDash = (str) => {
88 return (str.replace(/\W+/g, '-')
89 .replace(/([a-z\d])([A-Z])/g, '$1-$2')).toLowerCase();
91 populateFilteringOptions = () => {
93 let result = JSON.parse(OXM);
94 let arrayOfTypes = result['xml-bindings']['java-types'][0]['java-type'];
95 console.log('arrayOfTypes ', arrayOfTypes);
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);
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);
108 if(searchParam === 'PINTERFACE'){
109 searchParam = 'pInterface';
111 if(this.state.filterSelected.toUpperCase() === 'LINESOFBUSINESS'){
112 searchParam = 'lineOfBusiness';
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]);
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;
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);
140 //sort the filter list
141 tempState.filterList = tempState.filterList.sort(function(filter1, filter2) {
142 if ( filter1.value < filter2.value ){
144 }else if( filter1.value > filter2.value ){
151 this.setState(tempState);
152 console.log('tempState.filterList ' + JSON.stringify(tempState.filterList));
154 initialUpdateOfFilter = (filter) => {
156 { filterSelected: filter,filterDisplay:'Select Filter',filterTypeDisplay:'Filter Type'},
157 function(){this.populateFilteringOptions();}.bind(this)
160 toggleRealTimeAnalysisCallback=(checked)=>{
161 console.log('toggleRealTimeAnalysisCallback>>>>',checked);
162 sessionStorage.setItem(GlobalExtConstants.ENVIRONMENT + 'ENABLE_ANALYSIS', !checked);
164 this.setState({ enableRealTime: !checked,
166 filterSelectedList:[],
167 filterDisplay:'Select Filter',
168 filterTypeDisplay:'Filter Type',
174 showFilter: false},function(){this.populateFilteringOptions();}.bind(this));
177 var toggelRealtimeAnalysis = '';
178 if(APERTURE_SERVICE){
179 toggelRealtimeAnalysis = <div className='toggleSwitch'><BootstrapSwitchButton
180 checked={!this.state.enableRealTime}
186 onChange={(checked) => {
187 this.toggleRealTimeAnalysisCallback(checked);
192 if(this.state.filterSelected !== ''){
193 pagetitle = INVLIST.INVENTORYLIST[this.state.filterSelected.replace(/\s/g,'').toUpperCase()].display;
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;
201 let selectedClass = 'leftNavSelection';
203 selectedClass = 'leftNavSelected ';
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>
221 {toggelRealtimeAnalysis}
222 <div id='specialSearch'>
223 <header className='addPadding jumbotron my-4'>
224 <h1 className='display-2'>Network Element Specialized Search</h1>
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.
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'>
240 <Col md={9} className='mainSectionSelection'>
241 <Panel bsStyle='primary'>
243 <Panel.Title componentClass='h3'>Filter Section : {pagetitle} </Panel.Title>
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}/>
266 export default SpecializedSearch;