src/app/tierSupport/TierSupport.jsx

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