src/app/MainScreenWrapper.jsx

   1 /*
   2  * ============LICENSE_START=======================================================
   3  * org.onap.aai
   4  * ================================================================================
   5  * Copyright © 2017-2018 AT&T Intellectual Property. All rights reserved.
   6  * Copyright © 2017-2018 Amdocs
   7  * ================================================================================
   8  * Licensed under the Apache License, Version 2.0 (the "License");
   9  * you may not use this file except in compliance with the License.
  10  * You may obtain a copy of the License at
  11  *
  12  *       http://www.apache.org/licenses/LICENSE-2.0
  13  *
  14  * Unless required by applicable law or agreed to in writing, software
  15  * distributed under the License is distributed on an "AS IS" BASIS,
  16  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  17  * See the License for the specific language governing permissions and
  18  * limitations under the License.
  19  * ============LICENSE_END=========================================================
  20  */
  21 import React, {Component} from 'react';
  22 import {connect} from 'react-redux';
  23 import * as Extensibility from './extensibility/index.js';
  24 import TierSupport from './tierSupport/TierSupport.jsx';
  25 import VnfSearch from './vnfSearch/VnfSearch.jsx';
  26 import MainScreenHeader from './MainScreenHeader.jsx';
  27 import {decryptParamsForView, changeUrlAddress} from 'utils/Routes.js';
  28 import {
  29   getConfigurableViewConfigs,
  30   setCustomRoutes
  31 } from 'app/configurableViews/ConfigurableViewActions.js';
  32 import {isEmpty} from 'lodash';
  33 import {genericRequest} from 'app/networking/NetworkCalls.js';
  34 import {
  35   Route,
  36   HashRouter as Router,
  37   Switch,
  38   Redirect
  39 } from 'react-router-dom';
  40
  41 import {
  42   windowResize,
  43   extensibleViewNetworkCallback,
  44   overlayNetworkCallback,
  45   extensibleViewMessageCallback
  46 } from './MainScreenWrapperActionHelper.js';
  47
  48 import extensibleViews from 'resources/views/extensibleViews.json';
  49 import customComponentConfig from 'resources/views/customComponents.json';
  50 import { newCustomComponentsEvent } from 'app/configurableViews/ConfigurableViewActions.js';
  51 import {
  52   getConfigurableRoutes
  53 } from 'app/configurableViews/ConfigurableViewManager.js';
  54
  55 import {
  56   getConfiguredComponentList
  57 } from 'app/configurableViews/index.js';
  58
  59 const mapStateToProps = ({mainWrapper, configurableViews}) => {
  60   let {
  61     showMenu = false,
  62     toggleButtonActive = false,
  63     extensibleViewNetworkCallbackData = {}
  64   } = mainWrapper;
  65
  66   let {
  67     configurableViewsConfig = {},
  68     customComponents = {},
  69     customRoutes = []
  70   } = configurableViews;
  71
  72   return {
  73     showMenu,
  74     toggleButtonActive,
  75     extensibleViewNetworkCallbackData,
  76     configurableViewsConfig,
  77     customComponents,
  78     customRoutes
  79   };
  80 };
  81
  82 const mapActionsToProps = (dispatch) => {
  83   return {
  84     onWindowSizeChange: () => dispatch(windowResize()),
  85     onExtensibleViewNetworkCallback: (apiUrl,body,viewName,curViewData) =>  {
  86       dispatch(extensibleViewNetworkCallback(apiUrl,body,viewName,curViewData));
  87     },
  88     onExtensibleViewMessageCallback: (message, messageSevirity) => {
  89       dispatch(extensibleViewMessageCallback(message, messageSevirity));
  90     },
  91     onOverlayNetworkCallback: (apiUrl, body, viewName, curViewData, responseEventKey) =>  {
  92       dispatch(overlayNetworkCallback(apiUrl, body, viewName, curViewData, responseEventKey));
  93     },
  94     onConfigurableViewsInitialLoad: (components) => {
  95       dispatch(newCustomComponentsEvent(components));
  96     },
  97     onFetchCustomViews: () => {
  98       dispatch(getConfigurableViewConfigs());
  99     },
 100     onSetCustomRoutes: (routes) => {
 101       dispatch(setCustomRoutes(routes));
 102     }
 103   };
 104 };
 105
 106 class MainScreenWrapper extends Component {
 107
 108   constructor() {
 109     super();
 110     window.addEventListener('resize', () => {
 111       this.props.onWindowSizeChange();
 112     });
 113
 114   }
 115
 116   componentDidMount() {
 117     // fetch custom views
 118     this.props.onFetchCustomViews();
 119
 120     // fetch custom components
 121     let components = getConfiguredComponentList(customComponentConfig);
 122     this.props.onConfigurableViewsInitialLoad(components);
 123   }
 124
 125   componentDidUpdate(prevProps) {
 126     if ((Object.keys(this.props.customComponents).length > 0 &&
 127       Object.keys(this.props.configurableViewsConfig).length > 0) &&
 128       ((JSON.stringify(prevProps.configurableViewsConfig) !== JSON.stringify(this.props.configurableViewsConfig)) ||
 129       (JSON.stringify(prevProps.customComponents) !== JSON.stringify(this.props.customComponents)))) {
 130       // we have both config and components populated and one was just set
 131       let customRoutes = getConfigurableRoutes(this.props.configurableViewsConfig, this.props.customComponents);
 132       this.props.onSetCustomRoutes(customRoutes);
 133     }
 134   }
 135
 136   render() {
 137
 138     const {
 139       onExtensibleViewNetworkCallback,
 140       extensibleViewNetworkCallbackData,
 141       onExtensibleViewMessageCallback,
 142       onOverlayNetworkCallback,
 143       customRoutes
 144     } = this.props;
 145
 146     let customViewList = [];
 147     extensibleViews.forEach(function(view,key) {
 148
 149       let path = '', extKey = '';
 150       if(isEmpty(extensibleViews[key]['viewParams'])){
 151         path = '/' + view.viewName + '/:extensibleViewParams?';
 152         extKey = view.viewName + 'Route';
 153       } else {
 154         path = '/' + view.viewName  + view.viewParams;
 155         extKey = view.viewName + view.viewParams + 'Route';
 156       }
 157
 158       var renderComponent = (props) => {
 159         let viewParams = {};
 160         if(isEmpty(extensibleViews[key]['viewParams']) && props.match.params.extensibleViewParams !== undefined) {
 161           viewParams = decryptParamsForView(props.match.params.extensibleViewParams);
 162         }
 163
 164         if (Extensibility.default.hasOwnProperty(view.componentName)) {
 165           let Component = Extensibility.default[view.componentName];
 166           return (
 167             <Component
 168               {...props}
 169               networkingCallback={(apiUrl, body, paramName, curViewData) => {
 170                 onExtensibleViewNetworkCallback(apiUrl, body, paramName, curViewData);
 171               }}
 172               overlayCallback={(apiUrl, body, paramName, curOverlayData,responseEventKey) => {
 173                 onOverlayNetworkCallback(apiUrl, body, paramName, curOverlayData, responseEventKey);
 174               }}
 175               messagingCallback ={(message, messageSeverity) => {
 176                 onExtensibleViewMessageCallback(message, messageSeverity);
 177               }}
 178               changeRouteCallback = {(routeParam, historyObj) => {
 179                 changeUrlAddress(routeParam, historyObj);
 180               }}
 181               networkingCallbackPromise = {(url, relativeURL, httpMethodType) => {
 182                 return genericRequest(url, relativeURL, httpMethodType);
 183               }}
 184               viewName={view.displayName}
 185               viewData={extensibleViewNetworkCallbackData}
 186               viewParams={viewParams}/>
 187           );
 188         }
 189       };
 190       if(isEmpty(extensibleViews[key]['isExact']) && !extensibleViews[key]['isExact']){
 191         customViewList.push(
 192           <Route key={extKey} path={path} render={renderComponent}/>
 193         );
 194       } else {
 195         customViewList.push(
 196           <Route key={extKey} exact path={path} render={renderComponent}/>
 197         );
 198       }
 199
 200     });
 201
 202     return (
 203       <Router>
 204         <div className='main-app-container'>
 205           <Switch>
 206             <Redirect from='/' exact to='/schema'/>
 207           </Switch>
 208           <Route key='MainScreenHeaderRoute' path='/:externalUrl?' component={MainScreenHeader}/>
 209           <Route key='TierSupportRoue' path='/schema/:viParam?' component={TierSupport}/>
 210           <Route key='VnfSearchRoute' path='/vnfSearch/:filters?' component={VnfSearch}/>
 211           {customViewList}
 212           {customRoutes}
 213         </div>
 214       </Router>
 215     );
 216   }
 217 }
 218
 219 export default connect(mapStateToProps, mapActionsToProps)(MainScreenWrapper);