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 { connect } from 'react-redux';
23 import Filter from 'generic-components/filter/Filter.jsx';
24 import OutputToggle from 'generic-components/OutputToggle.jsx';
25 import {ExportExcel} from 'utils/ExportExcel.js';
26 import commonApi from 'utils/CommonAPIService.js';
27 import {GlobalExtConstants} from 'utils/GlobalExtConstants.js';
28 import Spinner from 'utils/SpinnerContainer.jsx';
29 import ModelGallery from './components/ModelGallery.jsx';
30 import DatePicker from 'react-datepicker';
31 import moment from "moment";
32 import ModelBreadcrumb from './components/ModelBreadcrumb.jsx';
33 import Grid from 'react-bootstrap/lib/Grid';
34 import Row from 'react-bootstrap/lib/Row';
35 import Col from 'react-bootstrap/lib/Col';
36 import Button from 'react-bootstrap/lib/Button';
37 import Modal from 'react-bootstrap/lib/Modal';
38 import Pagination from 'react-js-pagination';
39 import { ModelConstants } from './ModelConstants';
40 import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
41 import Tooltip from 'react-bootstrap/lib/Tooltip';
42 import DownloadRangeModel from 'generic-components/DownloadRangeModel.jsx';
43 import BootstrapSwitchButton from 'bootstrap-switch-button-react';
45 let INVLIST = GlobalExtConstants.INVLIST;
46 let DOWNLOAD_ALL = GlobalExtConstants.DOWNLOAD_ALL;
47 let generateExcels = ExportExcel.generateExcels;
48 let buildAttrList = ExportExcel.buildAttrList;
49 let DOWNLOAD_TOOLTIP = GlobalExtConstants.DOWNLOAD_TOOLTIP;
50 let ENVIRONMENT = GlobalExtConstants.ENVIRONMENT;
51 let APERTURE_SERVICE = JSON.parse(sessionStorage.getItem(ENVIRONMENT + 'APERTURE_SERVICE'));
52 let filterTypeList = GlobalExtConstants.FILTER_TYPES;
53 let TABULAR_FILTER_TYPE = GlobalExtConstants.TABULAR_FILTER_TYPE;
54 let URI_DELIMITCHAR = GlobalExtConstants.URI_DELIMITCHAR;
55 /*const mapStateToProps = ({extensibility: {extModelReducer} }) => {
56 let {inventoryData} = extModelReducer;
62 const mapStateToProps = (state) => {
64 currState: state.modelReducer
68 const mapActionToProps = (dispatch) => {
70 onInventoryDataReceived: (data) => {
71 dispatch({ type: 'UPDATE_INVENTORY_DATA', data: data });
77 * This class is used to handle any url interactions for models.
78 * When a user selects a inventory item in browse or special search,
79 * this model class should be used to handle the url + params and query
83 export class model extends Component {
89 historyStackString = '';
92 downloadTooltip = DOWNLOAD_TOOLTIP;
93 downloadAllTooltip = 'Downloads First ' + DOWNLOAD_ALL + ' Results';
94 downloadRangeTooltip= 'Downloads Results By Custom Range Selection';
95 initialFilterSelectedList = [];
96 initialFilterMessage = [];
97 initialNonDisplay = true;
100 APERTURE_SERVICE = JSON.parse(sessionStorage.getItem(ENVIRONMENT + 'APERTURE_SERVICE'));
102 var filterSelectedList = [];
103 var seletedFilter = [];
104 var filterMessage = [];
105 var nonDisplay = true;
106 var enableToggle= JSON.parse(sessionStorage.getItem(ENVIRONMENT + 'ENABLE_ANALYSIS'));
107 TABULAR_FILTER_TYPE=(APERTURE_SERVICE && enableToggle)?'CONTAINS':'=';
108 if (this.props.match.params.type) {
109 seletedFilter = this.props.match.params.type.split(';');
110 seletedFilter.map((param) => {
111 console.log('param', param);
112 console.log('param.indexOf(=)', param.indexOf('='));
113 if (param.indexOf(URI_DELIMITCHAR+'='+URI_DELIMITCHAR) !== -1) {
114 let id = param.split(URI_DELIMITCHAR+'='+URI_DELIMITCHAR)[0];
115 let value = param.split(URI_DELIMITCHAR+'='+URI_DELIMITCHAR)[1];
116 filterSelectedList.push({ 'id': id, 'value': value, 'type':'='});
117 filterMessage.push(id+'='+value);
120 for(var x in filterTypeList){
121 if (param.indexOf(URI_DELIMITCHAR+filterTypeList[x]+URI_DELIMITCHAR) !== -1) {
122 let paramArray=param.split(URI_DELIMITCHAR+filterTypeList[x]+URI_DELIMITCHAR);
123 let id = paramArray[0];
124 let value = paramArray[1];
125 filterSelectedList.push({ 'id': id, 'value': value, 'type': filterTypeList[x]});
126 filterMessage.push(id+filterTypeList[x]+value);
133 if (this.props.match.params.nodeId) {
136 if(this.props.match.params.page==='false'){
139 if(!this.props.location.historyStackString){
140 this.props.location.historyStackString = this.props.location.pathname + ',,Origin||';
142 this.historyStackString = this.props.location.historyStackString;
147 enableBusyFeedback: true,
151 filterSelected: (this.props.match.params.type) ? this.props.match.params.type.split(';')[0] : '',
152 filterDisplay: 'Select Filter',
153 filterTypeDisplay: 'Filter Type',
154 filterMessage: filterMessage,
155 filterSelectedList: filterSelectedList,
157 isFilterEnable: nonDisplay,
158 isPaginationEnable: nonDisplay,
159 showHistoryModal: false,
162 historyType: 'nodeState',
163 enableCalendar: true,
165 viewName: localStorage.getItem(GlobalExtConstants.ENVIRONMENT + '_' + sessionStorage.getItem(GlobalExtConstants.ENVIRONMENT + 'userId') + '_viewPreference') || 'CardLayout',
169 resetColumnFilters: true,
170 defaultViewName: localStorage.getItem(GlobalExtConstants.ENVIRONMENT + '_' + sessionStorage.getItem(GlobalExtConstants.ENVIRONMENT + 'userId') + '_viewPreference') || 'CardLayout',
171 isPageNumberChange: false,
174 showDownloadResultsModal: false,
175 errorDownloadResults:false,
176 downloadErrorMsg: '',
177 enableModelBusyFeedback:false,
178 downloadCount:DOWNLOAD_ALL,
179 enableRealTime: enableToggle
181 this.baseState=this.state;
184 componentDidMount = () => {
185 console.log('[Model.jsx] componentDidMount props available are', JSON.stringify(this.props));
186 if (this.state.isFilterEnable) {
187 this.populateFilteringOptions();
189 this.initialFilterSelectedList = this.state.filterSelectedList;
190 this.initialFilterMessage = this.state.filterMessage;
191 this.initialNonDisplay = this.state.isFilterEnable;
192 this.beforefetchInventoryData();
194 handleDateChange = (newDate) =>{
195 this.setState({ startDate: moment(+newDate) });
196 console.log('[Model.jsx] handleDateChange date is ', this.state.startDate);
197 console.log('[Model.jsx] handleDateChange date is in millis ', +this.state.startDate);
199 openHistory = (nodeDisplay, nodeUri, nodeType) => { // open modal
200 console.log('history >> showModal');
201 let historyNodeUri = (nodeUri)?nodeUri.replace('/aperture/','/'):nodeUri;//replace always first occurence
204 nodeDisplay: nodeDisplay,
205 focusedNodeUri: historyNodeUri,
206 focusedNodeType: nodeType,
207 showHistoryModal:true
211 showHistoryModal:true
215 closeHistory = () => {
217 showHistoryModal: false
220 submitHistory = () => {
221 //do some logic in history
222 console.log("submitting history");
223 let epochStartTime = (this.state.startDate).unix();
224 this.props.history.push('/history/' + this.state.historyType+'/' + this.nodeType + '/' + btoa(this.state.focusedNodeUri) + '/' + epochStartTime * 1000);
226 setHistoryType(event) {
227 console.log(event.target.value);
228 let enableCalendar = false;
229 if(event.target.value === 'nodeLifeCycle'){
230 enableCalendar = false;
232 enableCalendar = true;
235 historyType: event.target.value,
236 enableCalendar: enableCalendar
238 console.log(this.state.enableCalendar);
241 console.log(event.currentTarget.value);
243 viewName: event.currentTarget.value
246 setDefaultViewName = (event) =>{
247 let ENVIRONMENT = GlobalExtConstants.ENVIRONMENT;
248 let layout = event.target.value;
250 if(sessionStorage.getItem(ENVIRONMENT + 'userId')) {
251 if (event.target.checked) {
252 localStorage.setItem(ENVIRONMENT + '_' + sessionStorage.getItem(ENVIRONMENT + 'userId') + '_viewPreference', layout);
254 localStorage.removeItem(ENVIRONMENT + '_' + sessionStorage.getItem(ENVIRONMENT + 'userId') + '_viewPreference');
259 defaultViewName: event.target.value
261 this.baseState.viewName=event.target.value;
262 this.baseState.defaultViewName=event.target.value;
264 componentWillUnmount = () => {
265 console.log('[Model.jsx] componentWillUnMount');
266 this.props.onInventoryDataReceived([]);
268 beforefetchInventoryData = (param) => {
269 this.typeOfCall = true;
271 this.props.onInventoryDataReceived([]);
272 this.formFilterQuery(param.filterMessage);
274 { enableBusyFeedback: true, activePage: 1, totalResults: 0, totalPages: 0,filterMessage: param.filterMessage, filterSelectedList: param.filterSelectedList},
275 function () { this.fetchInventoryData(param); }.bind(this)
278 this.formFilterQuery(this.state.filterMessage);
279 this.fetchInventoryData();
283 formFilterQuery = (filterMessage) => {
284 let filterQuery = filterMessage.join('&');
285 this.filterQuery = (filterMessage.length > 0) ? '&' + filterQuery : '';
288 fetchInventoryData = (param) => {
289 console.log('fetchInventoryData', param);
290 this.resultsMessage = '';
291 const inventory = INVLIST.INVENTORYLIST;
293 console.log('[Model.jsx] fetchInventoryData nodeId= ', this.props.match.params.nodeId);
294 if (this.props.match.params.type !== undefined && this.props.match.params.type !== null) {
295 this.nodeType = this.props.match.params.type;
297 console.log('[Model.jsx] nodeType: ' + this.nodeType);
298 let pageName = this.nodeType.split(';')[0].replace(/\s/g, '').toUpperCase();
299 console.log('[Model.jsx] pageName: ' + pageName);
300 if (inventory[pageName] && inventory[pageName].display) {
301 this.pageTitle = inventory[pageName].display;
303 this.pageTitle = pageName;
305 var nonRelationshipState = false;
306 if (this.props.match.params.nodeId) {
307 this.setUri(this.props.location.uri);
308 this.setBreadcrumb(this.props.location.uri);
309 url = sessionStorage.getItem(ENVIRONMENT + 'URI');
310 if(this.state.enableRealTime){
311 let versionPattern="^"+INVLIST.VERSION+"\\/";
312 var versionRegularExp = new RegExp(versionPattern, 'g');
313 let matchVersion = url.match(versionRegularExp,'g');
315 url= INVLIST.VERSION+'/'+url;
319 url = inventory[pageName].apiPath;
320 this.setBreadcrumb(url);
321 nonRelationshipState=true;
323 console.log('[Model.jsx] active page', this.state.activePage);
324 console.log('this.state.filterSelectedList', this.state.filterSelectedList);
325 console.log('filterQuery', this.filterQuery);
326 //Aperture with Diff Filter types Operater
327 this.nodeResults = '';
331 'NODESERVER': INVLIST.NODESERVER,
332 'PROXY': INVLIST.PROXY,
333 'PREFIX': INVLIST.PREFIX,
334 'VERSION': INVLIST.VERSION,
335 'USESTUBS': INVLIST.useStubs,
336 'APERTURE': INVLIST.APERTURE,
337 'APERTURE_SERVICENAME':INVLIST.APERTURE_SERVICENAME
339 if(this.state.enableRealTime){
340 settings['ISAPERTURE'] = (nonRelationshipState)? true : false;
342 if(!(this.state.enableRealTime && nonRelationshipState)){
343 url = (url)?url.replace(INVLIST.VERSION+'/',''):url;
346 if(this.state.enableRealTime && nonRelationshipState){
347 var filterList=this.state.filterSelectedList;
349 for(var k in filterList){
350 if(filterList.hasOwnProperty(k)){
352 filter['filter']= filterList[k].type;
353 filter['key'] = filterList[k].id;
354 filter['value'] = filterList[k].value;
355 filters.push(filter);
359 payload['node-type'] = url.split('/')[1];
360 payload['filter-version'] = 'v1';
361 payload['filters'] = filters;
366 var path = '?format=simple&resultIndex=' + this.state.activePage + '&resultSize=';
368 path = path + ModelConstants.RESULTS_PER_PAGE;
369 url=(this.state.enableRealTime && nonRelationshipState)? path: url + path + this.filterQuery;
370 this.commonApiServiceCall(settings,url,param,method,payload);
372 let pagerange=this.state.pageRange.toString();
373 pagerange=pagerange.split('-');
374 if(pagerange.length > 1){
375 path = '?format=simple&resultIndex=' + parseInt(pagerange[0]) + '&resultSize='+ ModelConstants.RESULTS_PER_PAGE + '&resultRangeEnd=' + parseInt(pagerange[1]);
377 path = '?format=simple&resultIndex=' + 1 + '&resultSize=' + parseInt(pagerange);
379 url=(this.state.enableRealTime && nonRelationshipState)? path: url + path + this.filterQuery;
380 this.commonApiServiceCallForAllData(settings,url,method,payload);
383 commonApiServiceCall = (settings,url,param,method,payload) =>{
385 commonApi(settings, url, method, payload, 'modelDefault')
387 // Call dispatcher to update state
388 console.log('once before service call ......',this.state);
389 this.resultsMessage = '';
390 var totalResults = parseInt(res.headers['total-results']);
391 let downloadCount = DOWNLOAD_ALL;
392 if(totalResults > DOWNLOAD_ALL){
393 this.downloadAllTooltip = DOWNLOAD_ALL + ' results out of '+ totalResults +' will be downloaded, please filter results further to obtain full report';
395 this.downloadAllTooltip = (totalResults === 1) ? 'Downloads ' + totalResults + ' Results' : 'Downloads all ' + totalResults + ' Results'
396 downloadCount= totalResults;
400 nodes : res.data.results,
401 totalResults : res.headers['total-results'],
402 totalPages: res.headers['total-results'],
403 enableBusyFeedback:false,
406 downloadCount: downloadCount,
407 filterSelectedList:(param)?param.filterSelectedList:this.state.filterSelectedList
408 },function(){this.props.onInventoryDataReceived(res.data.results);});
410 console.log('After service call ......',this.state);
411 console.log('[Model.jsx] results : ', res);
413 this.triggerError(error);
415 this.triggerError(error);
418 commonApiServiceCallForAllData = (settings,url,method,payload) => {
420 commonApi(settings, url,method, payload, 'modelDefault')
422 // Call dispatcher to update state
423 console.log('once before service call ......',this.state);
424 this.resultsMessage = '';
425 this.nodeResults = res.data.results;
426 let totalResults = parseInt(res.headers['total-results']);
427 let totalPages = parseInt(res.headers['total-pages']);
428 this.setState({totalPages:totalPages,errorDownloadResults:false,downloadErrorMsg:''},() => {this.getAllExcels()});
429 console.log('[Model.jsx] results : ', res);
431 console.log('[Model.jsx] error : ', error);
432 this.nodeResults = '';
433 let errMsg = this.renderErrorMsg(error);
434 this.setState({ enableBusyFeedback: false,errorDownloadResults:true,downloadErrorMsg:errMsg,enableModelBusyFeedback:false});
438 triggerError = (error) => {
439 console.error('[Model.jsx] error : ', JSON.stringify(error));
440 this.props.onInventoryDataReceived([]);
441 this.resultsMessage = 'No Results Found';
442 this.downloadAllTooltip = 'Downloads First ' + DOWNLOAD_ALL + ' Results';
443 this.nodeResults = '';
445 enableBusyFeedback: false,
451 let errMsg = this.renderErrorMsg(error);
452 //Suppress Error Message when 404 results not found occur
453 if(error.response && error.response.status === 404){
454 this.setState({errorMessage:'', errorResults:false});
456 this.setState({errorMessage:errMsg});
459 renderErrorMsg = (error) =>{
461 if (error.response) {
462 // The request was made and the server responded with a status code
463 // that falls out of the range of 2xx
464 console.log(error.response.data);
465 console.log(error.response.status);
466 console.log(error.response.headers);
467 if(error.response.status){
468 errMsg += " Code: " + error.response.status;
470 if(error.response.data){
471 errMsg += " - " + JSON.stringify(error.response.data);
473 } else if (error.request) {
474 // The request was made but no response was received
475 // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
476 // http.ClientRequest in node.js
477 console.log(error.request);
478 errMsg += " - Request was made but no response received";
480 // Something happened in setting up the request that triggered an Error
481 console.log('Error', error.message);
482 errMsg += " - Unknown error occurred " + error.message;
485 console.log(error.config);
489 componentWillReceiveProps(nextProps) {
490 console.log('[Model.jsx] componentWillReceiveProps');
491 console.log('[Model.jsx] next nodeId:', nextProps.match.params.nodeId);
492 console.log('[Model.jsx] this nodeId:', this.props.match.params.nodeId);
494 if(nextProps.match.params.nodeId !== undefined && this.props.match.params.nodeId !== undefined){
495 if (nextProps.match.params.nodeId && nextProps.match.params.nodeId
496 !== this.props.match.params.nodeId) {
497 this.props = nextProps;
498 this.beforefetchInventoryData();
504 let delimiter = '\/';
506 let tokens = uri.split(delimiter).slice(start);
507 let result = tokens.join(delimiter);
508 sessionStorage.setItem(ENVIRONMENT + 'URI', result);
512 var nodeType = this.nodeType.split(';')[0];
513 var display = nodeType + ': ' + (uri).split(nodeType+'\/').pop();
514 var hsEntry = this.props.location.pathname + ',' + uri + ','+ display + '||';
515 console.log("History Stack String: " + this.props.location.historyStackString);
516 if(this.historyStackString.indexOf(hsEntry) > -1){
517 var tempHistoryStack = this.historyStackString.split(hsEntry)[0];
518 var tempHistoryStackFormat = tempHistoryStack.replace(hsEntry, "");
519 this.historyStackString = tempHistoryStackFormat;
521 this.historyStackString += hsEntry;
522 this.props.location.historyStackString = this.historyStackString;
523 console.log('[Model.jsx] historyStack in model' + this.historyStackString);
526 handlePageChange = (pageNumber) => {
527 console.log('[Model.jsx] HandelPageChange active page is', pageNumber);
528 this.props.onInventoryDataReceived([]);
530 { activePage: pageNumber, enableBusyFeedback: true, resetColumnFilters: false, isPageNumberChange: true},
531 function () { this.beforefetchInventoryData(); }.bind(this)
534 openDownloadRange = () =>{
536 showDownloadResultsModal: true,
537 errorDownloadResults: false,
538 downloadErrorMsg:''});
540 closeDownloadResults = () =>{
542 showDownloadResultsModal: false,
543 enableModelBusyFeedback: false
546 getAllExcels = (pageRange,rangeState) =>{
547 console.log('getAllExcels>>>>>>>>>>>*',pageRange);
549 this.typeOfCall=false;
550 let rangeModelState=(rangeState)? rangeState: false;
552 { pageRange: pageRange,enableBusyFeedback: true, enableModelBusyFeedback:true,showDownloadResultsModal:rangeModelState},
553 function () { this.fetchInventoryData(); }.bind(this)
557 {errorDownloadResults: false, showDownloadResultsModal: false, downloadErrorMsg:'', enableBusyFeedback: false, enableModelBusyFeedback:false},
558 function () { generateExcels(this.nodeResults);this.nodeResults='';this.typeOfCall = true;}.bind(this)
563 populateFilteringOptions = () => {
564 let tempState = this.state;
565 tempState.filterList = buildAttrList(this.state.filterSelected, tempState.filterList);
566 this.setState(tempState);
570 isContaining = (nameKey, listArray) => {
572 listArray.map((lists) => {
573 if (lists.id === nameKey) {
579 isTableFilterApply = (columnFilterList,nodeType,columnsList) => {
580 console.log('Model js ....columnFilterList:',columnFilterList);
581 console.log('Model js .... nodeType:',nodeType);
582 var columnFilter = columnFilterList[nodeType][0];
583 console.log('model js columnFilter:',columnFilter);
584 var columns = columnsList[nodeType];
585 var applyState = false;
586 var filterSelectedList = [];
587 var filterMessage = [];
589 for(var i=0;i<columnFilter.length;i++){
590 var colFilterValue = columnFilter[i][columns[i].value];
591 if(colFilterValue != ""){
592 filterSelectedList.push({ 'id': columns[i].value, 'value': colFilterValue, 'type': TABULAR_FILTER_TYPE});
593 let filterMsg = columns[i].value + TABULAR_FILTER_TYPE + colFilterValue;
594 filterMessage.push(filterMsg);
598 console.log('isTableFilterApply filterSelectedList>>>>>',filterSelectedList);
599 console.log('isTableFilterApply filterMessage>>>>>>>>>>',filterMessage);
602 var tempState = this.state;
604 var stateFilterSelectedList = tempState.filterSelectedList;
607 if(stateFilterSelectedList.length > 0){
608 for(var j in filterSelectedList){
610 for(var k in stateFilterSelectedList){
611 if(stateFilterSelectedList[k][id] === filterSelectedList[j][id]){
613 tempState.filterSelectedList[k] = { 'id':filterSelectedList[j][id], 'value': filterSelectedList[j][value], 'type': TABULAR_FILTER_TYPE};
617 tempState.filterSelectedList.push({ 'id':filterSelectedList[j][id], 'value': filterSelectedList[j][value], 'type': TABULAR_FILTER_TYPE});
620 stateFilterSelectedList = tempState.filterSelectedList;
621 for(var k in stateFilterSelectedList){
622 tempState.filterMessage[k] = stateFilterSelectedList[k][id] + TABULAR_FILTER_TYPE + stateFilterSelectedList[k][value]
625 tempState.filterSelectedList = filterSelectedList;
626 tempState.filterMessage = filterMessage;
629 console.log('isTableFilterApply tempState:',tempState);
630 this.beforefetchInventoryData(tempState);
633 prepareModelGalleryElement = () =>{
634 let modelGalleryElement='';
635 if(this.state.isFilterEnable){
636 modelGalleryElement = <ModelGallery nodes={this.props.currState.inventoryData}
637 viewName={this.state.viewName}
638 historyStackString={this.props.location.historyStackString}
639 openHistoryModal={this.openHistory}
640 isPageNumberChange={this.state.isPageNumberChange}
641 resetColumnInd={this.state.resetColumnFilters}
642 isTableFilterApply={this.isTableFilterApply}
643 enableRealTime={this.state.enableRealTime}
646 modelGalleryElement = <ModelGallery nodes={this.props.currState.inventoryData}
647 viewName={this.state.viewName}
648 historyStackString={this.props.location.historyStackString}
649 openHistoryModal={this.openHistory}
650 isPageNumberChange={this.state.isPageNumberChange}
651 resetColumnInd={this.state.resetColumnFilters}
652 enableRealTime={this.state.enableRealTime}
655 return modelGalleryElement;
657 prepareDownloadRangeModel = () =>{
659 let downloadRangeModel =(this.state.showDownloadResultsModal)? <DownloadRangeModel
660 showDownloadResultsModal={this.state.showDownloadResultsModal}
661 totalPages={this.state.totalPages}
662 totalResults={this.state.totalResults}
663 triggerDownload={this.getAllExcels}
664 errorDownloadResults={this.state.errorDownloadResults}
665 downloadErrorMsg={this.state.downloadErrorMsg}
666 triggerClose={this.closeDownloadResults}
667 enableModelBusyFeedback={this.state.enableModelBusyFeedback}
669 return downloadRangeModel;
671 toggleRealTimeAnalysisCallback=(checked)=>{
672 console.log('toggleRealTimeAnalysisCallback>>>>',checked);
673 sessionStorage.setItem(ENVIRONMENT + 'ENABLE_ANALYSIS', !checked);
674 TABULAR_FILTER_TYPE=(APERTURE_SERVICE && !checked)?'CONTAINS':'=';
675 this.baseState.enableRealTime = !checked;
676 this.baseState.filterMessage = [];
677 this.baseState.filterSelectedList = [];
678 this.setState({...this.baseState},()=>{this.beforefetchInventoryData(this.state)});
681 console.log('[Model Props] render: ', JSON.stringify(this.props) + 'elements : ', this.elements);
682 console.log('[Model nodeId] render: ', this.props.match.params.nodeId);
683 console.log('[Model nodeId] render this.state: ', this.state);
684 var toggelRealtimeAnalysis = '';
685 if(APERTURE_SERVICE){
686 toggelRealtimeAnalysis = <div className='toggleSwitch'><BootstrapSwitchButton
687 checked={!this.state.enableRealTime}
693 onChange={(checked) => {
694 this.toggleRealTimeAnalysisCallback(checked);
698 const modelGalleryElement = this.prepareModelGalleryElement();
699 let downloadRangeModel = this.prepareDownloadRangeModel();
702 {toggelRealtimeAnalysis}
703 <Grid fluid={true} className='model-container'>
704 <Row className='show-grid'>
706 <h1>{this.pageTitle}</h1>
707 <Filter key='browseSearch'
708 nodeType={this.state.filterSelected}
709 filterList={this.state.filterList}
710 filterDisplay={this.state.filterDisplay}
711 filterTypeDisplay={this.state.filterTypeDisplay}
712 isRunEnable={this.state.isRunEnable}
713 filterMessage={this.state.filterMessage}
714 loadInventory={this.beforefetchInventoryData}
715 filterSelectedList={this.state.filterSelectedList}
716 isFilterEnable={this.state.isFilterEnable}
717 enableRealTime={this.state.enableRealTime}/>
720 <Spinner loading={this.state.enableBusyFeedback}>
721 <Row className='show-grid'>
722 <Col md={8} className={this.state.isPaginationEnable && this.state.showResults ? 'show' : 'hidden'}>
724 activePage={this.state.activePage}
725 itemsCountPerPage={ModelConstants.RESULTS_PER_PAGE}
726 totalItemsCount={this.state.totalResults}
727 pageRangeDisplayed={ModelConstants.PAGE_RANGE_DISPLAY}
728 onChange={this.handlePageChange} />
730 <Col md={2} className={this.state.isPaginationEnable && this.state.showResults ? 'text-right' : 'text-left'}>
731 <OverlayTrigger placement='top' overlay={<Tooltip id='tooltip-top'>{this.downloadAllTooltip}</Tooltip>}>
732 <span className='d-inline-block' style={{display: 'inline-block'}}>
733 <Button bsSize='small' onClick={() => {this.getAllExcels(this.state.downloadCount)}}>
734 Download XLSX <i className='icon-documents-downloadablefile'></i>
739 <Col md={2} className={this.state.isPaginationEnable && this.state.showResults ? 'text-right' : 'text-left'}>
740 <OverlayTrigger placement='top' overlay={<Tooltip id='tooltip-top'>{this.downloadRangeTooltip}</Tooltip>}>
741 <span className='d-inline-block' style={{display: 'inline-block'}}>
742 <Button bsSize='small' onClick={this.openDownloadRange}>
743 Download XLSX (Range)<i className='icon-documents-downloadablefile'></i>
749 <Row className='show-grid'>
750 <ModelBreadcrumb historyStackString={this.props.location.historyStackString}/>
753 <div className={'addPaddingTop alert alert-danger ' +(this.state.errorResults ? 'show' : 'hidden')} role="alert">
754 An error occurred, please try again later. If this issue persists, please contact the system administrator. {this.state.errorMessage}
757 <Row className='show-grid'>
758 { this.state.showResults && <div className='addPaddingTop'>
759 <OutputToggle scope={this} visualDisabled={true}/>
763 <Row className={'show-grid ' + this.state.showResults ? 'show' : 'hidden'}>
766 <h5>Total Results: <strong>{this.state.totalResults}</strong></h5>
767 <span className='resultMessage'>{this.resultsMessage}</span>
770 <Row className='show-grid'>
775 <Row className='show-grid'>
776 <Col md={12} className={this.state.isPaginationEnable && this.state.showResults ? 'show' : 'hidden'}>
778 activePage={this.state.activePage}
779 itemsCountPerPage={ModelConstants.RESULTS_PER_PAGE}
780 totalItemsCount={this.state.totalResults}
781 pageRangeDisplayed={ModelConstants.PAGE_RANGE_DISPLAY}
782 onChange={this.handlePageChange} />
785 <div className='static-modal'>
786 <Modal show={this.state.showHistoryModal} onHide={this.closeHistory}>
788 <Modal.Title>Retrieve {this.state.nodeDisplay} History</Modal.Title>
792 <div className="radio">
794 <input type="radio" value="nodeState"
795 checked={this.state.historyType === 'nodeState'}
796 onChange={(e) => this.setHistoryType(e)} />
800 <div className="radio">
802 <input type="radio" value="nodeLifeCycleSince"
803 checked={this.state.historyType === 'nodeLifeCycleSince'}
804 onChange={(e) => this.setHistoryType(e)} />
808 <div className="radio">
810 <input type="radio" value="nodeLifeCycle"
811 checked={this.state.historyType === 'nodeLifeCycle'}
812 onChange={(e) => this.setHistoryType(e)} />
817 <div className={this.state.enableCalendar ? 'show' : 'hidden'}>
820 selected={this.state.startDate}
821 onChange={(newDate) => this.handleDateChange(newDate)}
825 dateFormat="MMMM D, YYYY h:mm a"
831 <Button onClick={this.closeHistory}>Close</Button>
832 <Button onClick={this.submitHistory}>Submit</Button>
837 <Spinner loading={this.state.enableModelBusyFeedback}>
846 export default connect(mapStateToProps, mapActionToProps)(model);