path: root/src/app/model/modelSearch/Model.jsx

/*
 * ============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 { connect } from 'react-redux';
import Filter from 'generic-components/filter/Filter.jsx';
import OutputToggle from 'generic-components/OutputToggle.jsx';
import {ExportExcel} from 'utils/ExportExcel.js';
import commonApi from 'utils/CommonAPIService.js';
import {GlobalExtConstants} from 'utils/GlobalExtConstants.js';
import Spinner from 'utils/SpinnerContainer.jsx';
import ModelGallery from './components/ModelGallery.jsx';
import DatePicker from 'react-datepicker';
import moment from "moment";
import ModelBreadcrumb from './components/ModelBreadcrumb.jsx';
import Grid from 'react-bootstrap/lib/Grid';
import Row from 'react-bootstrap/lib/Row';
import Col from 'react-bootstrap/lib/Col';
import Button from 'react-bootstrap/lib/Button';
import Modal from 'react-bootstrap/lib/Modal';
import Pagination from 'react-js-pagination';
import { ModelConstants } from './ModelConstants';
import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
import Tooltip from 'react-bootstrap/lib/Tooltip';
import DownloadRangeModel from 'generic-components/DownloadRangeModel.jsx';
import BootstrapSwitchButton from 'bootstrap-switch-button-react';

let INVLIST = GlobalExtConstants.INVLIST;
let DOWNLOAD_ALL = GlobalExtConstants.DOWNLOAD_ALL;
let generateExcels = ExportExcel.generateExcels;
let buildAttrList = ExportExcel.buildAttrList;
let DOWNLOAD_TOOLTIP = GlobalExtConstants.DOWNLOAD_TOOLTIP;
let ENVIRONMENT = GlobalExtConstants.ENVIRONMENT;
let APERTURE_SERVICE = JSON.parse(sessionStorage.getItem(ENVIRONMENT + 'APERTURE_SERVICE'));
let filterTypeList = GlobalExtConstants.FILTER_TYPES;
let TABULAR_FILTER_TYPE = GlobalExtConstants.TABULAR_FILTER_TYPE;
let URI_DELIMITCHAR = GlobalExtConstants.URI_DELIMITCHAR;
/*const mapStateToProps = ({extensibility: {extModelReducer} }) => {
      let {inventoryData} = extModelReducer;
  return {
        inventoryData
      };
};*/

 const mapStateToProps = (state) => {
  return {
    currState: state.modelReducer
  };
};

const mapActionToProps = (dispatch) => {
  return {
    onInventoryDataReceived: (data) => {
      dispatch({ type: 'UPDATE_INVENTORY_DATA', data: data });
    }
  };
};

/**
 * This class is used to handle any url interactions for models.
 * When a user selects a inventory item in browse or special search,
 * this model class should be used to handle the url + params and query
 * the proxy server.
 */

export class model extends Component {

  elements = [];
  filterQuery = '';
  pageTitle = '';
  nodeType = '';
  historyStackString = '';
  typeOfCall = true;
  nodeResults = '';
  downloadTooltip = DOWNLOAD_TOOLTIP;
  downloadAllTooltip = 'Downloads First ' + DOWNLOAD_ALL + ' Results';
  downloadRangeTooltip= 'Downloads Results By Custom Range Selection';
  initialFilterSelectedList = [];
  initialFilterMessage = [];
  initialNonDisplay = true;
  constructor(props) {
    console.log(props);
    APERTURE_SERVICE = JSON.parse(sessionStorage.getItem(ENVIRONMENT + 'APERTURE_SERVICE'));
    super(props);
    var filterSelectedList = [];
    var seletedFilter = [];
    var filterMessage = [];
    var nonDisplay = true;
    var enableToggle= JSON.parse(sessionStorage.getItem(ENVIRONMENT + 'ENABLE_ANALYSIS'));
    TABULAR_FILTER_TYPE=(APERTURE_SERVICE && enableToggle)?'CONTAINS':'='; 
    if (this.props.match.params.type) {
      seletedFilter = this.props.match.params.type.split(';');
      seletedFilter.map((param) => {
        console.log('param', param);
        console.log('param.indexOf(=)', param.indexOf('='));
        if (param.indexOf(URI_DELIMITCHAR+'='+URI_DELIMITCHAR) !== -1) {
          let id = param.split(URI_DELIMITCHAR+'='+URI_DELIMITCHAR)[0];
          let value = param.split(URI_DELIMITCHAR+'='+URI_DELIMITCHAR)[1];
          filterSelectedList.push({ 'id': id, 'value': value, 'type':'='});
          filterMessage.push(id+'='+value);
          enableToggle=false;
        }else{
          for(var x in  filterTypeList){
            if (param.indexOf(URI_DELIMITCHAR+filterTypeList[x]+URI_DELIMITCHAR) !== -1) {
              let paramArray=param.split(URI_DELIMITCHAR+filterTypeList[x]+URI_DELIMITCHAR); 
              let id = paramArray[0];
              let value = paramArray[1];
              filterSelectedList.push({ 'id': id, 'value': value, 'type': filterTypeList[x]});
              filterMessage.push(id+filterTypeList[x]+value);
              enableToggle=true;
            }
          }          
        }
      });
    }
    if (this.props.match.params.nodeId) {
      nonDisplay = false;
    }
    if(this.props.match.params.page==='false'){
      enableToggle=false;
    }
    if(!this.props.location.historyStackString){
        this.props.location.historyStackString = this.props.location.pathname + ',,Origin||';
    }else{
        this.historyStackString = this.props.location.historyStackString;
    }
    this.state = {
      activePage: 1,
      totalResults: 0,
      enableBusyFeedback: true,
      data: [],
      filterList: [],
      nodes: [],
      filterSelected: (this.props.match.params.type) ? this.props.match.params.type.split(';')[0] : '',
      filterDisplay: 'Select Filter',
      filterTypeDisplay: 'Filter Type',
      filterMessage: filterMessage,
      filterSelectedList: filterSelectedList,
      isRunEnable: false,
      isFilterEnable: nonDisplay,
      isPaginationEnable: nonDisplay,
      showHistoryModal: false,
      nodeDisplay: 'test',
      startDate: moment(),
      historyType: 'nodeState',
      enableCalendar: true,
      focusedNodeUri: 0,
      viewName: localStorage.getItem(GlobalExtConstants.ENVIRONMENT + '_' + sessionStorage.getItem(GlobalExtConstants.ENVIRONMENT + 'userId') + '_viewPreference')  || 'CardLayout',
      errorResults: false,
      errorMessage: '',
      showResults: false,
      resetColumnFilters: true,
      defaultViewName: localStorage.getItem(GlobalExtConstants.ENVIRONMENT + '_' + sessionStorage.getItem(GlobalExtConstants.ENVIRONMENT + 'userId') + '_viewPreference')  || 'CardLayout',
      isPageNumberChange: false,
      totalPages: 0,
      pageRange: 1,
      showDownloadResultsModal: false,
      errorDownloadResults:false,
      downloadErrorMsg: '',      
      enableModelBusyFeedback:false,
      downloadCount:DOWNLOAD_ALL,
      enableRealTime: enableToggle
    };
    this.baseState=this.state;
  }
  resultsMessage = '';
  componentDidMount = () => {
    console.log('[Model.jsx] componentDidMount props available are', JSON.stringify(this.props));
    if (this.state.isFilterEnable) {
      this.populateFilteringOptions();
    }
    this.initialFilterSelectedList = this.state.filterSelectedList;
    this.initialFilterMessage = this.state.filterMessage;
    this.initialNonDisplay = this.state.isFilterEnable;
    this.beforefetchInventoryData();
  };
  handleDateChange = (newDate) =>{
    this.setState({ startDate: moment(+newDate) });
    console.log('[Model.jsx] handleDateChange date is ', this.state.startDate);
    console.log('[Model.jsx] handleDateChange date is in millis ', +this.state.startDate);
  }
  openHistory = (nodeDisplay, nodeUri, nodeType) => { // open modal
    console.log('history >> showModal');
    let historyNodeUri = (nodeUri)?nodeUri.replace('/aperture/','/'):nodeUri;//replace always first occurence
    if(nodeDisplay){
       this.setState({
          nodeDisplay: nodeDisplay,
          focusedNodeUri: historyNodeUri,
          focusedNodeType: nodeType,
          showHistoryModal:true
       });
    }else{
        this.setState({
 	      showHistoryModal:true
        });
    }
  }
  closeHistory = () => {
	this.setState({
		showHistoryModal: false
	});
  }
  submitHistory = () => {
    //do some logic in history
    console.log("submitting history");
    let epochStartTime = (this.state.startDate).unix();
    this.props.history.push('/history/' + this.state.historyType+'/' + this.nodeType + '/' + btoa(this.state.focusedNodeUri) + '/' + epochStartTime * 1000);
  }
  setHistoryType(event) {
    console.log(event.target.value);
    let enableCalendar = false;
    if(event.target.value === 'nodeLifeCycle'){
        enableCalendar = false;
    }else{
        enableCalendar = true;
    }
    this.setState({
    		historyType: event.target.value,
    		enableCalendar: enableCalendar
    });
    console.log(this.state.enableCalendar);
  }
  setViewName(event) {
    console.log(event.currentTarget.value);
    this.setState({
    		viewName: event.currentTarget.value
    });
  }
  setDefaultViewName = (event) =>{
    let ENVIRONMENT = GlobalExtConstants.ENVIRONMENT;
    let layout =  event.target.value;

    if(sessionStorage.getItem(ENVIRONMENT + 'userId')) {
      if (event.target.checked) {
        localStorage.setItem(ENVIRONMENT + '_' + sessionStorage.getItem(ENVIRONMENT + 'userId') + '_viewPreference', layout);
      } else {
        localStorage.removeItem(ENVIRONMENT + '_' + sessionStorage.getItem(ENVIRONMENT + 'userId') + '_viewPreference');
      }
    }

    this.setState({
      defaultViewName: event.target.value
    });
    this.baseState.viewName=event.target.value;
    this.baseState.defaultViewName=event.target.value;
  }
  componentWillUnmount  = () => {
    console.log('[Model.jsx] componentWillUnMount');
    this.props.onInventoryDataReceived([]);
  }
  beforefetchInventoryData = (param) => {
    this.typeOfCall = true;
    if (param) {
      this.props.onInventoryDataReceived([]);
      this.formFilterQuery(param.filterMessage);
      this.setState(
        { enableBusyFeedback: true, activePage: 1, totalResults: 0, totalPages: 0,filterMessage: param.filterMessage, filterSelectedList: param.filterSelectedList},
        function () { this.fetchInventoryData(param); }.bind(this)
      );
    } else {
      this.formFilterQuery(this.state.filterMessage);
      this.fetchInventoryData();
    }
  };

  formFilterQuery = (filterMessage) => {
    let filterQuery = filterMessage.join('&');
    this.filterQuery = (filterMessage.length > 0) ? '&' + filterQuery : '';
  };

  fetchInventoryData = (param) => {
    console.log('fetchInventoryData', param);
    this.resultsMessage = '';    
    const inventory = INVLIST.INVENTORYLIST;
    let url = '';
    console.log('[Model.jsx] fetchInventoryData nodeId= ', this.props.match.params.nodeId);
    if (this.props.match.params.type !== undefined && this.props.match.params.type !== null) {
      this.nodeType = this.props.match.params.type;
    }
    console.log('[Model.jsx] nodeType: ' + this.nodeType);
    let pageName = this.nodeType.split(';')[0].replace(/\s/g, '').toUpperCase();
    console.log('[Model.jsx] pageName: ' + pageName);
    if (inventory[pageName] && inventory[pageName].display) {
      this.pageTitle = inventory[pageName].display;
    } else {
      this.pageTitle = pageName;
    }
    var nonRelationshipState = false;
    if (this.props.match.params.nodeId) {
      this.setUri(this.props.location.uri);
      this.setBreadcrumb(this.props.location.uri);
      url = sessionStorage.getItem(ENVIRONMENT + 'URI');
      if(this.state.enableRealTime){
        let versionPattern="^"+INVLIST.VERSION+"\\/";
        var versionRegularExp = new RegExp(versionPattern, 'g');
        let matchVersion = url.match(versionRegularExp,'g');
        if(!matchVersion){
          url= INVLIST.VERSION+'/'+url;
        } 
      } 
    } else {
      url = inventory[pageName].apiPath;
      this.setBreadcrumb(url);
      nonRelationshipState=true;
    }
    console.log('[Model.jsx] active page', this.state.activePage);
    console.log('this.state.filterSelectedList', this.state.filterSelectedList);
    console.log('filterQuery', this.filterQuery);
    //Aperture with Diff Filter types Operater  
    this.nodeResults = '';
    var method = 'GET';
    var payload = {};
    const settings = {
      'NODESERVER': INVLIST.NODESERVER,
      'PROXY': INVLIST.PROXY,
      'PREFIX': INVLIST.PREFIX,
      'VERSION': INVLIST.VERSION,
      'USESTUBS': INVLIST.useStubs,
      'APERTURE': INVLIST.APERTURE,
      'APERTURE_SERVICENAME':INVLIST.APERTURE_SERVICENAME
    };
    if(this.state.enableRealTime){
      settings['ISAPERTURE'] = (nonRelationshipState)? true : false;
    }else{
      if(!(this.state.enableRealTime && nonRelationshipState)){
        url = (url)?url.replace(INVLIST.VERSION+'/',''):url;
      }
    } 
    if(this.state.enableRealTime && nonRelationshipState){
      var filterList=this.state.filterSelectedList;
      var filters = [];
      for(var k in filterList){
        if(filterList.hasOwnProperty(k)){
          let filter ={}
          filter['filter']= filterList[k].type;
          filter['key'] = filterList[k].id;
          filter['value'] = filterList[k].value;
          filters.push(filter);
        }
      }
      method= 'POST';
      payload['node-type'] = url.split('/')[1];
      payload['filter-version'] = 'v1';
      payload['filters'] = filters;
    }else{
      payload = null;
    }
    
    var path = '?format=simple&resultIndex=' + this.state.activePage + '&resultSize=';      
    if(this.typeOfCall){  
      path = path + ModelConstants.RESULTS_PER_PAGE;
      url=(this.state.enableRealTime && nonRelationshipState)? path: url + path + this.filterQuery;
      this.commonApiServiceCall(settings,url,param,method,payload);
    }else{
      let pagerange=this.state.pageRange.toString();
      pagerange=pagerange.split('-');
      if(pagerange.length > 1){
        path = '?format=simple&resultIndex=' + parseInt(pagerange[0]) + '&resultSize='+ ModelConstants.RESULTS_PER_PAGE + '&resultRangeEnd=' + parseInt(pagerange[1]);
      }else{
        path = '?format=simple&resultIndex=' + 1 + '&resultSize=' + parseInt(pagerange);
      }
      url=(this.state.enableRealTime && nonRelationshipState)? path: url + path + this.filterQuery; 
      this.commonApiServiceCallForAllData(settings,url,method,payload);
    }
  };
  commonApiServiceCall = (settings,url,param,method,payload) =>{
    
    commonApi(settings, url, method, payload, 'modelDefault')
      .then(res => {
        // Call dispatcher to update state
        console.log('once before service call ......',this.state);
        this.resultsMessage = '';
        var totalResults = parseInt(res.headers['total-results']); 
        let downloadCount = DOWNLOAD_ALL;   
        if(totalResults > DOWNLOAD_ALL){
          this.downloadAllTooltip = DOWNLOAD_ALL + ' results out of '+ totalResults +' will be downloaded, please filter results further to obtain full report';
        }else{
          this.downloadAllTooltip = (totalResults === 1) ? 'Downloads ' + totalResults + ' Results' : 'Downloads all ' + totalResults + ' Results'
          downloadCount= totalResults;
        }   
        this.setState(
          {
            nodes : res.data.results,
            totalResults : res.headers['total-results'],
            totalPages: res.headers['total-results'],
            enableBusyFeedback:false,
            showResults: true,
            errorResults: false,
            downloadCount: downloadCount,
            filterSelectedList:(param)?param.filterSelectedList:this.state.filterSelectedList
          },function(){this.props.onInventoryDataReceived(res.data.results);});
                       
        console.log('After service call ......',this.state);
        console.log('[Model.jsx] results : ', res);
        }, error=>{
       	   this.triggerError(error);
        }).catch(error => {
           this.triggerError(error);
      });
  };
  commonApiServiceCallForAllData = (settings,url,method,payload) => {

    commonApi(settings, url,method, payload, 'modelDefault')
      .then(res => {
        // Call dispatcher to update state        
        console.log('once before service call ......',this.state);
        this.resultsMessage = '';
        this.nodeResults = res.data.results;
        let totalResults = parseInt(res.headers['total-results']);
        let totalPages = parseInt(res.headers['total-pages']);
        this.setState({totalPages:totalPages,errorDownloadResults:false,downloadErrorMsg:''},() => {this.getAllExcels()});
        console.log('[Model.jsx] results : ', res);
      }).catch(error => {
        console.log('[Model.jsx] error : ', error);
        this.nodeResults = '';
        let errMsg = this.renderErrorMsg(error);      
        this.setState({ enableBusyFeedback: false,errorDownloadResults:true,downloadErrorMsg:errMsg,enableModelBusyFeedback:false});       
      });     
  };

   triggerError = (error) => {
      console.error('[Model.jsx] error : ', JSON.stringify(error));
      this.props.onInventoryDataReceived([]);
      this.resultsMessage = 'No Results Found';
      this.downloadAllTooltip = 'Downloads First ' + DOWNLOAD_ALL + ' Results';
      this.nodeResults = '';
      this.setState({
            enableBusyFeedback: false,
            totalResults: 0,
            totalPages: 0,
          	showResults: false,
          	errorResults: true
        });
      let errMsg = this.renderErrorMsg(error);
      //Suppress Error Message when 404 results not found occur
      if(error.response && error.response.status === 404){
        this.setState({errorMessage:'', errorResults:false});
      }else{
            this.setState({errorMessage:errMsg});
      }
    };
    renderErrorMsg = (error) =>{
      let errMsg='';
       if (error.response) {
         // The request was made and the server responded with a status code
         // that falls out of the range of 2xx
         console.log(error.response.data);
         console.log(error.response.status);
         console.log(error.response.headers);
         if(error.response.status){
             errMsg += " Code: " + error.response.status;
         }
    	 if(error.response.data){
             errMsg += " - " + JSON.stringify(error.response.data);
         }
       } else if (error.request) {
         // The request was made but no response was received
         // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
         // http.ClientRequest in node.js
         console.log(error.request);
         errMsg += " - Request was made but no response received";
       } else {
         // Something happened in setting up the request that triggered an Error
         console.log('Error', error.message);
         errMsg += " - Unknown error occurred " + error.message;
       }
      
       console.log(error.config);
       return errMsg;
    }

  componentWillReceiveProps(nextProps) {
    console.log('[Model.jsx] componentWillReceiveProps');
    console.log('[Model.jsx] next nodeId:', nextProps.match.params.nodeId);
    console.log('[Model.jsx] this nodeId:', this.props.match.params.nodeId);

    if(nextProps.match.params.nodeId !== undefined && this.props.match.params.nodeId !== undefined){
      if (nextProps.match.params.nodeId && nextProps.match.params.nodeId
        !== this.props.match.params.nodeId) {
        this.props = nextProps;
        this.beforefetchInventoryData();
      }
    }
  };

  setUri(uri) {
    let delimiter = '\/';
    let start = 3;
    let tokens = uri.split(delimiter).slice(start);
    let result = tokens.join(delimiter);
    sessionStorage.setItem(ENVIRONMENT + 'URI', result);
  };

  setBreadcrumb(uri){
      var nodeType = this.nodeType.split(';')[0];
      var display = nodeType + ': ' + (uri).split(nodeType+'\/').pop();
      var hsEntry = this.props.location.pathname + ',' + uri +  ','+ display + '||';
      console.log("History Stack String: " + this.props.location.historyStackString);
       if(this.historyStackString.indexOf(hsEntry) > -1){
          var tempHistoryStack = this.historyStackString.split(hsEntry)[0];
          var tempHistoryStackFormat = tempHistoryStack.replace(hsEntry, "");
          this.historyStackString = tempHistoryStackFormat;
       }
      this.historyStackString += hsEntry;
      this.props.location.historyStackString = this.historyStackString;
      console.log('[Model.jsx] historyStack in model' + this.historyStackString);
  }

  handlePageChange = (pageNumber) => {
    console.log('[Model.jsx] HandelPageChange active page is', pageNumber);
    this.props.onInventoryDataReceived([]);
    this.setState(
      { activePage: pageNumber, enableBusyFeedback: true, resetColumnFilters: false, isPageNumberChange: true},
      function () { this.beforefetchInventoryData(); }.bind(this)
    );
  };
  openDownloadRange = () =>{    
      this.setState({
        showDownloadResultsModal: true,
        errorDownloadResults: false,
        downloadErrorMsg:''});    
  }
  closeDownloadResults = () =>{
    this.setState({
      showDownloadResultsModal: false,
      enableModelBusyFeedback: false
		});   
  }
  getAllExcels = (pageRange,rangeState) =>{
    console.log('getAllExcels>>>>>>>>>>>*',pageRange);
    if(pageRange){
      this.typeOfCall=false;
      let rangeModelState=(rangeState)? rangeState: false;
      this.setState(
        { pageRange: pageRange,enableBusyFeedback: true, enableModelBusyFeedback:true,showDownloadResultsModal:rangeModelState},
        function () { this.fetchInventoryData(); }.bind(this)
      );
    }else{
      this.setState(
        {errorDownloadResults: false, showDownloadResultsModal: false, downloadErrorMsg:'', enableBusyFeedback: false, enableModelBusyFeedback:false},
        function () { generateExcels(this.nodeResults);this.nodeResults='';this.typeOfCall = true;}.bind(this)
      );
    }     
  };
  
  populateFilteringOptions = () => {
    let tempState = this.state;
    tempState.filterList = buildAttrList(this.state.filterSelected, tempState.filterList);
    this.setState(tempState);
  };

  // HELPER FUNCTIONS
  isContaining = (nameKey, listArray) => {
    let found = false;
    listArray.map((lists) => {
      if (lists.id === nameKey) {
        found = true;
      }
    });
    return found;
  };
  isTableFilterApply = (columnFilterList,nodeType,columnsList) => {
    console.log('Model js ....columnFilterList:',columnFilterList);
    console.log('Model js .... nodeType:',nodeType);
    var columnFilter = columnFilterList[nodeType][0];
    console.log('model js columnFilter:',columnFilter);    
    var columns = columnsList[nodeType];
    var applyState = false;
    var filterSelectedList = [];
    var filterMessage = [];
    
    for(var i=0;i<columnFilter.length;i++){
      var colFilterValue = columnFilter[i][columns[i].value];      
      if(colFilterValue != ""){        
        filterSelectedList.push({ 'id': columns[i].value, 'value': colFilterValue, 'type': TABULAR_FILTER_TYPE});
        let filterMsg = columns[i].value + TABULAR_FILTER_TYPE + colFilterValue;
        filterMessage.push(filterMsg); 
        applyState = true;         
      }
    }
    console.log('isTableFilterApply filterSelectedList>>>>>',filterSelectedList);
    console.log('isTableFilterApply filterMessage>>>>>>>>>>',filterMessage); 
        
    if(applyState){  
      var tempState = this.state;
      var state = true;
      var stateFilterSelectedList = tempState.filterSelectedList;
        var id = 'id';
        var value = 'value';
        if(stateFilterSelectedList.length > 0){
          for(var j in filterSelectedList){
            state = true;
            for(var k in stateFilterSelectedList){
              if(stateFilterSelectedList[k][id] === filterSelectedList[j][id]){ 
                state =false;                              
                tempState.filterSelectedList[k] = { 'id':filterSelectedList[j][id], 'value': filterSelectedList[j][value], 'type': TABULAR_FILTER_TYPE};
              }
            }
            if(state){
              tempState.filterSelectedList.push({ 'id':filterSelectedList[j][id], 'value': filterSelectedList[j][value],  'type': TABULAR_FILTER_TYPE});
            }            
          }
          stateFilterSelectedList = tempState.filterSelectedList;
          for(var k in stateFilterSelectedList){
            tempState.filterMessage[k] = stateFilterSelectedList[k][id] + TABULAR_FILTER_TYPE + stateFilterSelectedList[k][value]
          }
        }else{
          tempState.filterSelectedList = filterSelectedList;
          tempState.filterMessage = filterMessage;
        }

        console.log('isTableFilterApply  tempState:',tempState);
        this.beforefetchInventoryData(tempState);
    }
  };
  prepareModelGalleryElement = () =>{
    let modelGalleryElement='';
    if(this.state.isFilterEnable){
      modelGalleryElement = <ModelGallery nodes={this.props.currState.inventoryData}
                                  viewName={this.state.viewName}
                                  historyStackString={this.props.location.historyStackString}
                                  openHistoryModal={this.openHistory}
                                  isPageNumberChange={this.state.isPageNumberChange}
                                  resetColumnInd={this.state.resetColumnFilters}
                                  isTableFilterApply={this.isTableFilterApply}
                                  enableRealTime={this.state.enableRealTime}
                                />;
    }else{
      modelGalleryElement = <ModelGallery nodes={this.props.currState.inventoryData}
                                  viewName={this.state.viewName}
                                  historyStackString={this.props.location.historyStackString}
                                  openHistoryModal={this.openHistory}
                                  isPageNumberChange={this.state.isPageNumberChange}
                                  resetColumnInd={this.state.resetColumnFilters}
                                  enableRealTime={this.state.enableRealTime}
                                />;
    }
    return modelGalleryElement;
  }
  prepareDownloadRangeModel = () =>{
  
    let downloadRangeModel =(this.state.showDownloadResultsModal)? <DownloadRangeModel 
              showDownloadResultsModal={this.state.showDownloadResultsModal}
              totalPages={this.state.totalPages}
              totalResults={this.state.totalResults}
              triggerDownload={this.getAllExcels}
              errorDownloadResults={this.state.errorDownloadResults}
              downloadErrorMsg={this.state.downloadErrorMsg}
              triggerClose={this.closeDownloadResults}
              enableModelBusyFeedback={this.state.enableModelBusyFeedback}
          /> : '';
    return downloadRangeModel;
  }
  toggleRealTimeAnalysisCallback=(checked)=>{
    console.log('toggleRealTimeAnalysisCallback>>>>',checked);
    sessionStorage.setItem(ENVIRONMENT + 'ENABLE_ANALYSIS', !checked);
    TABULAR_FILTER_TYPE=(APERTURE_SERVICE && !checked)?'CONTAINS':'=';
    this.baseState.enableRealTime = !checked;
    this.baseState.filterMessage = [];
    this.baseState.filterSelectedList = [];
    this.setState({...this.baseState},()=>{this.beforefetchInventoryData(this.state)});
  }
  render() {
    console.log('[Model Props] render: ', JSON.stringify(this.props) + 'elements : ', this.elements);
    console.log('[Model nodeId] render: ', this.props.match.params.nodeId);
    console.log('[Model nodeId] render this.state: ', this.state);
    var toggelRealtimeAnalysis = '';
	  if(APERTURE_SERVICE){		
		  toggelRealtimeAnalysis = <div className='toggleSwitch'><BootstrapSwitchButton
                                checked={!this.state.enableRealTime}
                                onlabel='Real Time'
                                onstyle='danger'
                                offlabel='Analysis'
                                offstyle='success'
                                style='w-100 mx-3'
                                onChange={(checked) => {
                                  this.toggleRealTimeAnalysisCallback(checked);
                                }}
                              /></div>             
	  }
    const modelGalleryElement = this.prepareModelGalleryElement();
    let downloadRangeModel = this.prepareDownloadRangeModel();
    return (
      <div>
        {toggelRealtimeAnalysis}
        <Grid fluid={true} className='model-container'>
          <Row className='show-grid'>
            <Col md={12}>
              <h1>{this.pageTitle}</h1>
              <Filter key='browseSearch'
                nodeType={this.state.filterSelected}
                filterList={this.state.filterList}
                filterDisplay={this.state.filterDisplay}
                filterTypeDisplay={this.state.filterTypeDisplay}
                isRunEnable={this.state.isRunEnable}
                filterMessage={this.state.filterMessage}
                loadInventory={this.beforefetchInventoryData}
                filterSelectedList={this.state.filterSelectedList}
                isFilterEnable={this.state.isFilterEnable} 
                enableRealTime={this.state.enableRealTime}/>
            </Col>
          </Row>
          <Spinner loading={this.state.enableBusyFeedback}>
            <Row className='show-grid'>
              <Col md={8} className={this.state.isPaginationEnable && this.state.showResults ? 'show' : 'hidden'}>
                <Pagination
                  activePage={this.state.activePage}
                  itemsCountPerPage={ModelConstants.RESULTS_PER_PAGE}
                  totalItemsCount={this.state.totalResults}
                  pageRangeDisplayed={ModelConstants.PAGE_RANGE_DISPLAY}
                  onChange={this.handlePageChange} />
              </Col>
              <Col md={2} className={this.state.isPaginationEnable && this.state.showResults ? 'text-right' : 'text-left'}>
                <OverlayTrigger  placement='top' overlay={<Tooltip id='tooltip-top'>{this.downloadAllTooltip}</Tooltip>}>
                  <span className='d-inline-block' style={{display: 'inline-block'}}>
                    <Button bsSize='small' onClick={() => {this.getAllExcels(this.state.downloadCount)}}>
                      Download XLSX <i className='icon-documents-downloadablefile'></i>
                    </Button>
                  </span>
                </OverlayTrigger>
              </Col>
              <Col md={2} className={this.state.isPaginationEnable && this.state.showResults ? 'text-right' : 'text-left'}>
                <OverlayTrigger  placement='top' overlay={<Tooltip id='tooltip-top'>{this.downloadRangeTooltip}</Tooltip>}>
                  <span className='d-inline-block' style={{display: 'inline-block'}}>
                    <Button bsSize='small' onClick={this.openDownloadRange}>
                      Download XLSX (Range)<i className='icon-documents-downloadablefile'></i>
                    </Button>
                  </span>
                </OverlayTrigger>
              </Col>
            </Row>
            <Row className='show-grid'>
                <ModelBreadcrumb historyStackString={this.props.location.historyStackString}/>
            </Row>
            <Row>
              <div className={'addPaddingTop alert alert-danger ' +(this.state.errorResults ? 'show' : 'hidden')} role="alert">
                  An error occurred, please try again later. If this issue persists, please contact the system administrator. {this.state.errorMessage}
              </div>
            </Row>
            <Row className='show-grid'>
              { this.state.showResults && <div className='addPaddingTop'>
                  <OutputToggle scope={this} visualDisabled={true}/>
                </div>
              }
            </Row>  
            <Row className={'show-grid ' + this.state.showResults ? 'show' : 'hidden'}>
              <Col md={12}>
                <hr />
                <h5>Total Results: <strong>{this.state.totalResults}</strong></h5>
                <span className='resultMessage'>{this.resultsMessage}</span>
              </Col>
            </Row>
            <Row className='show-grid'>
              {           
                modelGalleryElement            
              }         
            </Row>
            <Row className='show-grid'>
              <Col md={12} className={this.state.isPaginationEnable && this.state.showResults ? 'show' : 'hidden'}>
                <Pagination
                  activePage={this.state.activePage}
                  itemsCountPerPage={ModelConstants.RESULTS_PER_PAGE}
                  totalItemsCount={this.state.totalResults}
                  pageRangeDisplayed={ModelConstants.PAGE_RANGE_DISPLAY}
                  onChange={this.handlePageChange} />
              </Col>
            </Row>
            <div className='static-modal'>
                <Modal show={this.state.showHistoryModal} onHide={this.closeHistory}>
                  <Modal.Header>
                    <Modal.Title>Retrieve {this.state.nodeDisplay} History</Modal.Title>
                  </Modal.Header>
                  <Modal.Body>
                    <form>
                              <div className="radio">
                                <label>
                                  <input type="radio" value="nodeState"
                                                checked={this.state.historyType === 'nodeState'}
                                                onChange={(e) => this.setHistoryType(e)} />
                                  View state at
                                </label>
                              </div>
                              <div className="radio">
                                <label>
                                  <input type="radio"  value="nodeLifeCycleSince"
                                                checked={this.state.historyType === 'nodeLifeCycleSince'}
                                                onChange={(e) => this.setHistoryType(e)} />
                                  View updates since
                                </label>
                              </div>
                              <div className="radio">
                                <label>
                                  <input type="radio" value="nodeLifeCycle"
                                                checked={this.state.historyType === 'nodeLifeCycle'}
                                                onChange={(e) => this.setHistoryType(e)} />
                                  View all updates
                                </label>
                              </div>
                            </form>
                    <div className={this.state.enableCalendar ? 'show' : 'hidden'}>
                        <DatePicker
                            inline
                                  selected={this.state.startDate}
                                  onChange={(newDate) => this.handleDateChange(newDate)}
                                  showTimeSelect
                                  timeFormat="HH:mm"
                                  timeIntervals={15}
                                  dateFormat="MMMM D, YYYY h:mm a"
                                  timeCaption="time"
                              />
                          </div>
                  </Modal.Body>
                  <Modal.Footer>
                    <Button onClick={this.closeHistory}>Close</Button>
                    <Button onClick={this.submitHistory}>Submit</Button>
                  </Modal.Footer>
                </Modal>
            </div>
          </Spinner>
          <Spinner loading={this.state.enableModelBusyFeedback}>
            {downloadRangeModel}
          </Spinner>
        </Grid>
      </div>
    );
  }
}

export default connect(mapStateToProps, mapActionToProps)(model);