Adding filter bar
[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 {setSecondaryTitle} from 'app/MainScreenWrapperActionHelper.js';
31 import ForceDirectedGraph from 'generic-components/graph/ForceDirectedGraph.jsx';
32 import SelectedNodeDetails from 'app/tierSupport/selectedNodeDetails/SelectedNodeDetails.jsx';
33
34
35 import overlaysDetails from 'resources/overlays/overlaysDetails.json';
36 import * as Overlays from 'app/overlays/OverlayImports.js';
37
38 import i18n from 'utils/i18n/i18n';
39 import {
40   onNodeDetailsChange,
41   onNodeMenuChange,
42   splitPaneResize,
43   querySelectedNodeElement,
44   setNotificationText,
45   clearVIData
46 } from 'app/tierSupport/TierSupportActions.js';
47 import {
48   TSUI_TITLE,
49   TSUI_NODE_DETAILS_INITIAL_WIDTH,
50   TSUI_NODE_DETAILS_MIN_WIDTH,
51   TSUI_GRAPH_MENU_NODE_DETAILS,
52 } from './TierSupportConstants.js';
53
54 let mapStateToProps = (
55   {
56     tierSupport:
57       {
58         tierSupportReducer,
59         globalAutoCompleteSearchBar
60       }
61   }) => {
62
63   let {
64         forceDirectedGraphRawData = {
65           graphCounter: -1,
66           nodeDataArray: [],
67           linkDataArray: [],
68           graphMeta: {}
69         }, windowWidth = 500,
70         windowHeight = 500,
71         graphNodeSelectedMenu = TSUI_GRAPH_MENU_NODE_DETAILS,
72         feedbackMsgText = '',
73         feedbackMsgSeverity = '',
74         nodeData = {}
75       } = tierSupportReducer;
76
77   let {
78         performPrepareVisualization = false,
79         selectedSuggestion = {}
80       } = globalAutoCompleteSearchBar;
81   return {
82     forceDirectedGraphRawData,
83     windowWidth,
84     windowHeight,
85     graphNodeSelectedMenu,
86     performPrepareVisualization,
87     selectedSuggestion,
88     feedbackMsgText,
89     feedbackMsgSeverity,
90     nodeData
91   };
92 };
93
94 let mapActionToProps = (dispatch) => {
95   return {
96     onSetViewTitle: (title) => {
97       dispatch(setSecondaryTitle(title));
98     },
99     onNodeSelected: (requestObject) => {
100       dispatch(onNodeDetailsChange(requestObject));
101     },
102     onNodeMenuSelect: (selectedMenu) => {
103       dispatch(onNodeMenuChange(selectedMenu.buttonId));
104     },
105     onSplitPaneResize: (initialLoad) => {
106       dispatch(splitPaneResize(initialLoad));
107     },
108     onNewVIParam: (param) => {
109       dispatch(querySelectedNodeElement(param));
110     },
111     onMessageStateChange: (msgText, msgSeverity) => {
112       dispatch(setNotificationText(msgText, msgSeverity));
113     },
114     onRequestClearData: () => {
115       dispatch(clearVIData());
116     }
117   };
118 };
119
120 class TierSupport extends Component {
121   static propTypes = {
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
129   };
130
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);
136     }
137     if(nextProps.match.params.viParam === undefined && nextProps.match.params.viParam !==
138       this.props.match.params.viParam) {
139       this.props.onRequestClearData();
140     }
141
142     if (nextProps.feedbackMsgText !== this.props.feedbackMsgText) {
143       this.props.onMessageStateChange(nextProps.feedbackMsgText,
144         nextProps.feedbackMsgSeverity);
145     }
146   }
147
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);
152     } else {
153       this.props.onRequestClearData();
154     }
155   }
156
157   componentDidMount() {
158     this.props.onSplitPaneResize(true);
159   }
160
161   componentWillUnmount() {
162     // resetting to default (empty screen)
163     this.props.onRequestClearData();
164   }
165
166   render() {
167
168     const {
169             forceDirectedGraphRawData,
170             onNodeSelected,
171             windowWidth,
172             windowHeight,
173             onSplitPaneResize,
174             onNodeMenuSelect
175           } = this.props;
176
177
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;
186       }
187     });
188
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;
196     }
197     // End temp code
198     let dataOverlayButtons = ['NODE_DETAILS'];
199     if(availableOverlay) {
200       dataOverlayButtons.push(availableOverlay);
201     }
202     let currentSelectedMenu = this.getCurrentSelectedMenu(overlayComponent);
203     return (
204       <div className='tier-support-ui'>
205         <SplitPane
206           split='vertical'
207           enableResizing='true'
208           onDragFinished={ () => {
209             onSplitPaneResize(false);
210           } }
211           defaultSize={TSUI_NODE_DETAILS_INITIAL_WIDTH}
212           minSize={TSUI_NODE_DETAILS_MIN_WIDTH}
213           maxSize={-200}
214           primary='second'>
215           <div>
216             <ForceDirectedGraph
217               viewWidth={windowWidth}
218               viewHeight={windowHeight}
219               graphData={forceDirectedGraphRawData}
220               nodeSelectedCallback={(nodeData) => {
221                 onNodeSelected(nodeData);
222               }}
223               nodeButtonSelectedCallback={(selectedMenuId) => {
224                 onNodeMenuSelect(selectedMenuId);
225               }}
226               dataOverlayButtons={dataOverlayButtons}
227               currentlySelectedNodeView={currentNodeButton}/>
228
229           </div>
230           <div>
231             {currentSelectedMenu}
232           </div>
233         </SplitPane>
234       </div>
235     );
236   }
237
238   isNotEmpty(obj) {
239     for(var prop in obj) {
240       if(obj.hasOwnProperty(prop)) {
241         return true;
242       }
243     }
244     return false;
245   }
246
247   getCurrentSelectedMenu(overlayComponent) {
248     let secondOverlay;
249     if (this.props.graphNodeSelectedMenu === TSUI_GRAPH_MENU_NODE_DETAILS) {
250       if (!this.nodeDetails) {
251         this.nodeDetails = <SelectedNodeDetails/>;
252       }
253       return this.nodeDetails;
254     }
255     else {
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}/>;
260         }
261       }
262       return secondOverlay;
263     }
264   }
265
266 }
267
268 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