diff options
Diffstat (limited to 'src/app/MainScreenHeader.jsx')
| -rw-r--r-- | src/app/MainScreenHeader.jsx | 184 |
1 files changed, 128 insertions, 56 deletions
diff --git a/src/app/MainScreenHeader.jsx b/src/app/MainScreenHeader.jsx index af71a97..856a08d 100644 --- a/src/app/MainScreenHeader.jsx +++ b/src/app/MainScreenHeader.jsx @@ -1,25 +1,28 @@ /* - * ============LICENSE_START======================================================= - * org.onap.aai - * ================================================================================ - * Copyright © 2017 AT&T Intellectual Property. All rights reserved. + * ============LICENSE_START=================================================== + * SPARKY (AAI UI service) + * ============================================================================ + * Copyright © 2017 AT&T Intellectual Property. * Copyright © 2017 Amdocs - * ================================================================================ + * All rights reserved. + * ============================================================================ * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * - * http://www.apache.org/licenses/LICENSE-2.0 + * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. - * ============LICENSE_END========================================================= + * ============LICENSE_END===================================================== * - * ECOMP is a trademark and service mark of AT&T Intellectual Property. + * ECOMP and OpenECOMP are trademarks + * and service marks of AT&T Intellectual Property. */ + import React, {Component} from 'react'; import {connect} from 'react-redux'; import FontAwesome from 'react-fontawesome'; @@ -28,7 +31,8 @@ import Modal from 'react-bootstrap/lib/Modal.js'; import GlobalAutoCompleteSearchBar from 'app/globalAutoCompleteSearchBar/GlobalAutoCompleteSearchBar.jsx'; import {postAnalyticsData} from 'app/analytics/AnalyticsActions.js'; import GlobalInlineMessageBar from 'app/GlobalInlineMessageBar/GlobalInlineMessageBar.jsx'; -import {getClearGlobalMessageEvent} from 'app/GlobalInlineMessageBar/GlobalInlineMessageBarActions.js'; +import {getClearGlobalMessageEvent} from 'app/globalInlineMessageBar/GlobalInlineMessageBarActions.js'; +import {externalUrlRequest, externalMessageRequest} from 'app/contextHandler/ContextHandlerActions.js'; import { Route, @@ -42,25 +46,32 @@ import { } from './MainScreenWrapperConstants.js'; import { - showMainMenu + showMainMenu, + clearExtensibleViewData, + setSecondaryTitle } from './MainScreenWrapperActionHelper.js'; import {clearSuggestionsTextField} from 'app/globalAutoCompleteSearchBar/GlobalAutoCompleteSearchBarActions.js'; - -import customViews from 'resources/views/customViews.json'; - +import {changeUrlAddress} from 'utils/Routes.js'; +import extensibleViews from 'resources/views/extensibleViews.json'; +import {clearFilters} from 'generic-components/filterBar/FilterBarUtils.js'; const mapStateToProps = ({mainWrapper}) => { let { - showMenu = false, - toggleButtonActive = false - } = mainWrapper; + showMenu = false, + toggleButtonActive = false, + externalRequestFound = {}, + secondaryTitle = '' + } = mainWrapper; return { showMenu, - toggleButtonActive + toggleButtonActive, + externalRequestFound, + secondaryTitle }; }; + const mapActionsToProps = (dispatch) => { return { onShowMenu: () => dispatch(showMainMenu(true)), @@ -72,6 +83,15 @@ const mapActionsToProps = (dispatch) => { onRouteChange: () => { dispatch(getClearGlobalMessageEvent()); dispatch(clearSuggestionsTextField()); + dispatch(clearExtensibleViewData()); + dispatch(clearFilters()); + dispatch(setSecondaryTitle(undefined)); + }, + onExternalUrlRequest: (urlParamString) => { + dispatch(externalUrlRequest(urlParamString)); + }, + onExternalMessageRecieved: (messageJson) => { + dispatch(externalMessageRequest(messageJson)); } }; }; @@ -79,7 +99,9 @@ const mapActionsToProps = (dispatch) => { class MainScreenHeader extends Component { static propTypes = { showMenu: React.PropTypes.bool, - toggleButtonActive: React.PropTypes.bool + toggleButtonActive: React.PropTypes.bool, + externalRequestFound: React.PropTypes.object, + secondaryTitle: React.PropTypes.string }; navigationLinkAndCurrentPathMatch(location, to) { @@ -101,10 +123,23 @@ class MainScreenHeader extends Component { return false; } } - + isValidExternalURL(url) { + if(decodeURIComponent(url).indexOf('&') > 0 ) { + return true; + } else { + return false; + } + } + componentWillMount() { + if(this.props.match.params.externalUrl !== undefined && + this.isValidExternalURL(this.props.match.params.externalUrl)) { + this.props.onExternalUrlRequest(this.props.match.params.externalUrl); + } + } componentWillReceiveProps(nextProps) { if (this.props.location && - this.props.location.pathname !== nextProps.location.pathname) { + this.props.location.pathname !== + nextProps.location.pathname) { // update analytics this.props.dispatchAnalyticsData(); @@ -113,15 +148,50 @@ class MainScreenHeader extends Component { this.props.onRouteChange(); } } + + if(nextProps.match.params.externalUrl !== undefined && + nextProps.match.params.externalUrl !== this.props.match.params.externalUrl && + this.isValidExternalURL(nextProps.match.params.externalUrl)) { + this.props.onExternalUrlRequest(nextProps.match.params.externalUrl); + } + /* if the externalURL is not valid, we do not add any message as other proper + views will get that messages since the route will be this parameter.*/ + + if(this.props.externalRequestFound !== nextProps.externalRequestFound && + nextProps.externalRequestFound !== undefined && nextProps.externalRequestFound.suggestion !== undefined) { + changeUrlAddress(nextProps.externalRequestFound.suggestion, nextProps.history); + } + } + + receiveMessage(event) { + function isJson(str) { + try { + JSON.parse(str); + } catch (e) { + return false; + } + return true; + } + let messageData = event.data.message; + if(isJson(messageData)) { + this.props.onExternalMessageRecieved(JSON.parse(messageData)); + } + } + componentDidMount() { + window.addEventListener('message', this.receiveMessage, false); + } + componentWillUnmount() { + window.removeEventListener('message', this.receiveMessage); } render() { let { - showMenu, - onShowMenu, - onHideMenu, - toggleButtonActive - } = this.props; + showMenu, + onShowMenu, + onHideMenu, + toggleButtonActive, + secondaryTitle + } = this.props; let menuOptions = []; @@ -138,54 +208,56 @@ class MainScreenHeader extends Component { // add Tier Support view menuOptions.push( - <MenuItem to='/viewInspect' label={MENU_ITEM_TIER_SUPPORT} + <MenuItem key='schemaMenu' to='/schema' label={MENU_ITEM_TIER_SUPPORT} iconClass='button-icon view-inspect-button-icon'/> ); // add VNF view - // 2172a3c25ae56e4995038ffbc1f055692bfc76c0b8ceda1205bc745a9f7a805d is - // the hash for 'VNFs' ... ensures VNF Search screen defaults to the - // aggregate VNF results menuOptions.push( - <MenuItem - to='/vnfSearch/2172a3c25ae56e4995038ffbc1f055692bfc76c0b8ceda1205bc745a9f7a805d' + <MenuItem key='vnfSearchMenu' + to='/vnfSearch' label={MENU_ITEM_VNF_SEARCH} iconClass='button-icon vnf-search-button-icon'/> ); // add all custom view menu options - for (let view in customViews) { + for (let view in extensibleViews) { menuOptions.push( - <MenuItem to={customViews[view]['viewName']} - label={customViews[view]['displayName']} - iconClass='button-icon inventory-button-icon'/> + <MenuItem key={extensibleViews[view]['viewName'] + 'Menu'} to={'/' + extensibleViews[view]['viewName']} + label={extensibleViews[view]['displayName']} + iconClass={'button-icon ' + extensibleViews[view]['iconClass']}/> ); } + let secondaryTitleClass = 'secondary-header'; + if (secondaryTitle === undefined || secondaryTitle === '') { + secondaryTitleClass = secondaryTitleClass + ' hidden'; + } + return ( - <div> - <div className='header'> - <div> - <Button - bsClass={(toggleButtonActive) - ? 'toggle-view-button-active' - : 'toggle-view-button'} - onClick={onShowMenu}> - <FontAwesome name='bars'/> - </Button> - <Modal show={showMenu} onHide={onHideMenu} - dialogClassName='modal-main-menu'> - <Modal.Body> - {menuOptions} - </Modal.Body> - </Modal> - <span className='application-title'>{AAI_TITLE}</span> - <GlobalAutoCompleteSearchBar history={this.props.history}/> - </div> - <GlobalInlineMessageBar /> + <div className='header'> + <div> + <Button + bsClass={(toggleButtonActive) + ? 'toggle-view-button-active' + : 'toggle-view-button'} + onClick={onShowMenu}> + <FontAwesome name='bars'/> + </Button> + <Modal show={showMenu} onHide={onHideMenu} + dialogClassName='modal-main-menu'> + <Modal.Body> + {menuOptions} + </Modal.Body> + </Modal> + <span className='application-title'>{AAI_TITLE}</span> + <GlobalAutoCompleteSearchBar history={this.props.history}/> + </div> + <GlobalInlineMessageBar /> + <div className={secondaryTitleClass}> + <span className='secondary-title'>{secondaryTitle}</span> </div> </div> - ); } } |