X-Git-Url: https://gerrit.onap.org/r/gitweb?a=blobdiff_plain;f=src%2Fapp%2FtierSupport%2FTierSupport.jsx;h=5608cd36bef43bc2bbd00830d14169a27647c612;hb=refs%2Fchanges%2F43%2F64843%2F1;hp=e6c479e1b1c4a4c9d00cda1b3cc7b871d68e0041;hpb=c1917730a648ddbb6cd51307cea9464a697700d8;p=aai%2Fsparky-fe.git

diff --git a/src/app/tierSupport/TierSupport.jsx b/src/app/tierSupport/TierSupport.jsx
index e6c479e..5608cd3 100644
--- a/src/app/tierSupport/TierSupport.jsx
+++ b/src/app/tierSupport/TierSupport.jsx
@@ -2,8 +2,8 @@
  * ============LICENSE_START=======================================================
  * org.onap.aai
  * ================================================================================
- * Copyright © 2017 AT&T Intellectual Property. All rights reserved.
- * Copyright © 2017 Amdocs
+ * Copyright © 2017-2018 AT&T Intellectual Property. All rights reserved.
+ * Copyright © 2017-2018 Amdocs
  * ================================================================================
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,15 +17,25 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  * ============LICENSE_END=========================================================
- *
- * ECOMP is a trademark and service mark of AT&T Intellectual Property.
  */
 import React, {Component} from 'react';
+import { PropTypes } from 'prop-types';
 import {connect} from 'react-redux';
 import SplitPane from 'react-split-pane';
+import Spinner from 'utils/SpinnerContainer.jsx';
 
+import {setSecondaryTitle} from 'app/MainScreenWrapperActionHelper.js';
 import ForceDirectedGraph from 'generic-components/graph/ForceDirectedGraph.jsx';
 import SelectedNodeDetails from 'app/tierSupport/selectedNodeDetails/SelectedNodeDetails.jsx';
+
+
+import {
+  overlayNetworkCallback,
+} from '../MainScreenWrapperActionHelper.js';
+
+import overlaysDetails from 'resources/overlays/overlaysDetails.json';
+import * as Overlays from 'app/overlays/OverlayImports.js';
+
 import i18n from 'utils/i18n/i18n';
 import {
   onNodeDetailsChange,
@@ -39,7 +49,8 @@ import {
   TSUI_TITLE,
   TSUI_NODE_DETAILS_INITIAL_WIDTH,
   TSUI_NODE_DETAILS_MIN_WIDTH,
-  TSUI_GRAPH_MENU_NODE_DETAILS
+  TSUI_GRAPH_MENU_NODE_DETAILS,
+  tierSupportActionTypes
 } from './TierSupportConstants.js';
 
 let mapStateToProps = (
@@ -61,7 +72,9 @@ let mapStateToProps = (
         windowHeight = 500,
         graphNodeSelectedMenu = TSUI_GRAPH_MENU_NODE_DETAILS,
         feedbackMsgText = '',
-        feedbackMsgSeverity = ''
+        feedbackMsgSeverity = '',
+        nodeData = {},
+        enableBusyFeedback = false
       } = tierSupportReducer;
 
   let {
@@ -76,12 +89,17 @@ let mapStateToProps = (
     performPrepareVisualization,
     selectedSuggestion,
     feedbackMsgText,
-    feedbackMsgSeverity
+    feedbackMsgSeverity,
+    nodeData,
+    enableBusyFeedback
   };
 };
 
 let mapActionToProps = (dispatch) => {
   return {
+    onSetViewTitle: (title) => {
+      dispatch(setSecondaryTitle(title));
+    },
     onNodeSelected: (requestObject) => {
       dispatch(onNodeDetailsChange(requestObject));
     },
@@ -99,18 +117,23 @@ let mapActionToProps = (dispatch) => {
     },
     onRequestClearData: () => {
       dispatch(clearVIData());
+    },
+    onOverlayNetworkCallback: (apiUrl, body, viewName, curViewData, responseEventKey) =>  {
+      dispatch(overlayNetworkCallback(apiUrl, body, viewName, curViewData, responseEventKey));
     }
   };
 };
 
 class TierSupport extends Component {
   static propTypes = {
-    forceDirectedGraphRawData: React.PropTypes.object,
-    windowWidth: React.PropTypes.number,
-    windowHeight: React.PropTypes.number,
-    graphNodeSelectedMenu: React.PropTypes.string,
-    feedbackMsgText: React.PropTypes.string,
-    feedbackMsgSeverity: React.PropTypes.string
+    forceDirectedGraphRawData: PropTypes.object,
+    windowWidth: PropTypes.number,
+    windowHeight: PropTypes.number,
+    graphNodeSelectedMenu: PropTypes.string,
+    feedbackMsgText: PropTypes.string,
+    feedbackMsgSeverity: PropTypes.string,
+    nodeData: PropTypes.object,
+    enableBusyFeedback: PropTypes.bool
   };
 
   componentWillReceiveProps(nextProps) {
@@ -119,6 +142,10 @@ class TierSupport extends Component {
       this.props.match.params.viParam) {
       this.props.onNewVIParam(nextProps.match.params.viParam);
     }
+    if(nextProps.match.params.viParam && nextProps.match.params.viParam !==
+      this.props.match.params.viParam) {
+      this.props.onRequestClearData();
+    }
 
     if (nextProps.feedbackMsgText !== this.props.feedbackMsgText) {
       this.props.onMessageStateChange(nextProps.feedbackMsgText,
@@ -127,6 +154,7 @@ class TierSupport extends Component {
   }
 
   componentWillMount() {
+    this.props.onSetViewTitle(i18n(TSUI_TITLE));
     if (this.props.match.params.viParam) {
       this.props.onNewVIParam(this.props.match.params.viParam);
     } else {
@@ -144,65 +172,116 @@ class TierSupport extends Component {
   }
 
   render() {
+
     const {
             forceDirectedGraphRawData,
             onNodeSelected,
             windowWidth,
             windowHeight,
             onSplitPaneResize,
-            onNodeMenuSelect
+            onNodeMenuSelect,
+            enableBusyFeedback
           } = this.props;
-    let currentSelectedMenu = this.getCurrentSelectedMenu();
+    let availableOverlay;
+    let overlayComponent;
+    // Currently only ONE overlay can be added to each view.
+    // todo: need to make it array if more than one overlay can be used. No need now.
+    overlaysDetails.forEach(function(overlay){
+      if(overlay.view === 'schema') {
+        availableOverlay = overlay.key;
+        overlayComponent = overlay.componentName;
+      }
+    });
 
     //Temp code for a demo, will be removed as Vis library is updated
-    let currentNodeButton = 'NODE_DETAILS';
+    let currentNodeButton;
+    if(this.props.graphNodeSelectedMenu ===
+      TSUI_GRAPH_MENU_NODE_DETAILS ) {
+      currentNodeButton = 'NODE_DETAILS';
+    } else if(availableOverlay) {
+      currentNodeButton = availableOverlay;
+    }
     // End temp code
-
+    let dataOverlayButtons = ['NODE_DETAILS'];
+    if(availableOverlay) {
+      dataOverlayButtons.push(availableOverlay);
+    }
+    let currentSelectedMenu = this.getCurrentSelectedMenu(overlayComponent);
     return (
       <div className='tier-support-ui'>
-        <div className='secondary-header'>
-          <span className='secondary-title'>{i18n(TSUI_TITLE)}</span>
-        </div>
-        <SplitPane
-          split='vertical'
-          enableResizing='true'
-          onDragFinished={ () => {
-            onSplitPaneResize(false);
-          } }
-          defaultSize={TSUI_NODE_DETAILS_INITIAL_WIDTH}
-          minSize={TSUI_NODE_DETAILS_MIN_WIDTH}
-          maxSize={-200}
-          primary='second'>
-          <div>
-            <ForceDirectedGraph
-              viewWidth={windowWidth}
-              viewHeight={windowHeight}
-              graphData={forceDirectedGraphRawData}
-              nodeSelectedCallback={(nodeData) => {
-                onNodeSelected(nodeData);
-              }}
-              nodeButtonSelectedCallback={(selectedMenuId) => {
-                onNodeMenuSelect(selectedMenuId);
-              }}
-              currentlySelectedNodeView={currentNodeButton}/>
-          </div>
-          <div>
-            {currentSelectedMenu}
-          </div>
-        </SplitPane>
+          <Spinner loading={enableBusyFeedback}>
+            <SplitPane
+              split='vertical'
+              enableResizing='true'
+              onDragFinished={ () => {
+                onSplitPaneResize(false);
+              } }
+              defaultSize={TSUI_NODE_DETAILS_INITIAL_WIDTH}
+              minSize={TSUI_NODE_DETAILS_MIN_WIDTH}
+              maxSize={-200}
+              primary='second'>
+              <div>
+                <ForceDirectedGraph
+                  viewWidth={windowWidth}
+                  viewHeight={windowHeight}
+                  graphData={forceDirectedGraphRawData}
+                  nodeSelectedCallback={(nodeData) => {
+                    onNodeSelected(nodeData);
+                  }}
+                  nodeButtonSelectedCallback={(selectedMenuId) => {
+                    onNodeMenuSelect(selectedMenuId);
+                  }}
+                  dataOverlayButtons={dataOverlayButtons}
+                  currentlySelectedNodeView={currentNodeButton}/>
+
+              </div>
+              <div>
+                {currentSelectedMenu}
+              </div>
+            </SplitPane>
+          </Spinner>
       </div>
     );
   }
 
-  getCurrentSelectedMenu() {
-    switch (this.props.graphNodeSelectedMenu) {
-      case TSUI_GRAPH_MENU_NODE_DETAILS:
-        if (!this.nodeDetails) {
-          this.nodeDetails = <SelectedNodeDetails/>;
+  isNotEmpty(obj) {
+    for(var prop in obj) {
+      if(obj.hasOwnProperty(prop)) {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  getCurrentSelectedMenu(overlayComponent) {
+    let secondOverlay;
+    if (this.props.graphNodeSelectedMenu === TSUI_GRAPH_MENU_NODE_DETAILS) {
+      if (!this.nodeDetails) {
+        this.nodeDetails = <SelectedNodeDetails/>;
+      }
+      return this.nodeDetails;
+    }
+    else {
+      if (this.isNotEmpty(this.props.nodeData) && overlayComponent) {
+        if (Overlays.default.hasOwnProperty(overlayComponent)) {
+          let OverlayComponent = Overlays.default[overlayComponent];
+          secondOverlay = <OverlayComponent
+            nodeDetails={this.props.nodeData}
+            networkingCallback={(apiUrl, body, paramName, curViewData) => {
+              this.props.onOverlayNetworkCallback(
+                apiUrl,
+                body,
+                paramName,
+                curViewData,
+                tierSupportActionTypes.TS_OVERLAY_NETWORK_CALLBACK_RESPONSE_RECEIVED);
+            }} />;
+
         }
-        return this.nodeDetails;
+      }
+      return secondOverlay;
     }
   }
+
 }
 
 export default connect(mapStateToProps, mapActionToProps)(TierSupport);