2 * ============LICENSE_START===================================================
3 * SPARKY (AAI UI service)
4 * ============================================================================
5 * Copyright © 2017 AT&T Intellectual Property.
6 * Copyright © 2017 Amdocs
8 * ============================================================================
9 * Licensed under the Apache License, Version 2.0 (the "License");
10 * you may not use this file except in compliance with the License.
11 * You may obtain a copy of the License at
13 * http://www.apache.org/licenses/LICENSE-2.0
15 * Unless required by applicable law or agreed to in writing, software
16 * distributed under the License is distributed on an "AS IS" BASIS,
17 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
18 * See the License for the specific language governing permissions and
19 * limitations under the License.
20 * ============LICENSE_END=====================================================
22 * ECOMP and OpenECOMP are trademarks
23 * and service marks of AT&T Intellectual Property.
26 import React, {Component} from 'react';
27 import {connect} from 'react-redux';
28 import SplitPane from 'react-split-pane';
30 import ForceDirectedGraph from 'generic-components/graph/ForceDirectedGraph.jsx';
31 import SelectedNodeDetails from 'app/tierSupport/selectedNodeDetails/SelectedNodeDetails.jsx';
32 import i18n from 'utils/i18n/i18n';
37 querySelectedNodeElement,
40 } from 'app/tierSupport/TierSupportActions.js';
43 TSUI_NODE_DETAILS_INITIAL_WIDTH,
44 TSUI_NODE_DETAILS_MIN_WIDTH,
45 TSUI_GRAPH_MENU_NODE_DETAILS
46 } from './TierSupportConstants.js';
48 let mapStateToProps = (
53 globalAutoCompleteSearchBar
58 forceDirectedGraphRawData = {
65 graphNodeSelectedMenu = TSUI_GRAPH_MENU_NODE_DETAILS,
67 feedbackMsgSeverity = ''
68 } = tierSupportReducer;
71 performPrepareVisualization = false,
72 selectedSuggestion = {}
73 } = globalAutoCompleteSearchBar;
75 forceDirectedGraphRawData,
78 graphNodeSelectedMenu,
79 performPrepareVisualization,
86 let mapActionToProps = (dispatch) => {
88 onNodeSelected: (requestObject) => {
89 dispatch(onNodeDetailsChange(requestObject));
91 onNodeMenuSelect: (selectedMenu) => {
92 dispatch(onNodeMenuChange(selectedMenu.buttonId));
94 onSplitPaneResize: (initialLoad) => {
95 dispatch(splitPaneResize(initialLoad));
97 onNewVIParam: (param) => {
98 dispatch(querySelectedNodeElement(param));
100 onMessageStateChange: (msgText, msgSeverity) => {
101 dispatch(setNotificationText(msgText, msgSeverity));
103 onRequestClearData: () => {
104 dispatch(clearVIData());
109 class TierSupport extends Component {
111 forceDirectedGraphRawData: React.PropTypes.object,
112 windowWidth: React.PropTypes.number,
113 windowHeight: React.PropTypes.number,
114 graphNodeSelectedMenu: React.PropTypes.string,
115 feedbackMsgText: React.PropTypes.string,
116 feedbackMsgSeverity: React.PropTypes.string
119 componentWillReceiveProps(nextProps) {
120 if (nextProps.match.params.viParam &&
121 nextProps.match.params.viParam !==
122 this.props.match.params.viParam) {
123 this.props.onNewVIParam(nextProps.match.params.viParam);
126 if (nextProps.feedbackMsgText !== this.props.feedbackMsgText) {
127 this.props.onMessageStateChange(nextProps.feedbackMsgText,
128 nextProps.feedbackMsgSeverity);
132 componentWillMount() {
133 if (this.props.match.params.viParam) {
134 this.props.onNewVIParam(this.props.match.params.viParam);
136 this.props.onRequestClearData();
140 componentDidMount() {
141 this.props.onSplitPaneResize(true);
144 componentWillUnmount() {
145 // resetting to default (empty screen)
146 this.props.onRequestClearData();
151 forceDirectedGraphRawData,
158 let currentSelectedMenu = this.getCurrentSelectedMenu();
160 //Temp code for a demo, will be removed as Vis library is updated
161 let currentNodeButton = 'NODE_DETAILS';
165 <div className='tier-support-ui'>
166 <div className='secondary-header'>
167 <span className='secondary-title'>{i18n(TSUI_TITLE)}</span>
171 enableResizing='true'
172 onDragFinished={ () => {
173 onSplitPaneResize(false);
175 defaultSize={TSUI_NODE_DETAILS_INITIAL_WIDTH}
176 minSize={TSUI_NODE_DETAILS_MIN_WIDTH}
181 viewWidth={windowWidth}
182 viewHeight={windowHeight}
183 graphData={forceDirectedGraphRawData}
184 nodeSelectedCallback={(nodeData) => {
185 onNodeSelected(nodeData);
187 nodeButtonSelectedCallback={(selectedMenuId) => {
188 onNodeMenuSelect(selectedMenuId);
190 currentlySelectedNodeView={currentNodeButton}/>
193 {currentSelectedMenu}
200 getCurrentSelectedMenu() {
201 switch (this.props.graphNodeSelectedMenu) {
202 case TSUI_GRAPH_MENU_NODE_DETAILS:
203 if (!this.nodeDetails) {
204 this.nodeDetails = <SelectedNodeDetails/>;
206 return this.nodeDetails;
211 export default connect(mapStateToProps, mapActionToProps)(TierSupport);