2 * ============LICENSE_START=======================================================
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
12 * http://www.apache.org/licenses/LICENSE-2.0
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=========================================================
21 * ECOMP is a trademark and service mark of AT&T Intellectual Property.
23 import React, {Component} from 'react';
24 import {connect} from 'react-redux';
25 import FontAwesome from 'react-fontawesome';
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} from 'app/analytics/AnalyticsActions.js';
30 import GlobalInlineMessageBar from 'app/GlobalInlineMessageBar/GlobalInlineMessageBar.jsx';
31 import {getClearGlobalMessageEvent} from 'app/GlobalInlineMessageBar/GlobalInlineMessageBarActions.js';
36 } from 'react-router-dom';
40 MENU_ITEM_TIER_SUPPORT,
42 } from './MainScreenWrapperConstants.js';
46 } from './MainScreenWrapperActionHelper.js';
48 import {clearSuggestionsTextField} from 'app/globalAutoCompleteSearchBar/GlobalAutoCompleteSearchBarActions.js';
50 import customViews from 'resources/views/customViews.json';
52 const mapStateToProps = ({mainWrapper}) => {
55 toggleButtonActive = false
64 const mapActionsToProps = (dispatch) => {
66 onShowMenu: () => dispatch(showMainMenu(true)),
68 dispatch(showMainMenu(false));
70 dispatchAnalyticsData: () => dispatch(
71 postAnalyticsData(document.documentElement.outerHTML.replace('\s+', ''))),
72 onRouteChange: () => {
73 dispatch(getClearGlobalMessageEvent());
74 dispatch(clearSuggestionsTextField());
79 class MainScreenHeader extends Component {
81 showMenu: React.PropTypes.bool,
82 toggleButtonActive: React.PropTypes.bool
85 navigationLinkAndCurrentPathMatch(location, to) {
86 let linkPathElements = to.split('/');
87 let locationElements = location.pathname.split('/');
89 // the element arrays above will have the route at index 1 ... need to
90 // verify if the routes match
91 return locationElements[1] === linkPathElements[1];
94 hasRouteChanged(currentPath, nextPath) {
95 let currentPathParts = currentPath.split('/');
96 let nextPathParts = nextPath.split('/');
98 if (currentPathParts[1] !== nextPathParts[1]) {
105 componentWillReceiveProps(nextProps) {
106 if (this.props.location &&
107 this.props.location.pathname !== nextProps.location.pathname) {
109 this.props.dispatchAnalyticsData();
111 if (this.hasRouteChanged(this.props.location.pathname,
112 nextProps.location.pathname)) {
113 this.props.onRouteChange();
126 let menuOptions = [];
128 const MenuItem = ({label, iconClass, to}) => (
129 <Route path={to} children={({location}) => (
130 <NavLink to={to} onClick={onHideMenu}>
131 <div className={this.navigationLinkAndCurrentPathMatch(location, to) ? 'main-menu-button-active' : 'main-menu-button'}>
132 <div className={iconClass}/>
133 <div className='button-icon'>{label}</div>
139 // add Tier Support view
141 <MenuItem to='/viewInspect' label={MENU_ITEM_TIER_SUPPORT}
142 iconClass='button-icon view-inspect-button-icon'/>
146 // 2172a3c25ae56e4995038ffbc1f055692bfc76c0b8ceda1205bc745a9f7a805d is
147 // the hash for 'VNFs' ... ensures VNF Search screen defaults to the
148 // aggregate VNF results
151 to='/vnfSearch/2172a3c25ae56e4995038ffbc1f055692bfc76c0b8ceda1205bc745a9f7a805d'
152 label={MENU_ITEM_VNF_SEARCH}
153 iconClass='button-icon vnf-search-button-icon'/>
156 // add all custom view menu options
157 for (let view in customViews) {
159 <MenuItem to={customViews[view]['viewName']}
160 label={customViews[view]['displayName']}
161 iconClass='button-icon inventory-button-icon'/>
167 <div className='header'>
170 bsClass={(toggleButtonActive)
171 ? 'toggle-view-button-active'
172 : 'toggle-view-button'}
173 onClick={onShowMenu}>
174 <FontAwesome name='bars'/>
176 <Modal show={showMenu} onHide={onHideMenu}
177 dialogClassName='modal-main-menu'>
182 <span className='application-title'>{AAI_TITLE}</span>
183 <GlobalAutoCompleteSearchBar history={this.props.history}/>
185 <GlobalInlineMessageBar />
193 export default connect(mapStateToProps, mapActionsToProps)(MainScreenHeader);