Adding option for configurable header
[aai/sparky-fe.git] / src / app / MainScreenHeader.jsx
1 /*
2  * ============LICENSE_START=======================================================
3  * org.onap.aai
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
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 import React, {Component} from 'react';
22 import { PropTypes } from 'prop-types';
23 import {connect} from 'react-redux';
24 import FontAwesome from 'react-fontawesome';
25 import {clearFilters} from 'filter-bar-utils';
26 import Button from 'react-bootstrap/lib/Button.js';
27 import Modal from 'react-bootstrap/lib/Modal.js';
28 import GlobalAutoCompleteSearchBar from 'app/globalAutoCompleteSearchBar/GlobalAutoCompleteSearchBar.jsx';
29 import {postAnalyticsData, getStoreAnalyticsPayload} from 'app/analytics/AnalyticsActions.js';
30 import GlobalInlineMessageBar from 'app/globalInlineMessageBar/GlobalInlineMessageBar.jsx';
31 import {getClearGlobalMessageEvent} from 'app/globalInlineMessageBar/GlobalInlineMessageBarActions.js';
32 import {externalUrlRequest, externalMessageRequest, getSubscriptionPayload} from 'app/contextHandler/ContextHandlerActions.js';
33 import { getConfigurableViewConfigs } from 'app/configurableViews/ConfigurableViewActions.js';
34 import {
35   filterBarActionTypes
36 } from 'utils/GlobalConstants.js';
37
38 import {
39   Route,
40   NavLink
41 } from 'react-router-dom';
42
43 import {
44   AAI_TOP_LEFT_HEADER,
45   AAI_HTML_TITLE,
46   MENU_ITEM_TIER_SUPPORT,
47   MENU_ITEM_VNF_SEARCH
48 } from './MainScreenWrapperConstants.js';
49
50 import {
51   showMainMenu,
52   clearExtensibleViewData,
53   setSecondaryTitle
54 } from './MainScreenWrapperActionHelper.js';
55
56 import {clearSuggestionsTextField} from 'app/globalAutoCompleteSearchBar/GlobalAutoCompleteSearchBarActions.js';
57 import {changeUrlAddress} from 'utils/Routes.js';
58 import extensibleViews from 'resources/views/extensibleViews.json';
59 import {getPersonalizationDetails} from 'app/personlaization/PersonalizationActions.js';
60 import {isEmpty} from 'lodash';
61
62 const mapStateToProps = ({mainWrapper, configurableViews}) => {
63   let {
64     showMenu = false,
65     toggleButtonActive = false,
66     externalRequestFound = {},
67     secondaryTitle = '',
68     subscriptionPayload = {},
69     subscriptionEnabled = false,
70     aaiTopLeftPersonalizedHeader = AAI_TOP_LEFT_HEADER,
71     aaiPersonalizedHtmlDocumentTitle = AAI_HTML_TITLE
72   } = mainWrapper;
73
74   let {
75     configurableViewsConfig
76   } = configurableViews;
77
78   return {
79     showMenu,
80     toggleButtonActive,
81     externalRequestFound,
82     secondaryTitle,
83     subscriptionPayload,
84     subscriptionEnabled,
85     configurableViewsConfig,
86     aaiTopLeftPersonalizedHeader,
87     aaiPersonalizedHtmlDocumentTitle
88   };
89 };
90
91
92 const mapActionsToProps = (dispatch) => {
93   return {
94     onShowMenu: () => dispatch(showMainMenu(true)),
95     onHideMenu: () => {
96       dispatch(showMainMenu(false));
97     },
98     dispatchAnalyticsData: () => dispatch(
99       postAnalyticsData(getStoreAnalyticsPayload())),
100     onRouteChange: () => {
101       dispatch(getClearGlobalMessageEvent());
102       dispatch(clearSuggestionsTextField());
103       dispatch(clearExtensibleViewData());
104       dispatch(clearFilters(filterBarActionTypes.CLEAR_FILTERS));
105       dispatch(setSecondaryTitle(undefined));
106     },
107     onExternalUrlRequest: (urlParamString) => {
108       dispatch(externalUrlRequest(urlParamString));
109     },
110     onExternalMessageRecieved: (messageJson) => {
111       dispatch(externalMessageRequest(messageJson));
112     },
113     onGetSubscriptionPayload: () => {
114       dispatch(getSubscriptionPayload());
115     },
116     onFetchCustomViews: () => {
117       dispatch(getConfigurableViewConfigs());
118     },
119     onGetPersonalizationValues: () => {
120       dispatch(getPersonalizationDetails());
121     }
122   };
123 };
124
125 class MainScreenHeader extends Component {
126   static propTypes = {
127     showMenu: PropTypes.bool,
128     toggleButtonActive: PropTypes.bool,
129     externalRequestFound: PropTypes.object,
130     secondaryTitle: PropTypes.string,
131     subscriptionPayload: PropTypes.object,
132     aaiTopLeftPersonalizedHeader: PropTypes.string,
133     aaiPersonalizedHtmlDocumentTitle: PropTypes.string
134   };
135
136   navigationLinkAndCurrentPathMatch(location, to) {
137     let linkPathElements = to.split('/');
138     let locationElements = location.pathname.split('/');
139
140     // the element arrays above will have the route at index 1 ... need to
141     // verify if the routes match
142     return locationElements[1] === linkPathElements[1];
143   }
144
145   hasRouteChanged(currentPath, nextPath) {
146     let currentPathParts = currentPath.split('/');
147     let nextPathParts = nextPath.split('/');
148
149     if (currentPathParts[1] !== nextPathParts[1]) {
150       return true;
151     } else {
152       return false;
153     }
154   }
155
156   isValidExternalURL(url) {
157     if(decodeURIComponent(url).indexOf('&') > 0 ) {
158       return true;
159     } else {
160       return false;
161     }
162   }
163
164   componentWillMount() {
165     this.props.onGetPersonalizationValues();
166     this.props.onGetSubscriptionPayload();
167     if(this.props.match.params.externalUrl !== undefined &&
168       this.isValidExternalURL(this.props.match.params.externalUrl)) {
169       this.props.onExternalUrlRequest(this.props.match.params.externalUrl);
170     }
171   }
172
173   componentWillReceiveProps(nextProps) {
174     if(!isEmpty(nextProps.aaiPersonalizedHtmlDocumentTitle)) {
175       if(!sessionStorage.getItem('PAGE_TITLE') || sessionStorage.getItem('PAGE_TITLE') !== nextProps.aaiPersonalizedHtmlDocumentTitle) {
176         sessionStorage.setItem('PAGE_TITLE', nextProps.aaiPersonalizedHtmlDocumentTitle);
177       }
178       document.title = nextProps.aaiPersonalizedHtmlDocumentTitle;
179     } else {
180       document.title = AAI_HTML_TITLE;
181     }
182     if (this.props.location &&
183       this.props.location.pathname !==
184       nextProps.location.pathname) {
185       // update analytics
186       this.props.dispatchAnalyticsData();
187
188       if (this.hasRouteChanged(this.props.location.pathname,
189           nextProps.location.pathname)) {
190         this.props.onRouteChange();
191       }
192     }
193
194     if(nextProps.match.params.externalUrl !== undefined &&
195       nextProps.match.params.externalUrl !== this.props.match.params.externalUrl &&
196       this.isValidExternalURL(nextProps.match.params.externalUrl)) {
197       this.props.onExternalUrlRequest(nextProps.match.params.externalUrl);
198     }
199     /* if the externalURL is not valid, we do not add any message as other proper
200      views will get that messages since the route will be this parameter.*/
201
202     if(this.props.externalRequestFound !== nextProps.externalRequestFound &&
203       nextProps.externalRequestFound !== undefined && nextProps.externalRequestFound.suggestion !== undefined) {
204       changeUrlAddress(nextProps.externalRequestFound.suggestion, nextProps.history);
205     }
206
207     if (nextProps.subscriptionEnabled) {
208       if (nextProps.subscriptionPayload !== this.props.subscriptionPayload &&
209         Object.keys(nextProps.subscriptionPayload).length > 0) {
210         var getWindowUrl = function (url) {
211           var split = url.split('/');
212           return split[0] + '//' + split[2];
213         };
214         window.parent.postMessage(
215           JSON.stringify(nextProps.subscriptionPayload),
216           getWindowUrl(document.referrer));
217       }
218     }
219   }
220
221   receiveMessage(event, $this) {
222     function isJson(str) {
223       try {
224         JSON.parse(str);
225       } catch (e) {
226         return false;
227       }
228       return true;
229     }
230     if(isJson(event.data)) {
231       let messageData = JSON.parse(event.data);
232       if(isJson(messageData.message)) {
233         $this.props.onExternalMessageRecieved(messageData.message);
234       }
235     }
236
237   }
238   componentDidMount() {
239     //TODO Move this logic to the component will receive props.
240     //Check if the event lister is available and if the subscription is
241     // enabled before registering for it
242     if(document.referrer) {
243       var $this = this;
244       window.addEventListener('message', function (e) {
245         $this.receiveMessage(e, $this);
246       }, false);
247     }
248
249     // fetch custom views
250     this.props.onFetchCustomViews();
251   }
252
253   componentWillUnmount() {
254     if(this.props.subscriptionEnabled) {
255       var $this = this;
256       window.removeEventListener('message', function (e) {
257         $this.receiveMessage(e, $this);
258       });
259     }
260   }
261
262   render() {
263     let {
264       showMenu,
265       onShowMenu,
266       onHideMenu,
267       toggleButtonActive,
268       secondaryTitle,
269       configurableViewsConfig,
270       aaiTopLeftPersonalizedHeader
271     } = this.props;
272
273     let menuOptions = [];
274
275     const MenuItem = ({label, iconClass, to}) => (
276       <Route path={to} children={({location}) => (
277         <NavLink to={to} onClick={onHideMenu}>
278           <div className={this.navigationLinkAndCurrentPathMatch(location, to) ? 'main-menu-button-active' : 'main-menu-button'}>
279             <div className={iconClass}/>
280             <div className='button-icon'>{label}</div>
281           </div>
282         </NavLink>
283       )}/>
284     );
285
286     const ConfigurableMenuItem = ({label, to}) => (
287       <Route path={to} children={({location}) => (
288         <NavLink to={to} onClick={onHideMenu}>
289           <div className={this.navigationLinkAndCurrentPathMatch(location, to) ?
290             'main-menu-button-active' : 'main-menu-button'}>
291             <div className='button-icon configurable-view-button-icon'/>
292             <div className='button-icon'>{label}</div>
293           </div>
294         </NavLink>
295       )}/>
296     );
297
298     // add Tier Support view
299     menuOptions.push(
300       <MenuItem key='schemaMenu' to='/schema' label={MENU_ITEM_TIER_SUPPORT}
301                 iconClass='button-icon view-inspect-button-icon'/>
302     );
303
304     // add VNF view
305     menuOptions.push(
306       <MenuItem key='vnfSearchMenu'
307                 to='/vnfSearch'
308                 label={MENU_ITEM_VNF_SEARCH}
309                 iconClass='button-icon vnf-search-button-icon'/>
310     );
311
312     // add all custom view menu options
313     for (let view in extensibleViews) {
314       let shouldDisplayIcon = false;
315       if(extensibleViews[view]['onlyRoute'] === undefined){
316         shouldDisplayIcon = true;
317       } else if(extensibleViews[view]['onlyRoute'] === false){
318         shouldDisplayIcon = true;
319       }
320       if(shouldDisplayIcon === true){
321         menuOptions.push(
322           <MenuItem key={extensibleViews[view]['viewName'] + 'Menu'} to={'/' + extensibleViews[view]['viewName']}
323                     label={extensibleViews[view]['displayName']}
324                     iconClass={'button-icon ' + extensibleViews[view]['iconClass']}/>
325         );
326       }
327     }
328
329     if (configurableViewsConfig && configurableViewsConfig.layouts) {
330       for (let configurableView in configurableViewsConfig.layouts) {
331         menuOptions.push(
332           <ConfigurableMenuItem key={configurableViewsConfig.layouts[configurableView]['id'] + 'Menu'} to={'/' + configurableViewsConfig.layouts[configurableView]['id']}
333                                 label={configurableViewsConfig.layouts[configurableView]['title']}/>
334         );
335       }
336     }
337
338     let secondaryTitleClass = 'secondary-header';
339     if (secondaryTitle === undefined || secondaryTitle === '') {
340       secondaryTitleClass = secondaryTitleClass + ' hidden';
341     }
342
343     return (
344       <div className='header'>
345         <div>
346           <Button
347             bsClass={(toggleButtonActive)
348               ? 'toggle-view-button-active'
349               : 'toggle-view-button'}
350             onClick={onShowMenu}>
351             <FontAwesome name='bars'/>
352           </Button>
353           <Modal show={showMenu} onHide={onHideMenu}
354                  dialogClassName='modal-main-menu'>
355             <Modal.Body>
356               {menuOptions}
357             </Modal.Body>
358           </Modal>
359           <span className='application-title'>{aaiTopLeftPersonalizedHeader}</span>
360           <GlobalAutoCompleteSearchBar history={this.props.history}/>
361         </div>
362         <GlobalInlineMessageBar />
363         <div className={secondaryTitleClass}>
364           <span className='secondary-title'>{secondaryTitle}</span>
365         </div>
366       </div>
367     );
368   }
369 }
370
371 export default connect(mapStateToProps, mapActionsToProps)(MainScreenHeader);

© 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