X-Git-Url: https://gerrit.onap.org/r/gitweb?p=aai%2Fsparky-fe.git;a=blobdiff_plain;f=src%2Fapp%2FtierSupport%2FTierSupport.jsx;h=a0819647e75e1e7961ab1b3bb7435a429e8e8fec;hp=d4b0f3ba1325b56ca4606f64d973c84ed84e69a2;hb=47b85e9b95e0a0a3570f0cea4d3ee4645c911a8b;hpb=ca007e933bcd9f63aa77801656ed9dd4142c432c

diff --git a/src/app/tierSupport/TierSupport.jsx b/src/app/tierSupport/TierSupport.jsx
index d4b0f3b..a081964 100644
--- a/src/app/tierSupport/TierSupport.jsx
+++ b/src/app/tierSupport/TierSupport.jsx
@@ -1,34 +1,40 @@
 /*
- * ============LICENSE_START===================================================
- * SPARKY (AAI UI service)
- * ============================================================================
- * Copyright © 2017 AT&T Intellectual Property.
- * Copyright © 2017 Amdocs
- * All rights reserved.
- * ============================================================================
+ * ============LICENSE_START=======================================================
+ * org.onap.aai
+ * ================================================================================
+ * 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.
  * You may obtain a copy of the License at
  *
- *      http://www.apache.org/licenses/LICENSE-2.0
+ *       http://www.apache.org/licenses/LICENSE-2.0
  *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- * ============LICENSE_END=====================================================
- *
- * ECOMP and OpenECOMP are trademarks
- * and service marks of AT&T Intellectual Property.
+ * ============LICENSE_END=========================================================
  */
-
 import React, {Component} from 'react';
 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,
@@ -42,7 +48,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 = (
@@ -64,7 +71,9 @@ let mapStateToProps = (
         windowHeight = 500,
         graphNodeSelectedMenu = TSUI_GRAPH_MENU_NODE_DETAILS,
         feedbackMsgText = '',
-        feedbackMsgSeverity = ''
+        feedbackMsgSeverity = '',
+        nodeData = {},
+        enableBusyFeedback = false
       } = tierSupportReducer;
 
   let {
@@ -79,12 +88,17 @@ let mapStateToProps = (
     performPrepareVisualization,
     selectedSuggestion,
     feedbackMsgText,
-    feedbackMsgSeverity
+    feedbackMsgSeverity,
+    nodeData,
+    enableBusyFeedback
   };
 };
 
 let mapActionToProps = (dispatch) => {
   return {
+    onSetViewTitle: (title) => {
+      dispatch(setSecondaryTitle(title));
+    },
     onNodeSelected: (requestObject) => {
       dispatch(onNodeDetailsChange(requestObject));
     },
@@ -102,6 +116,9 @@ let mapActionToProps = (dispatch) => {
     },
     onRequestClearData: () => {
       dispatch(clearVIData());
+    },
+    onOverlayNetworkCallback: (apiUrl, body, viewName, curViewData, responseEventKey) =>  {
+      dispatch(overlayNetworkCallback(apiUrl, body, viewName, curViewData, responseEventKey));
     }
   };
 };
@@ -113,7 +130,9 @@ class TierSupport extends Component {
     windowHeight: React.PropTypes.number,
     graphNodeSelectedMenu: React.PropTypes.string,
     feedbackMsgText: React.PropTypes.string,
-    feedbackMsgSeverity: React.PropTypes.string
+    feedbackMsgSeverity: React.PropTypes.string,
+    nodeData: React.PropTypes.object,
+    enableBusyFeedback: React.PropTypes.bool
   };
 
   componentWillReceiveProps(nextProps) {
@@ -122,6 +141,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,
@@ -130,6 +153,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 {
@@ -147,65 +171,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);