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       configurableViewsConfig,
 144       customComponents,
 145       customRoutes
 146     } = this.props;
 147
 148     let customViewList = [];
 149     extensibleViews.forEach(function(view,key) {
 150
 151       let path = '', extKey = '';
 152       if(isEmpty(extensibleViews[key]['viewParams'])){
 153         path = '/' + view.viewName + '/:extensibleViewParams?';
 154         extKey = view.viewName + 'Route';
 155       } else {
 156         path = '/' + view.viewName  + view.viewParams;
 157         extKey = view.viewName + view.viewParams + 'Route';
 158       }
 159
 160       var renderComponent = (props) => {
 161         let viewParams = {};
 162         if(isEmpty(extensibleViews[key]['viewParams']) && props.match.params.extensibleViewParams !== undefined) {
 163           viewParams = decryptParamsForView(props.match.params.extensibleViewParams);
 164         }
 165
 166         if (Extensibility.default.hasOwnProperty(view.componentName)) {
 167           let Component = Extensibility.default[view.componentName];
 168           return (
 169             <Component
 170               {...props}
 171               networkingCallback={(apiUrl, body, paramName, curViewData) => {
 172                 onExtensibleViewNetworkCallback(apiUrl, body, paramName, curViewData);
 173               }}
 174               overlayCallback={(apiUrl, body, paramName, curOverlayData,responseEventKey) => {
 175                 onOverlayNetworkCallback(apiUrl, body, paramName, curOverlayData, responseEventKey);
 176               }}
 177               messagingCallback ={(message, messageSeverity) => {
 178                 onExtensibleViewMessageCallback(message, messageSeverity);
 179               }}
 180               changeRouteCallback = {(routeParam, historyObj) => {
 181                 changeUrlAddress(routeParam, historyObj);
 182               }}
 183               networkingCallbackPromise = {(url, relativeURL, httpMethodType) => {
 184                 return genericRequest(url, relativeURL, httpMethodType);
 185               }}
 186               viewName={view.displayName}
 187               viewData={extensibleViewNetworkCallbackData}
 188               viewParams={viewParams}/>
 189           );
 190         }
 191       };
 192       if(isEmpty(extensibleViews[key]['isExact']) && !extensibleViews[key]['isExact']){
 193         customViewList.push(
 194           <Route key={extKey} path={path} render={renderComponent}/>
 195         );
 196       } else {
 197         customViewList.push(
 198           <Route key={extKey} exact path={path} render={renderComponent}/>
 199         );
 200       }
 201
 202     });
 203
 204     let configurableViewList = getConfigurableRoutes(configurableViewsConfig, customComponents);
 205
 206     return (
 207       <Router>
 208         <div className='main-app-container'>
 209           <Switch>
 210             <Redirect from='/' exact to='/schema'/>
 211           </Switch>
 212           <Route key='MainScreenHeaderRoute' path='/:externalUrl?' component={MainScreenHeader}/>
 213           <Route key='TierSupportRoue' path='/schema/:viParam?' component={TierSupport}/>
 214           <Route key='VnfSearchRoute' path='/vnfSearch/:filters?' component={VnfSearch}/>
 215           {customViewList}
 216           {customRoutes}
 217           {configurableViewList}
 218         </div>
 219       </Router>
 220     );
 221   }
 222 }
 223
 224 export default connect(mapStateToProps, mapActionsToProps)(MainScreenWrapper);