From e513a1ce93b9a70f01b62ca7560dbe52376cc5bd Mon Sep 17 00:00:00 2001 From: "Arul.Nambi" Date: Wed, 7 Nov 2018 09:19:21 -0500 Subject: 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 --- gulpfile.js | 11 +-- package.json | 14 ++-- scripts/build/build.sh | 24 +------ src/app/MainScreenHeader.jsx | 39 ++++++++--- src/app/MainScreenWrapperConstants.js | 3 +- src/app/MainScreenWrapperReducer.js | 9 +++ src/app/analytics/AnalyticsActions.js | 6 +- .../GlobalAutoCompleteSearchBar.jsx | 4 +- src/app/personlaization/PersonalizationActions.js | 80 ++++++++++++++++++++++ src/app/personlaization/PersonalizationConstans.js | 30 ++++++++ src/index.html | 1 - webpack.config.js | 12 ++-- webpack.devConfig.js | 18 +++-- 13 files changed, 185 insertions(+), 66 deletions(-) create mode 100644 src/app/personlaization/PersonalizationActions.js create mode 100644 src/app/personlaization/PersonalizationConstans.js 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} - {AAI_TITLE} + {aaiTopLeftPersonalizedHeader} 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 @@ - A&AI UI 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: { -- cgit 1.2.3-korg