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 Col from 'react-bootstrap/lib/Col';
23 import Row from 'react-bootstrap/lib/Row';
24 import Grid from 'react-bootstrap/lib/Grid';
25 import AddFilters from './components/AddFilters.jsx';
26 import ClearFilter from './components/ClearFilter.jsx';
27 import RunFilterQuery from './components/RunFilterQuery.jsx';
28 import SelectFilter from './components/SelectFilter.jsx';
29 import FilterTypes from './components/FilterTypes.jsx';
30 import {GlobalExtConstants} from 'utils/GlobalExtConstants.js';
31 let APERTURE_SERVICE = JSON.parse(sessionStorage.getItem(GlobalExtConstants.ENVIRONMENT + 'APERTURE_SERVICE'));
33 class Filter extends Component {
36 APERTURE_SERVICE=JSON.parse(sessionStorage.getItem(GlobalExtConstants.ENVIRONMENT + 'APERTURE_SERVICE'));
39 filterList: this.props.filterList,
40 filterSelected: this.props.nodeType,
41 filterDisplay: 'Select Filter' ,
42 filterTypeDisplay: 'Filter Type',
44 showFilter:(this.props.filterMessage && this.props.filterMessage.length > 0) ? true : false,
45 filterMessage:this.props.filterMessage,
47 filterSelectedList:this.props.filterSelectedList,
48 isRunEnable:this.props.isRunEnable,
49 enableRealTime:JSON.parse(sessionStorage.getItem(GlobalExtConstants.ENVIRONMENT + 'ENABLE_ANALYSIS'))
52 console.log('Filter component mount');
54 componentWillReceiveProps(){
55 console.log('filter component componentWillReceiveProps');
57 filterDisplay:this.props.filterDisplay,
58 filterTypeDisplay:this.props.filterTypeDisplay,
59 errorMsg:(this.props.errorMsg) ? this.props.errorMsg : '',
60 filterSelected:this.props.nodeType,
61 showFilter:(this.props.filterMessage && this.props.filterMessage.length > 0) ? true : false,
62 filterMessage: this.props.filterMessage,
64 filterSelectedList:this.props.filterSelectedList,
65 enableRealTime:JSON.parse(sessionStorage.getItem(GlobalExtConstants.ENVIRONMENT + 'ENABLE_ANALYSIS'))
68 renderFilterMessage = (props) => {
69 console.log('Filter render Filter Message>>>>>',props.showFilter);
71 const filters = props.filterSelectedList.map( (filterMsg,index) =>{
72 let filterType=(this.state.enableRealTime && filterMsg.type ==='=')? 'CONTAINS' : filterMsg.type;
74 <div className = 'badgeFilter' key={index}>
75 <span><b>{filterMsg.id}</b> <i>{filterType}</i> {filterMsg.value}</span>
76 <button type='button' className='close' aria-label='Close' onClick={() => this.onRemoveFilters(filterMsg.id.trim(),filterMsg.value.trim(),filterMsg.type)}>
77 <span aria-hidden='true'>×</span>
82 console.log('render Filter Message>>>>>before return ');
84 <Row className='show-grid topBottomMargin'>
85 <Col md={12} className='removeLeftPadding'>
90 console.log('Filter render Filter Message>>>>>After return ');
93 renderError = (props) => {
96 <Row className='show-grid topBottomMargin'>
97 <span className='label badge-pill label-danger topBottomMargin'><strong>Error </strong>: {this.state.errorMsg}</span>
102 filterClearAllButtonSelectedHandler = () => {
103 console.log('clear all called');
104 if(this.state.isRunEnable || this.state.filterMessage.length === 0){
107 filterDisplay: 'Select Filter',
108 filterTypeDisplay: 'Filter Type',
112 filterSelectedList:[]
116 var tempState = this.state;
117 tempState.filterMessage = [];
118 tempState.filterSelectedList = [];
119 tempState.filterValue = '';
120 tempState.errorMsg = '';
121 tempState.filterDisplay = 'Select Filter';
122 tempState.filterTypeDisplay = 'Filter Type';
123 this.setState(tempState,function(){this.props.loadInventory(tempState);});
127 filterAddButtonSelectedHandler = () => {
128 console.log('add Filter called');
129 var found = this.isContaining(this.state.filterDisplay, this.state.filterSelectedList);
130 console.log('filterAddButtonSelectedHandler>>>>>found',found);
131 this.errorMsg = null;
132 let filterDisplayState = true;
133 if(this.state.enableRealTime){
134 if(this.state.filterTypeDisplay !== 'Filter Type'){
135 filterDisplayState = true;
137 filterDisplayState = false;
140 if (this.state.filterDisplay !== 'Select Filter' && filterDisplayState && this.state.filterValue && !found){
141 console.log('filterAddButtonSelectedHandler>>>>>inside',this.state.filterValue);
142 var tempState = this.state;
143 if(this.state.enableRealTime){
144 tempState.filterMessage.push(this.state.filterDisplay + this.state.filterTypeDisplay +this.state.filterValue);
145 tempState.filterSelectedList.push({'id' : this.state.filterDisplay, 'value' : this.state.filterValue,'type': this.state.filterTypeDisplay});
147 tempState.filterMessage.push(this.state.filterDisplay + '=' +this.state.filterValue);
148 tempState.filterSelectedList.push({'id' : this.state.filterDisplay, 'value' : this.state.filterValue,'type': '='});
150 tempState.filterDisplay = 'Select Filter';
151 tempState.filterTypeDisplay = 'Filter Type';
152 tempState.filterValue = '';
153 tempState.showFilter = true;
154 tempState.errorMsg = '';
155 console.log('filterAddButtonSelectedHandler>>>>>tempState',tempState);
156 if(this.state.isRunEnable) {
157 this.setState(tempState);
159 this.setState(tempState,function(){this.props.loadInventory(tempState);});
162 console.log('filterAddButtonSelectedHandler>>>>>Else',this.state.filterDisplay);
163 console.log('filterAddButtonSelectedHandlerfilterTypeDisplay>>>>>Else',this.state.filterTypeDisplay);
164 console.log('this.state.filterValue>>>>>>>>>>>>>>',this.state.filterValue);
166 this.setState({errorMsg: 'Please remove the current filter for this field before trying to add another.'});
167 }else if ( this.state.filterDisplay === 'Select Filter'){
168 this.setState({errorMsg: 'Please select a filter.'});
169 }else if (this.state.enableRealTime && this.state.filterTypeDisplay === 'Filter Type'){
170 this.setState({errorMsg: 'Please select a filter type.'});
172 this.setState({errorMsg: 'Please validate your filter, there seems to be an issue.'});
176 isContaining(nameKey, listArray){
179 listArray.map((lists) => {
180 if(lists.id === nameKey){
181 console.log('foundName key in list',lists.id);
188 onTargetMenuSelect = (listName) => {
189 console.log('onTargetMenuSelect',listName);
190 this.setState({filterDisplay:listName,errorMsg:''});
192 onTargetMenuOfFilterTypes = (listName) => {
193 console.log('onTargetMenuOfFilterTypes',listName);
194 this.setState({filterTypeDisplay:listName,errorMsg:''});
196 onInputDataChange = (event) =>{
197 console.log('inputtext',event.target.value);
198 this.setState({filterValue:event.target.value});
200 onRemoveFilters = (filter,filterText,filterType) => {
201 console.log('onRemoveFilters',this.state.filterSelectedList);
202 var found = this.isContaining(filter, this.state.filterSelectedList);
203 console.log('onRemoveFilters.....found',found);
205 const filterList = this.state.filterSelectedList.filter(function(el) {
206 console.log('el.id',el.id);
207 return el.id !== filter;
209 console.log('onRemoveFilters.....filterList',filterList);
210 let message = filter + filterType + filterText;
211 const filterMsgList = this.state.filterMessage.filter((el) =>{
212 return el !== message;
214 console.log('onRemoveFilters.....filterMsgList',filterMsgList);
215 if(this.state.isRunEnable) {
216 this.setState({filterSelectedList:filterList,filterValue:'',filterMessage:filterMsgList,errorMsg:''});
218 var tempState = this.state;
219 tempState.filterMessage = filterMsgList;
220 tempState.filterSelectedList = filterList;
221 tempState.filterValue = '';
222 tempState.errorMsg = '';
223 this.setState(tempState,function(){this.props.loadInventory(tempState);});
229 if(APERTURE_SERVICE && this.state.enableRealTime){
230 console.log('before passing Filter>*',this.state);
231 filterTags= <Col md={(this.state.isRunEnable) ? 2 : 2} className='removeLeftPadding'>
232 <FilterTypes param={this.state}
233 filterList={this.props.filterList}
234 onMenuSelect={this.onTargetMenuOfFilterTypes} />
238 <div id='filterPane' className={this.props.isFilterEnable ? 'show' : 'hidden'}>
239 <Grid className='custom-container'>
240 <Row className='show-grid topBottomMargin'>
241 <Col md={(this.state.isRunEnable) ? 3 : 2} className='removeLeftPadding'>
242 <SelectFilter param={this.state}
243 filterList={this.props.filterList}
244 onMenuSelect={this.onTargetMenuSelect} />
247 <Col md={(this.state.isRunEnable) ? 7 : 8}>
248 <input type='text' size='36'
249 onBlur={(event) => this.onInputDataChange(event)}
250 placeholder='Please Enter Filter text'
251 value={this.state.filterValue}
252 onChange={(event) => this.onInputDataChange(event)} />
253 <AddFilters param={this.state}
254 addHandler={this.filterAddButtonSelectedHandler} />
255 <ClearFilter param={this.state} clearAllHandler={this.filterClearAllButtonSelectedHandler} />
256 <RunFilterQuery param={this.state} />
260 this.renderError(this.state)
263 this.renderFilterMessage(this.state)
270 export default Filter;