Updated Sparky to add ECOMP functionality Browse, Specialized Search, BYOQ, and the Builder FE Updates

Issue-ID: AAI-3250
Change-Id: I576e37f77f7e9b40d72e4a5e7de645e9f62bc7d2
Signed-off-by: wr148d <wr148d@att.com>

6 files changed, 582 insertions, 0 deletions

diff --git a/src/generic-components/filter/Filter.jsx b/src/generic-components/filter/Filter.jsx
new file mode 100644
index 0000000..2270665
--- /dev/null
+++ b/src/generic-components/filter/Filter.jsx
@@ -0,0 +1,270 @@
+/*
+ * ============LICENSE_START=======================================================
+ * org.onap.aai
+ * ================================================================================
+ * Copyright © 2017-2021 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *       http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
+import React, {Component} from 'react';
+import Col from 'react-bootstrap/lib/Col';
+import Row from 'react-bootstrap/lib/Row';
+import Grid from 'react-bootstrap/lib/Grid';
+import AddFilters from './components/AddFilters.jsx';
+import ClearFilter from './components/ClearFilter.jsx';
+import RunFilterQuery from './components/RunFilterQuery.jsx';
+import SelectFilter from './components/SelectFilter.jsx';
+import FilterTypes from './components/FilterTypes.jsx';
+import {GlobalExtConstants} from 'utils/GlobalExtConstants.js';
+let APERTURE_SERVICE = JSON.parse(sessionStorage.getItem(GlobalExtConstants.ENVIRONMENT + 'APERTURE_SERVICE'));
+
+class Filter extends Component {
+  constructor(props){
+    super(props);
+    APERTURE_SERVICE=JSON.parse(sessionStorage.getItem(GlobalExtConstants.ENVIRONMENT + 'APERTURE_SERVICE'));
+  };
+  state = {
+    filterList: this.props.filterList,
+    filterSelected: this.props.nodeType,
+    filterDisplay: 'Select Filter' ,
+    filterTypeDisplay: 'Filter Type',
+    errorMsg: '',
+    showFilter:(this.props.filterMessage && this.props.filterMessage.length > 0) ? true : false,
+    filterMessage:this.props.filterMessage,
+    filterValue:'',
+    filterSelectedList:this.props.filterSelectedList,
+    isRunEnable:this.props.isRunEnable,
+    enableRealTime:JSON.parse(sessionStorage.getItem(GlobalExtConstants.ENVIRONMENT + 'ENABLE_ANALYSIS'))
+  };    
+  componentDidMount(){
+    console.log('Filter component  mount');    
+  };
+  componentWillReceiveProps(){
+    console.log('filter component  componentWillReceiveProps');
+    this.setState({
+      filterDisplay:this.props.filterDisplay,
+      filterTypeDisplay:this.props.filterTypeDisplay,
+      errorMsg:(this.props.errorMsg) ? this.props.errorMsg : '',
+      filterSelected:this.props.nodeType,
+      showFilter:(this.props.filterMessage && this.props.filterMessage.length > 0) ? true : false,
+      filterMessage: this.props.filterMessage,
+      filterValue:'',
+      filterSelectedList:this.props.filterSelectedList,
+      enableRealTime:JSON.parse(sessionStorage.getItem(GlobalExtConstants.ENVIRONMENT + 'ENABLE_ANALYSIS'))
+    });
+  }
+  renderFilterMessage = (props) => {
+    console.log('Filter render Filter Message>>>>>',props.showFilter);
+    if(props.showFilter){          
+    	const filters = props.filterSelectedList.map( (filterMsg,index) =>{
+        let filterType=(this.state.enableRealTime && filterMsg.type ==='=')? 'CONTAINS' : filterMsg.type;     
+        return (
+          <div className = 'badgeFilter' key={index}>
+           <span><b>{filterMsg.id}</b>&nbsp;<i>{filterType}</i>&nbsp;{filterMsg.value}</span>
+            <button type='button' className='close' aria-label='Close' onClick={() => this.onRemoveFilters(filterMsg.id.trim(),filterMsg.value.trim(),filterMsg.type)}>
+               <span aria-hidden='true'>&times;</span>
+            </button>
+          </div>
+        );
+      });
+      console.log('render Filter Message>>>>>before return ');
+      return(
+        <Row className='show-grid topBottomMargin'>
+            <Col md={12} className='removeLeftPadding'>
+                { filters }        
+            </Col> 
+        </Row>
+      );
+      console.log('Filter render Filter Message>>>>>After return ');    
+    }    
+  };    
+  renderError = (props) => {
+    if(props.errorMsg) {
+      return(
+        <Row className='show-grid topBottomMargin'>
+          <span className='label badge-pill label-danger topBottomMargin'><strong>Error </strong>: {this.state.errorMsg}</span>
+        </Row>
+      );
+    }
+  };
+  filterClearAllButtonSelectedHandler = () => {
+    console.log('clear all called');
+    if(this.state.isRunEnable || this.state.filterMessage.length === 0){
+      this.setState(
+        {
+          filterDisplay: 'Select Filter',
+          filterTypeDisplay: 'Filter Type',
+          errorMsg: '',
+          filterMessage: [],
+          filterValue:'',
+          filterSelectedList:[]
+        }
+      );
+    }else{
+      var tempState = this.state;
+      tempState.filterMessage = [];
+      tempState.filterSelectedList = [];
+      tempState.filterValue = ''; 
+      tempState.errorMsg = '';
+      tempState.filterDisplay = 'Select Filter';
+      tempState.filterTypeDisplay = 'Filter Type';
+      this.setState(tempState,function(){this.props.loadInventory(tempState);});
+    }
+    
+  };
+  filterAddButtonSelectedHandler = () => {
+    console.log('add Filter called');
+    var found = this.isContaining(this.state.filterDisplay, this.state.filterSelectedList);
+    console.log('filterAddButtonSelectedHandler>>>>>found',found);
+    this.errorMsg = null;
+    let filterDisplayState = true;
+    if(this.state.enableRealTime){
+      if(this.state.filterTypeDisplay !== 'Filter Type'){
+        filterDisplayState = true;
+      }else{
+        filterDisplayState = false;
+      }
+    }
+    if (this.state.filterDisplay !== 'Select Filter' && filterDisplayState && this.state.filterValue && !found){
+      console.log('filterAddButtonSelectedHandler>>>>>inside',this.state.filterValue);
+      var tempState = this.state;
+      if(this.state.enableRealTime){
+        tempState.filterMessage.push(this.state.filterDisplay + this.state.filterTypeDisplay +this.state.filterValue);
+        tempState.filterSelectedList.push({'id' : this.state.filterDisplay, 'value' : this.state.filterValue,'type': this.state.filterTypeDisplay});
+      }else{
+        tempState.filterMessage.push(this.state.filterDisplay + '=' +this.state.filterValue);
+        tempState.filterSelectedList.push({'id' : this.state.filterDisplay, 'value' : this.state.filterValue,'type': '='});
+      }
+      tempState.filterDisplay = 'Select Filter';
+      tempState.filterTypeDisplay = 'Filter Type';
+      tempState.filterValue = '';
+      tempState.showFilter = true;  
+      tempState.errorMsg = '';               
+      console.log('filterAddButtonSelectedHandler>>>>>tempState',tempState);            
+      if(this.state.isRunEnable) {
+        this.setState(tempState); 
+      }else{
+        this.setState(tempState,function(){this.props.loadInventory(tempState);});
+      }
+    }else{
+      console.log('filterAddButtonSelectedHandler>>>>>Else',this.state.filterDisplay);
+      console.log('filterAddButtonSelectedHandlerfilterTypeDisplay>>>>>Else',this.state.filterTypeDisplay);
+      console.log('this.state.filterValue>>>>>>>>>>>>>>',this.state.filterValue);
+      if(found){
+        this.setState({errorMsg: 'Please remove the current filter for this field before trying to add another.'});
+      }else if ( this.state.filterDisplay === 'Select Filter'){
+        this.setState({errorMsg: 'Please select a filter.'});
+      }else if (this.state.enableRealTime && this.state.filterTypeDisplay === 'Filter Type'){
+        this.setState({errorMsg: 'Please select a filter type.'});
+      }else{
+        this.setState({errorMsg: 'Please validate your filter, there seems to be an issue.'});
+      }
+    }
+  };
+  isContaining(nameKey, listArray){
+    var found = false;    
+    if(listArray) {  
+    listArray.map((lists) => {      
+      if(lists.id === nameKey){
+        console.log('foundName key in list',lists.id);      
+        found = true;
+      }
+    });    
+    }  
+    return found;
+  };
+  onTargetMenuSelect = (listName) => {
+    console.log('onTargetMenuSelect',listName);
+    this.setState({filterDisplay:listName,errorMsg:''});
+  };
+  onTargetMenuOfFilterTypes = (listName) => {
+    console.log('onTargetMenuOfFilterTypes',listName);
+    this.setState({filterTypeDisplay:listName,errorMsg:''});
+  }
+  onInputDataChange = (event) =>{
+    console.log('inputtext',event.target.value);
+    this.setState({filterValue:event.target.value});
+  };
+  onRemoveFilters = (filter,filterText,filterType) => {
+    console.log('onRemoveFilters',this.state.filterSelectedList);
+    var found = this.isContaining(filter, this.state.filterSelectedList);
+    console.log('onRemoveFilters.....found',found);
+    if(found){
+      const filterList = this.state.filterSelectedList.filter(function(el) {
+        console.log('el.id',el.id);
+        return el.id !== filter;
+      });
+      console.log('onRemoveFilters.....filterList',filterList);
+      let message = filter + filterType + filterText;
+      const filterMsgList = this.state.filterMessage.filter((el) =>{
+        return el !== message;
+      }); 
+      console.log('onRemoveFilters.....filterMsgList',filterMsgList);
+      if(this.state.isRunEnable) {
+        this.setState({filterSelectedList:filterList,filterValue:'',filterMessage:filterMsgList,errorMsg:''}); 
+      }else{
+        var tempState = this.state;
+        tempState.filterMessage = filterMsgList;
+        tempState.filterSelectedList = filterList;
+        tempState.filterValue = ''; 
+        tempState.errorMsg = ''; 
+        this.setState(tempState,function(){this.props.loadInventory(tempState);});
+      }          
+    }
+  };
+  render(){
+    let filterTags ='';
+    if(APERTURE_SERVICE && this.state.enableRealTime){
+      console.log('before passing Filter>*',this.state);
+      filterTags= <Col md={(this.state.isRunEnable) ? 2 : 2} className='removeLeftPadding'>
+                    <FilterTypes param={this.state}
+                      filterList={this.props.filterList} 
+                      onMenuSelect={this.onTargetMenuOfFilterTypes} />
+                  </Col>                      
+    }
+    return(
+        <div id='filterPane' className={this.props.isFilterEnable ? 'show' : 'hidden'}>
+            <Grid className='custom-container'>
+                <Row className='show-grid topBottomMargin'>
+                    <Col md={(this.state.isRunEnable) ? 3 : 2} className='removeLeftPadding'>
+                        <SelectFilter param={this.state} 
+                            filterList={this.props.filterList} 
+                            onMenuSelect={this.onTargetMenuSelect} />
+                    </Col>
+                    {filterTags}                  
+                    <Col md={(this.state.isRunEnable) ? 7 : 8}>
+                        <input type='text' size='36' 
+                            onBlur={(event) => this.onInputDataChange(event)} 
+                            placeholder='Please Enter Filter text' 
+                            value={this.state.filterValue}
+                            onChange={(event) => this.onInputDataChange(event)} />
+                        <AddFilters param={this.state} 
+                            addHandler={this.filterAddButtonSelectedHandler} />
+                        <ClearFilter param={this.state} clearAllHandler={this.filterClearAllButtonSelectedHandler} />
+                        <RunFilterQuery param={this.state} />
+                    </Col>
+                </Row>
+                {
+                    this.renderError(this.state)
+                }
+                {
+                    this.renderFilterMessage(this.state)
+                }
+            </Grid>
+        </div>
+    );
+  }
+}
+export default Filter;
diff --git a/src/generic-components/filter/components/AddFilters.jsx b/src/generic-components/filter/components/AddFilters.jsx
new file mode 100644
index 0000000..4b0aa7b
--- /dev/null
+++ b/src/generic-components/filter/components/AddFilters.jsx
@@ -0,0 +1,27 @@
+/*
+ * ============LICENSE_START=======================================================
+ * org.onap.aai
+ * ================================================================================
+ * Copyright © 2017-2021 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *       http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
+ import React from 'react';
+
+const AddFilters = (props) => (
+    <button type='button' className='btn btn-primary' onClick={props.addHandler}>Add Filter</button>
+);
+
+export default AddFilters;
diff --git a/src/generic-components/filter/components/ClearFilter.jsx b/src/generic-components/filter/components/ClearFilter.jsx
new file mode 100644
index 0000000..e231ab8
--- /dev/null
+++ b/src/generic-components/filter/components/ClearFilter.jsx
@@ -0,0 +1,27 @@
+/*
+ * ============LICENSE_START=======================================================
+ * org.onap.aai
+ * ================================================================================
+ * Copyright © 2017-2021 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *       http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
+import React from 'react';
+
+const ClearFilter = (props) => (
+    <button type='button' className='btn btn-secondary' onClick={props.clearAllHandler}>Clear Filters</button>
+);
+
+export default ClearFilter;
diff --git a/src/generic-components/filter/components/FilterTypes.jsx b/src/generic-components/filter/components/FilterTypes.jsx
new file mode 100644
index 0000000..c25749d
--- /dev/null
+++ b/src/generic-components/filter/components/FilterTypes.jsx
@@ -0,0 +1,102 @@
+/*
+ * ============LICENSE_START=======================================================
+ * org.onap.aai
+ * ================================================================================
+ * Copyright © 2017-2021 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *       http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
+import React, {Component} from 'react';
+import DropdownButton from 'react-bootstrap/lib/DropdownButton';
+import Dropdown from 'react-bootstrap/lib/Dropdown';
+import MenuItem from 'react-bootstrap/lib/MenuItem';
+import {GlobalExtConstants} from 'utils/GlobalExtConstants.js';
+var filterTypeList = GlobalExtConstants.FILTER_TYPES;
+
+class FilterTypes extends Component {
+	constructor(props) {
+		console.log('FilterTypes props>>>>',props);
+        super(props);
+        this.props = props;
+        this.state = {dropdownIsOpen : false, isInitialize: true}
+    }
+    componentWillReceiveProps (nextProps) {
+        console.log('next props componentWillReceiveProps>>>>>>>',nextProps);
+        console.log('tihs props componentWillReceiveProps>>>>>>>',this.props);
+        if(this.state.isInitialize || this.props !== nextProps){    
+            this.props=nextProps;           
+            this.setState({isInitialize:false}, ()=>{this.updateDropDownState();});                 
+        }
+        console.log('this.state under Update>>>>>',this.state);
+    }
+    handleDropdownValues = (props) => {
+        const listItems = Object.keys(filterTypeList).map((filter,index) => {
+          return(    
+              <MenuItem 
+                      eventKey={index} 
+                      key={filter}> 
+                      {filterTypeList[index]} 
+              </MenuItem>
+          );
+        }); 
+        return (    
+          listItems
+        );
+    };
+    toggleDropdown = () => {
+        console.log('toggleDropdown>>>>>',this.state.dropdownIsOpen);
+        this.setState({ dropdownIsOpen: !this.state.dropdownIsOpen },()=>{this.updateDropDownState()});
+    };
+    updateDropDownState = () =>{
+        console.log('updateDropDownState',this.state.dropdownIsOpen);
+        //document.dispatchEvent(new MouseEvent('click'));
+        let id=(this.props.id)? 'dropdown-root-'+this.props.id :'dropdown-root-2'
+        if(this.state.dropdownIsOpen){
+            document.getElementById(id).getElementsByClassName('dropdown-menu')[0].style.display='block';
+        }else{
+            document.getElementById(id).getElementsByClassName('dropdown-menu')[0].style.display='none';
+        }        
+    }
+    handleSelect(eventKey, event) {
+        Object.keys(filterTypeList).map((filter,index) => {
+            if(eventKey === index){
+                this.props.onMenuSelect(filterTypeList[index],this.props.id)
+            }        
+        });     
+     }
+    render(){
+        if(this.state.isInitialize){
+            this.setState({isInitialize:false},()=>{this.updateDropDownState();});
+        }
+        return(
+            <div id={(this.props.id)? 'dropdown-root-'+this.props.id :'dropdown-root-2'}>
+                <DropdownButton
+                    bsStyle='primary'
+                    title= {(this.props.selectedFilter)? this.props.selectedFilter: this.props.param.filterTypeDisplay}
+                    key= '2'
+                    id={(this.props.id)? 'dropdown-basic-'+this.props.id :'dropdown-basic-2'} 
+                    className='dropdownButton'
+                    onToggle={this.toggleDropdown} 
+                    disabled={(this.props.state)?this.props.state:false} 
+                    onSelect={this.handleSelect.bind(this)}  >
+                    { 
+                        this.handleDropdownValues(this.props)
+                    }
+                </DropdownButton>
+            </div>
+        )
+    }
+}
+export default FilterTypes;
diff --git a/src/generic-components/filter/components/RunFilterQuery.jsx b/src/generic-components/filter/components/RunFilterQuery.jsx
new file mode 100644
index 0000000..5b81769
--- /dev/null
+++ b/src/generic-components/filter/components/RunFilterQuery.jsx
@@ -0,0 +1,56 @@
+/*
+ * ============LICENSE_START=======================================================
+ * org.onap.aai
+ * ================================================================================
+ * Copyright © 2017-2021 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *       http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
+import React from 'react';
+import {Link} from 'react-router-dom';
+//import {BrowserRouter} from 'react-router-dom';
+import {GlobalExtConstants} from 'utils/GlobalExtConstants.js';
+let URI_DELIMITCHAR = GlobalExtConstants.URI_DELIMITCHAR;
+
+var prepareURI = (props) => {
+  console.log('prepare URI');
+  let URI = '/model/' + props.filterSelected;
+  let filterList = props.filterSelectedList;
+  if(filterList){
+    for (var key in filterList){
+      if(filterList.hasOwnProperty(key)){
+        URI += ';' + filterList[key].id + URI_DELIMITCHAR + filterList[key].type + URI_DELIMITCHAR + filterList[key].value;
+      }
+    }
+  }
+  return (
+    URI
+  ); 
+};
+const RunFilterQuery = (props) => {
+  if(props.param.isRunEnable){ 
+    return(  
+      <Link to={prepareURI(props.param)}> 
+        <button type='button' className='btn btn-warning'>Run </button>
+      </Link>
+    );
+  }else{
+    return(
+        <span></span>
+    );
+  }
+};
+
+export default RunFilterQuery;
diff --git a/src/generic-components/filter/components/SelectFilter.jsx b/src/generic-components/filter/components/SelectFilter.jsx
new file mode 100644
index 0000000..94f1807
--- /dev/null
+++ b/src/generic-components/filter/components/SelectFilter.jsx
@@ -0,0 +1,100 @@
+/*
+ * ============LICENSE_START=======================================================
+ * org.onap.aai
+ * ================================================================================
+ * Copyright © 2017-2021 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *       http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
+import React, {Component} from 'react';
+import DropdownButton from 'react-bootstrap/lib/DropdownButton';
+import MenuItem from 'react-bootstrap/lib/MenuItem';
+
+class SelectFilter extends Component {
+	constructor(props) {
+		console.log('SelectFilter props',props);
+        super(props);
+        this.props = props;
+        this.state = {dropdownIsOpen : false, isInitialize: true}
+    }    
+    componentWillReceiveProps (nextProps) {
+        console.log('next props componentWillReceiveProps>>>>>>>',nextProps);
+        console.log('tihs props componentWillReceiveProps>>>>>>>',this.props);
+        if(this.state.isInitialize || this.props.id !== nextProps.id){       
+            this.props=nextProps;
+            this.setState({isInitialize:false},()=>{this.updateDropDownState();});                 
+        }
+        console.log('this.state under Update>>>>>',this.state);
+    }
+    
+    handleDropdownValues = (props) => {
+        const listItems = Object.keys(props.filterList).map((filter,index) => {
+          let filterValue=(props.filterList[index].value)?props.filterList[index].value:props.filterList[index];
+          let description=(props.filterList[index].description)?props.filterList[index].description:'';
+          return(    
+              <MenuItem eventKey={index} key={index} title={description}>{filterValue}</MenuItem>
+          );
+        }); 
+        console.log('listItems',listItems); 
+        return (    
+          listItems
+        );
+    };    
+    toggleDropdown = () => {
+        console.log('toggleDropdown>>>>>',this.state.dropdownIsOpen);
+        this.setState({ dropdownIsOpen: !this.state.dropdownIsOpen },()=>{this.updateDropDownState();});
+    };
+    updateDropDownState = () =>{
+        console.log('updateDropDownState',this.state.dropdownIsOpen);
+        //document.dispatchEvent(new MouseEvent('click'));dropdownIsOpen
+        let id=(this.props.id)? 'dropdown-root-'+this.props.id :'dropdown-root-1'
+        if(this.state.dropdownIsOpen){
+            document.getElementById(id).getElementsByClassName('dropdown-menu')[0].style.display='block';
+        }else{
+            document.getElementById(id).getElementsByClassName('dropdown-menu')[0].style.display='none';
+        }                
+    }
+    handleSelect(eventKey, event) {
+       Object.keys(this.props.filterList).map((filter,index) => {
+           if(eventKey === index){
+                let filterValue=(this.props.filterList[index].value)?this.props.filterList[index].value:this.props.filterList[index];
+                this.props.onMenuSelect(filterValue,this.props.id)
+           }        
+       });    
+    }
+    render(){
+        if(this.state.isInitialize){
+            this.setState({isInitialize:false},()=>{this.updateDropDownState();});
+        }
+        return(
+            <div id={(this.props.id)? 'dropdown-root-'+this.props.id :'dropdown-root-1'}>
+                <DropdownButton
+                    bsStyle='primary'
+                    title= {(this.props.selectedFilter)? this.props.selectedFilter: this.props.param.filterDisplay}
+                    key= '1'
+                    id={(this.props.id)? 'dropdown-basic-'+this.props.id :'dropdown-basic-1'} 
+                    className='dropdownButton'
+                    onToggle={this.toggleDropdown}
+                    onSelect={this.handleSelect.bind(this)}                    
+                    >
+                    { 
+                        this.handleDropdownValues(this.props)
+                    }           
+                </DropdownButton>
+            </div>
+        );
+    }
+}
+export default SelectFilter;