[AAI-92 Amsterdam] Update license
[aai/sparky-fe.git] / src / app / tierSupport / TierSupport.jsx
1 /*
2  * ============LICENSE_START=======================================================
3  * org.onap.aai
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
11  *
12  *       http://www.apache.org/licenses/LICENSE-2.0
13  *
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=========================================================
20  *
21  * ECOMP is a trademark and service mark of AT&T Intellectual Property.
22  */
23 import React, {Component} from 'react';
24 import {connect} from 'react-redux';
25 import SplitPane from 'react-split-pane';
26
27 import ForceDirectedGraph from 'generic-components/graph/ForceDirectedGraph.jsx';
28 import SelectedNodeDetails from 'app/tierSupport/selectedNodeDetails/SelectedNodeDetails.jsx';
29 import i18n from 'utils/i18n/i18n';
30 import {
31   onNodeDetailsChange,
32   onNodeMenuChange,
33   splitPaneResize,
34   querySelectedNodeElement,
35   setNotificationText,
36   clearVIData
37 } from 'app/tierSupport/TierSupportActions.js';
38 import {
39   TSUI_TITLE,
40   TSUI_NODE_DETAILS_INITIAL_WIDTH,
41   TSUI_NODE_DETAILS_MIN_WIDTH,
42   TSUI_GRAPH_MENU_NODE_DETAILS
43 } from './TierSupportConstants.js';
44
45 let mapStateToProps = (
46   {
47     tierSupport:
48       {
49         tierSupportReducer,
50         globalAutoCompleteSearchBar
51       }
52   }) => {
53
54   let {
55         forceDirectedGraphRawData = {
56           graphCounter: -1,
57           nodeDataArray: [],
58           linkDataArray: [],
59           graphMeta: {}
60         }, windowWidth = 500,
61         windowHeight = 500,
62         graphNodeSelectedMenu = TSUI_GRAPH_MENU_NODE_DETAILS,
63         feedbackMsgText = '',
64         feedbackMsgSeverity = ''
65       } = tierSupportReducer;
66
67   let {
68         performPrepareVisualization = false,
69         selectedSuggestion = {}
70       } = globalAutoCompleteSearchBar;
71   return {
72     forceDirectedGraphRawData,
73     windowWidth,
74     windowHeight,
75     graphNodeSelectedMenu,
76     performPrepareVisualization,
77     selectedSuggestion,
78     feedbackMsgText,
79     feedbackMsgSeverity
80   };
81 };
82
83 let mapActionToProps = (dispatch) => {
84   return {
85     onNodeSelected: (requestObject) => {
86       dispatch(onNodeDetailsChange(requestObject));
87     },
88     onNodeMenuSelect: (selectedMenu) => {
89       dispatch(onNodeMenuChange(selectedMenu.buttonId));
90     },
91     onSplitPaneResize: (initialLoad) => {
92       dispatch(splitPaneResize(initialLoad));
93     },
94     onNewVIParam: (param) => {
95       dispatch(querySelectedNodeElement(param));
96     },
97     onMessageStateChange: (msgText, msgSeverity) => {
98       dispatch(setNotificationText(msgText, msgSeverity));
99     },
100     onRequestClearData: () => {
101       dispatch(clearVIData());
102     }
103   };
104 };
105
106 class TierSupport extends Component {
107   static propTypes = {
108     forceDirectedGraphRawData: React.PropTypes.object,
109     windowWidth: React.PropTypes.number,
110     windowHeight: React.PropTypes.number,
111     graphNodeSelectedMenu: React.PropTypes.string,
112     feedbackMsgText: React.PropTypes.string,
113     feedbackMsgSeverity: React.PropTypes.string
114   };
115
116   componentWillReceiveProps(nextProps) {
117     if (nextProps.match.params.viParam &&
118       nextProps.match.params.viParam !==
119       this.props.match.params.viParam) {
120       this.props.onNewVIParam(nextProps.match.params.viParam);
121     }
122
123     if (nextProps.feedbackMsgText !== this.props.feedbackMsgText) {
124       this.props.onMessageStateChange(nextProps.feedbackMsgText,
125         nextProps.feedbackMsgSeverity);
126     }
127   }
128
129   componentWillMount() {
130     if (this.props.match.params.viParam) {
131       this.props.onNewVIParam(this.props.match.params.viParam);
132     } else {
133       this.props.onRequestClearData();
134     }
135   }
136
137   componentDidMount() {
138     this.props.onSplitPaneResize(true);
139   }
140
141   componentWillUnmount() {
142     // resetting to default (empty screen)
143     this.props.onRequestClearData();
144   }
145
146   render() {
147     const {
148             forceDirectedGraphRawData,
149             onNodeSelected,
150             windowWidth,
151             windowHeight,
152             onSplitPaneResize,
153             onNodeMenuSelect
154           } = this.props;
155     let currentSelectedMenu = this.getCurrentSelectedMenu();
156
157     //Temp code for a demo, will be removed as Vis library is updated
158     let currentNodeButton = 'NODE_DETAILS';
159     // End temp code
160
161     return (
162       <div className='tier-support-ui'>
163         <div className='secondary-header'>
164           <span className='secondary-title'>{i18n(TSUI_TITLE)}</span>
165         </div>
166         <SplitPane
167           split='vertical'
168           enableResizing='true'
169           onDragFinished={ () => {
170             onSplitPaneResize(false);
171           } }
172           defaultSize={TSUI_NODE_DETAILS_INITIAL_WIDTH}
173           minSize={TSUI_NODE_DETAILS_MIN_WIDTH}
174           maxSize={-200}
175           primary='second'>
176           <div>
177             <ForceDirectedGraph
178               viewWidth={windowWidth}
179               viewHeight={windowHeight}
180               graphData={forceDirectedGraphRawData}
181               nodeSelectedCallback={(nodeData) => {
182                 onNodeSelected(nodeData);
183               }}
184               nodeButtonSelectedCallback={(selectedMenuId) => {
185                 onNodeMenuSelect(selectedMenuId);
186               }}
187               currentlySelectedNodeView={currentNodeButton}/>
188           </div>
189           <div>
190             {currentSelectedMenu}
191           </div>
192         </SplitPane>
193       </div>
194     );
195   }
196
197   getCurrentSelectedMenu() {
198     switch (this.props.graphNodeSelectedMenu) {
199       case TSUI_GRAPH_MENU_NODE_DETAILS:
200         if (!this.nodeDetails) {
201           this.nodeDetails = <SelectedNodeDetails/>;
202         }
203         return this.nodeDetails;
204     }
205   }
206 }
207
208 export default connect(mapStateToProps, mapActionToProps)(TierSupport);

© 2017 ONAP. Copyright © The Linux Foundation ®. All Rights Reserved.
The Linux Foundation has registered trademarks and uses trademarks.
For a list of trademarks of The Linux Foundation, please see our Trademark Usage page.
Linux is a registered trademark of Linus Torvalds.
Privacy Policy and Terms of Use