sdnr/wt/odlux/apps/inventoryApp/src/pluginInventory.tsx

   1 /**
   2 * ============LICENSE_START========================================================================
   3 * ONAP : ccsdk feature sdnr wt odlux
   4 * =================================================================================================
   5 * Copyright (C) 2019 highstreet technologies GmbH Intellectual Property. All rights reserved.
   6 * =================================================================================================
   7 * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
   8 * in compliance with the License. You may obtain a copy of the License at
   9 *
  10 * http://www.apache.org/licenses/LICENSE-2.0
  11 *
  12 * Unless required by applicable law or agreed to in writing, software distributed under the License
  13 * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
  14 * or implied. See the License for the specific language governing permissions and limitations under
  15 * the License.
  16 * ============LICENSE_END==========================================================================
  17 */
  18 // app configuration and main entry point for the app
  19 import React from 'react';
  20 import { Redirect, Route, RouteComponentProps, Switch, withRouter } from 'react-router-dom';
  21
  22 import { connect, Connect, IDispatcher } from '../../../framework/src/flux/connect';
  23 import applicationManager from '../../../framework/src/services/applicationManager';
  24 import { IApplicationStoreState } from '../../../framework/src/store/applicationStore';
  25 import { SetPanelAction } from './actions/panelActions';
  26 import inventoryAppRootHandler from './handlers/inventoryAppRootHandler';
  27 import { createInventoryElementsActions, createInventoryElementsProperties } from './handlers/inventoryElementsHandler';
  28 import { PanelId } from './models/panelId';
  29 import Dashboard from './views/dashboard';
  30 import { InventoryTreeView } from './views/treeview';
  31
  32 const appIcon = require('./assets/icons/inventoryAppIcon.svg');  // select app icon
  33
  34 let currentMountId: string | undefined = undefined;
  35 const mapProps = (state: IApplicationStoreState) => ({
  36   inventoryProperties: createInventoryElementsProperties(state),
  37   panelId: state.inventory.currentOpenPanel,
  38 });
  39
  40 const mapDispatch = (dispatcher: IDispatcher) => ({
  41   inventoryActions: createInventoryElementsActions(dispatcher.dispatch, true),
  42   setCurrentPanel: (panelId: PanelId) => dispatcher.dispatch(new SetPanelAction(panelId)),
  43 });
  44
  45 const InventoryTableApplicationRouteAdapter = connect(mapProps, mapDispatch)((props: RouteComponentProps<{ mountId?: string }> & Connect<typeof mapProps, typeof mapDispatch>) => {
  46   if (currentMountId !== props.match.params.mountId) {
  47     // route parameter has changed
  48     currentMountId = props.match.params.mountId || undefined;
  49     // Hint: This timeout is needed, since it is not recommended to change the state while rendering is in progress !
  50     window.setTimeout(() => {
  51       if (currentMountId) {
  52         if (props.panelId) {
  53           props.setCurrentPanel(props.panelId);
  54         } else {
  55           props.setCurrentPanel('Equipment');
  56         }
  57         props.inventoryActions.onFilterChanged('nodeId', currentMountId);
  58         if (!props.inventoryProperties.showFilter) {
  59           props.inventoryActions.onToggleFilter(false);
  60         }
  61         props.inventoryActions.onRefresh();
  62       }
  63     });
  64   }
  65   return (
  66     <Dashboard />
  67   );
  68 });
  69
  70 const App = withRouter((props: RouteComponentProps) => (
  71   <Switch>
  72     <Route path={`${props.match.path}/dashboard/:mountId`} component={InventoryTableApplicationRouteAdapter} />
  73     <Route path={`${props.match.path}/:mountId`} component={InventoryTreeView} />
  74     <Route path={`${props.match.path}`} component={Dashboard} />
  75     <Redirect to={`${props.match.path}`} />
  76   </Switch>
  77 ));
  78
  79 export function register() {
  80   applicationManager.registerApplication({
  81     name: 'inventory',
  82     icon: appIcon,
  83     rootActionHandler: inventoryAppRootHandler,
  84     rootComponent: App,
  85     menuEntry: 'Inventory',
  86   });
  87 }
  88