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 { PropTypes } from 'prop-types';
23 import {connect} from 'react-redux';
24 import SplitPane from 'react-split-pane';
25 import Spinner from 'utils/SpinnerContainer.jsx';
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';
33 overlayNetworkCallback,
34 } from '../MainScreenWrapperActionHelper.js';
36 import overlaysDetails from 'resources/overlays/overlaysDetails.json';
37 import * as Overlays from 'app/overlays/OverlayImports.js';
39 import i18n from 'utils/i18n/i18n';
44 querySelectedNodeElement,
47 } from 'app/tierSupport/TierSupportActions.js';
50 TSUI_NODE_DETAILS_INITIAL_WIDTH,
51 TSUI_NODE_DETAILS_MIN_WIDTH,
52 TSUI_GRAPH_MENU_NODE_DETAILS,
53 tierSupportActionTypes
54 } from './TierSupportConstants.js';
56 let mapStateToProps = (
61 globalAutoCompleteSearchBar
66 forceDirectedGraphRawData = {
73 graphNodeSelectedMenu = TSUI_GRAPH_MENU_NODE_DETAILS,
75 feedbackMsgSeverity = '',
77 enableBusyFeedback = false
78 } = tierSupportReducer;
81 performPrepareVisualization = false,
82 selectedSuggestion = {}
83 } = globalAutoCompleteSearchBar;
85 forceDirectedGraphRawData,
88 graphNodeSelectedMenu,
89 performPrepareVisualization,
98 let mapActionToProps = (dispatch) => {
100 onSetViewTitle: (title) => {
101 dispatch(setSecondaryTitle(title));
103 onNodeSelected: (requestObject) => {
104 dispatch(onNodeDetailsChange(requestObject));
106 onNodeMenuSelect: (selectedMenu) => {
107 dispatch(onNodeMenuChange(selectedMenu.buttonId));
109 onSplitPaneResize: (initialLoad) => {
110 dispatch(splitPaneResize(initialLoad));
112 onNewVIParam: (param) => {
113 dispatch(querySelectedNodeElement(param));
115 onMessageStateChange: (msgText, msgSeverity) => {
116 dispatch(setNotificationText(msgText, msgSeverity));
118 onRequestClearData: () => {
119 dispatch(clearVIData());
121 onOverlayNetworkCallback: (apiUrl, body, viewName, curViewData, responseEventKey) => {
122 dispatch(overlayNetworkCallback(apiUrl, body, viewName, curViewData, responseEventKey));
127 class TierSupport extends Component {
129 forceDirectedGraphRawData: PropTypes.object,
130 windowWidth: PropTypes.number,
131 windowHeight: PropTypes.number,
132 graphNodeSelectedMenu: PropTypes.string,
133 feedbackMsgText: PropTypes.string,
134 feedbackMsgSeverity: PropTypes.string,
135 nodeData: PropTypes.object,
136 enableBusyFeedback: PropTypes.bool
139 componentWillReceiveProps(nextProps) {
140 if (nextProps.match.params.viParam &&
141 nextProps.match.params.viParam !==
142 this.props.match.params.viParam) {
143 this.props.onNewVIParam(nextProps.match.params.viParam);
145 if(nextProps.match.params.viParam && nextProps.match.params.viParam !==
146 this.props.match.params.viParam) {
147 this.props.onRequestClearData();
150 if (nextProps.feedbackMsgText !== this.props.feedbackMsgText) {
151 this.props.onMessageStateChange(nextProps.feedbackMsgText,
152 nextProps.feedbackMsgSeverity);
156 componentWillMount() {
157 this.props.onSetViewTitle(i18n(TSUI_TITLE));
158 if (this.props.match.params.viParam) {
159 this.props.onNewVIParam(this.props.match.params.viParam);
161 this.props.onRequestClearData();
165 componentDidMount() {
166 this.props.onSplitPaneResize(true);
169 componentWillUnmount() {
170 // resetting to default (empty screen)
171 this.props.onRequestClearData();
177 forceDirectedGraphRawData,
185 let availableOverlay;
186 let overlayComponent;
187 // Currently only ONE overlay can be added to each view.
188 // todo: need to make it array if more than one overlay can be used. No need now.
189 overlaysDetails.forEach(function(overlay){
190 if(overlay.view === 'schema') {
191 availableOverlay = overlay.key;
192 overlayComponent = overlay.componentName;
196 //Temp code for a demo, will be removed as Vis library is updated
197 let currentNodeButton;
198 if(this.props.graphNodeSelectedMenu ===
199 TSUI_GRAPH_MENU_NODE_DETAILS ) {
200 currentNodeButton = 'NODE_DETAILS';
201 } else if(availableOverlay) {
202 currentNodeButton = availableOverlay;
205 let dataOverlayButtons = ['NODE_DETAILS'];
206 if(availableOverlay) {
207 dataOverlayButtons.push(availableOverlay);
209 let currentSelectedMenu = this.getCurrentSelectedMenu(overlayComponent);
211 <div className='tier-support-ui'>
212 <Spinner loading={enableBusyFeedback}>
215 enableResizing='true'
216 onDragFinished={ () => {
217 onSplitPaneResize(false);
219 defaultSize={TSUI_NODE_DETAILS_INITIAL_WIDTH}
220 minSize={TSUI_NODE_DETAILS_MIN_WIDTH}
225 viewWidth={windowWidth}
226 viewHeight={windowHeight}
227 graphData={forceDirectedGraphRawData}
228 nodeSelectedCallback={(nodeData) => {
229 onNodeSelected(nodeData);
231 nodeButtonSelectedCallback={(selectedMenuId) => {
232 onNodeMenuSelect(selectedMenuId);
234 dataOverlayButtons={dataOverlayButtons}
235 currentlySelectedNodeView={currentNodeButton}/>
239 {currentSelectedMenu}
248 for(var prop in obj) {
249 if(obj.hasOwnProperty(prop)) {
256 getCurrentSelectedMenu(overlayComponent) {
258 if (this.props.graphNodeSelectedMenu === TSUI_GRAPH_MENU_NODE_DETAILS) {
259 if (!this.nodeDetails) {
260 this.nodeDetails = <SelectedNodeDetails/>;
262 return this.nodeDetails;
265 if (this.isNotEmpty(this.props.nodeData) && overlayComponent) {
266 if (Overlays.default.hasOwnProperty(overlayComponent)) {
267 let OverlayComponent = Overlays.default[overlayComponent];
268 secondOverlay = <OverlayComponent
269 nodeDetails={this.props.nodeData}
270 networkingCallback={(apiUrl, body, paramName, curViewData) => {
271 this.props.onOverlayNetworkCallback(
276 tierSupportActionTypes.TS_OVERLAY_NETWORK_CALLBACK_RESPONSE_RECEIVED);
281 return secondOverlay;
287 export default connect(mapStateToProps, mapActionToProps)(TierSupport);