X-Git-Url: https://gerrit.onap.org/r/gitweb?p=aai%2Fsparky-fe.git;a=blobdiff_plain;f=src%2Fapp%2FMainScreenHeader.jsx;h=7808d19430e7f2fc838186463c5382308fe091b7;hp=a3225e7a6080e420160ef9b9501e221518f2d1d7;hb=eec9820acfb269178e8f8c8bdc2ecfb2d13ad5f4;hpb=b68cd9cee606372747f6fee4a864de994b0518a7

diff --git a/src/app/MainScreenHeader.jsx b/src/app/MainScreenHeader.jsx
index a3225e7..7808d19 100644
--- a/src/app/MainScreenHeader.jsx
+++ b/src/app/MainScreenHeader.jsx
@@ -19,16 +19,18 @@
  * ============LICENSE_END=========================================================
  */
 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 Button from 'react-bootstrap/lib/Button.js';
 import Modal from 'react-bootstrap/lib/Modal.js';
 import GlobalAutoCompleteSearchBar from 'app/globalAutoCompleteSearchBar/GlobalAutoCompleteSearchBar.jsx';
-import {postAnalyticsData} from 'app/analytics/AnalyticsActions.js';
+import {postAnalyticsData, getStoreAnalyticsPayload} from 'app/analytics/AnalyticsActions.js';
 import GlobalInlineMessageBar from 'app/globalInlineMessageBar/GlobalInlineMessageBar.jsx';
 import {getClearGlobalMessageEvent} from 'app/globalInlineMessageBar/GlobalInlineMessageBarActions.js';
 import {externalUrlRequest, externalMessageRequest, getSubscriptionPayload} from 'app/contextHandler/ContextHandlerActions.js';
+import { getConfigurableViewConfigs } from 'app/configurableViews/ConfigurableViewActions.js';
 import {
   filterBarActionTypes
 } from 'utils/GlobalConstants.js';
@@ -39,7 +41,8 @@ import {
 } from 'react-router-dom';
 
 import {
-  AAI_TITLE,
+  AAI_TOP_LEFT_HEADER,
+  AAI_HTML_TITLE,
   MENU_ITEM_TIER_SUPPORT,
   MENU_ITEM_VNF_SEARCH
 } from './MainScreenWrapperConstants.js';
@@ -53,25 +56,35 @@ import {
 import {clearSuggestionsTextField} from 'app/globalAutoCompleteSearchBar/GlobalAutoCompleteSearchBarActions.js';
 import {changeUrlAddress} from 'utils/Routes.js';
 import extensibleViews from 'resources/views/extensibleViews.json';
+import {getPersonalizationDetails} from 'app/personlaization/PersonalizationActions.js';
+import {isEmpty} from 'lodash';
 
-
-const mapStateToProps = ({mainWrapper}) => {
+const mapStateToProps = ({mainWrapper, configurableViews}) => {
   let {
     showMenu = false,
     toggleButtonActive = false,
     externalRequestFound = {},
     secondaryTitle = '',
     subscriptionPayload = {},
-    subscriptionEnabled = false
+    subscriptionEnabled = false,
+    aaiTopLeftPersonalizedHeader = AAI_TOP_LEFT_HEADER,
+    aaiPersonalizedHtmlDocumentTitle = AAI_HTML_TITLE
   } = mainWrapper;
 
+  let {
+    configurableViewsConfig
+  } = configurableViews;
+
   return {
     showMenu,
     toggleButtonActive,
     externalRequestFound,
     secondaryTitle,
     subscriptionPayload,
-    subscriptionEnabled
+    subscriptionEnabled,
+    configurableViewsConfig,
+    aaiTopLeftPersonalizedHeader,
+    aaiPersonalizedHtmlDocumentTitle
   };
 };
 
@@ -83,7 +96,7 @@ const mapActionsToProps = (dispatch) => {
       dispatch(showMainMenu(false));
     },
     dispatchAnalyticsData: () => dispatch(
-      postAnalyticsData(document.documentElement.outerHTML.replace('\s+', ''))),
+      postAnalyticsData(getStoreAnalyticsPayload())),
     onRouteChange: () => {
       dispatch(getClearGlobalMessageEvent());
       dispatch(clearSuggestionsTextField());
@@ -99,17 +112,25 @@ const mapActionsToProps = (dispatch) => {
     },
     onGetSubscriptionPayload: () => {
       dispatch(getSubscriptionPayload());
+    },
+    onFetchCustomViews: () => {
+      dispatch(getConfigurableViewConfigs());
+    },
+    onGetPersonalizationValues: () => {
+      dispatch(getPersonalizationDetails());
     }
   };
 };
 
 class MainScreenHeader extends Component {
   static propTypes = {
-    showMenu: React.PropTypes.bool,
-    toggleButtonActive: React.PropTypes.bool,
-    externalRequestFound: React.PropTypes.object,
-    secondaryTitle: React.PropTypes.string,
-    subscriptionPayload: React.PropTypes.object
+    showMenu: PropTypes.bool,
+    toggleButtonActive: PropTypes.bool,
+    externalRequestFound: PropTypes.object,
+    secondaryTitle: PropTypes.string,
+    subscriptionPayload: PropTypes.object,
+    aaiTopLeftPersonalizedHeader: PropTypes.string,
+    aaiPersonalizedHtmlDocumentTitle: PropTypes.string
   };
 
   navigationLinkAndCurrentPathMatch(location, to) {
@@ -131,7 +152,7 @@ class MainScreenHeader extends Component {
       return false;
     }
   }
-  
+
   isValidExternalURL(url) {
     if(decodeURIComponent(url).indexOf('&') > 0 ) {
       return true;
@@ -141,6 +162,7 @@ class MainScreenHeader extends Component {
   }
 
   componentWillMount() {
+    this.props.onGetPersonalizationValues();
     this.props.onGetSubscriptionPayload();
     if(this.props.match.params.externalUrl !== undefined &&
       this.isValidExternalURL(this.props.match.params.externalUrl)) {
@@ -149,6 +171,14 @@ class MainScreenHeader extends Component {
   }
 
   componentWillReceiveProps(nextProps) {
+    if(!isEmpty(nextProps.aaiPersonalizedHtmlDocumentTitle)) {
+      if(!sessionStorage.getItem('PAGE_TITLE') || sessionStorage.getItem('PAGE_TITLE') !== nextProps.aaiPersonalizedHtmlDocumentTitle) {
+        sessionStorage.setItem('PAGE_TITLE', nextProps.aaiPersonalizedHtmlDocumentTitle);
+      }
+      document.title = nextProps.aaiPersonalizedHtmlDocumentTitle;
+    } else {
+      document.title = AAI_HTML_TITLE;
+    }
     if (this.props.location &&
       this.props.location.pathname !==
       nextProps.location.pathname) {
@@ -167,7 +197,7 @@ class MainScreenHeader extends Component {
       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) {
@@ -215,14 +245,17 @@ class MainScreenHeader extends Component {
         $this.receiveMessage(e, $this);
       }, false);
     }
+
+    // fetch custom views
+    this.props.onFetchCustomViews();
   }
+
   componentWillUnmount() {
     if(this.props.subscriptionEnabled) {
       var $this = this;
       window.removeEventListener('message', function (e) {
         $this.receiveMessage(e, $this);
-      }
-      );
+      });
     }
   }
 
@@ -232,7 +265,9 @@ class MainScreenHeader extends Component {
       onShowMenu,
       onHideMenu,
       toggleButtonActive,
-      secondaryTitle
+      secondaryTitle,
+      configurableViewsConfig,
+      aaiTopLeftPersonalizedHeader
     } = this.props;
 
     let menuOptions = [];
@@ -248,6 +283,18 @@ class MainScreenHeader extends Component {
       )}/>
     );
 
+    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}
@@ -257,9 +304,9 @@ class MainScreenHeader extends Component {
     // 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
@@ -276,7 +323,16 @@ class MainScreenHeader extends Component {
                     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';
@@ -289,8 +345,8 @@ class MainScreenHeader extends Component {
         <div>
           <Button
             bsClass={(toggleButtonActive)
-            ? 'toggle-view-button-active'
-            : 'toggle-view-button'}
+              ? 'toggle-view-button-active'
+              : 'toggle-view-button'}
             onClick={onShowMenu}>
             <FontAwesome name='bars'/>
           </Button>
@@ -300,7 +356,7 @@ class MainScreenHeader extends Component {
               {menuOptions}
             </Modal.Body>
           </Modal>
-          <span className='application-title'>{AAI_TITLE}</span>
+          <span className='application-title'>{aaiTopLeftPersonalizedHeader}</span>
           <GlobalAutoCompleteSearchBar history={this.props.history}/>
         </div>
         <GlobalInlineMessageBar />