Adding option for configurable header

Moving the standalone front end start up from localhost:port/aai -> localhost:port & Updating the node parameter to production for production build so that the minified code is more efficient & Changing the babel loaders for fonts to use the full name instead of the computed hash value & Adding a option to make the page header and html document title configurable instead of the previous hardcoded value of A&AI

Issue-ID: AAI-1881
Change-Id: I867200b97d4e2e9acb687f373e39aab8fb8a1b25
Signed-off-by: Arul.Nambi <arul.nambi@amdocs.com>

13 files changed, 185 insertions, 66 deletions

diff --git a/gulpfile.js b/gulpfile.js
index 927d2a7..ab62350 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -90,7 +90,7 @@ gulp.task('prod', () => {
 		webpackProductionConfig.cache = true;
 		webpackProductionConfig.output = {
 			path: localPath.join(__dirname, 'dist'),
-			publicPath: '/services/aai/webapp/',
+			publicPath: '',
 			filename: '[name].js'
 		};
 		webpackProductionConfig.resolveLoader = {
@@ -116,13 +116,8 @@ gulp.task('prod', () => {
 		};
 		webpackProductionConfig.plugins = [
 			new webpack.DefinePlugin({
-				'process.env': {
-					// This has effect on the react lib size
-					'NODE_ENV': JSON.stringify('production')
-				},
-				DEBUG: false,
-				DEV: false
-			}),
+				'process.env.NODE_ENV': JSON.stringify('production')
+			  }),
 			new webpack.optimize.DedupePlugin(),
 			new webpack.optimize.UglifyJsPlugin()
 		];
diff --git a/package.json b/package.json
index 2c33b10..ebcb73e 100644
--- a/package.json
+++ b/package.json
@@ -5,19 +5,20 @@
   "main": "bundle.js",
   "scripts": {
     "start": "gulp",
-    "build": "gulp build",
+    "build": "gulp build --max-old-space-size=8192",
     "test": "jest",
     "testReport": "jest --coverage"
   },
   "author": "",
   "license": "Apache-2.0",
   "dependencies": {
-    "collapsible-sliding-panel": "1.0.0",
+    "axios": "^0.18.0",
+    "collapsible-sliding-panel": "1.0.2",
     "core-js": "^2.4.0",
     "crypto-js": "^3.1.9-1",
     "d3": "^4.12.0",
     "es6-promise": "^3.2.1",
-    "filter-bar-utils": "1.0.0",
+    "filter-bar-utils": "1.0.1",
     "gulp-sass": "^3.0.0",
     "jquery": "^2.2.2",
     "loadable-components": "^2.2.2",
@@ -32,8 +33,8 @@
     "react-autosuggest": "^9.3.4",
     "react-autowhatever": "^10.1.2",
     "react-bootstrap": "^0.31.2",
-    "react-datepicker": "^0.55.0",
-    "react-dom": "^16.4.1",
+    "react-datepicker": "^1.7.0",
+    "react-dom": "^16.4.2",
     "react-fontawesome": "^1.6.1",
     "react-grid-layout": "^0.14.4",
     "react-highlight-words": "^0.11.0",
@@ -51,7 +52,7 @@
     "uuid-js": "^0.7.5",
     "validator": "^4.3.0",
     "velocity-react": "^1.4.1",
-    "vertical-filter-bar": "^1.0.7"
+    "vertical-filter-bar": "1.0.10"
   },
   "devDependencies": {
     "babel-core": "^6.25.0",
@@ -100,7 +101,6 @@
     "react-hot-loader": "^3.0.0-beta.6",
     "redux-mock-store": "^1.4.0",
     "sass-loader": "^3.1.2",
-    "sinon": "^6.3.4",
     "source-map-loader": "^0.1.5",
     "style-loader": "^0.13.1",
     "url-loader": "^0.5.7",
diff --git a/scripts/build/build.sh b/scripts/build/build.sh
index 24ede22..b87d08e 100644
--- a/scripts/build/build.sh
+++ b/scripts/build/build.sh
@@ -1,4 +1,4 @@
-#!/bin/bash
+#!/bin/bash -x
 
 ###############################################################################
 #
@@ -134,27 +134,9 @@ UpdateFEWithCustomViews(){
 #
 ###############################################################################
 
-extensionList=$@
-
-# npm install
-echo "build.sh --- Running npm install"
-npm install
-
-# npm install extensions
-echo "build.sh --- parameter provided $extensionList"
-if [ -z "$extensionList" ]; then
-  echo "build.sh --- No extension provided"
-else
-  echo "build.sh --- Running npm --save ${extensionList}"
-  npm install --save ${extensionList}
-  # copy content when there are extensions
-  UpdateFEwithExtensions
-  UpdateFEWithCustomViews
-fi
+# Copy some extension content to the core sparky
+UpdateFEwithExtensions
 
 # Copy style
 updateStyle
 
-# npm run build
-echo "build.sh --- Running npm run build"
-npm run build
diff --git a/src/app/MainScreenHeader.jsx b/src/app/MainScreenHeader.jsx
index 1a39bc4..7808d19 100644
--- a/src/app/MainScreenHeader.jsx
+++ b/src/app/MainScreenHeader.jsx
@@ -26,7 +26,7 @@ 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';
@@ -41,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';
@@ -55,7 +56,8 @@ 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, configurableViews}) => {
   let {
@@ -64,7 +66,9 @@ const mapStateToProps = ({mainWrapper, configurableViews}) => {
     externalRequestFound = {},
     secondaryTitle = '',
     subscriptionPayload = {},
-    subscriptionEnabled = false
+    subscriptionEnabled = false,
+    aaiTopLeftPersonalizedHeader = AAI_TOP_LEFT_HEADER,
+    aaiPersonalizedHtmlDocumentTitle = AAI_HTML_TITLE
   } = mainWrapper;
 
   let {
@@ -78,7 +82,9 @@ const mapStateToProps = ({mainWrapper, configurableViews}) => {
     secondaryTitle,
     subscriptionPayload,
     subscriptionEnabled,
-    configurableViewsConfig
+    configurableViewsConfig,
+    aaiTopLeftPersonalizedHeader,
+    aaiPersonalizedHtmlDocumentTitle
   };
 };
 
@@ -90,7 +96,7 @@ const mapActionsToProps = (dispatch) => {
       dispatch(showMainMenu(false));
     },
     dispatchAnalyticsData: () => dispatch(
-      postAnalyticsData(document.documentElement.outerHTML.replace('\s+', ''))),
+      postAnalyticsData(getStoreAnalyticsPayload())),
     onRouteChange: () => {
       dispatch(getClearGlobalMessageEvent());
       dispatch(clearSuggestionsTextField());
@@ -109,6 +115,9 @@ const mapActionsToProps = (dispatch) => {
     },
     onFetchCustomViews: () => {
       dispatch(getConfigurableViewConfigs());
+    },
+    onGetPersonalizationValues: () => {
+      dispatch(getPersonalizationDetails());
     }
   };
 };
@@ -119,7 +128,9 @@ class MainScreenHeader extends Component {
     toggleButtonActive: PropTypes.bool,
     externalRequestFound: PropTypes.object,
     secondaryTitle: PropTypes.string,
-    subscriptionPayload: PropTypes.object
+    subscriptionPayload: PropTypes.object,
+    aaiTopLeftPersonalizedHeader: PropTypes.string,
+    aaiPersonalizedHtmlDocumentTitle: PropTypes.string
   };
 
   navigationLinkAndCurrentPathMatch(location, to) {
@@ -151,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)) {
@@ -159,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) {
@@ -246,7 +266,8 @@ class MainScreenHeader extends Component {
       onHideMenu,
       toggleButtonActive,
       secondaryTitle,
-      configurableViewsConfig
+      configurableViewsConfig,
+      aaiTopLeftPersonalizedHeader
     } = this.props;
 
     let menuOptions = [];
@@ -335,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 />
diff --git a/src/app/MainScreenWrapperConstants.js b/src/app/MainScreenWrapperConstants.js
index 6510703..a3748d0 100644
--- a/src/app/MainScreenWrapperConstants.js
+++ b/src/app/MainScreenWrapperConstants.js
@@ -35,6 +35,7 @@ export const screens = keyMirror({
   VNF_SEARCH: null
 });
 
-export const AAI_TITLE = 'A&AI';
+export const AAI_TOP_LEFT_HEADER = 'A&AI';
+export const AAI_HTML_TITLE = 'A&AI';
 export const MENU_ITEM_TIER_SUPPORT = 'View & Inspect';
 export const MENU_ITEM_VNF_SEARCH = 'VNFs';
diff --git a/src/app/MainScreenWrapperReducer.js b/src/app/MainScreenWrapperReducer.js
index 6f92962..1875163 100644
--- a/src/app/MainScreenWrapperReducer.js
+++ b/src/app/MainScreenWrapperReducer.js
@@ -25,6 +25,9 @@ import {
 import {
   contextHandlerActionTypes
 } from 'app/contextHandler/ContextHandlerConstants.js';
+import {
+  personalizationActionTypes
+} from 'app/personlaization/PersonalizationConstans.js';
 
 export default (state = {}, action) => {
   switch (action.type) {
@@ -76,6 +79,12 @@ export default (state = {}, action) => {
         ...state,
         subscriptionEnabled: false
       };
+    case personalizationActionTypes.PERSONALIZATION_PAYLOAD_FOUND:
+      return {
+        ...state,
+        aaiTopLeftPersonalizedHeader: action.data.topLeftHeader,
+        aaiPersonalizedHtmlDocumentTitle: action.data.htmlDocumentTitle
+      };
   }
   return state;
 };
diff --git a/src/app/analytics/AnalyticsActions.js b/src/app/analytics/AnalyticsActions.js
index 43bb847..fea01f0 100644
--- a/src/app/analytics/AnalyticsActions.js
+++ b/src/app/analytics/AnalyticsActions.js
@@ -26,6 +26,10 @@ import {
 import {ANALYTICS_URL} from 'app/analytics/AnalyticsConstants.js';
 let fetch = require('node-fetch');
 
+export function getStoreAnalyticsPayload() {
+  var documentBody  = document.body.getElementsByTagName('*');
+  return documentBody[0].innerHTML.replace('\s+', '');
+}
 
 function getAnalyticsPostBody(payload){
   return {
@@ -36,7 +40,7 @@ function getAnalyticsPostBody(payload){
 }
 
 export function postAnalyticsData(payload){
-  
+
   return () => {
     fetch(ANALYTICS_URL, {
       method: POST,
diff --git a/src/app/globalAutoCompleteSearchBar/GlobalAutoCompleteSearchBar.jsx b/src/app/globalAutoCompleteSearchBar/GlobalAutoCompleteSearchBar.jsx
index 9c3e49a..e06fead 100644
--- a/src/app/globalAutoCompleteSearchBar/GlobalAutoCompleteSearchBar.jsx
+++ b/src/app/globalAutoCompleteSearchBar/GlobalAutoCompleteSearchBar.jsx
@@ -21,7 +21,7 @@
 import {connect} from 'react-redux';
 import React, {Component} from 'react';
 import  AutoCompleteSearchBar from 'generic-components/autoCompleteSearchBar/AutoCompleteSearchBar.jsx';
-import {postAnalyticsData} from 'app/analytics/AnalyticsActions.js';
+import {postAnalyticsData, getStoreAnalyticsPayload} from 'app/analytics/AnalyticsActions.js';
 import {getClearGlobalMessageEvent} from 'app/globalInlineMessageBar/GlobalInlineMessageBarActions.js';
 import {
   queryRequestedValues,
@@ -46,7 +46,7 @@ let mapActionToProps = (dispatch) => {
     },
     onSuggestionsClearRequested: () => dispatch(onSuggestionsClearRequested()),
     dispatchAnalytics: () => dispatch(
-      postAnalyticsData(document.documentElement.outerHTML.replace('\s+', ''))),
+      postAnalyticsData(getStoreAnalyticsPayload())),
     onInvalidSearch: (searchText) => {
       dispatch(getInvalidSearchInputEvent(searchText));
     },
diff --git a/src/app/personlaization/PersonalizationActions.js b/src/app/personlaization/PersonalizationActions.js
new file mode 100644
index 0000000..0d188fd
--- /dev/null
+++ b/src/app/personlaization/PersonalizationActions.js
@@ -0,0 +1,80 @@
+/*

+ * ============LICENSE_START=======================================================

+ * org.onap.aai

+ * ================================================================================

+ * 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.

+ * 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=========================================================

+ */

+

+ import {

+    GET

+  } from 'app/networking/NetworkConstants.js';

+import networkCall from 'app/networking/NetworkCalls.js';

+import {

+  GET_PERSONALIZED_VALUES_URL, 

+  PERSONALIZATION_FAILED_MESSAGE,

+  personalizationActionTypes

+} from 'app/personlaization/PersonalizationConstans.js';

+import {

+  getSetGlobalMessageEvent

+} from 'app/globalInlineMessageBar/GlobalInlineMessageBarActions.js';

+

+import {  

+  STATUS_CODE_5XX_SERVER_ERROR,

+  MESSAGE_LEVEL_WARNING

+} from 'utils/GlobalConstants.js';

+

+

+function createPersonalizedValuesEvent(payload) {

+

+  let event = {

+    type: personalizationActionTypes.PERSONALIZATION_PAYLOAD_FOUND,

+    data: payload

+  };

+  return event;

+}

+

+function fetchPersonalizedValues(fetchRequestCallback) {

+  return dispatch => {

+    return fetchRequestCallback().then(

+      (response) => {

+        if (response.status >= STATUS_CODE_5XX_SERVER_ERROR) {

+          dispatch(getSetGlobalMessageEvent(PERSONALIZATION_FAILED_MESSAGE , MESSAGE_LEVEL_WARNING));

+        } else {

+          // assume 200 status

+          return response.json();

+        }

+      }

+    ).then(

+      (results)=> {

+        dispatch(createPersonalizedValuesEvent(results));

+      }

+    ).catch(

+      () => {

+        dispatch(getSetGlobalMessageEvent(PERSONALIZATION_FAILED_MESSAGE , MESSAGE_LEVEL_WARNING));

+      }

+    );

+  };

+}

+

+export function getPersonalizationDetails(){

+  let personalizationFetchRequest =

+    () => networkCall.getRequest(GET_PERSONALIZED_VALUES_URL, GET);

+    

+  return dispatch => {

+    dispatch(fetchPersonalizedValues(personalizationFetchRequest));

+  };

+}
\ No newline at end of file
diff --git a/src/app/personlaization/PersonalizationConstans.js b/src/app/personlaization/PersonalizationConstans.js
new file mode 100644
index 0000000..bbe0174
--- /dev/null
+++ b/src/app/personlaization/PersonalizationConstans.js
@@ -0,0 +1,30 @@
+/*

+ * ============LICENSE_START=======================================================

+ * org.onap.aai

+ * ================================================================================

+ * 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.

+ * 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=========================================================

+ */

+

+import keyMirror from 'utils/KeyMirror.js';

+import {BASE_URL} from 'app/networking/NetworkConstants.js';

+

+export const personalizationActionTypes = keyMirror({

+  PERSONALIZATION_PAYLOAD_FOUND: null

+});

+

+export const GET_PERSONALIZED_VALUES_URL = BASE_URL + '/rest/getPersonalizedValues';

+export const PERSONALIZATION_FAILED_MESSAGE = 'Failed to fetch personalization values';

diff --git a/src/index.html b/src/index.html
index 9f5ada4..7ee72da 100644
--- a/src/index.html
+++ b/src/index.html
@@ -23,7 +23,6 @@
 <html>
 <head>
     <meta charset="utf-8">
-    <title>A&AI UI</title>
 </head>
 
 <body>
diff --git a/webpack.config.js b/webpack.config.js
index f038d4d..39e3a04 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -38,7 +38,7 @@ module.exports = {
   },
   output: {
     path: path.join(__dirname, 'dist'),
-    publicPath: `http://localhost:${devPort}/services/aai/webapp`,
+    publicPath: ``,
     filename: '[name].js'
   },
   resolve: {
@@ -71,13 +71,13 @@ module.exports = {
       loader: 'source-map-loader'
     }],
     loaders: [
-      {test: /\.(js|jsx)$/, loaders: ['babel-loader', 'eslint-loader'], exclude: /node_modules/},
+      {test: /\.(js|jsx)$/, loaders: ['babel-loader', 'eslint-loader', 'source-map-loader'], exclude: /node_modules/},
       {test: /\.(css|scss)$/, loaders: ['style', 'css?sourceMap', 'sass?sourceMap']},
       // required for font icons
-      {test: /\.(woff|woff2)(\?.*)?$/, loader: 'url-loader?limit=16384&mimetype=application/font-woff'},
-      {test: /\.(ttf|eot|otf)(\?.*)?$/, loader: 'file-loader'},
-      {test: /\.(png|jpg|svg)(\?.*)?$/, loader: 'url-loader?limit=16384'},
-      {test: /\.json$/, loaders: ['json']}
+      {test: /\.(woff|woff2|ttf|eot|otf)(\?.*)?$/, loader: 'url-loader?limit=163840&mimetype=application/font-woff&name=[name].[ext]'},
+      {test: /\.(png|jpg|svg)(\?.*)?$/, loader: 'url-loader?limit=163840'},
+      {test: /\.json$/, loaders: ['json']},
+        { test: /\.xml$/, loader: 'xml-loader' }
     ]
   },
   eslint: {
diff --git a/webpack.devConfig.js b/webpack.devConfig.js
index e1e8876..e4bf80b 100644
--- a/webpack.devConfig.js
+++ b/webpack.devConfig.js
@@ -27,20 +27,18 @@ var devPort = process.env.PORT || 8001;
 module.exports = {
   devtool: 'eval-source-map',
   entry: {
-    'aai/bundle': [
+    bundle: [
       'app/main.app.jsx',
-      `webpack-dev-server/client?https://localhost:${devPort}`,
       'webpack/hot/only-dev-server'
     ],
     'editAttributes/editAttributesBundle': [
       'editAttributes/main.app.jsx',
-      `webpack-dev-server/client?https://localhost:${devPort}`,
       'webpack/hot/only-dev-server'
     ]
   },
   output: {
     path: path.join(__dirname, 'dist'),
-    publicPath: `https://localhost:${devPort}/`,
+    publicPath: ``,
     filename: '[name].js'
   },
   resolve: {
@@ -57,7 +55,7 @@ module.exports = {
   devServer: {
     port: devPort,
     historyApiFallback: true,
-    publicPath: `https://localhost:${devPort}/`,
+    publicPath: ``,
     contentBase: path.join(__dirname, 'dist'),
     hot: true,
     progress: true,
@@ -74,12 +72,12 @@ module.exports = {
     ],
     loaders: [
       {test: /\.(js|jsx)$/, loaders: ['babel-loader', 'eslint-loader'], exclude: /node_modules/},
-      {test: /\.(css|scss)$/, loaders: ['style', 'css?sourceMap', 'sass?sourceMap']},
+      {test: /\.(css|scss)$/, loaders: ['style-loader', 'css-loader', 'sass-loader']},
       // required for font icons
-      {test: /\.(woff|woff2)(\?.*)?$/, loader: 'url-loader?limit=16384&mimetype=application/font-woff'},
-      {test: /\.(ttf|eot|otf)(\?.*)?$/, loader: 'file-loader'},
-      {test: /\.(png|jpg|svg)(\?.*)?$/, loader: 'url-loader?limit=16384'},
-      {test: /\.json$/, loaders: ['json']}
+      {test: /\.(woff|woff2|ttf|eot|otf)(\?.*)?$/, loader: 'url-loader?limit=163840&mimetype=application/font-woff&name=[name].[ext]'},
+      {test: /\.(png|jpg|svg)(\?.*)?$/, loader: 'url-loader?limit=163840&name=[name].[ext]'},
+      {test: /\.json$/, loaders: ['json']},
+      { test: /\.xml$/, loader: 'xml-loader' }
     ]
   },
   eslint: {