* ============LICENSE_START=======================================================
* org.onap.aai
* ================================================================================
- * Copyright © 2017 AT&T Intellectual Property. All rights reserved.
- * Copyright © 2017 Amdocs
+ * Copyright © 2017-2018 AT&T Intellectual Property. All rights reserved.
+ * Copyright © 2017-2018 Amdocs
* ================================================================================
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* See the License for the specific language governing permissions and
* limitations under the License.
* ============LICENSE_END=========================================================
- *
- * ECOMP is a trademark and service mark of AT&T Intellectual Property.
*/
import React, {Component} from 'react';
+import { PropTypes } from 'prop-types';
import {connect} from 'react-redux';
import FontAwesome from 'react-fontawesome';
import {clearFilters} from 'filter-bar-utils';
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 GlobalInlineMessageBar from 'app/globalInlineMessageBar/GlobalInlineMessageBar.jsx';
import {getClearGlobalMessageEvent} from 'app/globalInlineMessageBar/GlobalInlineMessageBarActions.js';
-import {externalUrlRequest, externalMessageRequest} from 'app/contextHandler/ContextHandlerActions.js';
-
+import {externalUrlRequest, externalMessageRequest, getSubscriptionPayload} from 'app/contextHandler/ContextHandlerActions.js';
+import { getConfigurableViewConfigs } from 'app/configurableViews/ConfigurableViewActions.js';
import {
filterBarActionTypes
} from 'utils/GlobalConstants.js';
import extensibleViews from 'resources/views/extensibleViews.json';
-const mapStateToProps = ({mainWrapper}) => {
+const mapStateToProps = ({mainWrapper, configurableViews}) => {
let {
showMenu = false,
toggleButtonActive = false,
externalRequestFound = {},
- secondaryTitle = ''
+ secondaryTitle = '',
+ subscriptionPayload = {},
+ subscriptionEnabled = false
} = mainWrapper;
+ let {
+ configurableViewsConfig
+ } = configurableViews;
+
return {
showMenu,
toggleButtonActive,
externalRequestFound,
- secondaryTitle
+ secondaryTitle,
+ subscriptionPayload,
+ subscriptionEnabled,
+ configurableViewsConfig
};
};
},
onExternalMessageRecieved: (messageJson) => {
dispatch(externalMessageRequest(messageJson));
+ },
+ onGetSubscriptionPayload: () => {
+ dispatch(getSubscriptionPayload());
+ },
+ onFetchCustomViews: () => {
+ dispatch(getConfigurableViewConfigs());
}
};
};
class MainScreenHeader extends Component {
static propTypes = {
- showMenu: React.PropTypes.bool,
- toggleButtonActive: React.PropTypes.bool,
- externalRequestFound: React.PropTypes.object,
- secondaryTitle: React.PropTypes.string
+ showMenu: PropTypes.bool,
+ toggleButtonActive: PropTypes.bool,
+ externalRequestFound: PropTypes.object,
+ secondaryTitle: PropTypes.string,
+ subscriptionPayload: PropTypes.object
};
navigationLinkAndCurrentPathMatch(location, to) {
return false;
}
}
+
isValidExternalURL(url) {
if(decodeURIComponent(url).indexOf('&') > 0 ) {
return true;
return false;
}
}
+
componentWillMount() {
+ this.props.onGetSubscriptionPayload();
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 !==
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.*/
+ 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);
}
+
+ if (nextProps.subscriptionEnabled) {
+ if (nextProps.subscriptionPayload !== this.props.subscriptionPayload &&
+ Object.keys(nextProps.subscriptionPayload).length > 0) {
+ var getWindowUrl = function (url) {
+ var split = url.split('/');
+ return split[0] + '//' + split[2];
+ };
+ window.parent.postMessage(
+ JSON.stringify(nextProps.subscriptionPayload),
+ getWindowUrl(document.referrer));
+ }
+ }
}
- receiveMessage(event) {
+ receiveMessage(event, $this) {
function isJson(str) {
try {
JSON.parse(str);
}
return true;
}
- let messageData = event.data.message;
- if(isJson(messageData)) {
- this.props.onExternalMessageRecieved(JSON.parse(messageData));
+ if(isJson(event.data)) {
+ let messageData = JSON.parse(event.data);
+ if(isJson(messageData.message)) {
+ $this.props.onExternalMessageRecieved(messageData.message);
+ }
}
+
}
componentDidMount() {
- window.addEventListener('message', this.receiveMessage, false);
+ //TODO Move this logic to the component will receive props.
+ //Check if the event lister is available and if the subscription is
+ // enabled before registering for it
+ if(document.referrer) {
+ var $this = this;
+ window.addEventListener('message', function (e) {
+ $this.receiveMessage(e, $this);
+ }, false);
+ }
+
+ // fetch custom views
+ this.props.onFetchCustomViews();
}
+
componentWillUnmount() {
- window.removeEventListener('message', this.receiveMessage);
+ if(this.props.subscriptionEnabled) {
+ var $this = this;
+ window.removeEventListener('message', function (e) {
+ $this.receiveMessage(e, $this);
+ });
+ }
}
render() {
onShowMenu,
onHideMenu,
toggleButtonActive,
- secondaryTitle
+ secondaryTitle,
+ configurableViewsConfig
} = this.props;
let menuOptions = [];
)}/>
);
+ const ConfigurableMenuItem = ({label, to}) => (
+ <Route path={to} children={({location}) => (
+ <NavLink to={to} onClick={onHideMenu}>
+ <div className={this.navigationLinkAndCurrentPathMatch(location, to) ?
+ 'main-menu-button-active' : 'main-menu-button'}>
+ <div className='button-icon configurable-view-button-icon'/>
+ <div className='button-icon'>{label}</div>
+ </div>
+ </NavLink>
+ )}/>
+ );
+
// add Tier Support view
menuOptions.push(
<MenuItem key='schemaMenu' to='/schema' label={MENU_ITEM_TIER_SUPPORT}
// add VNF view
menuOptions.push(
<MenuItem key='vnfSearchMenu'
- to='/vnfSearch'
- label={MENU_ITEM_VNF_SEARCH}
- iconClass='button-icon vnf-search-button-icon'/>
+ to='/vnfSearch'
+ label={MENU_ITEM_VNF_SEARCH}
+ iconClass='button-icon vnf-search-button-icon'/>
);
// add all custom view menu options
for (let view in extensibleViews) {
- menuOptions.push(
- <MenuItem key={extensibleViews[view]['viewName'] + 'Menu'} to={'/' + extensibleViews[view]['viewName']}
- label={extensibleViews[view]['displayName']}
- iconClass={'button-icon ' + extensibleViews[view]['iconClass']}/>
- );
+ let shouldDisplayIcon = false;
+ if(extensibleViews[view]['onlyRoute'] === undefined){
+ shouldDisplayIcon = true;
+ } else if(extensibleViews[view]['onlyRoute'] === false){
+ shouldDisplayIcon = true;
+ }
+ if(shouldDisplayIcon === true){
+ menuOptions.push(
+ <MenuItem key={extensibleViews[view]['viewName'] + 'Menu'} to={'/' + extensibleViews[view]['viewName']}
+ label={extensibleViews[view]['displayName']}
+ iconClass={'button-icon ' + extensibleViews[view]['iconClass']}/>
+ );
+ }
+ }
+
+ if (configurableViewsConfig && configurableViewsConfig.layouts) {
+ for (let configurableView in configurableViewsConfig.layouts) {
+ menuOptions.push(
+ <ConfigurableMenuItem key={configurableViewsConfig.layouts[configurableView]['id'] + 'Menu'} to={'/' + configurableViewsConfig.layouts[configurableView]['id']}
+ label={configurableViewsConfig.layouts[configurableView]['title']}/>
+ );
+ }
}
let secondaryTitleClass = 'secondary-header';
<div>
<Button
bsClass={(toggleButtonActive)
- ? 'toggle-view-button-active'
- : 'toggle-view-button'}
+ ? 'toggle-view-button-active'
+ : 'toggle-view-button'}
onClick={onShowMenu}>
<FontAwesome name='bars'/>
</Button>
Code Review / aai / sparky-fe.git / blobdiff