1 files changed, 202 insertions, 0 deletions
diff --git a/sdnr/wt-odlux/odlux/apps/inventoryApp/src/views/dashboard.tsx b/sdnr/wt-odlux/odlux/apps/inventoryApp/src/views/dashboard.tsx
new file mode 100644
index 000000000..acd2c6216
--- /dev/null
+++ b/sdnr/wt-odlux/odlux/apps/inventoryApp/src/views/dashboard.tsx
@@ -0,0 +1,202 @@
+/**
+ * ============LICENSE_START========================================================================
+ * ONAP : ccsdk feature sdnr wt odlux
+ * =================================================================================================
+ * Copyright (C) 2019 highstreet technologies GmbH Intellectual Property. All rights reserved.
+ * =================================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License
+ * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing permissions and limitations under
+ * the License.
+ * ============LICENSE_END==========================================================================
+ */
+
+import React from 'react';
+import { RouteComponentProps, withRouter } from 'react-router-dom';
+
+import Refresh from '@mui/icons-material/Refresh';
+import { AppBar, MenuItem, Tab, Tabs, Typography } from '@mui/material';
+
+import { NavigateToApplication } from '../../../../framework/src/actions/navigationActions';
+import { ColumnType, MaterialTable, MaterialTableCtorType } from '../../../../framework/src/components/material-table';
+import { connect, Connect, IDispatcher } from '../../../../framework/src/flux/connect';
+import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore';
+
+import { loadAllInventoryDeviceListAsync } from '../actions/inventoryDeviceListActions';
+import { updateInventoryTreeAsyncAction } from '../actions/inventoryTreeActions';
+import { setPanelAction } from '../actions/panelActions';
+import RefreshInventoryDialog, { RefreshInventoryDialogMode } from '../components/refreshInventoryDialog';
+import { createInventoryElementsActions, createInventoryElementsProperties } from '../handlers/inventoryElementsHandler';
+import { InventoryType } from '../models/inventory';
+import { InventoryDeviceListType } from '../models/inventoryDeviceListType';
+import { PanelId } from '../models/panelId';
+
+const InventoryTable = MaterialTable as MaterialTableCtorType<InventoryType & { _id: string }>;
+
+const mapProps = (state: IApplicationStoreState) => ({
+  panelId: state.inventory.currentOpenPanel,
+  inventoryElementsProperties: createInventoryElementsProperties(state),
+  inventoryElements: state.inventory.inventoryElements,
+  inventoryDeviceList: state.inventory.inventoryDeviceList.inventoryDeviceList,
+});
+
+const mapDispatch = (dispatcher: IDispatcher) => ({
+  switchActivePanel: (panelId: PanelId) => {
+    dispatcher.dispatch(setPanelAction(panelId));
+  },
+  inventoryElementsActions: createInventoryElementsActions(dispatcher.dispatch),
+  navigateToApplication: (applicationName: string, path?: string) => dispatcher.dispatch(new NavigateToApplication(applicationName, path)),
+  updateInventoryTree: (mountId: string, searchTerm?: string) => dispatcher.dispatch(updateInventoryTreeAsyncAction(mountId, searchTerm)),
+  getAllInventoryDeviceList: async () => {
+    await dispatcher.dispatch(loadAllInventoryDeviceListAsync);
+  },
+});
+
+let treeViewInitialSorted = false;
+let inventoryInitialSorted = false;
+
+const InventoryDeviceListTable = MaterialTable as MaterialTableCtorType<InventoryDeviceListType>;
+
+type DashboardComponentProps = RouteComponentProps & Connect<typeof mapProps, typeof mapDispatch>;
+type DashboardComponentState = {
+  refreshInventoryEditorMode: RefreshInventoryDialogMode;
+};
+
+class DashboardSelectorComponent extends React.Component<DashboardComponentProps, DashboardComponentState> {
+  constructor(props: DashboardComponentProps) {
+    super(props);
+
+    this.state = {
+      refreshInventoryEditorMode: RefreshInventoryDialogMode.None,
+    };
+  }
+
+  private onHandleTabChange = (event: React.SyntheticEvent, newValue: PanelId) => {
+    this.onTogglePanel(newValue);
+  };
+
+  private onTogglePanel = (panelId: PanelId) => {
+    const nextActivePanel = panelId;
+    this.props.switchActivePanel(nextActivePanel);
+
+    switch (nextActivePanel) {
+      case 'Equipment':
+
+        if (!inventoryInitialSorted) {
+          this.props.inventoryElementsActions.onHandleExplicitRequestSort('nodeId', 'asc');
+          inventoryInitialSorted = true;
+        } else {
+          this.props.inventoryElementsActions.onRefresh();
+
+        }
+        break;
+      case 'TreeView':
+        this.props.getAllInventoryDeviceList();
+        break;
+      case null:
+        // do nothing if all panels are closed
+        break;
+      default:
+        console.warn('Unknown nextActivePanel [' + nextActivePanel + '] in connectView');
+        break;
+    }
+
+  };
+
+  getContextMenu = (rowData: InventoryType) => {
+    return [
+      <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>,
+    ];
+
+  };
+
+  render() {
+
+    const refreshInventoryAction = {
+      icon: Refresh, tooltip: 'Refresh Inventory', ariaLabel: 'refresh', onClick: () => {
+        this.setState({
+          refreshInventoryEditorMode: RefreshInventoryDialogMode.RefreshInventoryTable,
+        });
+      },
+    };
+    const { panelId: activePanelId } = this.props;
+    return (
+      <>
+        <AppBar enableColorOnDark position="static">
+          <Tabs indicatorColor="secondary" textColor="inherit" value={activePanelId} onChange={this.onHandleTabChange} aria-label="inventory-app-tabs">
+            <Tab label="Equipment" value="Equipment" aria-label="equipment-tab" />
+            <Tab label="Tree View" value="TreeView" aria-label="treeview-tab" />
+          </Tabs>
+        </AppBar>
+
+        {
+
+          activePanelId === 'Equipment' &&
+          <>
+            <InventoryTable stickyHeader idProperty="_id" tableId="inventory-table" customActionButtons={[refreshInventoryAction]} columns={[
+              { property: 'nodeId', title: 'Node Name' },
+              { property: 'manufacturerIdentifier', title: 'Manufacturer' },
+              { property: 'parentUuid', title: 'Parent' },
+              { property: 'uuid', title: 'Name' },
+              { property: 'serial', title: 'Serial' },
+              { property: 'version', title: 'Version' },
+              { property: 'date', title: 'Date' },
+              { property: 'description', title: 'Description' },
+              { property: 'partTypeId', title: 'Part Type Id' },
+              { property: 'modelIdentifier', title: 'Model Identifier' },
+              { property: 'typeName', title: 'Type' },
+              { property: 'treeLevel', title: 'Containment Level' },
+            ]}  {...this.props.inventoryElementsActions} {...this.props.inventoryElementsProperties}
+              createContextMenu={rowData => {
+
+                return this.getContextMenu(rowData);
+              }} >
+            </InventoryTable>
+            <RefreshInventoryDialog
+              mode={this.state.refreshInventoryEditorMode}
+              onClose={this.onCloseRefreshInventoryDialog}
+            />
+          </>
+
+        }
+        {
+          activePanelId === 'TreeView' &&
+          <>
+            <InventoryDeviceListTable stickyHeader tableId="treeview-networkelement-selection-table"
+              defaultSortColumn={'nodeId'} defaultSortOrder="asc"
+              onHandleClick={(e, row) => {
+                this.props.navigateToApplication('inventory', row.nodeId);
+                this.props.updateInventoryTree(row.nodeId, '*');
+              }}
+              rows={this.props.inventoryDeviceList} asynchronus
+              columns={[
+                { property: 'nodeId', title: 'Node Name', type: ColumnType.text },
+              ]} idProperty="nodeId" >
+            </InventoryDeviceListTable>
+          </>
+        }
+      </>
+    );
+  }
+
+  private onCloseRefreshInventoryDialog = () => {
+    this.setState({
+      refreshInventoryEditorMode: RefreshInventoryDialogMode.None,
+    });
+  };
+
+  componentDidMount() {
+    if (this.props.panelId === null) { //set default tab if none is set
+      this.onTogglePanel('Equipment');
+    }
+  }
+}
+
+export const Dashboard = withRouter(connect(mapProps, mapDispatch)(DashboardSelectorComponent));
+export default Dashboard;
+