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