Adding filter bar

Issue-ID: AAI-543
Change-Id: I18ec69f4585a9f01feafd009fcd30493a039b064
Signed-off-by: Shawn Severin <shawn.severin@amdocs.com>

5 files changed, 156 insertions, 64 deletions

diff --git a/src/app/tierSupport/TierSupport.jsx b/src/app/tierSupport/TierSupport.jsx
index e6c479e..e38b43d 100644
--- a/src/app/tierSupport/TierSupport.jsx
+++ b/src/app/tierSupport/TierSupport.jsx
@@ -1,31 +1,40 @@
 /*
- * ============LICENSE_START=======================================================
- * org.onap.aai
- * ================================================================================
- * Copyright © 2017 AT&T Intellectual Property. All rights reserved.
+ * ============LICENSE_START===================================================
+ * SPARKY (AAI UI service)
+ * ============================================================================
+ * Copyright © 2017 AT&T Intellectual Property.
  * Copyright © 2017 Amdocs
- * ================================================================================
+ * All rights reserved.
+ * ============================================================================
  * 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=========================================================
+ * ============LICENSE_END=====================================================
  *
- * ECOMP is a trademark and service mark of AT&T Intellectual Property.
+ * ECOMP and OpenECOMP are trademarks
+ * and service marks of AT&T Intellectual Property.
  */
+
 import React, {Component} from 'react';
 import {connect} from 'react-redux';
 import SplitPane from 'react-split-pane';
 
+import {setSecondaryTitle} from 'app/MainScreenWrapperActionHelper.js';
 import ForceDirectedGraph from 'generic-components/graph/ForceDirectedGraph.jsx';
 import SelectedNodeDetails from 'app/tierSupport/selectedNodeDetails/SelectedNodeDetails.jsx';
+
+
+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 +48,7 @@ import {
   TSUI_TITLE,
   TSUI_NODE_DETAILS_INITIAL_WIDTH,
   TSUI_NODE_DETAILS_MIN_WIDTH,
-  TSUI_GRAPH_MENU_NODE_DETAILS
+  TSUI_GRAPH_MENU_NODE_DETAILS,
 } from './TierSupportConstants.js';
 
 let mapStateToProps = (
@@ -61,7 +70,8 @@ let mapStateToProps = (
         windowHeight = 500,
         graphNodeSelectedMenu = TSUI_GRAPH_MENU_NODE_DETAILS,
         feedbackMsgText = '',
-        feedbackMsgSeverity = ''
+        feedbackMsgSeverity = '',
+        nodeData = {}
       } = tierSupportReducer;
 
   let {
@@ -76,12 +86,16 @@ let mapStateToProps = (
     performPrepareVisualization,
     selectedSuggestion,
     feedbackMsgText,
-    feedbackMsgSeverity
+    feedbackMsgSeverity,
+    nodeData
   };
 };
 
 let mapActionToProps = (dispatch) => {
   return {
+    onSetViewTitle: (title) => {
+      dispatch(setSecondaryTitle(title));
+    },
     onNodeSelected: (requestObject) => {
       dispatch(onNodeDetailsChange(requestObject));
     },
@@ -110,7 +124,8 @@ 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
   };
 
   componentWillReceiveProps(nextProps) {
@@ -119,6 +134,10 @@ class TierSupport extends Component {
       this.props.match.params.viParam) {
       this.props.onNewVIParam(nextProps.match.params.viParam);
     }
+    if(nextProps.match.params.viParam === undefined && 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 +146,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,6 +164,7 @@ class TierSupport extends Component {
   }
 
   render() {
+
     const {
             forceDirectedGraphRawData,
             onNodeSelected,
@@ -152,17 +173,35 @@ class TierSupport extends Component {
             onSplitPaneResize,
             onNodeMenuSelect
           } = 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'
@@ -184,7 +223,9 @@ class TierSupport extends Component {
               nodeButtonSelectedCallback={(selectedMenuId) => {
                 onNodeMenuSelect(selectedMenuId);
               }}
+              dataOverlayButtons={dataOverlayButtons}
               currentlySelectedNodeView={currentNodeButton}/>
+
           </div>
           <div>
             {currentSelectedMenu}
@@ -194,15 +235,34 @@ class TierSupport extends Component {
     );
   }
 
-  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}/>;
         }
-        return this.nodeDetails;
+      }
+      return secondOverlay;
     }
   }
+
 }
 
 export default connect(mapStateToProps, mapActionToProps)(TierSupport);
diff --git a/src/app/tierSupport/TierSupportActions.js b/src/app/tierSupport/TierSupportActions.js
index 4261360..6de6ab0 100644
--- a/src/app/tierSupport/TierSupportActions.js
+++ b/src/app/tierSupport/TierSupportActions.js
@@ -1,26 +1,29 @@
 /*
- * ============LICENSE_START=======================================================
- * org.onap.aai
- * ================================================================================
- * Copyright © 2017 AT&T Intellectual Property. All rights reserved.
+ * ============LICENSE_START===================================================
+ * SPARKY (AAI UI service)
+ * ============================================================================
+ * Copyright © 2017 AT&T Intellectual Property.
  * Copyright © 2017 Amdocs
- * ================================================================================
+ * All rights reserved.
+ * ============================================================================
  * 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=========================================================
+ * ============LICENSE_END=====================================================
  *
- * ECOMP is a trademark and service mark of AT&T Intellectual Property.
+ * ECOMP and OpenECOMP are trademarks
+ * and service marks of AT&T Intellectual Property.
  */
 
+
 import {tierSupportActionTypes,
   TS_BACKEND_SEARCH_SELECTED_NODE_URL} from 'app/tierSupport/TierSupportConstants.js';
 import {
@@ -33,7 +36,7 @@ import networkCall from 'app/networking/NetworkCalls.js';
 import {
   getSetGlobalMessageEvent,
   getClearGlobalMessageEvent
-} from 'app/GlobalInlineMessageBar/GlobalInlineMessageBarActions.js';
+} from 'app/globalInlineMessageBar/GlobalInlineMessageBarActions.js';
 import {
   STATUS_CODE_204_NO_CONTENT,
   STATUS_CODE_3XX_REDIRECTION,
@@ -86,6 +89,20 @@ function createNodeDetailsFoundEvent(nodeDetails) {
   };
 }
 
+function createSelectedNodeDetails(nodeDetails) {
+  var selectedNodeDetail;
+  for(let i = 0; i < nodeDetails.nodes.length; i++) {
+    if(nodeDetails.nodes[i].nodeMeta.className === 'selectedSearchedNodeClass') {
+      selectedNodeDetail = nodeDetails.nodes[i];
+      break;
+    }
+  }
+  return {
+    type: tierSupportActionTypes.TS_GRAPH_NODE_SELECTED,
+    data: selectedNodeDetail
+  };
+}
+
 function noNodeDetailsFoundEvent(errorText) {
   return {
     type: tierSupportActionTypes.TS_NODE_SEARCH_NO_RESULTS,
@@ -121,6 +138,7 @@ export function fetchSelectedNodeElement(fetchRequestCallback) {
       (responseJson) => {
         if (responseJson.nodes.length > 0) {
           dispatch(createNodeDetailsFoundEvent(responseJson));
+          dispatch(createSelectedNodeDetails(responseJson));
         } else {
           dispatch(noNodeDetailsFoundEvent(NO_RESULTS_FOUND));
         }
diff --git a/src/app/tierSupport/TierSupportConstants.js b/src/app/tierSupport/TierSupportConstants.js
index 9383d65..1a525b1 100644
--- a/src/app/tierSupport/TierSupportConstants.js
+++ b/src/app/tierSupport/TierSupportConstants.js
@@ -1,25 +1,28 @@
 /*
- * ============LICENSE_START=======================================================
- * org.onap.aai
- * ================================================================================
- * Copyright © 2017 AT&T Intellectual Property. All rights reserved.
+ * ============LICENSE_START===================================================
+ * SPARKY (AAI UI service)
+ * ============================================================================
+ * Copyright © 2017 AT&T Intellectual Property.
  * Copyright © 2017 Amdocs
- * ================================================================================
+ * All rights reserved.
+ * ============================================================================
  * 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=========================================================
+ * ============LICENSE_END=====================================================
  *
- * ECOMP is a trademark and service mark of AT&T Intellectual Property.
+ * ECOMP and OpenECOMP are trademarks
+ * and service marks of AT&T Intellectual Property.
  */
+
 import keyMirror from 'utils/KeyMirror.js';
 import {BASE_URL} from 'app/networking/NetworkConstants.js';
 
@@ -37,10 +40,10 @@ export const tierSupportActionTypes = keyMirror({
 
 export const TSUI_NODE_DETAILS_INITIAL_WIDTH = 300;
 export const TSUI_NODE_DETAILS_MIN_WIDTH = 200;
-export const TSUI_SEARCH_URL = BASE_URL + '/search/viuiSearch/';
+export const TSUI_SEARCH_URL = BASE_URL + '/rest/search/viuiSearch/';
 
 export const TSUI_TITLE = 'View & Inspect';
 export const TSUI_GRAPH_MENU_NODE_DETAILS = 'NODE_DETAILS';
-export const SEARCH_SELECTED_NODE_PATH = '/visualization/prepareVisualization';
+export const SEARCH_SELECTED_NODE_PATH = '/rest/visualization/prepareVisualization';
 export const TS_BACKEND_SEARCH_SELECTED_NODE_URL = BASE_URL +
   SEARCH_SELECTED_NODE_PATH;
diff --git a/src/app/tierSupport/TierSupportReducer.js b/src/app/tierSupport/TierSupportReducer.js
index 3c4e83e..7dd6ab0 100644
--- a/src/app/tierSupport/TierSupportReducer.js
+++ b/src/app/tierSupport/TierSupportReducer.js
@@ -1,25 +1,28 @@
 /*
- * ============LICENSE_START=======================================================
- * org.onap.aai
- * ================================================================================
- * Copyright © 2017 AT&T Intellectual Property. All rights reserved.
+ * ============LICENSE_START===================================================
+ * SPARKY (AAI UI service)
+ * ============================================================================
+ * Copyright © 2017 AT&T Intellectual Property.
  * Copyright © 2017 Amdocs
- * ================================================================================
+ * All rights reserved.
+ * ============================================================================
  * 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=========================================================
+ * ============LICENSE_END=====================================================
  *
- * ECOMP is a trademark and service mark of AT&T Intellectual Property.
+ * ECOMP and OpenECOMP are trademarks
+ * and service marks of AT&T Intellectual Property.
  */
+
 import {combineReducers} from 'redux';
 import ForceDirectedGraph from 'generic-components/graph/ForceDirectedGraph.jsx';
 import {aaiActionTypes} from 'app/MainScreenWrapperConstants.js';
@@ -43,7 +46,7 @@ export default combineReducers({
       case tierSupportActionTypes.TS_NODE_SEARCH_RESULTS:
         let graphData = ForceDirectedGraph.generateNewProps(action.data.nodes, action.data.links,
           action.data.graphMeta);
-        
+
         return {
           ...state,
           forceDirectedGraphRawData: graphData,
@@ -81,6 +84,11 @@ export default combineReducers({
           feedbackMsgText: '',
           feedbackMsgSeverity: ''
         };
+      case tierSupportActionTypes.TS_GRAPH_NODE_SELECTED:
+        return {
+          ...state,
+          nodeData: action.data
+        };
       case globalAutoCompleteSearchBarActionTypes.SEARCH_WARNING_EVENT:
         let emptyNodesAndLinksWarningEvent = ForceDirectedGraph.generateNewProps([], [], {});
         return {
@@ -93,7 +101,7 @@ export default combineReducers({
         let splitPaneLeftSideElement = document.getElementsByClassName('Pane1');
         if (splitPaneLeftSideElement.length > 0) {
           let width = splitPaneLeftSideElement[0].offsetWidth;
-          
+
           return {
             ...state, windowWidth: width, windowHeight: splitPaneLeftSideElement[0].offsetHeight
           };
@@ -101,7 +109,7 @@ export default combineReducers({
           return state;
         }
     }
-    
+
     return state;
   }
 });
diff --git a/src/app/tierSupport/selectedNodeDetails/SelectedNodeDetails.jsx b/src/app/tierSupport/selectedNodeDetails/SelectedNodeDetails.jsx
index 97fa4ec..267a1c3 100644
--- a/src/app/tierSupport/selectedNodeDetails/SelectedNodeDetails.jsx
+++ b/src/app/tierSupport/selectedNodeDetails/SelectedNodeDetails.jsx
@@ -1,25 +1,28 @@
 /*
- * ============LICENSE_START=======================================================
- * org.onap.aai
- * ================================================================================
- * Copyright © 2017 AT&T Intellectual Property. All rights reserved.
+ * ============LICENSE_START===================================================
+ * SPARKY (AAI UI service)
+ * ============================================================================
+ * Copyright © 2017 AT&T Intellectual Property.
  * Copyright © 2017 Amdocs
- * ================================================================================
+ * All rights reserved.
+ * ============================================================================
  * 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=========================================================
+ * ============LICENSE_END=====================================================
  *
- * ECOMP is a trademark and service mark of AT&T Intellectual Property.
+ * ECOMP and OpenECOMP are trademarks
+ * and service marks of AT&T Intellectual Property.
  */
+
 import {connect} from 'react-redux';
 import React, {Component} from 'react';
 import Table from 'react-bootstrap/lib/Table';
@@ -31,7 +34,7 @@ import {
 } from 'app/tierSupport/selectedNodeDetails/SelectedNodeDetailsConstants.js';
 
 let mapStateToProps = ({tierSupport: {selectedNodeDetails}}) => {
-  let {nodeData = [], nodeType = '', uid = ''} = selectedNodeDetails;
+  let {nodeData = {}, nodeType = '', uid = ''} = selectedNodeDetails;
 
   return {
     nodeData,
@@ -42,7 +45,7 @@ let mapStateToProps = ({tierSupport: {selectedNodeDetails}}) => {
 
 class SelectedNodeDetails extends Component {
   static propTypes = {
-    nodeData: React.PropTypes.array,
+    nodeData: React.PropTypes.object,
     nodeType: React.PropTypes.string,
     uid: React.PropTypes.string
   };