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 {setSecondaryTitle} from 'app/MainScreenWrapperActionHelper.js';
31 import ForceDirectedGraph from 'generic-components/graph/ForceDirectedGraph.jsx';
32 import SelectedNodeDetails from 'app/tierSupport/selectedNodeDetails/SelectedNodeDetails.jsx';
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 } from './TierSupportConstants.js';
54 let mapStateToProps = (
59 globalAutoCompleteSearchBar
64 forceDirectedGraphRawData = {
71 graphNodeSelectedMenu = TSUI_GRAPH_MENU_NODE_DETAILS,
73 feedbackMsgSeverity = '',
75 } = tierSupportReducer;
78 performPrepareVisualization = false,
79 selectedSuggestion = {}
80 } = globalAutoCompleteSearchBar;
82 forceDirectedGraphRawData,
85 graphNodeSelectedMenu,
86 performPrepareVisualization,
94 let mapActionToProps = (dispatch) => {
96 onSetViewTitle: (title) => {
97 dispatch(setSecondaryTitle(title));
99 onNodeSelected: (requestObject) => {
100 dispatch(onNodeDetailsChange(requestObject));
102 onNodeMenuSelect: (selectedMenu) => {
103 dispatch(onNodeMenuChange(selectedMenu.buttonId));
105 onSplitPaneResize: (initialLoad) => {
106 dispatch(splitPaneResize(initialLoad));
108 onNewVIParam: (param) => {
109 dispatch(querySelectedNodeElement(param));
111 onMessageStateChange: (msgText, msgSeverity) => {
112 dispatch(setNotificationText(msgText, msgSeverity));
114 onRequestClearData: () => {
115 dispatch(clearVIData());
120 class TierSupport extends Component {
122 forceDirectedGraphRawData: React.PropTypes.object,
123 windowWidth: React.PropTypes.number,
124 windowHeight: React.PropTypes.number,
125 graphNodeSelectedMenu: React.PropTypes.string,
126 feedbackMsgText: React.PropTypes.string,
127 feedbackMsgSeverity: React.PropTypes.string,
128 nodeData: React.PropTypes.object
131 componentWillReceiveProps(nextProps) {
132 if (nextProps.match.params.viParam &&
133 nextProps.match.params.viParam !==
134 this.props.match.params.viParam) {
135 this.props.onNewVIParam(nextProps.match.params.viParam);
137 if(nextProps.match.params.viParam === undefined && nextProps.match.params.viParam !==
138 this.props.match.params.viParam) {
139 this.props.onRequestClearData();
142 if (nextProps.feedbackMsgText !== this.props.feedbackMsgText) {
143 this.props.onMessageStateChange(nextProps.feedbackMsgText,
144 nextProps.feedbackMsgSeverity);
148 componentWillMount() {
149 this.props.onSetViewTitle(i18n(TSUI_TITLE));
150 if (this.props.match.params.viParam) {
151 this.props.onNewVIParam(this.props.match.params.viParam);
153 this.props.onRequestClearData();
157 componentDidMount() {
158 this.props.onSplitPaneResize(true);
161 componentWillUnmount() {
162 // resetting to default (empty screen)
163 this.props.onRequestClearData();
169 forceDirectedGraphRawData,
178 let availableOverlay;
179 let overlayComponent;
180 // Currently only ONE overlay can be added to each view.
181 // todo: need to make it array if more than one overlay can be used. No need now.
182 overlaysDetails.forEach(function(overlay){
183 if(overlay.view === 'schema') {
184 availableOverlay = overlay.key;
185 overlayComponent = overlay.componentName;
189 //Temp code for a demo, will be removed as Vis library is updated
190 let currentNodeButton;
191 if(this.props.graphNodeSelectedMenu ===
192 TSUI_GRAPH_MENU_NODE_DETAILS ) {
193 currentNodeButton = 'NODE_DETAILS';
194 } else if(availableOverlay) {
195 currentNodeButton = availableOverlay;
198 let dataOverlayButtons = ['NODE_DETAILS'];
199 if(availableOverlay) {
200 dataOverlayButtons.push(availableOverlay);
202 let currentSelectedMenu = this.getCurrentSelectedMenu(overlayComponent);
204 <div className='tier-support-ui'>
207 enableResizing='true'
208 onDragFinished={ () => {
209 onSplitPaneResize(false);
211 defaultSize={TSUI_NODE_DETAILS_INITIAL_WIDTH}
212 minSize={TSUI_NODE_DETAILS_MIN_WIDTH}
217 viewWidth={windowWidth}
218 viewHeight={windowHeight}
219 graphData={forceDirectedGraphRawData}
220 nodeSelectedCallback={(nodeData) => {
221 onNodeSelected(nodeData);
223 nodeButtonSelectedCallback={(selectedMenuId) => {
224 onNodeMenuSelect(selectedMenuId);
226 dataOverlayButtons={dataOverlayButtons}
227 currentlySelectedNodeView={currentNodeButton}/>
231 {currentSelectedMenu}
239 for(var prop in obj) {
240 if(obj.hasOwnProperty(prop)) {
247 getCurrentSelectedMenu(overlayComponent) {
249 if (this.props.graphNodeSelectedMenu === TSUI_GRAPH_MENU_NODE_DETAILS) {
250 if (!this.nodeDetails) {
251 this.nodeDetails = <SelectedNodeDetails/>;
253 return this.nodeDetails;
256 if (this.isNotEmpty(this.props.nodeData) && overlayComponent) {
257 if (Overlays.default.hasOwnProperty(overlayComponent)) {
258 let OverlayComponent = Overlays.default[overlayComponent];
259 secondOverlay = <OverlayComponent nodeDetails={this.props.nodeData}/>;
262 return secondOverlay;
268 export default connect(mapStateToProps, mapActionToProps)(TierSupport);