src/app/tierSupport/TierSupport.jsx

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