sdnr/wt-odlux/odlux/apps/inventoryApp/src/views/dashboard.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
  19 import React from 'react';
  20 import { RouteComponentProps, withRouter } from 'react-router-dom';
  21
  22 import Refresh from '@mui/icons-material/Refresh';
  23 import { AppBar, MenuItem, Tab, Tabs, Typography } from '@mui/material';
  24
  25 import { NavigateToApplication } from '../../../../framework/src/actions/navigationActions';
  26 import { ColumnType, MaterialTable, MaterialTableCtorType } from '../../../../framework/src/components/material-table';
  27 import { connect, Connect, IDispatcher } from '../../../../framework/src/flux/connect';
  28 import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore';
  29
  30 import { loadAllInventoryDeviceListAsync } from '../actions/inventoryDeviceListActions';
  31 import { updateInventoryTreeAsyncAction } from '../actions/inventoryTreeActions';
  32 import { setPanelAction } from '../actions/panelActions';
  33 import RefreshInventoryDialog, { RefreshInventoryDialogMode } from '../components/refreshInventoryDialog';
  34 import { createInventoryElementsActions, createInventoryElementsProperties } from '../handlers/inventoryElementsHandler';
  35 import { InventoryType } from '../models/inventory';
  36 import { InventoryDeviceListType } from '../models/inventoryDeviceListType';
  37 import { PanelId } from '../models/panelId';
  38
  39 const InventoryTable = MaterialTable as MaterialTableCtorType<InventoryType & { _id: string }>;
  40
  41 const mapProps = (state: IApplicationStoreState) => ({
  42   panelId: state.inventory.currentOpenPanel,
  43   inventoryElementsProperties: createInventoryElementsProperties(state),
  44   inventoryElements: state.inventory.inventoryElements,
  45   inventoryDeviceList: state.inventory.inventoryDeviceList.inventoryDeviceList,
  46 });
  47
  48 const mapDispatch = (dispatcher: IDispatcher) => ({
  49   switchActivePanel: (panelId: PanelId) => {
  50     dispatcher.dispatch(setPanelAction(panelId));
  51   },
  52   inventoryElementsActions: createInventoryElementsActions(dispatcher.dispatch),
  53   navigateToApplication: (applicationName: string, path?: string) => dispatcher.dispatch(new NavigateToApplication(applicationName, path)),
  54   updateInventoryTree: (mountId: string, searchTerm?: string) => dispatcher.dispatch(updateInventoryTreeAsyncAction(mountId, searchTerm)),
  55   getAllInventoryDeviceList: async () => {
  56     await dispatcher.dispatch(loadAllInventoryDeviceListAsync);
  57   },
  58 });
  59
  60 let treeViewInitialSorted = false;
  61 let inventoryInitialSorted = false;
  62
  63 const InventoryDeviceListTable = MaterialTable as MaterialTableCtorType<InventoryDeviceListType>;
  64
  65 type DashboardComponentProps = RouteComponentProps & Connect<typeof mapProps, typeof mapDispatch>;
  66 type DashboardComponentState = {
  67   refreshInventoryEditorMode: RefreshInventoryDialogMode;
  68 };
  69
  70 class DashboardSelectorComponent extends React.Component<DashboardComponentProps, DashboardComponentState> {
  71   constructor(props: DashboardComponentProps) {
  72     super(props);
  73
  74     this.state = {
  75       refreshInventoryEditorMode: RefreshInventoryDialogMode.None,
  76     };
  77   }
  78
  79   private onHandleTabChange = (event: React.SyntheticEvent, newValue: PanelId) => {
  80     this.onTogglePanel(newValue);
  81   };
  82
  83   private onTogglePanel = (panelId: PanelId) => {
  84     const nextActivePanel = panelId;
  85     this.props.switchActivePanel(nextActivePanel);
  86
  87     switch (nextActivePanel) {
  88       case 'Equipment':
  89
  90         if (!inventoryInitialSorted) {
  91           this.props.inventoryElementsActions.onHandleExplicitRequestSort('nodeId', 'asc');
  92           inventoryInitialSorted = true;
  93         } else {
  94           this.props.inventoryElementsActions.onRefresh();
  95
  96         }
  97         break;
  98       case 'TreeView':
  99         this.props.getAllInventoryDeviceList();
 100         break;
 101       case null:
 102         // do nothing if all panels are closed
 103         break;
 104       default:
 105         console.warn('Unknown nextActivePanel [' + nextActivePanel + '] in connectView');
 106         break;
 107     }
 108
 109   };
 110
 111   getContextMenu = (rowData: InventoryType) => {
 112     return [
 113       <MenuItem aria-label={'inventory-button'} onClick={() => { this.props.updateInventoryTree(rowData.nodeId, rowData.uuid); this.props.navigateToApplication('inventory', rowData.nodeId); }}><Typography>View in Treeview</Typography></MenuItem>,
 114     ];
 115
 116   };
 117
 118   render() {
 119
 120     const refreshInventoryAction = {
 121       icon: Refresh, tooltip: 'Refresh Inventory', ariaLabel: 'refresh', onClick: () => {
 122         this.setState({
 123           refreshInventoryEditorMode: RefreshInventoryDialogMode.RefreshInventoryTable,
 124         });
 125       },
 126     };
 127     const { panelId: activePanelId } = this.props;
 128     return (
 129       <>
 130         <AppBar enableColorOnDark position="static">
 131           <Tabs indicatorColor="secondary" textColor="inherit" value={activePanelId} onChange={this.onHandleTabChange} aria-label="inventory-app-tabs">
 132             <Tab label="Equipment" value="Equipment" aria-label="equipment-tab" />
 133             <Tab label="Tree View" value="TreeView" aria-label="treeview-tab" />
 134           </Tabs>
 135         </AppBar>
 136
 137         {
 138
 139           activePanelId === 'Equipment' &&
 140           <>
 141             <InventoryTable stickyHeader idProperty="_id" tableId="inventory-table" customActionButtons={[refreshInventoryAction]} columns={[
 142               { property: 'nodeId', title: 'Node Name' },
 143               { property: 'manufacturerIdentifier', title: 'Manufacturer' },
 144               { property: 'parentUuid', title: 'Parent' },
 145               { property: 'uuid', title: 'Name' },
 146               { property: 'serial', title: 'Serial' },
 147               { property: 'version', title: 'Version' },
 148               { property: 'date', title: 'Date' },
 149               { property: 'description', title: 'Description' },
 150               { property: 'partTypeId', title: 'Part Type Id' },
 151               { property: 'modelIdentifier', title: 'Model Identifier' },
 152               { property: 'typeName', title: 'Type' },
 153               { property: 'treeLevel', title: 'Containment Level' },
 154             ]}  {...this.props.inventoryElementsActions} {...this.props.inventoryElementsProperties}
 155               createContextMenu={rowData => {
 156
 157                 return this.getContextMenu(rowData);
 158               }} >
 159             </InventoryTable>
 160             <RefreshInventoryDialog
 161               mode={this.state.refreshInventoryEditorMode}
 162               onClose={this.onCloseRefreshInventoryDialog}
 163             />
 164           </>
 165
 166         }
 167         {
 168           activePanelId === 'TreeView' &&
 169           <>
 170             <InventoryDeviceListTable stickyHeader tableId="treeview-networkelement-selection-table"
 171               defaultSortColumn={'nodeId'} defaultSortOrder="asc"
 172               onHandleClick={(e, row) => {
 173                 this.props.navigateToApplication('inventory', row.nodeId);
 174                 this.props.updateInventoryTree(row.nodeId, '*');
 175               }}
 176               rows={this.props.inventoryDeviceList} asynchronus
 177               columns={[
 178                 { property: 'nodeId', title: 'Node Name', type: ColumnType.text },
 179               ]} idProperty="nodeId" >
 180             </InventoryDeviceListTable>
 181           </>
 182         }
 183       </>
 184     );
 185   }
 186
 187   private onCloseRefreshInventoryDialog = () => {
 188     this.setState({
 189       refreshInventoryEditorMode: RefreshInventoryDialogMode.None,
 190     });
 191   };
 192
 193   componentDidMount() {
 194     if (this.props.panelId === null) { //set default tab if none is set
 195       this.onTogglePanel('Equipment');
 196     }
 197   }
 198 }
 199
 200 export const Dashboard = withRouter(connect(mapProps, mapDispatch)(DashboardSelectorComponent));
 201 export default Dashboard;
 202