X-Git-Url: https://gerrit.onap.org/r/gitweb?p=aai%2Fsparky-fe.git;a=blobdiff_plain;f=src%2Fapp%2FMainScreenWrapper.jsx;h=3348494219c4b871eb2ec12276f808598c946032;hp=054450b23e32aaa7a54f42bd07b6f9c39d4a71db;hb=410e8a48a471c6bb814f253abe006f20db0c2750;hpb=c1917730a648ddbb6cd51307cea9464a697700d8

diff --git a/src/app/MainScreenWrapper.jsx b/src/app/MainScreenWrapper.jsx
index 054450b..3348494 100644
--- a/src/app/MainScreenWrapper.jsx
+++ b/src/app/MainScreenWrapper.jsx
@@ -2,8 +2,8 @@
  * ============LICENSE_START=======================================================
  * org.onap.aai
  * ================================================================================
- * Copyright © 2017 AT&T Intellectual Property. All rights reserved.
- * Copyright © 2017 Amdocs
+ * 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.
@@ -17,19 +17,20 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  * ============LICENSE_END=========================================================
- *
- * ECOMP is a trademark and service mark of AT&T Intellectual Property.
  */
 import React, {Component} from 'react';
 import {connect} from 'react-redux';
-
+import * as Extensibility from './extensibility/index.js';
 import TierSupport from './tierSupport/TierSupport.jsx';
 import VnfSearch from './vnfSearch/VnfSearch.jsx';
 import MainScreenHeader from './MainScreenHeader.jsx';
-
-import DynamicViewLoader from
-  'generic-components/dynamicViewLoader/dynamicViewLoader.jsx';
-
+import {decryptParamsForView, changeUrlAddress} from 'utils/Routes.js';
+import {
+  getConfigurableViewConfigs,
+  setCustomRoutes
+} from 'app/configurableViews/ConfigurableViewActions.js';
+import {isEmpty} from 'lodash';
+import {genericRequest} from 'app/networking/NetworkCalls.js';
 import {
   Route,
   HashRouter as Router,
@@ -38,26 +39,67 @@ import {
 } from 'react-router-dom';
 
 import {
-  windowResize
+  windowResize,
+  extensibleViewNetworkCallback,
+  overlayNetworkCallback,
+  extensibleViewMessageCallback
 } from './MainScreenWrapperActionHelper.js';
 
-import customViews from 'resources/views/customViews.json';
+import extensibleViews from 'resources/views/extensibleViews.json';
+import customComponentConfig from 'resources/views/customComponents.json';
+import { newCustomComponentsEvent } from 'app/configurableViews/ConfigurableViewActions.js';
+import {
+  getConfigurableRoutes
+} from 'app/configurableViews/ConfigurableViewManager.js';
+
+import {
+  getConfiguredComponentList
+} from 'app/configurableViews/index.js';
+
+const mapStateToProps = ({mainWrapper, configurableViews}) => {
+  let {
+    showMenu = false,
+    toggleButtonActive = false,
+    extensibleViewNetworkCallbackData = {}
+  } = mainWrapper;
 
-const mapStateToProps = ({mainWrapper}) => {
   let {
-        showMenu = false,
-        toggleButtonActive = false
-      } = mainWrapper;
+    configurableViewsConfig = {},
+    customComponents = {},
+    customRoutes = []
+  } = configurableViews;
 
   return {
     showMenu,
-    toggleButtonActive
+    toggleButtonActive,
+    extensibleViewNetworkCallbackData,
+    configurableViewsConfig,
+    customComponents,
+    customRoutes
   };
 };
 
 const mapActionsToProps = (dispatch) => {
   return {
-    onWindowSizeChange: () => dispatch(windowResize())
+    onWindowSizeChange: () => dispatch(windowResize()),
+    onExtensibleViewNetworkCallback: (apiUrl,body,viewName,curViewData) =>  {
+      dispatch(extensibleViewNetworkCallback(apiUrl,body,viewName,curViewData));
+    },
+    onExtensibleViewMessageCallback: (message, messageSevirity) => {
+      dispatch(extensibleViewMessageCallback(message, messageSevirity));
+    },
+    onOverlayNetworkCallback: (apiUrl, body, viewName, curViewData, responseEventKey) =>  {
+      dispatch(overlayNetworkCallback(apiUrl, body, viewName, curViewData, responseEventKey));
+    },
+    onConfigurableViewsInitialLoad: (components) => {
+      dispatch(newCustomComponentsEvent(components));
+    },
+    onFetchCustomViews: () => {
+      dispatch(getConfigurableViewConfigs());
+    },
+    onSetCustomRoutes: (routes) => {
+      dispatch(setCustomRoutes(routes));
+    }
   };
 };
 
@@ -68,29 +110,111 @@ class MainScreenWrapper extends Component {
     window.addEventListener('resize', () => {
       this.props.onWindowSizeChange();
     });
+
+  }
+
+  componentDidMount() {
+    // fetch custom views
+    this.props.onFetchCustomViews();
+
+    // fetch custom components
+    let components = getConfiguredComponentList(customComponentConfig);
+    this.props.onConfigurableViewsInitialLoad(components);
+  }
+
+  componentDidUpdate(prevProps) {
+    if ((Object.keys(this.props.customComponents).length > 0 &&
+      Object.keys(this.props.configurableViewsConfig).length > 0) &&
+      ((JSON.stringify(prevProps.configurableViewsConfig) !== JSON.stringify(this.props.configurableViewsConfig)) ||
+      (JSON.stringify(prevProps.customComponents) !== JSON.stringify(this.props.customComponents)))) {
+      // we have both config and components populated and one was just set
+      let customRoutes = getConfigurableRoutes(this.props.configurableViewsConfig, this.props.customComponents);
+      this.props.onSetCustomRoutes(customRoutes);
+    }
   }
 
   render() {
+
+    const {
+      onExtensibleViewNetworkCallback,
+      extensibleViewNetworkCallbackData,
+      onExtensibleViewMessageCallback,
+      onOverlayNetworkCallback,
+      configurableViewsConfig,
+      customComponents,
+      customRoutes
+    } = this.props;
+
     let customViewList = [];
+    extensibleViews.forEach(function(view,key) {
 
-    // add all custom views
-    for (let view in customViews) {
-      customViewList.push(
-        <Route path={'/' + customViews[view]['viewName']}
-               component={DynamicViewLoader}/>
-      );
-    }
+      let path = '', extKey = '';
+      if(isEmpty(extensibleViews[key]['viewParams'])){
+        path = '/' + view.viewName + '/:extensibleViewParams?';
+        extKey = view.viewName + 'Route';
+      } else {
+        path = '/' + view.viewName  + view.viewParams;
+        extKey = view.viewName + view.viewParams + 'Route';
+      }
+
+      var renderComponent = (props) => {
+        let viewParams = {};
+        if(isEmpty(extensibleViews[key]['viewParams']) && props.match.params.extensibleViewParams !== undefined) {
+          viewParams = decryptParamsForView(props.match.params.extensibleViewParams);
+        }
+
+        if (Extensibility.default.hasOwnProperty(view.componentName)) {
+          let Component = Extensibility.default[view.componentName];
+          return (
+            <Component
+              {...props}
+              networkingCallback={(apiUrl, body, paramName, curViewData) => {
+                onExtensibleViewNetworkCallback(apiUrl, body, paramName, curViewData);
+              }}
+              overlayCallback={(apiUrl, body, paramName, curOverlayData,responseEventKey) => {
+                onOverlayNetworkCallback(apiUrl, body, paramName, curOverlayData, responseEventKey);
+              }}
+              messagingCallback ={(message, messageSeverity) => {
+                onExtensibleViewMessageCallback(message, messageSeverity);
+              }}
+              changeRouteCallback = {(routeParam, historyObj) => {
+                changeUrlAddress(routeParam, historyObj);
+              }}
+              networkingCallbackPromise = {(url, relativeURL, httpMethodType) => {
+                return genericRequest(url, relativeURL, httpMethodType);
+              }}
+              viewName={view.displayName}
+              viewData={extensibleViewNetworkCallbackData}
+              viewParams={viewParams}/>
+          );
+        }
+      };
+      if(isEmpty(extensibleViews[key]['isExact']) && !extensibleViews[key]['isExact']){
+        customViewList.push(
+          <Route key={extKey} path={path} render={renderComponent}/>
+        );
+      } else {
+        customViewList.push(
+          <Route key={extKey} exact path={path} render={renderComponent}/>
+        );
+      }
+
+    });
+
+    let configurableViewList = getConfigurableRoutes(configurableViewsConfig, customComponents);
 
     return (
       <Router>
-        <div>
+        <div className='main-app-container'>
           <Switch>
-            <Redirect from='/' exact to='/viewInspect'/>
+            <Redirect from='/' exact to='/schema'/>
           </Switch>
-          <Route path='/' component={MainScreenHeader}/>
-          <Route path='/viewInspect/:viParam?' component={TierSupport}/>
-          <Route path='/vnfSearch/:vnfParam?' component={VnfSearch}/>
+          <Route key='MainScreenHeaderRoute' path='/:externalUrl?' component={MainScreenHeader}/>
+          <Route key='TierSupportRoue' path='/schema/:viParam?' component={TierSupport}/>
+          <Route key='VnfSearchRoute' path='/vnfSearch/:filters?' component={VnfSearch}/>
           {customViewList}
+          {customRoutes}
+          {configurableViewList}
         </div>
       </Router>
     );