2 * ============LICENSE_START=======================================================
4 * ================================================================================
5 * Copyright © 2017-2018 AT&T Intellectual Property. All rights reserved.
6 * Copyright © 2017-2018 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 import React, {Component} from 'react';
22 import {connect} from 'react-redux';
23 import SplitPane from 'react-split-pane';
24 import Spinner from 'utils/SpinnerContainer.jsx';
26 import {setSecondaryTitle} from 'app/MainScreenWrapperActionHelper.js';
27 import ForceDirectedGraph from 'generic-components/graph/ForceDirectedGraph.jsx';
28 import SelectedNodeDetails from 'app/tierSupport/selectedNodeDetails/SelectedNodeDetails.jsx';
32 overlayNetworkCallback,
33 } from '../MainScreenWrapperActionHelper.js';
35 import overlaysDetails from 'resources/overlays/overlaysDetails.json';
36 import * as Overlays from 'app/overlays/OverlayImports.js';
38 import i18n from 'utils/i18n/i18n';
43 querySelectedNodeElement,
46 } from 'app/tierSupport/TierSupportActions.js';
49 TSUI_NODE_DETAILS_INITIAL_WIDTH,
50 TSUI_NODE_DETAILS_MIN_WIDTH,
51 TSUI_GRAPH_MENU_NODE_DETAILS,
52 tierSupportActionTypes
53 } from './TierSupportConstants.js';
55 let mapStateToProps = (
60 globalAutoCompleteSearchBar
65 forceDirectedGraphRawData = {
72 graphNodeSelectedMenu = TSUI_GRAPH_MENU_NODE_DETAILS,
74 feedbackMsgSeverity = '',
76 enableBusyFeedback = false
77 } = tierSupportReducer;
80 performPrepareVisualization = false,
81 selectedSuggestion = {}
82 } = globalAutoCompleteSearchBar;
84 forceDirectedGraphRawData,
87 graphNodeSelectedMenu,
88 performPrepareVisualization,
97 let mapActionToProps = (dispatch) => {
99 onSetViewTitle: (title) => {
100 dispatch(setSecondaryTitle(title));
102 onNodeSelected: (requestObject) => {
103 dispatch(onNodeDetailsChange(requestObject));
105 onNodeMenuSelect: (selectedMenu) => {
106 dispatch(onNodeMenuChange(selectedMenu.buttonId));
108 onSplitPaneResize: (initialLoad) => {
109 dispatch(splitPaneResize(initialLoad));
111 onNewVIParam: (param) => {
112 dispatch(querySelectedNodeElement(param));
114 onMessageStateChange: (msgText, msgSeverity) => {
115 dispatch(setNotificationText(msgText, msgSeverity));
117 onRequestClearData: () => {
118 dispatch(clearVIData());
120 onOverlayNetworkCallback: (apiUrl, body, viewName, curViewData, responseEventKey) => {
121 dispatch(overlayNetworkCallback(apiUrl, body, viewName, curViewData, responseEventKey));
126 class TierSupport extends Component {
128 forceDirectedGraphRawData: React.PropTypes.object,
129 windowWidth: React.PropTypes.number,
130 windowHeight: React.PropTypes.number,
131 graphNodeSelectedMenu: React.PropTypes.string,
132 feedbackMsgText: React.PropTypes.string,
133 feedbackMsgSeverity: React.PropTypes.string,
134 nodeData: React.PropTypes.object,
135 enableBusyFeedback: React.PropTypes.bool
138 componentWillReceiveProps(nextProps) {
139 if (nextProps.match.params.viParam &&
140 nextProps.match.params.viParam !==
141 this.props.match.params.viParam) {
142 this.props.onNewVIParam(nextProps.match.params.viParam);
144 if(nextProps.match.params.viParam && nextProps.match.params.viParam !==
145 this.props.match.params.viParam) {
146 this.props.onRequestClearData();
149 if (nextProps.feedbackMsgText !== this.props.feedbackMsgText) {
150 this.props.onMessageStateChange(nextProps.feedbackMsgText,
151 nextProps.feedbackMsgSeverity);
155 componentWillMount() {
156 this.props.onSetViewTitle(i18n(TSUI_TITLE));
157 if (this.props.match.params.viParam) {
158 this.props.onNewVIParam(this.props.match.params.viParam);
160 this.props.onRequestClearData();
164 componentDidMount() {
165 this.props.onSplitPaneResize(true);
168 componentWillUnmount() {
169 // resetting to default (empty screen)
170 this.props.onRequestClearData();
176 forceDirectedGraphRawData,
184 let availableOverlay;
185 let overlayComponent;
186 // Currently only ONE overlay can be added to each view.
187 // todo: need to make it array if more than one overlay can be used. No need now.
188 overlaysDetails.forEach(function(overlay){
189 if(overlay.view === 'schema') {
190 availableOverlay = overlay.key;
191 overlayComponent = overlay.componentName;
195 //Temp code for a demo, will be removed as Vis library is updated
196 let currentNodeButton;
197 if(this.props.graphNodeSelectedMenu ===
198 TSUI_GRAPH_MENU_NODE_DETAILS ) {
199 currentNodeButton = 'NODE_DETAILS';
200 } else if(availableOverlay) {
201 currentNodeButton = availableOverlay;
204 let dataOverlayButtons = ['NODE_DETAILS'];
205 if(availableOverlay) {
206 dataOverlayButtons.push(availableOverlay);
208 let currentSelectedMenu = this.getCurrentSelectedMenu(overlayComponent);
210 <div className='tier-support-ui'>
211 <Spinner loading={enableBusyFeedback}>
214 enableResizing='true'
215 onDragFinished={ () => {
216 onSplitPaneResize(false);
218 defaultSize={TSUI_NODE_DETAILS_INITIAL_WIDTH}
219 minSize={TSUI_NODE_DETAILS_MIN_WIDTH}
224 viewWidth={windowWidth}
225 viewHeight={windowHeight}
226 graphData={forceDirectedGraphRawData}
227 nodeSelectedCallback={(nodeData) => {
228 onNodeSelected(nodeData);
230 nodeButtonSelectedCallback={(selectedMenuId) => {
231 onNodeMenuSelect(selectedMenuId);
233 dataOverlayButtons={dataOverlayButtons}
234 currentlySelectedNodeView={currentNodeButton}/>
238 {currentSelectedMenu}
247 for(var prop in obj) {
248 if(obj.hasOwnProperty(prop)) {
255 getCurrentSelectedMenu(overlayComponent) {
257 if (this.props.graphNodeSelectedMenu === TSUI_GRAPH_MENU_NODE_DETAILS) {
258 if (!this.nodeDetails) {
259 this.nodeDetails = <SelectedNodeDetails/>;
261 return this.nodeDetails;
264 if (this.isNotEmpty(this.props.nodeData) && overlayComponent) {
265 if (Overlays.default.hasOwnProperty(overlayComponent)) {
266 let OverlayComponent = Overlays.default[overlayComponent];
267 secondOverlay = <OverlayComponent
268 nodeDetails={this.props.nodeData}
269 networkingCallback={(apiUrl, body, paramName, curViewData) => {
270 this.props.onOverlayNetworkCallback(
275 tierSupportActionTypes.TS_OVERLAY_NETWORK_CALLBACK_RESPONSE_RECEIVED);
280 return secondOverlay;
286 export default connect(mapStateToProps, mapActionToProps)(TierSupport);