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