2 * ============LICENSE_START=======================================================
4 * ================================================================================
5 * Copyright © 2017 AT&T Intellectual Property. All rights reserved.
6 * Copyright © 2017 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
12 * http://www.apache.org/licenses/LICENSE-2.0
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=========================================================
21 * ECOMP is a trademark and service mark of AT&T Intellectual Property.
23 import React, {Component} from 'react';
24 import {connect} from 'react-redux';
25 import SplitPane from 'react-split-pane';
27 import ForceDirectedGraph from 'generic-components/graph/ForceDirectedGraph.jsx';
28 import SelectedNodeDetails from 'app/tierSupport/selectedNodeDetails/SelectedNodeDetails.jsx';
29 import i18n from 'utils/i18n/i18n';
34 querySelectedNodeElement,
37 } from 'app/tierSupport/TierSupportActions.js';
40 TSUI_NODE_DETAILS_INITIAL_WIDTH,
41 TSUI_NODE_DETAILS_MIN_WIDTH,
42 TSUI_GRAPH_MENU_NODE_DETAILS
43 } from './TierSupportConstants.js';
45 let mapStateToProps = (
50 globalAutoCompleteSearchBar
55 forceDirectedGraphRawData = {
62 graphNodeSelectedMenu = TSUI_GRAPH_MENU_NODE_DETAILS,
64 feedbackMsgSeverity = ''
65 } = tierSupportReducer;
68 performPrepareVisualization = false,
69 selectedSuggestion = {}
70 } = globalAutoCompleteSearchBar;
72 forceDirectedGraphRawData,
75 graphNodeSelectedMenu,
76 performPrepareVisualization,
83 let mapActionToProps = (dispatch) => {
85 onNodeSelected: (requestObject) => {
86 dispatch(onNodeDetailsChange(requestObject));
88 onNodeMenuSelect: (selectedMenu) => {
89 dispatch(onNodeMenuChange(selectedMenu.buttonId));
91 onSplitPaneResize: (initialLoad) => {
92 dispatch(splitPaneResize(initialLoad));
94 onNewVIParam: (param) => {
95 dispatch(querySelectedNodeElement(param));
97 onMessageStateChange: (msgText, msgSeverity) => {
98 dispatch(setNotificationText(msgText, msgSeverity));
100 onRequestClearData: () => {
101 dispatch(clearVIData());
106 class TierSupport extends Component {
108 forceDirectedGraphRawData: React.PropTypes.object,
109 windowWidth: React.PropTypes.number,
110 windowHeight: React.PropTypes.number,
111 graphNodeSelectedMenu: React.PropTypes.string,
112 feedbackMsgText: React.PropTypes.string,
113 feedbackMsgSeverity: React.PropTypes.string
116 componentWillReceiveProps(nextProps) {
117 if (nextProps.match.params.viParam &&
118 nextProps.match.params.viParam !==
119 this.props.match.params.viParam) {
120 this.props.onNewVIParam(nextProps.match.params.viParam);
123 if (nextProps.feedbackMsgText !== this.props.feedbackMsgText) {
124 this.props.onMessageStateChange(nextProps.feedbackMsgText,
125 nextProps.feedbackMsgSeverity);
129 componentWillMount() {
130 if (this.props.match.params.viParam) {
131 this.props.onNewVIParam(this.props.match.params.viParam);
133 this.props.onRequestClearData();
137 componentDidMount() {
138 this.props.onSplitPaneResize(true);
141 componentWillUnmount() {
142 // resetting to default (empty screen)
143 this.props.onRequestClearData();
148 forceDirectedGraphRawData,
155 let currentSelectedMenu = this.getCurrentSelectedMenu();
157 //Temp code for a demo, will be removed as Vis library is updated
158 let currentNodeButton = 'NODE_DETAILS';
162 <div className='tier-support-ui'>
163 <div className='secondary-header'>
164 <span className='secondary-title'>{i18n(TSUI_TITLE)}</span>
168 enableResizing='true'
169 onDragFinished={ () => {
170 onSplitPaneResize(false);
172 defaultSize={TSUI_NODE_DETAILS_INITIAL_WIDTH}
173 minSize={TSUI_NODE_DETAILS_MIN_WIDTH}
178 viewWidth={windowWidth}
179 viewHeight={windowHeight}
180 graphData={forceDirectedGraphRawData}
181 nodeSelectedCallback={(nodeData) => {
182 onNodeSelected(nodeData);
184 nodeButtonSelectedCallback={(selectedMenuId) => {
185 onNodeMenuSelect(selectedMenuId);
187 currentlySelectedNodeView={currentNodeButton}/>
190 {currentSelectedMenu}
197 getCurrentSelectedMenu() {
198 switch (this.props.graphNodeSelectedMenu) {
199 case TSUI_GRAPH_MENU_NODE_DETAILS:
200 if (!this.nodeDetails) {
201 this.nodeDetails = <SelectedNodeDetails/>;
203 return this.nodeDetails;
208 export default connect(mapStateToProps, mapActionToProps)(TierSupport);