Initial coomit for AAI-UI(sparky-fe)

Change-Id: I9f8482824a52bac431c100939899e760c0fa4fdb
Signed-off-by: ARULNA <arul.nambi@amdocs.com>

1 files changed, 196 insertions, 0 deletions

diff --git a/src/app/MainScreenHeader.jsx b/src/app/MainScreenHeader.jsx
new file mode 100644
index 0000000..a7fc1f1
--- /dev/null
+++ b/src/app/MainScreenHeader.jsx
@@ -0,0 +1,196 @@
+/*
+ * ============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
+ *
+ * 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=====================================================
+ *
+ * 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';
+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 GlobalInlineMessageBar from 'app/GlobalInlineMessageBar/GlobalInlineMessageBar.jsx';
+import {getClearGlobalMessageEvent} from 'app/GlobalInlineMessageBar/GlobalInlineMessageBarActions.js';
+
+import {
+  Route,
+  NavLink
+} from 'react-router-dom';
+
+import {
+  AAI_TITLE,
+  MENU_ITEM_TIER_SUPPORT,
+  MENU_ITEM_VNF_SEARCH
+} from './MainScreenWrapperConstants.js';
+
+import {
+  showMainMenu
+} from './MainScreenWrapperActionHelper.js';
+
+import {clearSuggestionsTextField} from 'app/globalAutoCompleteSearchBar/GlobalAutoCompleteSearchBarActions.js';
+
+import customViews from 'resources/views/customViews.json';
+
+const mapStateToProps = ({mainWrapper}) => {
+  let {
+        showMenu = false,
+        toggleButtonActive = false
+      } = mainWrapper;
+
+  return {
+    showMenu,
+    toggleButtonActive
+  };
+};
+
+const mapActionsToProps = (dispatch) => {
+  return {
+    onShowMenu: () => dispatch(showMainMenu(true)),
+    onHideMenu: () => {
+      dispatch(showMainMenu(false));
+    },
+    dispatchAnalyticsData: () => dispatch(
+      postAnalyticsData(document.documentElement.outerHTML.replace('\s+', ''))),
+    onRouteChange: () => {
+      dispatch(getClearGlobalMessageEvent());
+      dispatch(clearSuggestionsTextField());
+    }
+  };
+};
+
+class MainScreenHeader extends Component {
+  static propTypes = {
+    showMenu: React.PropTypes.bool,
+    toggleButtonActive: React.PropTypes.bool
+  };
+
+  navigationLinkAndCurrentPathMatch(location, to) {
+    let linkPathElements = to.split('/');
+    let locationElements = location.pathname.split('/');
+
+    // the element arrays above will have the route at index 1 ... need to
+    // verify if the routes match
+    return locationElements[1] === linkPathElements[1];
+  }
+
+  hasRouteChanged(currentPath, nextPath) {
+    let currentPathParts = currentPath.split('/');
+    let nextPathParts = nextPath.split('/');
+
+    if (currentPathParts[1] !== nextPathParts[1]) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (this.props.location &&
+      this.props.location.pathname !== nextProps.location.pathname) {
+      // update analytics
+      this.props.dispatchAnalyticsData();
+
+      if (this.hasRouteChanged(this.props.location.pathname,
+          nextProps.location.pathname)) {
+        this.props.onRouteChange();
+      }
+    }
+  }
+
+  render() {
+    let {
+          showMenu,
+          onShowMenu,
+          onHideMenu,
+          toggleButtonActive
+        } = this.props;
+
+    let menuOptions = [];
+
+    const MenuItem = ({label, iconClass, 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={iconClass}/>
+            <div className='button-icon'>{label}</div>
+          </div>
+        </NavLink>
+      )}/>
+    );
+
+    // add Tier Support view
+    menuOptions.push(
+      <MenuItem to='/viewInspect' 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'
+        label={MENU_ITEM_VNF_SEARCH}
+        iconClass='button-icon vnf-search-button-icon'/>
+    );
+
+    // add all custom view menu options
+    for (let view in customViews) {
+      menuOptions.push(
+        <MenuItem to={customViews[view]['viewName']}
+                  label={customViews[view]['displayName']}
+                  iconClass='button-icon inventory-button-icon'/>
+      );
+    }
+
+    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>
+      </div>
+
+    );
+  }
+}
+
+export default connect(mapStateToProps, mapActionsToProps)(MainScreenHeader);