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 ForceDirectedGraph from 'generic-components/graph/ForceDirectedGraph.jsx';
  31 import SelectedNodeDetails from 'app/tierSupport/selectedNodeDetails/SelectedNodeDetails.jsx';
  32 import i18n from 'utils/i18n/i18n';
  33 import {
  34   onNodeDetailsChange,
  35   onNodeMenuChange,
  36   splitPaneResize,
  37   querySelectedNodeElement,
  38   setNotificationText,
  39   clearVIData
  40 } from 'app/tierSupport/TierSupportActions.js';
  41 import {
  42   TSUI_TITLE,
  43   TSUI_NODE_DETAILS_INITIAL_WIDTH,
  44   TSUI_NODE_DETAILS_MIN_WIDTH,
  45   TSUI_GRAPH_MENU_NODE_DETAILS
  46 } from './TierSupportConstants.js';
  47
  48 let mapStateToProps = (
  49   {
  50     tierSupport:
  51       {
  52         tierSupportReducer,
  53         globalAutoCompleteSearchBar
  54       }
  55   }) => {
  56
  57   let {
  58         forceDirectedGraphRawData = {
  59           graphCounter: -1,
  60           nodeDataArray: [],
  61           linkDataArray: [],
  62           graphMeta: {}
  63         }, windowWidth = 500,
  64         windowHeight = 500,
  65         graphNodeSelectedMenu = TSUI_GRAPH_MENU_NODE_DETAILS,
  66         feedbackMsgText = '',
  67         feedbackMsgSeverity = ''
  68       } = tierSupportReducer;
  69
  70   let {
  71         performPrepareVisualization = false,
  72         selectedSuggestion = {}
  73       } = globalAutoCompleteSearchBar;
  74   return {
  75     forceDirectedGraphRawData,
  76     windowWidth,
  77     windowHeight,
  78     graphNodeSelectedMenu,
  79     performPrepareVisualization,
  80     selectedSuggestion,
  81     feedbackMsgText,
  82     feedbackMsgSeverity
  83   };
  84 };
  85
  86 let mapActionToProps = (dispatch) => {
  87   return {
  88     onNodeSelected: (requestObject) => {
  89       dispatch(onNodeDetailsChange(requestObject));
  90     },
  91     onNodeMenuSelect: (selectedMenu) => {
  92       dispatch(onNodeMenuChange(selectedMenu.buttonId));
  93     },
  94     onSplitPaneResize: (initialLoad) => {
  95       dispatch(splitPaneResize(initialLoad));
  96     },
  97     onNewVIParam: (param) => {
  98       dispatch(querySelectedNodeElement(param));
  99     },
 100     onMessageStateChange: (msgText, msgSeverity) => {
 101       dispatch(setNotificationText(msgText, msgSeverity));
 102     },
 103     onRequestClearData: () => {
 104       dispatch(clearVIData());
 105     }
 106   };
 107 };
 108
 109 class TierSupport extends Component {
 110   static propTypes = {
 111     forceDirectedGraphRawData: React.PropTypes.object,
 112     windowWidth: React.PropTypes.number,
 113     windowHeight: React.PropTypes.number,
 114     graphNodeSelectedMenu: React.PropTypes.string,
 115     feedbackMsgText: React.PropTypes.string,
 116     feedbackMsgSeverity: React.PropTypes.string
 117   };
 118
 119   componentWillReceiveProps(nextProps) {
 120     if (nextProps.match.params.viParam &&
 121       nextProps.match.params.viParam !==
 122       this.props.match.params.viParam) {
 123       this.props.onNewVIParam(nextProps.match.params.viParam);
 124     }
 125
 126     if (nextProps.feedbackMsgText !== this.props.feedbackMsgText) {
 127       this.props.onMessageStateChange(nextProps.feedbackMsgText,
 128         nextProps.feedbackMsgSeverity);
 129     }
 130   }
 131
 132   componentWillMount() {
 133     if (this.props.match.params.viParam) {
 134       this.props.onNewVIParam(this.props.match.params.viParam);
 135     } else {
 136       this.props.onRequestClearData();
 137     }
 138   }
 139
 140   componentDidMount() {
 141     this.props.onSplitPaneResize(true);
 142   }
 143
 144   componentWillUnmount() {
 145     // resetting to default (empty screen)
 146     this.props.onRequestClearData();
 147   }
 148
 149   render() {
 150     const {
 151             forceDirectedGraphRawData,
 152             onNodeSelected,
 153             windowWidth,
 154             windowHeight,
 155             onSplitPaneResize,
 156             onNodeMenuSelect
 157           } = this.props;
 158     let currentSelectedMenu = this.getCurrentSelectedMenu();
 159
 160     //Temp code for a demo, will be removed as Vis library is updated
 161     let currentNodeButton = 'NODE_DETAILS';
 162     // End temp code
 163
 164     return (
 165       <div className='tier-support-ui'>
 166         <div className='secondary-header'>
 167           <span className='secondary-title'>{i18n(TSUI_TITLE)}</span>
 168         </div>
 169         <SplitPane
 170           split='vertical'
 171           enableResizing='true'
 172           onDragFinished={ () => {
 173             onSplitPaneResize(false);
 174           } }
 175           defaultSize={TSUI_NODE_DETAILS_INITIAL_WIDTH}
 176           minSize={TSUI_NODE_DETAILS_MIN_WIDTH}
 177           maxSize={-200}
 178           primary='second'>
 179           <div>
 180             <ForceDirectedGraph
 181               viewWidth={windowWidth}
 182               viewHeight={windowHeight}
 183               graphData={forceDirectedGraphRawData}
 184               nodeSelectedCallback={(nodeData) => {
 185                 onNodeSelected(nodeData);
 186               }}
 187               nodeButtonSelectedCallback={(selectedMenuId) => {
 188                 onNodeMenuSelect(selectedMenuId);
 189               }}
 190               currentlySelectedNodeView={currentNodeButton}/>
 191           </div>
 192           <div>
 193             {currentSelectedMenu}
 194           </div>
 195         </SplitPane>
 196       </div>
 197     );
 198   }
 199
 200   getCurrentSelectedMenu() {
 201     switch (this.props.graphNodeSelectedMenu) {
 202       case TSUI_GRAPH_MENU_NODE_DETAILS:
 203         if (!this.nodeDetails) {
 204           this.nodeDetails = <SelectedNodeDetails/>;
 205         }
 206         return this.nodeDetails;
 207     }
 208   }
 209 }
 210
 211 export default connect(mapStateToProps, mapActionToProps)(TierSupport);