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