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 {setSecondaryTitle} from 'app/MainScreenWrapperActionHelper.js';
28 import ForceDirectedGraph from 'generic-components/graph/ForceDirectedGraph.jsx';
29 import SelectedNodeDetails from 'app/tierSupport/selectedNodeDetails/SelectedNodeDetails.jsx';
32 import overlaysDetails from 'resources/overlays/overlaysDetails.json';
33 import * as Overlays from 'app/overlays/OverlayImports.js';
35 import i18n from 'utils/i18n/i18n';
40 querySelectedNodeElement,
43 } from 'app/tierSupport/TierSupportActions.js';
46 TSUI_NODE_DETAILS_INITIAL_WIDTH,
47 TSUI_NODE_DETAILS_MIN_WIDTH,
48 TSUI_GRAPH_MENU_NODE_DETAILS,
49 } from './TierSupportConstants.js';
51 let mapStateToProps = (
56 globalAutoCompleteSearchBar
61 forceDirectedGraphRawData = {
68 graphNodeSelectedMenu = TSUI_GRAPH_MENU_NODE_DETAILS,
70 feedbackMsgSeverity = '',
72 } = tierSupportReducer;
75 performPrepareVisualization = false,
76 selectedSuggestion = {}
77 } = globalAutoCompleteSearchBar;
79 forceDirectedGraphRawData,
82 graphNodeSelectedMenu,
83 performPrepareVisualization,
91 let mapActionToProps = (dispatch) => {
93 onSetViewTitle: (title) => {
94 dispatch(setSecondaryTitle(title));
96 onNodeSelected: (requestObject) => {
97 dispatch(onNodeDetailsChange(requestObject));
99 onNodeMenuSelect: (selectedMenu) => {
100 dispatch(onNodeMenuChange(selectedMenu.buttonId));
102 onSplitPaneResize: (initialLoad) => {
103 dispatch(splitPaneResize(initialLoad));
105 onNewVIParam: (param) => {
106 dispatch(querySelectedNodeElement(param));
108 onMessageStateChange: (msgText, msgSeverity) => {
109 dispatch(setNotificationText(msgText, msgSeverity));
111 onRequestClearData: () => {
112 dispatch(clearVIData());
117 class TierSupport extends Component {
119 forceDirectedGraphRawData: React.PropTypes.object,
120 windowWidth: React.PropTypes.number,
121 windowHeight: React.PropTypes.number,
122 graphNodeSelectedMenu: React.PropTypes.string,
123 feedbackMsgText: React.PropTypes.string,
124 feedbackMsgSeverity: React.PropTypes.string,
125 nodeData: React.PropTypes.object
128 componentWillReceiveProps(nextProps) {
129 if (nextProps.match.params.viParam &&
130 nextProps.match.params.viParam !==
131 this.props.match.params.viParam) {
132 this.props.onNewVIParam(nextProps.match.params.viParam);
134 if(nextProps.match.params.viParam === undefined && nextProps.match.params.viParam !==
135 this.props.match.params.viParam) {
136 this.props.onRequestClearData();
139 if (nextProps.feedbackMsgText !== this.props.feedbackMsgText) {
140 this.props.onMessageStateChange(nextProps.feedbackMsgText,
141 nextProps.feedbackMsgSeverity);
145 componentWillMount() {
146 this.props.onSetViewTitle(i18n(TSUI_TITLE));
147 if (this.props.match.params.viParam) {
148 this.props.onNewVIParam(this.props.match.params.viParam);
150 this.props.onRequestClearData();
154 componentDidMount() {
155 this.props.onSplitPaneResize(true);
158 componentWillUnmount() {
159 // resetting to default (empty screen)
160 this.props.onRequestClearData();
166 forceDirectedGraphRawData,
175 let availableOverlay;
176 let overlayComponent;
177 // Currently only ONE overlay can be added to each view.
178 // todo: need to make it array if more than one overlay can be used. No need now.
179 overlaysDetails.forEach(function(overlay){
180 if(overlay.view === 'schema') {
181 availableOverlay = overlay.key;
182 overlayComponent = overlay.componentName;
186 //Temp code for a demo, will be removed as Vis library is updated
187 let currentNodeButton;
188 if(this.props.graphNodeSelectedMenu ===
189 TSUI_GRAPH_MENU_NODE_DETAILS ) {
190 currentNodeButton = 'NODE_DETAILS';
191 } else if(availableOverlay) {
192 currentNodeButton = availableOverlay;
195 let dataOverlayButtons = ['NODE_DETAILS'];
196 if(availableOverlay) {
197 dataOverlayButtons.push(availableOverlay);
199 let currentSelectedMenu = this.getCurrentSelectedMenu(overlayComponent);
201 <div className='tier-support-ui'>
204 enableResizing='true'
205 onDragFinished={ () => {
206 onSplitPaneResize(false);
208 defaultSize={TSUI_NODE_DETAILS_INITIAL_WIDTH}
209 minSize={TSUI_NODE_DETAILS_MIN_WIDTH}
214 viewWidth={windowWidth}
215 viewHeight={windowHeight}
216 graphData={forceDirectedGraphRawData}
217 nodeSelectedCallback={(nodeData) => {
218 onNodeSelected(nodeData);
220 nodeButtonSelectedCallback={(selectedMenuId) => {
221 onNodeMenuSelect(selectedMenuId);
223 dataOverlayButtons={dataOverlayButtons}
224 currentlySelectedNodeView={currentNodeButton}/>
228 {currentSelectedMenu}
236 for(var prop in obj) {
237 if(obj.hasOwnProperty(prop)) {
244 getCurrentSelectedMenu(overlayComponent) {
246 if (this.props.graphNodeSelectedMenu === TSUI_GRAPH_MENU_NODE_DETAILS) {
247 if (!this.nodeDetails) {
248 this.nodeDetails = <SelectedNodeDetails/>;
250 return this.nodeDetails;
253 if (this.isNotEmpty(this.props.nodeData) && overlayComponent) {
254 if (Overlays.default.hasOwnProperty(overlayComponent)) {
255 let OverlayComponent = Overlays.default[overlayComponent];
256 secondOverlay = <OverlayComponent nodeDetails={this.props.nodeData}/>;
259 return secondOverlay;
265 export default connect(mapStateToProps, mapActionToProps)(TierSupport);