src/app/tierSupport/TierSupport.jsx

   1 /*
   2  * ============LICENSE_START=======================================================
   3  * org.onap.aai
   4  * ================================================================================
   5  * Copyright © 2017 AT&T Intellectual Property. All rights reserved.
   6  * Copyright © 2017 Amdocs
   7  * ================================================================================
   8  * Licensed under the Apache License, Version 2.0 (the "License");
   9  * you may not use this file except in compliance with the License.
  10  * You may obtain a copy of the License at
  11  *
  12  *       http://www.apache.org/licenses/LICENSE-2.0
  13  *
  14  * Unless required by applicable law or agreed to in writing, software
  15  * distributed under the License is distributed on an "AS IS" BASIS,
  16  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  17  * See the License for the specific language governing permissions and
  18  * limitations under the License.
  19  * ============LICENSE_END=========================================================
  20  *
  21  * ECOMP is a trademark and service mark of AT&T Intellectual Property.
  22  */
  23
  24 import React, {Component} from 'react';
  25 import {connect} from 'react-redux';
  26 import SplitPane from 'react-split-pane';
  27
  28 import {setSecondaryTitle} from 'app/MainScreenWrapperActionHelper.js';
  29 import ForceDirectedGraph from 'generic-components/graph/ForceDirectedGraph.jsx';
  30 import SelectedNodeDetails from 'app/tierSupport/selectedNodeDetails/SelectedNodeDetails.jsx';
  31
  32
  33 import overlaysDetails from 'resources/overlays/overlaysDetails.json';
  34 import * as Overlays from 'app/overlays/OverlayImports.js';
  35
  36 import i18n from 'utils/i18n/i18n';
  37 import {
  38   onNodeDetailsChange,
  39   onNodeMenuChange,
  40   splitPaneResize,
  41   querySelectedNodeElement,
  42   setNotificationText,
  43   clearVIData
  44 } from 'app/tierSupport/TierSupportActions.js';
  45 import {
  46   TSUI_TITLE,
  47   TSUI_NODE_DETAILS_INITIAL_WIDTH,
  48   TSUI_NODE_DETAILS_MIN_WIDTH,
  49   TSUI_GRAPH_MENU_NODE_DETAILS,
  50 } from './TierSupportConstants.js';
  51
  52 let mapStateToProps = (
  53   {
  54     tierSupport:
  55       {
  56         tierSupportReducer,
  57         globalAutoCompleteSearchBar
  58       }
  59   }) => {
  60
  61   let {
  62         forceDirectedGraphRawData = {
  63           graphCounter: -1,
  64           nodeDataArray: [],
  65           linkDataArray: [],
  66           graphMeta: {}
  67         }, windowWidth = 500,
  68         windowHeight = 500,
  69         graphNodeSelectedMenu = TSUI_GRAPH_MENU_NODE_DETAILS,
  70         feedbackMsgText = '',
  71         feedbackMsgSeverity = '',
  72         nodeData = {}
  73       } = tierSupportReducer;
  74
  75   let {
  76         performPrepareVisualization = false,
  77         selectedSuggestion = {}
  78       } = globalAutoCompleteSearchBar;
  79   return {
  80     forceDirectedGraphRawData,
  81     windowWidth,
  82     windowHeight,
  83     graphNodeSelectedMenu,
  84     performPrepareVisualization,
  85     selectedSuggestion,
  86     feedbackMsgText,
  87     feedbackMsgSeverity,
  88     nodeData
  89   };
  90 };
  91
  92 let mapActionToProps = (dispatch) => {
  93   return {
  94     onSetViewTitle: (title) => {
  95       dispatch(setSecondaryTitle(title));
  96     },
  97     onNodeSelected: (requestObject) => {
  98       dispatch(onNodeDetailsChange(requestObject));
  99     },
 100     onNodeMenuSelect: (selectedMenu) => {
 101       dispatch(onNodeMenuChange(selectedMenu.buttonId));
 102     },
 103     onSplitPaneResize: (initialLoad) => {
 104       dispatch(splitPaneResize(initialLoad));
 105     },
 106     onNewVIParam: (param) => {
 107       dispatch(querySelectedNodeElement(param));
 108     },
 109     onMessageStateChange: (msgText, msgSeverity) => {
 110       dispatch(setNotificationText(msgText, msgSeverity));
 111     },
 112     onRequestClearData: () => {
 113       dispatch(clearVIData());
 114     }
 115   };
 116 };
 117
 118 class TierSupport extends Component {
 119   static propTypes = {
 120     forceDirectedGraphRawData: React.PropTypes.object,
 121     windowWidth: React.PropTypes.number,
 122     windowHeight: React.PropTypes.number,
 123     graphNodeSelectedMenu: React.PropTypes.string,
 124     feedbackMsgText: React.PropTypes.string,
 125     feedbackMsgSeverity: React.PropTypes.string,
 126     nodeData: React.PropTypes.object
 127   };
 128
 129   componentWillReceiveProps(nextProps) {
 130     if (nextProps.match.params.viParam &&
 131       nextProps.match.params.viParam !==
 132       this.props.match.params.viParam) {
 133       this.props.onNewVIParam(nextProps.match.params.viParam);
 134     }
 135     if(nextProps.match.params.viParam && nextProps.match.params.viParam !==
 136       this.props.match.params.viParam) {
 137       this.props.onRequestClearData();
 138     }
 139
 140     if (nextProps.feedbackMsgText !== this.props.feedbackMsgText) {
 141       this.props.onMessageStateChange(nextProps.feedbackMsgText,
 142         nextProps.feedbackMsgSeverity);
 143     }
 144   }
 145
 146   componentWillMount() {
 147     this.props.onSetViewTitle(i18n(TSUI_TITLE));
 148     if (this.props.match.params.viParam) {
 149       this.props.onNewVIParam(this.props.match.params.viParam);
 150     } else {
 151       this.props.onRequestClearData();
 152     }
 153   }
 154
 155   componentDidMount() {
 156     this.props.onSplitPaneResize(true);
 157   }
 158
 159   componentWillUnmount() {
 160     // resetting to default (empty screen)
 161     this.props.onRequestClearData();
 162   }
 163
 164   render() {
 165
 166     const {
 167             forceDirectedGraphRawData,
 168             onNodeSelected,
 169             windowWidth,
 170             windowHeight,
 171             onSplitPaneResize,
 172             onNodeMenuSelect
 173           } = this.props;
 174
 175
 176     let availableOverlay;
 177     let overlayComponent;
 178     // Currently only ONE overlay can be added to each view.
 179     // todo: need to make it array if more than one overlay can be used. No need now.
 180     overlaysDetails.forEach(function(overlay){
 181       if(overlay.view === 'schema') {
 182         availableOverlay = overlay.key;
 183         overlayComponent = overlay.componentName;
 184       }
 185     });
 186
 187     //Temp code for a demo, will be removed as Vis library is updated
 188     let currentNodeButton;
 189     if(this.props.graphNodeSelectedMenu ===
 190       TSUI_GRAPH_MENU_NODE_DETAILS ) {
 191       currentNodeButton = 'NODE_DETAILS';
 192     } else if(availableOverlay) {
 193       currentNodeButton = availableOverlay;
 194     }
 195     // End temp code
 196     let dataOverlayButtons = ['NODE_DETAILS'];
 197     if(availableOverlay) {
 198       dataOverlayButtons.push(availableOverlay);
 199     }
 200     let currentSelectedMenu = this.getCurrentSelectedMenu(overlayComponent);
 201     return (
 202       <div className='tier-support-ui'>
 203         <SplitPane
 204           split='vertical'
 205           enableResizing='true'
 206           onDragFinished={ () => {
 207             onSplitPaneResize(false);
 208           } }
 209           defaultSize={TSUI_NODE_DETAILS_INITIAL_WIDTH}
 210           minSize={TSUI_NODE_DETAILS_MIN_WIDTH}
 211           maxSize={-200}
 212           primary='second'>
 213           <div>
 214             <ForceDirectedGraph
 215               viewWidth={windowWidth}
 216               viewHeight={windowHeight}
 217               graphData={forceDirectedGraphRawData}
 218               nodeSelectedCallback={(nodeData) => {
 219                 onNodeSelected(nodeData);
 220               }}
 221               nodeButtonSelectedCallback={(selectedMenuId) => {
 222                 onNodeMenuSelect(selectedMenuId);
 223               }}
 224               dataOverlayButtons={dataOverlayButtons}
 225               currentlySelectedNodeView={currentNodeButton}/>
 226
 227           </div>
 228           <div>
 229             {currentSelectedMenu}
 230           </div>
 231         </SplitPane>
 232       </div>
 233     );
 234   }
 235
 236   isNotEmpty(obj) {
 237     for(var prop in obj) {
 238       if(obj.hasOwnProperty(prop)) {
 239         return true;
 240       }
 241     }
 242     return false;
 243   }
 244
 245   getCurrentSelectedMenu(overlayComponent) {
 246     let secondOverlay;
 247     if (this.props.graphNodeSelectedMenu === TSUI_GRAPH_MENU_NODE_DETAILS) {
 248       if (!this.nodeDetails) {
 249         this.nodeDetails = <SelectedNodeDetails/>;
 250       }
 251       return this.nodeDetails;
 252     }
 253     else {
 254       if (this.isNotEmpty(this.props.nodeData) && overlayComponent) {
 255         if (Overlays.default.hasOwnProperty(overlayComponent)) {
 256           let OverlayComponent = Overlays.default[overlayComponent];
 257           secondOverlay = <OverlayComponent nodeDetails={this.props.nodeData}/>;
 258         }
 259       }
 260       return secondOverlay;
 261     }
 262   }
 263
 264 }
 265
 266 export default connect(mapStateToProps, mapActionToProps)(TierSupport);