Odlux Update

Add eslint and custom icons update

Issue-ID: CCSDK-3871
Signed-off-by: sai-neetha <sai-neetha.phulmali@highstreet-technologies.com>
Change-Id: If6b676128cc9cff0437a5dc54f85eaafd3b8c586
Signed-off-by: highstreetherbert <herbert.eiselt@highstreet-technologies.com>

23 files changed, 414 insertions, 294 deletions

diff --git a/sdnr/wt/odlux/apps/inventoryApp/pom.xml b/sdnr/wt/odlux/apps/inventoryApp/pom.xml
index e39e26744..c6ec595c0 100644
--- a/sdnr/wt/odlux/apps/inventoryApp/pom.xml
+++ b/sdnr/wt/odlux/apps/inventoryApp/pom.xml
@@ -19,6 +19,7 @@
   ~ ============LICENSE_END=======================================================
   ~
   -->
+
 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
     <modelVersion>4.0.0</modelVersion>
 
@@ -139,7 +140,7 @@
                         <!-- optional: default phase is "generate-resources" -->
                         <phase>initialize</phase>
                         <configuration>
-                            <nodeVersion>v12.13.0</nodeVersion>
+                            <nodeVersion>v12.22.0</nodeVersion>
                             <yarnVersion>v1.22.10</yarnVersion>
                         </configuration>
                     </execution>
diff --git a/sdnr/wt/odlux/apps/inventoryApp/src/actions/inventoryDeviceListActions.ts b/sdnr/wt/odlux/apps/inventoryApp/src/actions/inventoryDeviceListActions.ts
new file mode 100644
index 000000000..710959a2a
--- /dev/null
+++ b/sdnr/wt/odlux/apps/inventoryApp/src/actions/inventoryDeviceListActions.ts
@@ -0,0 +1,59 @@
+/**
+ * ============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 { Action } from '../../../../framework/src/flux/action';
+import { Dispatch } from '../../../../framework/src/flux/store';
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore';
+
+import { InventoryDeviceListType } from '../models/inventoryDeviceListType';
+import { inventoryService } from '../services/inventoryService';
+
+/** 
+ * Represents the base action. 
+ */
+export class BaseAction extends Action { }
+
+/** 
+ * Represents an action causing the store to load all nodes. 
+ */
+export class LoadAllInventoryDeviceListAction extends BaseAction { }
+
+/** 
+ * Represents an action causing the store to update all nodes. 
+ */
+export class AllInventoryDeviceListLoadedAction extends BaseAction {
+  /**
+   * Initialize this instance.
+   * 
+   * @param inventoryDeviceList All the distinct nodes from the Inventory  database.
+   */
+  constructor(public inventoryDeviceList: InventoryDeviceListType[] | null, public error?: string) {
+    super();
+  }
+}
+
+/** 
+ * Represents an asynchronous thunk  action to load all nodes. 
+ */
+export const loadAllInventoryDeviceListAsync = async (dispatch: Dispatch) => {
+  dispatch(new LoadAllInventoryDeviceListAction());
+  const inventoryDeviceList: InventoryDeviceListType[] = (await inventoryService.getInventoryDeviceList().then(ne =>
+    (ne))) || [];
+  return inventoryDeviceList && dispatch(new AllInventoryDeviceListLoadedAction(inventoryDeviceList));
+};
+
diff --git a/sdnr/wt/odlux/apps/inventoryApp/src/actions/inventoryTreeActions.ts b/sdnr/wt/odlux/apps/inventoryApp/src/actions/inventoryTreeActions.ts
index c09b669a1..2c6a0ed65 100644
--- a/sdnr/wt/odlux/apps/inventoryApp/src/actions/inventoryTreeActions.ts
+++ b/sdnr/wt/odlux/apps/inventoryApp/src/actions/inventoryTreeActions.ts
@@ -16,14 +16,13 @@
  * ============LICENSE_END==========================================================================
  */
 
+import { AddErrorInfoAction } from '../../../../framework/src/actions/errorActions';
+import { NavigateToApplication } from '../../../../framework/src/actions/navigationActions';
 import { Action } from '../../../../framework/src/flux/action';
 import { Dispatch } from '../../../../framework/src/flux/store';
-import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore';
 
-import { InventoryType, InventoryTreeNode, TreeDemoItem } from '../models/inventory';
+import { InventoryTreeNode, InventoryType, TreeDemoItem } from '../models/inventory';
 import { inventoryService } from '../services/inventoryService';
-import { AddErrorInfoAction } from '../../../../framework/src/actions/errorActions';
-import { NavigateToApplication } from '../../../../framework/src/actions/navigationActions';
 
 /**
  * Represents the base action.
@@ -38,7 +37,7 @@ export class SetBusyAction extends BaseAction {
 }
 
 export class SetSearchTextAction extends BaseAction {
-  constructor(public searchTerm: string = "") {
+  constructor(public searchTerm: string = '') {
     super();
 
   }
@@ -65,40 +64,38 @@ export class UpdateExpandedNodesAction extends BaseAction {
   }
 }
 
-export const setSearchTermAction = (searchTerm: string) => (dispatch: Dispatch, getState: () => IApplicationStoreState) =>{
+export const setSearchTermAction = (searchTerm: string) => (dispatch: Dispatch) =>{
   dispatch(new SetSearchTextAction(searchTerm));
-}
+};
 
 
-export const updateInventoryTreeAsyncAction = (mountId: string, searchTerm?: string) => async (dispatch: Dispatch, getState: () => IApplicationStoreState) => {
+export const updateInventoryTreeAsyncAction = (mountId: string, searchTerm?: string) => async (dispatch: Dispatch) => {
   dispatch(new SetBusyAction(true));
   dispatch(new SetSearchTextAction(searchTerm));
   try {
     const result = await inventoryService.getInventoryTree(mountId, searchTerm);
     if (!result) {
-      dispatch(new AddErrorInfoAction({ title: "Error", message: `Could not load inventory tree for [${mountId}]. Please check you connection to the server and try later.` }));
-      dispatch(new NavigateToApplication("inventory"));
+      dispatch(new AddErrorInfoAction({ title: 'Error', message: `Could not load inventory tree for [${mountId}]. Please check you connection to the server and try later.` }));
+      dispatch(new NavigateToApplication('inventory'));
     } else {
       dispatch(new UpdateInventoryTreeAction(result));
     }
   } catch (err) {
-    throw new Error("Could not load inventory tree from server.");
-  }
-  finally {
+    throw new Error('Could not load inventory tree from server.');
+  } finally {
     dispatch(new SetBusyAction(false));
   }
 };
 
-export const selectInventoryNodeAsyncAction = (nodeId: string) => async (dispatch: Dispatch, getState: () => IApplicationStoreState) => {
+export const selectInventoryNodeAsyncAction = (nodeId: string) => async (dispatch: Dispatch) => {
   dispatch(new SetBusyAction(true));
   try {
     const result = await inventoryService.getInventoryEntry(nodeId);
-    if (!result) throw new Error("Could not load inventory tree from server.");
+    if (!result) throw new Error('Could not load inventory tree from server.');
     dispatch(new UpdateSelectedNodeAction(result));
   } catch (err) {
-    throw new Error("Could not load inventory tree from server.");
-  }
-  finally {
+    throw new Error('Could not load inventory tree from server.');
+  } finally {
     dispatch(new SetBusyAction(false));
   }
 };
diff --git a/sdnr/wt/odlux/apps/inventoryApp/src/actions/panelActions.ts b/sdnr/wt/odlux/apps/inventoryApp/src/actions/panelActions.ts
index 10fde8c1d..d66608296 100644
--- a/sdnr/wt/odlux/apps/inventoryApp/src/actions/panelActions.ts
+++ b/sdnr/wt/odlux/apps/inventoryApp/src/actions/panelActions.ts
@@ -16,16 +16,16 @@
  * ============LICENSE_END==========================================================================
  */
 
-import { Action } from "../../../../framework/src/flux/action";
-import { PanelId } from "models/panelId";
+import { Action } from '../../../../framework/src/flux/action';
 
+import { PanelId } from '../models/panelId';
 
 export class SetPanelAction extends Action {
-    constructor(public panelId: PanelId) {
-      super();
-    }
+  constructor(public panelId: PanelId) {
+    super();
   }
+}
 
 export const setPanelAction = (panelId: PanelId) => {
-    return new SetPanelAction(panelId);
-  }
\ No newline at end of file
+  return new SetPanelAction(panelId);
+};
\ No newline at end of file
diff --git a/sdnr/wt/odlux/apps/inventoryApp/src/assets/icons/inventoryAppIcon.svg b/sdnr/wt/odlux/apps/inventoryApp/src/assets/icons/inventoryAppIcon.svg
new file mode 100644
index 000000000..507a835ab
--- /dev/null
+++ b/sdnr/wt/odlux/apps/inventoryApp/src/assets/icons/inventoryAppIcon.svg
@@ -0,0 +1,23 @@
+<!-- highstreet technologies GmbH colour scheme 
+	Grey	#565656
+	LBlue #36A9E1
+	DBlue #246DA2
+	Green #003F2C / #006C4B
+	Yellw #C8D400
+	Red 	#D81036
+-->
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-224 -202 882 882">
+
+<path fill="#565656" d="M 576 544 H -64 V -160 C -64 -177.673 -49.673 -192 -32 -192 H 544 C 561.673 -192 576 -177.673 576 -160 V 544 Z "/>
+
+<path fill="#ffffff" d="M 480 0 H 32 C 14.327 0 0 -14.327 0 -32 V -96 C 0 -113.673 14.327 -128 32 -128 H 480 C 497.673 -128 512 -113.673 512 -96 V -32 C 512 -14.327 497.673 0 480 0 Z M 432 -88 C 418.745 -88 408 -77.255 408 -64 S 418.745 -40 432 -40 S 456 -50.745 456 -64 S 445.255 -88 432 -88 Z M 368 -88 C 354.745 -88 344 -77.255 344 -64 S 354.745 -40 368 -40 S 392 -50.745 392 -64 S 381.255 -88 368 -88 Z "/>
+
+<path fill="#ffffff" d="M 480 160 H 32 C 14.327 160 0 145.673 0 128 V 64 C 0 46.327 14.327 32 32 32 H 480 C 497.673 32 512 46.327 512 64 V 128 C 512 145.673 497.673 160 480 160 Z M 432 72 C 418.745 72 408 82.745 408 96 S 418.745 120 432 120 S 456 109.255 456 96 S 445.255 72 432 72 Z M 368 72 C 354.745 72 344 82.745 344 96 S 354.745 120 368 120 S 392 109.255 392 96 S 381.255 72 368 72 Z "/>
+
+<path fill="#ffffff" d="M 480 320 H 32 C 14.327 320 0 305.673 0 288 V 224 C 0 206.327 14.327 192 32 192 H 480 C 497.673 192 512 206.327 512 224 V 288 C 512 305.673 497.673 320 480 320 Z M 432 232 C 418.745 232 408 242.745 408 256 S 418.745 280 432 280 S 456 269.255 456 256 S 445.255 232 432 232 Z M 368 232 C 354.745 232 344 242.745 344 256 S 354.745 280 368 280 S 392 269.255 392 256 S 381.255 232 368 232 Z "/>
+
+<path fill="#ffffff" d="M 480 480 H 32 C 14.327 480 0 465.673 0 448 V 384 C 0 366.327 14.327 352 32 352 H 480 C 497.673 352 512 366.327 512 384 V 448 C 512 465.673 497.673 480 480 480 Z M 432 392 C 418.745 392 408 402.745 408 416 S 418.745 440 432 440 S 456 429.255 456 416 S 445.255 392 432 392 Z M 368 392 C 354.745 392 344 402.745 344 416 S 354.745 440 368 440 S 392 429.255 392 416 S 381.255 392 368 392 Z"/>
+
+<path fill="#C8D400" d="M 480 670 H -96 C -155 670 -190 631 -192 574 H 576 C 575 622 543 670 480 670 Z"/>
+</svg>
diff --git a/sdnr/wt/odlux/apps/inventoryApp/src/components/refreshInventoryDialog.tsx b/sdnr/wt/odlux/apps/inventoryApp/src/components/refreshInventoryDialog.tsx
index 04658a319..027622249 100644
--- a/sdnr/wt/odlux/apps/inventoryApp/src/components/refreshInventoryDialog.tsx
+++ b/sdnr/wt/odlux/apps/inventoryApp/src/components/refreshInventoryDialog.tsx
@@ -24,78 +24,74 @@ import DialogContent from '@mui/material/DialogContent';
 import DialogContentText from '@mui/material/DialogContentText';
 import DialogTitle from '@mui/material/DialogTitle';
 
+import { connect, Connect, IDispatcher } from '../../../../framework/src/flux/connect';
 import { inventoryElementsReloadAction } from '../handlers/inventoryElementsHandler';
-import { IDispatcher, connect, Connect } from '../../../../framework/src/flux/connect';
 
 import { InventoryType } from '../models/inventory';
 
 export enum RefreshInventoryDialogMode {
-  None = "none",
-  RefreshInventoryTable = "RefreshInventoryTable",
+  None = 'none',
+  RefreshInventoryTable = 'RefreshInventoryTable',
 }
 
 const mapDispatch = (dispatcher: IDispatcher) => ({
-  refreshInventory: () => dispatcher.dispatch(inventoryElementsReloadAction)
+  refreshInventory: () => dispatcher.dispatch(inventoryElementsReloadAction),
 });
 
 type DialogSettings = {
-  dialogTitle: string,
-  dialogDescription: string,
-  applyButtonText: string,
-  cancelButtonText: string,
-  enableMountIdEditor: boolean,
-  enableUsernameEditor: boolean,
-  enableExtendedEditor: boolean,
-}
+  dialogTitle: string;
+  dialogDescription: string;
+  applyButtonText: string;
+  cancelButtonText: string;
+  enableMountIdEditor: boolean;
+  enableUsernameEditor: boolean;
+  enableExtendedEditor: boolean;
+};
 
 const settings: { [key: string]: DialogSettings } = {
   [RefreshInventoryDialogMode.None]: {
-    dialogTitle: "",
-    dialogDescription: "",
-    applyButtonText: "",
-    cancelButtonText: "",
+    dialogTitle: '',
+    dialogDescription: '',
+    applyButtonText: '',
+    cancelButtonText: '',
     enableMountIdEditor: false,
     enableUsernameEditor: false,
     enableExtendedEditor: false,
   },
   [RefreshInventoryDialogMode.RefreshInventoryTable]: {
-    dialogTitle: "Do you want to refresh the Inventory table?",
-    dialogDescription: "",
-    applyButtonText: "Yes",
-    cancelButtonText: "Cancel",
+    dialogTitle: 'Do you want to refresh the Inventory table?',
+    dialogDescription: '',
+    applyButtonText: 'Yes',
+    cancelButtonText: 'Cancel',
     enableMountIdEditor: true,
     enableUsernameEditor: true,
     enableExtendedEditor: true,
-  }
-}
+  },
+};
 
 type RefreshInventoryDialogComponentProps = Connect<undefined, typeof mapDispatch> & {
   mode: RefreshInventoryDialogMode;
   onClose: () => void;
 };
 
-type RefreshInventoryDialogComponentState = InventoryType & { isNameValid: boolean, isHostSet: boolean };
+type RefreshInventoryDialogComponentState = InventoryType & { isNameValid: boolean; isHostSet: boolean };
 
 class RefreshInventoryDialogComponent extends React.Component<RefreshInventoryDialogComponentProps, RefreshInventoryDialogComponentState> {
-  constructor(props: RefreshInventoryDialogComponentProps) {
-    super(props);
-  }
-
   render(): JSX.Element {
     const setting = settings[this.props.mode];
     return (
       <Dialog open={this.props.mode !== RefreshInventoryDialogMode.None}>
-        <DialogTitle id="form-dialog-title" aria-label={`${setting.dialogTitle.replace(/ /g, "-").toLowerCase()}-dialog`}>{setting.dialogTitle}</DialogTitle>
+        <DialogTitle id="form-dialog-title" aria-label={`${setting.dialogTitle.replace(/ /g, '-').toLowerCase()}-dialog`}>{setting.dialogTitle}</DialogTitle>
         <DialogContent>
           <DialogContentText>
             {setting.dialogDescription}
           </DialogContentText>
         </DialogContent>
         <DialogActions>
-          <Button aria-label="dialog-confirm-button" onClick={(event) => {
+          <Button aria-label="dialog-confirm-button" onClick={() => {
             this.onRefresh();
           }} color="inherit" > {setting.applyButtonText} </Button>
-          <Button aria-label="dialog-cancel-button" onClick={(event) => {
+          <Button aria-label="dialog-cancel-button" onClick={() => {
             this.onCancel();
           }} color="secondary"> {setting.cancelButtonText} </Button>
         </DialogActions>
@@ -110,7 +106,7 @@ class RefreshInventoryDialogComponent extends React.Component<RefreshInventoryDi
 
   private onCancel = () => {
     this.props.onClose();
-  }
+  };
 }
 
 export const RefreshInventoryDialog = connect(undefined, mapDispatch)(RefreshInventoryDialogComponent);
diff --git a/sdnr/wt/odlux/apps/inventoryApp/src/fakeData/index.ts b/sdnr/wt/odlux/apps/inventoryApp/src/fakeData/index.ts
index 46827e842..136b908dd 100644
--- a/sdnr/wt/odlux/apps/inventoryApp/src/fakeData/index.ts
+++ b/sdnr/wt/odlux/apps/inventoryApp/src/fakeData/index.ts
@@ -16,11 +16,10 @@
  * ============LICENSE_END==========================================================================
  */
 
-import { InventoryTreeNode, InventoryType } from "models/inventory";
 import { convertPropertyNames, replaceHyphen } from "../../../../framework/src/utilities/yangHelper";
 
-// Tree mittels tree-level und parent UUID (incl)
-// einzelabfrage mit db-id
+import { InventoryTreeNode, InventoryType } from "../models/inventory";
+
 const data = [
   { "manufacturer-identifier": "ONF-Wireless-Transport", "version": "a2.module-newest", "uuid": "a2.module-1.1.1.5", "part-type-id": "3FE25774AA01", "model-identifier": "VAUIAEYAAA", "tree-level": 2, "node-id": "robot_sim_2_equipment", "description": "WS/CORE-MAIN/a2.module#5", "type-name": "a2.module", "serial": "0003548168", "id": "robot_sim_2_equipment/a2.module-1.1.1.5", "parent-uuid": "CARD-1.1.1.0", "contained-holder": ["SUBRACK-1.15.0.0"], "date": "2005-11-09T00:00:00.0Z" },
   { "manufacturer-identifier": "SAN", "version": "234", "uuid": "CARD-1.1.6.0", "part-type-id": "part-number-12", "model-identifier": "model-id-12", "tree-level": 1, "node-id": "robot_sim_2_equipment", "description": "WS/p8.module", "type-name": "p8.module", "serial": "serial-number-124", "id": "robot_sim_2_equipment/CARD-1.1.6.0", "parent-uuid": "SHELF-1.1.0.0", "contained-holder": ["PORT-1.1.6.5", "PORT-1.1.6.8", "PORT-1.1.6.7", "PORT-1.1.6.6"], "date": "2013-11-23T00:00:00.0Z" },
diff --git a/sdnr/wt/odlux/apps/inventoryApp/src/handlers/inventoryAppRootHandler.ts b/sdnr/wt/odlux/apps/inventoryApp/src/handlers/inventoryAppRootHandler.ts
index 0e857ffe9..b1a0c581f 100644
--- a/sdnr/wt/odlux/apps/inventoryApp/src/handlers/inventoryAppRootHandler.ts
+++ b/sdnr/wt/odlux/apps/inventoryApp/src/handlers/inventoryAppRootHandler.ts
@@ -18,27 +18,23 @@
 // main state handler
 
 import { combineActionHandler } from '../../../../framework/src/flux/middleware';
-
 // ** do not remove **
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore';
-import { IActionHandler } from '../../../../framework/src/flux/action';
 
-import { IInvenroryTree, inventoryTreeHandler } from './inventoryTreeHandler';
-import { IConnectedNetworkElementsState, connectedNetworkElementsActionHandler } from './connectedNetworkElementsHandler';
 import { PanelId } from '../models/panelId';
+import { IInventoryDeviceListState, inventoryDeviceListActionHandler } from './inventoryDeviceListActionHandler';
+import { IInventoryElementsState, inventoryElementsActionHandler } from './inventoryElementsHandler';
+import { IInvenroryTree, inventoryTreeHandler } from './inventoryTreeHandler';
 import { currentOpenPanelHandler } from './panelHandler';
-import { inventoryElementsActionHandler, IInventoryElementsState } from './inventoryElementsHandler';
 
 export interface IInventoryAppStateState {
   inventoryTree: IInvenroryTree;
-  connectedNetworkElements: IConnectedNetworkElementsState; // used for ne selection
   currentOpenPanel: PanelId;
   inventoryElements: IInventoryElementsState;
+  inventoryDeviceList: IInventoryDeviceListState;
 }
 
-
-
-
 declare module '../../../../framework/src/store/applicationStore' {
   interface IApplicationStoreState {
     inventory: IInventoryAppStateState;
@@ -47,9 +43,9 @@ declare module '../../../../framework/src/store/applicationStore' {
 
 const actionHandlers = {
   inventoryTree: inventoryTreeHandler,
-  connectedNetworkElements: connectedNetworkElementsActionHandler,
   currentOpenPanel: currentOpenPanelHandler,
-  inventoryElements: inventoryElementsActionHandler
+  inventoryElements: inventoryElementsActionHandler,
+  inventoryDeviceList: inventoryDeviceListActionHandler,
 };
 
 export const inventoryAppRootHandler = combineActionHandler<IInventoryAppStateState>(actionHandlers);
diff --git a/sdnr/wt/odlux/apps/inventoryApp/src/handlers/inventoryDeviceListActionHandler.ts b/sdnr/wt/odlux/apps/inventoryApp/src/handlers/inventoryDeviceListActionHandler.ts
new file mode 100644
index 000000000..7c06cad99
--- /dev/null
+++ b/sdnr/wt/odlux/apps/inventoryApp/src/handlers/inventoryDeviceListActionHandler.ts
@@ -0,0 +1,56 @@
+/**
+ * ============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 { IActionHandler } from '../../../../framework/src/flux/action';
+
+import { AllInventoryDeviceListLoadedAction, LoadAllInventoryDeviceListAction } from '../actions/inventoryDeviceListActions';
+import { InventoryDeviceListType } from '../models/inventoryDeviceListType';
+
+export interface IInventoryDeviceListState {
+  inventoryDeviceList: InventoryDeviceListType[];
+  busy: boolean;
+}
+
+const inventoryDeviceListListStateInit: IInventoryDeviceListState = {
+  inventoryDeviceList: [],
+  busy: false,
+};
+
+export const inventoryDeviceListActionHandler: IActionHandler<IInventoryDeviceListState> = (state = inventoryDeviceListListStateInit, action) => {
+  if (action instanceof LoadAllInventoryDeviceListAction) {
+
+    state = {
+      ...state,
+      busy: true,
+    };
+
+  } else if (action instanceof AllInventoryDeviceListLoadedAction) {
+    if (!action.error && action.inventoryDeviceList) {
+      state = {
+        ...state,
+        inventoryDeviceList: action.inventoryDeviceList,
+        busy: false,
+      };
+    } else {
+      state = {
+        ...state,
+        busy: false,
+      };
+    }
+  }
+  return state;
+};
\ No newline at end of file
diff --git a/sdnr/wt/odlux/apps/inventoryApp/src/handlers/inventoryElementsHandler.ts b/sdnr/wt/odlux/apps/inventoryApp/src/handlers/inventoryElementsHandler.ts
index a65319efa..7bac8f632 100644
--- a/sdnr/wt/odlux/apps/inventoryApp/src/handlers/inventoryElementsHandler.ts
+++ b/sdnr/wt/odlux/apps/inventoryApp/src/handlers/inventoryElementsHandler.ts
@@ -15,7 +15,7 @@
  * the License.
  * ============LICENSE_END==========================================================================
  */
-import { createExternal,IExternalTableState } from '../../../../framework/src/components/material-table/utilities';
+import { createExternal, IExternalTableState } from '../../../../framework/src/components/material-table/utilities';
 import { createSearchDataHandler } from '../../../../framework/src/utilities/elasticSearch';
 
 import { InventoryType } from '../models/inventory';
@@ -23,7 +23,7 @@ import { InventoryType } from '../models/inventory';
 export interface IInventoryElementsState extends IExternalTableState<InventoryType> { }
 
 // create eleactic search material data fetch handler
-const inventoryElementsSearchHandler = createSearchDataHandler<InventoryType>("inventory");
+const inventoryElementsSearchHandler = createSearchDataHandler<InventoryType>('inventory');
 
 export const {
   actionHandler: inventoryElementsActionHandler,
diff --git a/sdnr/wt/odlux/apps/inventoryApp/src/handlers/inventoryTreeHandler.ts b/sdnr/wt/odlux/apps/inventoryApp/src/handlers/inventoryTreeHandler.ts
index 9029a6719..fe90d9820 100644
--- a/sdnr/wt/odlux/apps/inventoryApp/src/handlers/inventoryTreeHandler.ts
+++ b/sdnr/wt/odlux/apps/inventoryApp/src/handlers/inventoryTreeHandler.ts
@@ -16,10 +16,10 @@
  * ============LICENSE_END==========================================================================
  */
 
-import { IActionHandler } from "../../../../framework/src/flux/action";
+import { IActionHandler } from '../../../../framework/src/flux/action';
 
-import { SetBusyAction, UpdateInventoryTreeAction, UpdateSelectedNodeAction, SetSearchTextAction, UpdateExpandedNodesAction } from "../actions/inventoryTreeActions";
-import { InventoryTreeNode, InventoryType, TreeDemoItem } from "../models/inventory";
+import { SetBusyAction, SetSearchTextAction, UpdateExpandedNodesAction, UpdateInventoryTreeAction, UpdateSelectedNodeAction } from '../actions/inventoryTreeActions';
+import { InventoryTreeNode, InventoryType, TreeDemoItem } from '../models/inventory';
 
 
 export interface IInvenroryTree {
@@ -33,10 +33,10 @@ export interface IInvenroryTree {
 const initialState: IInvenroryTree = {
   isBusy: false,
   rootNodes: [],
-  searchTerm: "",
+  searchTerm: '',
   selectedNode: undefined,
   expandedItems: [],
-}
+};
 
 
 const getTreeDataFromInvetoryTreeNode = (node: InventoryTreeNode): TreeDemoItem[] => Object.keys(node).reduce<TreeDemoItem[]>((acc, key) => {
@@ -61,8 +61,8 @@ export const inventoryTreeHandler: IActionHandler<IInvenroryTree> = (state = ini
   } else if (action instanceof UpdateSelectedNodeAction) {
     state = { ...state, selectedNode: action.selectedNode };
   } else if (action instanceof UpdateExpandedNodesAction) {
-    state = { ...state, expandedItems: action.expandedNodes || []}
+    state = { ...state, expandedItems: action.expandedNodes || [] };
   }
 
   return state;
-}
\ No newline at end of file
+};
\ No newline at end of file
diff --git a/sdnr/wt/odlux/apps/inventoryApp/src/handlers/panelHandler.ts b/sdnr/wt/odlux/apps/inventoryApp/src/handlers/panelHandler.ts
index 761253112..7912d0ea5 100644
--- a/sdnr/wt/odlux/apps/inventoryApp/src/handlers/panelHandler.ts
+++ b/sdnr/wt/odlux/apps/inventoryApp/src/handlers/panelHandler.ts
@@ -1,11 +1,11 @@
-import { PanelId } from "../models/panelId";
-import { IActionHandler } from "../../../../framework/src/flux/action";
-import { SetPanelAction } from "../actions/panelActions";
+import { IActionHandler } from '../../../../framework/src/flux/action';
 
+import { SetPanelAction } from '../actions/panelActions';
+import { PanelId } from '../models/panelId';
 
 export const currentOpenPanelHandler: IActionHandler<PanelId> = (state = null, action) => {
-    if (action instanceof SetPanelAction) {
-      state = action.panelId;
-    }
-    return state;
-  }
\ No newline at end of file
+  if (action instanceof SetPanelAction) {
+    state = action.panelId;
+  }
+  return state;
+};
\ No newline at end of file
diff --git a/sdnr/wt/odlux/apps/inventoryApp/src/models/inventory.ts b/sdnr/wt/odlux/apps/inventoryApp/src/models/inventory.ts
index a6c990529..a09fd7e41 100644
--- a/sdnr/wt/odlux/apps/inventoryApp/src/models/inventory.ts
+++ b/sdnr/wt/odlux/apps/inventoryApp/src/models/inventory.ts
@@ -35,7 +35,7 @@ export type InventoryType = {
   partTypeId: string;
   modelIdentifier: string;
   typeName: string;
-}
+};
 
 export type InventoryTreeNode = {
   [key: string]: {
@@ -44,7 +44,7 @@ export type InventoryTreeNode = {
     isMatch?: boolean;
     ownSeverity?: string;
     childrenSeveritySummary?: string;
-  }
-}
+  };
+};
 
 export type TreeDemoItem = ExternalTreeItem<string>;
\ No newline at end of file
diff --git a/sdnr/wt/odlux/apps/inventoryApp/src/handlers/connectedNetworkElementsHandler.ts b/sdnr/wt/odlux/apps/inventoryApp/src/models/inventoryDeviceListType.ts
index e6138cc38..ab2411401 100644
--- a/sdnr/wt/odlux/apps/inventoryApp/src/handlers/connectedNetworkElementsHandler.ts
+++ b/sdnr/wt/odlux/apps/inventoryApp/src/models/inventoryDeviceListType.ts
@@ -16,21 +16,10 @@
  * ============LICENSE_END==========================================================================
  */
 
-import { createExternal, IExternalTableState } from '../../../../framework/src/components/material-table/utilities';
-import { createSearchDataHandler } from '../../../../framework/src/utilities/elasticSearch';
-
-import { NetworkElementConnection } from '../models/networkElementConnection';
-
-export interface IConnectedNetworkElementsState extends IExternalTableState<NetworkElementConnection> { }
-
-// create eleactic search material data fetch handler
-const connectedNetworkElementsSearchHandler = createSearchDataHandler<NetworkElementConnection>('network-element-connection', false, { status: "Connected" });
-
-export const {
-  actionHandler: connectedNetworkElementsActionHandler,
-  createActions: createConnectedNetworkElementsActions,
-  createProperties: createConnectedNetworkElementsProperties,
-  reloadAction: connectedNetworkElementsReloadAction,
+/**
+ * Represents all the distinct devices from the inventory history data.
+ */
 
-  // set value action, to change a value
-} = createExternal<NetworkElementConnection>(connectedNetworkElementsSearchHandler, appState => appState.inventory.connectedNetworkElements);
+export type InventoryDeviceListType = {
+  nodeId: string;
+};
diff --git a/sdnr/wt/odlux/apps/inventoryApp/src/models/networkElementConnection.ts b/sdnr/wt/odlux/apps/inventoryApp/src/models/networkElementConnection.ts
index 88f70181c..e1ef1ea2d 100644
--- a/sdnr/wt/odlux/apps/inventoryApp/src/models/networkElementConnection.ts
+++ b/sdnr/wt/odlux/apps/inventoryApp/src/models/networkElementConnection.ts
@@ -24,7 +24,7 @@ export type NetworkElementConnection = {
   username?: string;
   password?: string;
   isRequired?: boolean;
-  status?: "connected" | "mounted" | "unmounted" | "connecting" | "disconnected" | "idle";
+  status?: 'connected' | 'mounted' | 'unmounted' | 'connecting' | 'disconnected' | 'idle';
   coreModelCapability?: string;
   deviceType?: string;
   nodeDetails?: {
@@ -33,5 +33,5 @@ export type NetworkElementConnection = {
       failureReason: string;
       capability: string;
     }[];
-  }
-}
+  };
+};
diff --git a/sdnr/wt/odlux/apps/inventoryApp/src/models/panelId.ts b/sdnr/wt/odlux/apps/inventoryApp/src/models/panelId.ts
index b05c1db64..8f8224c8c 100644
--- a/sdnr/wt/odlux/apps/inventoryApp/src/models/panelId.ts
+++ b/sdnr/wt/odlux/apps/inventoryApp/src/models/panelId.ts
@@ -16,4 +16,4 @@
  * ============LICENSE_END==========================================================================
  */
 
-export type PanelId = null | "InventoryElementsTable" | "TreeviewTable";
\ No newline at end of file
+export type PanelId = null | 'Equipment' | 'TreeView';
\ No newline at end of file
diff --git a/sdnr/wt/odlux/apps/inventoryApp/src/pluginInventory.tsx b/sdnr/wt/odlux/apps/inventoryApp/src/pluginInventory.tsx
index 50339c0ab..819859919 100644
--- a/sdnr/wt/odlux/apps/inventoryApp/src/pluginInventory.tsx
+++ b/sdnr/wt/odlux/apps/inventoryApp/src/pluginInventory.tsx
@@ -16,38 +16,33 @@
 * ============LICENSE_END==========================================================================
 */
 // app configuration and main entry point for the app
+import React from 'react';
+import { Redirect, Route, RouteComponentProps, Switch, withRouter } from 'react-router-dom';
 
-import * as React from "react";
-import { withRouter, RouteComponentProps, Route, Switch, Redirect } from 'react-router-dom';
-import { faShoppingBag } from '@fortawesome/free-solid-svg-icons'; // select app icon
+import { connect, Connect, IDispatcher } from '../../../framework/src/flux/connect';
 import applicationManager from '../../../framework/src/services/applicationManager';
-import connect, { Connect, IDispatcher } from '../../../framework/src/flux/connect';
-import { IApplicationStoreState } from "../../../framework/src/store/applicationStore";
-
-import { InventoryTreeView } from './views/treeview';
+import { IApplicationStoreState } from '../../../framework/src/store/applicationStore';
+import { SetPanelAction } from './actions/panelActions';
+import inventoryAppRootHandler from './handlers/inventoryAppRootHandler';
+import { createInventoryElementsActions, createInventoryElementsProperties } from './handlers/inventoryElementsHandler';
+import { PanelId } from './models/panelId';
 import Dashboard from './views/dashboard';
+import { InventoryTreeView } from './views/treeview';
 
-import { PanelId } from "./models/panelId";
-import { SetPanelAction } from "./actions/panelActions";
-
-import inventoryAppRootHandler from './handlers/inventoryAppRootHandler';
-import { createInventoryElementsActions, createInventoryElementsProperties } from "./handlers/inventoryElementsHandler";
-import { createConnectedNetworkElementsProperties, createConnectedNetworkElementsActions } from "./handlers/connectedNetworkElementsHandler";
+const appIcon = require('./assets/icons/inventoryAppIcon.svg');  // select app icon
 
 let currentMountId: string | undefined = undefined;
 const mapProps = (state: IApplicationStoreState) => ({
   inventoryProperties: createInventoryElementsProperties(state),
   panelId: state.inventory.currentOpenPanel,
-  connectedNetworkElementsProperties: createConnectedNetworkElementsProperties(state),
 });
 
-const mapDisp = (dispatcher: IDispatcher) => ({
+const mapDispatch = (dispatcher: IDispatcher) => ({
   inventoryActions: createInventoryElementsActions(dispatcher.dispatch, true),
-  connectedNetworkElementsActions: createConnectedNetworkElementsActions(dispatcher.dispatch, true),
   setCurrentPanel: (panelId: PanelId) => dispatcher.dispatch(new SetPanelAction(panelId)),
 });
 
-const InventoryTableApplicationRouteAdapter = connect(mapProps, mapDisp)((props: RouteComponentProps<{ mountId?: string }> & Connect<typeof mapProps, typeof mapDisp>) => {
+const InventoryTableApplicationRouteAdapter = connect(mapProps, mapDispatch)((props: RouteComponentProps<{ mountId?: string }> & Connect<typeof mapProps, typeof mapDispatch>) => {
   if (currentMountId !== props.match.params.mountId) {
     // route parameter has changed
     currentMountId = props.match.params.mountId || undefined;
@@ -56,26 +51,20 @@ const InventoryTableApplicationRouteAdapter = connect(mapProps, mapDisp)((props:
       if (currentMountId) {
         if (props.panelId) {
           props.setCurrentPanel(props.panelId);
+        } else {
+          props.setCurrentPanel('Equipment');
         }
-        else {
-          props.setCurrentPanel("InventoryElementsTable");
-        }
-        props.inventoryActions.onFilterChanged("nodeId", currentMountId);
-        props.connectedNetworkElementsActions.onFilterChanged("nodeId", currentMountId);
+        props.inventoryActions.onFilterChanged('nodeId', currentMountId);
         if (!props.inventoryProperties.showFilter) {
           props.inventoryActions.onToggleFilter(false);
         }
-        if (!props.connectedNetworkElementsProperties.showFilter) {
-          props.connectedNetworkElementsActions.onToggleFilter(false);
-        }
         props.inventoryActions.onRefresh();
-        props.connectedNetworkElementsActions.onRefresh();
       }
     });
   }
   return (
     <Dashboard />
-  )
+  );
 });
 
 const App = withRouter((props: RouteComponentProps) => (
@@ -89,11 +78,11 @@ const App = withRouter((props: RouteComponentProps) => (
 
 export function register() {
   applicationManager.registerApplication({
-    name: "inventory",
-    icon: faShoppingBag,
+    name: 'inventory',
+    icon: appIcon,
     rootActionHandler: inventoryAppRootHandler,
     rootComponent: App,
-    menuEntry: "Inventory"
+    menuEntry: 'Inventory',
   });
 }
 
diff --git a/sdnr/wt/odlux/apps/inventoryApp/src/services/inventoryService.ts b/sdnr/wt/odlux/apps/inventoryApp/src/services/inventoryService.ts
index cb70bf522..4014fcf6d 100644
--- a/sdnr/wt/odlux/apps/inventoryApp/src/services/inventoryService.ts
+++ b/sdnr/wt/odlux/apps/inventoryApp/src/services/inventoryService.ts
@@ -15,54 +15,76 @@
  * the License.
  * ============LICENSE_END==========================================================================
  */
+import { Result } from '../../../../framework/src/models/elasticSearch';
 import { requestRest } from '../../../../framework/src/services/restService';
-import { convertPropertyNames, replaceHyphen } from '../../../../framework/src/utilities/yangHelper';
 
 import { InventoryTreeNode, InventoryType } from '../models/inventory';
-import { getTree, getElement } from '../fakeData';
+import { InventoryDeviceListType } from '../models/inventoryDeviceListType';
 
 /**
  * Represents a web api accessor service for all maintenence entries related actions.
  */
 class InventoryService {
-  public async getInventoryTree(mountId: string, searchTerm: string = ""): Promise<InventoryTreeNode | null> {
+  public async getInventoryTree(mountId: string, searchTerm: string = ''): Promise<InventoryTreeNode | null> {
     //return await getTree(searchTerm);
     const path = `/tree/read-inventoryequipment-tree/${mountId}`;
     const body = {
-      "query": searchTerm
+      'query': searchTerm,
     };
-    const inventoryTree = await requestRest<InventoryTreeNode>(path, { method: "POST" , body: JSON.stringify(body)});
+    const inventoryTree = await requestRest<InventoryTreeNode>(path, { method: 'POST', body: JSON.stringify(body) });
     return inventoryTree && inventoryTree || null;
   }
 
   public async getInventoryEntry(id: string): Promise<InventoryType | undefined> {
-    const path = `/rests/operations/data-provider:read-inventory-list`;
+    const path = '/rests/operations/data-provider:read-inventory-list';
     const body = {
-      "data-provider:input": {
-        "filter": [
-          { property: "id", filtervalue: id },
+      'data-provider:input': {
+        'filter': [
+          { property: 'id', filtervalue: id },
         ],
-        "sortorder": [],
-        "pagination": {
-          "size": 1,
-          "page": 1
-        }
-      }
+        'sortorder': [],
+        'pagination': {
+          'size': 1,
+          'page': 1,
+        },
+      },
     };
     const inventoryTreeElement = await requestRest<{
-      "data-provider:output": {
-        "pagination": {
-          "size": number,
-          "page": number,
-          "total": number
+      'data-provider:output': {
+        'pagination': {
+          'size': number;
+          'page': number;
+          'total': number;
+        };
+        'data': InventoryType[];
+      };
+    }>(path, { method: 'POST', body: JSON.stringify(body) });
+
+    return inventoryTreeElement && inventoryTreeElement['data-provider:output'] && inventoryTreeElement['data-provider:output'].pagination && inventoryTreeElement['data-provider:output'].pagination.total >= 1 &&
+      inventoryTreeElement['data-provider:output'].data && inventoryTreeElement['data-provider:output'].data[0] || undefined;
+    // return await getElement(id);
+  }
+
+  /**
+   * Gets all nodes from the inventory device list.
+   */
+  public async getInventoryDeviceList(): Promise<(InventoryDeviceListType)[] | null> {
+    const path = '/rests/operations/data-provider:read-inventory-device-list';
+    const query = {
+      'data-provider:input': {
+        'filter': [],
+        'sortorder': [],
+        'pagination': {
+          'size': 20,
+          'page': 1,
         },
-        "data": InventoryType[]
-      }
-    }>(path, { method: "POST", body: JSON.stringify(body) });
+      },
+    };
 
-    return inventoryTreeElement && inventoryTreeElement["data-provider:output"] && inventoryTreeElement["data-provider:output"].pagination && inventoryTreeElement["data-provider:output"].pagination.total >= 1 &&
-      inventoryTreeElement["data-provider:output"].data && inventoryTreeElement["data-provider:output"].data[0] || undefined;
-   // return await getElement(id);
+    const result = await requestRest<Result<any>>(path, { method: 'POST', body: JSON.stringify(query) });
+    return result && result['data-provider:output'] && result['data-provider:output'].data && result['data-provider:output'].data.map(ne => ({
+      nodeId: ne,
+    })) || null;
   }
 
 }
diff --git a/sdnr/wt/odlux/apps/inventoryApp/src/views/dashboard.tsx b/sdnr/wt/odlux/apps/inventoryApp/src/views/dashboard.tsx
index 284f70239..acd2c6216 100644
--- a/sdnr/wt/odlux/apps/inventoryApp/src/views/dashboard.tsx
+++ b/sdnr/wt/odlux/apps/inventoryApp/src/views/dashboard.tsx
@@ -16,99 +16,93 @@
  * ============LICENSE_END==========================================================================
  */
 
-import * as React from 'react';
+import React from 'react';
 import { RouteComponentProps, withRouter } from 'react-router-dom';
 
-import connect, { IDispatcher, Connect } from "../../../../framework/src/flux/connect";
-import { IApplicationStoreState } from "../../../../framework/src/store/applicationStore";
-import { MaterialTable, MaterialTableCtorType, ColumnType } from "../../../../framework/src/components/material-table";
-import { AppBar, Tabs, Tab, MenuItem, Typography } from "@mui/material";
 import Refresh from '@mui/icons-material/Refresh';
-import { PanelId } from "../models/panelId";
-import { setPanelAction } from "../actions/panelActions";
+import { AppBar, MenuItem, Tab, Tabs, Typography } from '@mui/material';
 
-
-import { createConnectedNetworkElementsProperties, createConnectedNetworkElementsActions } from "../handlers/connectedNetworkElementsHandler";
-
-import { NetworkElementConnection } from "../models/networkElementConnection";
-
-import { InventoryType } from '../models/inventory';
-
-import { createInventoryElementsProperties, createInventoryElementsActions } from "../handlers/inventoryElementsHandler";
 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) => ({
-  connectedNetworkElementsProperties: createConnectedNetworkElementsProperties(state),
   panelId: state.inventory.currentOpenPanel,
   inventoryElementsProperties: createInventoryElementsProperties(state),
-  inventoryElements: state.inventory.inventoryElements
+  inventoryElements: state.inventory.inventoryElements,
+  inventoryDeviceList: state.inventory.inventoryDeviceList.inventoryDeviceList,
 });
 
 const mapDispatch = (dispatcher: IDispatcher) => ({
-  connectedNetworkElementsActions: createConnectedNetworkElementsActions(dispatcher.dispatch),
   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 ConnectedElementTable = MaterialTable as MaterialTableCtorType<NetworkElementConnection>;
+const InventoryDeviceListTable = MaterialTable as MaterialTableCtorType<InventoryDeviceListType>;
 
 type DashboardComponentProps = RouteComponentProps & Connect<typeof mapProps, typeof mapDispatch>;
 type DashboardComponentState = {
-  refreshInventoryEditorMode: RefreshInventoryDialogMode
-}
+  refreshInventoryEditorMode: RefreshInventoryDialogMode;
+};
 
 class DashboardSelectorComponent extends React.Component<DashboardComponentProps, DashboardComponentState> {
   constructor(props: DashboardComponentProps) {
     super(props);
 
     this.state = {
-      refreshInventoryEditorMode: RefreshInventoryDialogMode.None
+      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 'InventoryElementsTable':
+      case 'Equipment':
 
         if (!inventoryInitialSorted) {
-          this.props.inventoryElementsActions.onHandleExplicitRequestSort("nodeId", "asc");
+          this.props.inventoryElementsActions.onHandleExplicitRequestSort('nodeId', 'asc');
           inventoryInitialSorted = true;
         } else {
           this.props.inventoryElementsActions.onRefresh();
 
         }
         break;
-      case 'TreeviewTable':
-        if (!treeViewInitialSorted) {
-          this.props.connectedNetworkElementsActions.onHandleExplicitRequestSort("nodeId", "asc");
-          treeViewInitialSorted = true;
-        } else {
-          this.props.connectedNetworkElementsActions.onRefresh();
-        }
+      case 'TreeView':
+        this.props.getAllInventoryDeviceList();
         break;
       case null:
         // do nothing if all panels are closed
         break;
       default:
-        console.warn("Unknown nextActivePanel [" + nextActivePanel + "] in connectView");
+        console.warn('Unknown nextActivePanel [' + nextActivePanel + '] in connectView');
         break;
     }
 
@@ -116,47 +110,47 @@ class DashboardSelectorComponent extends React.Component<DashboardComponentProps
 
   getContextMenu = (rowData: InventoryType) => {
     return [
-      <MenuItem aria-label={"inventory-button"} onClick={event => { this.props.updateInventoryTree(rowData.nodeId, rowData.uuid); this.props.navigateToApplication("inventory", rowData.nodeId) }}><Typography>View in Treeview</Typography></MenuItem>,
+      <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
+          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="Table View" value="InventoryElementsTable" aria-label="table-tab" />
-            <Tab label="Tree view" value="TreeviewTable" aria-label="treeview-tab" />
+            <Tab label="Equipment" value="Equipment" aria-label="equipment-tab" />
+            <Tab label="Tree View" value="TreeView" aria-label="treeview-tab" />
           </Tabs>
         </AppBar>
 
         {
 
-          activePanelId === "InventoryElementsTable" &&
+          activePanelId === 'Equipment' &&
           <>
-            <InventoryTable stickyHeader title="Inventory" 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" },
+            <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 => {
 
@@ -171,22 +165,20 @@ class DashboardSelectorComponent extends React.Component<DashboardComponentProps
 
         }
         {
-          activePanelId === "TreeviewTable" &&
-
-          <ConnectedElementTable stickyHeader tableId="treeview-networkelement-selection-table"
-            onHandleClick={(e, row) => {
-              this.props.navigateToApplication("inventory", row.nodeId);
-              this.props.updateInventoryTree(row.nodeId, '*');
-            }}
-            columns={[
-              { property: "nodeId", title: "Node Name", type: ColumnType.text },
-              { property: "isRequired", title: "Required", type: ColumnType.boolean },
-              { property: "host", title: "Host", type: ColumnType.text },
-              { property: "port", title: "Port", type: ColumnType.numeric },
-              { property: "coreModelCapability", title: "Core Model", type: ColumnType.text },
-              { property: "deviceType", title: "Type", type: ColumnType.text },
-            ]} idProperty="id" {...this.props.connectedNetworkElementsActions} {...this.props.connectedNetworkElementsProperties} asynchronus >
-          </ConnectedElementTable>
+          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>
+          </>
         }
       </>
     );
@@ -194,15 +186,14 @@ class DashboardSelectorComponent extends React.Component<DashboardComponentProps
 
   private onCloseRefreshInventoryDialog = () => {
     this.setState({
-      refreshInventoryEditorMode: RefreshInventoryDialogMode.None
+      refreshInventoryEditorMode: RefreshInventoryDialogMode.None,
     });
-  }
-  componentDidMount() {
+  };
 
+  componentDidMount() {
     if (this.props.panelId === null) { //set default tab if none is set
-      this.onTogglePanel("InventoryElementsTable");
+      this.onTogglePanel('Equipment');
     }
-
   }
 }
 
diff --git a/sdnr/wt/odlux/apps/inventoryApp/src/views/detail.tsx b/sdnr/wt/odlux/apps/inventoryApp/src/views/detail.tsx
index 252663935..8d47ec3d9 100644
--- a/sdnr/wt/odlux/apps/inventoryApp/src/views/detail.tsx
+++ b/sdnr/wt/odlux/apps/inventoryApp/src/views/detail.tsx
@@ -15,20 +15,19 @@
  * the License.
  * ============LICENSE_END==========================================================================
  */
-import * as React from "react";
-import { withRouter, RouteComponentProps } from 'react-router-dom';
+import React from 'react';
+import { RouteComponentProps, withRouter } from 'react-router-dom';
 
 import Button from '@mui/material/Button';
 import { Theme } from '@mui/material/styles'; // infra for styling
-
 import { WithStyles } from '@mui/styles';
-import withStyles from '@mui/styles/withStyles';
 import createStyles from '@mui/styles/createStyles';
+import withStyles from '@mui/styles/withStyles';
 
 const styles = (theme: Theme) => createStyles({
   warnButton: {
-    backgroundColor: theme.palette.primary.dark
-  }
+    backgroundColor: theme.palette.primary.dark,
+  },
 });
 
 type DetailProps = RouteComponentProps<{ id: string }> & WithStyles<typeof styles>;
@@ -37,8 +36,8 @@ export const Detail = withStyles( styles )( withRouter( (props: DetailProps) =>
   <div>
     <h1>Detail {props.match.params.id}</h1>
     <p>This are the information about {props.staticContext}.</p>
-    <Button color={"secondary"} variant={"contained"}>Start</Button>
-    <Button color="inherit" className={ props.classes.warnButton } variant={"contained"}>Stop</Button>
+    <Button color={'secondary'} variant={'contained'}>Start</Button>
+    <Button color="inherit" className={ props.classes.warnButton } variant={'contained'}>Stop</Button>
   </div>
 )));
 
diff --git a/sdnr/wt/odlux/apps/inventoryApp/src/views/treeview.tsx b/sdnr/wt/odlux/apps/inventoryApp/src/views/treeview.tsx
index b0e962daa..954c074c1 100644
--- a/sdnr/wt/odlux/apps/inventoryApp/src/views/treeview.tsx
+++ b/sdnr/wt/odlux/apps/inventoryApp/src/views/treeview.tsx
@@ -15,42 +15,38 @@
  * the License.
  * ============LICENSE_END==========================================================================
  */
-import * as React from "react";
-import { Theme } from '@mui/material/styles';
+import React from 'react';
 
+import Breadcrumbs from '@mui/material/Breadcrumbs';
+import Link from '@mui/material/Link';
+import { Theme } from '@mui/material/styles';
 import { WithStyles } from '@mui/styles';
-import withStyles from '@mui/styles/withStyles';
 import createStyles from '@mui/styles/createStyles';
-
+import withStyles from '@mui/styles/withStyles';
+import { RouteComponentProps } from 'react-router-dom';
+import { SearchMode, TreeView, TreeViewCtorType } from '../../../../framework/src/components/material-ui/treeView';
 import { renderObject } from '../../../../framework/src/components/objectDump';
 import { Connect, connect, IDispatcher } from '../../../../framework/src/flux/connect';
-import { TreeView, TreeViewCtorType, SearchMode } from '../../../../framework/src/components/material-ui/treeView';
+import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore';
 
-import { IApplicationStoreState } from "../../../../framework/src/store/applicationStore";
-
-import Breadcrumbs from '@mui/material/Breadcrumbs';
-import Link from '@mui/material/Link';
-
-import { updateInventoryTreeAsyncAction, selectInventoryNodeAsyncAction, UpdateSelectedNodeAction, UpdateExpandedNodesAction, setSearchTermAction } from "../actions/inventoryTreeActions";
-import { TreeDemoItem } from "../models/inventory";
-
-import { RouteComponentProps } from 'react-router-dom';
+import { selectInventoryNodeAsyncAction, setSearchTermAction, UpdateExpandedNodesAction, updateInventoryTreeAsyncAction, UpdateSelectedNodeAction } from '../actions/inventoryTreeActions';
+import { TreeDemoItem } from '../models/inventory';
 
 const styles = (theme: Theme) => createStyles({
   root: {
-    flex: "1 0 0%",
-    display: "flex",
-    flexDirection: "row",
+    flex: '1 0 0%',
+    display: 'flex',
+    flexDirection: 'row',
   },
   tree: {
-    flex: "1 0 0%",
-    minWidth: "250px",
-    padding: `0px ${theme.spacing(1)}`
+    wordWrap: 'break-word',
+    minWidth: '250px',
+    padding: `0px ${theme.spacing(1)}`,
   },
   details: {
-    flex: "5 0 0%",
-    padding: `0px ${theme.spacing(1)}`
-  }
+    flex: '5 0 0%',
+    padding: `0px ${theme.spacing(1)}`,
+  },
 });
 
 const mapProps = (state: IApplicationStoreState) => ({
@@ -68,19 +64,19 @@ const mapDispatch = (dispatcher: IDispatcher) => ({
   setSearchTerm: (searchTerm: string) => dispatcher.dispatch(setSearchTermAction(searchTerm)),
 });
 
-const propsChache = Symbol("PropsCache");
+const propsChache = Symbol('PropsCache');
 const InventoryTree = TreeView as any as TreeViewCtorType<string>;
 
 
 
-type TreeviewComponentProps = RouteComponentProps<{ mountId: string }> & WithStyles<typeof styles> & Connect<typeof mapProps, typeof mapDispatch>
+type TreeviewComponentProps = RouteComponentProps<{ mountId: string }> & WithStyles<typeof styles> & Connect<typeof mapProps, typeof mapDispatch>;
 
 type TreeviewComponentState = {
   [propsChache]: {
     rootNodes?: TreeDemoItem[];
   };
   rootNodes: TreeDemoItem[];
-}
+};
 
 
 class DashboardComponent extends React.Component<TreeviewComponentProps, TreeviewComponentState> {
@@ -96,14 +92,15 @@ class DashboardComponent extends React.Component<TreeviewComponentProps, Treevie
 
   static getDerivedStateFromProps(props: TreeviewComponentProps, state: TreeviewComponentState) {
     if (state[propsChache].rootNodes != props.rootNodes) {
-      state = { ...state, rootNodes: props.rootNodes }
+      // eslint-disable-next-line no-param-reassign
+      state = { ...state, rootNodes: props.rootNodes };
     }
     return state;
   }
 
   render() {
     const { classes, updateInventoryTree, updateExpendedNodes, expendedItems, selectedNode, selectTreeNode, searchTerm, match: { params: { mountId } } } = this.props;
-    const scrollbar = { overflow: "auto", paddingRight: "20px" }
+    const scrollbar = { overflow: 'auto', paddingRight: '20px' };
 
     let filteredDashboardPath = `/inventory/dashboard/${this.props.match.params.mountId}`;
     let basePath = `/inventory/${this.props.match.params.mountId}`;
@@ -128,6 +125,7 @@ class DashboardComponent extends React.Component<TreeviewComponentProps, Treevie
         <br />
         <div style={scrollbar} className={classes.root}>
           <InventoryTree className={classes.tree} items={this.state.rootNodes} enableSearchBar initialSearchTerm={searchTerm} searchMode={SearchMode.OnEnter} searchTerm={searchTerm}
+            // eslint-disable-next-line @typescript-eslint/no-shadow
             onSearch={(searchTerm) => updateInventoryTree(mountId, searchTerm)} expandedItems={expendedItems} onFolderClick={(item) => {
               const indexOfItemToToggle = expendedItems.indexOf(item);
               if (indexOfItemToToggle === -1) {
@@ -141,20 +139,15 @@ class DashboardComponent extends React.Component<TreeviewComponentProps, Treevie
             }}
             onItemClick={(elm) => selectTreeNode(elm.value)} />
           <div className={classes.details}>{
-            selectedNode && renderObject(selectedNode, "tree-view") || null
+            selectedNode && renderObject(selectedNode, 'tree-view') || null
           }</div>
         </div>
       </div>
     );
   }
 
-  componentDidMount() {
-    const { updateInventoryTree, searchTerm, match: { params: { mountId } } } = this.props;
-    updateInventoryTree(mountId, searchTerm);
-  }
-
   componentWillUnmount() {
-    this.props.setSearchTerm("*");
+    this.props.setSearchTerm('*');
   }
 }
 
diff --git a/sdnr/wt/odlux/apps/inventoryApp/tsconfig.json b/sdnr/wt/odlux/apps/inventoryApp/tsconfig.json
index a66b5d828..ca65092e0 100644
--- a/sdnr/wt/odlux/apps/inventoryApp/tsconfig.json
+++ b/sdnr/wt/odlux/apps/inventoryApp/tsconfig.json
@@ -4,7 +4,7 @@
     "outDir": "./dist",
     "sourceMap": true,
     "forceConsistentCasingInFileNames": true,
-    "allowSyntheticDefaultImports": false,
+    "allowSyntheticDefaultImports": true,
     "allowUnreachableCode": false,
     "allowUnusedLabels": false,
     "noFallthroughCasesInSwitch": true,
diff --git a/sdnr/wt/odlux/apps/inventoryApp/webpack.config.js b/sdnr/wt/odlux/apps/inventoryApp/webpack.config.js
index 403cc53f5..6a780560d 100644
--- a/sdnr/wt/odlux/apps/inventoryApp/webpack.config.js
+++ b/sdnr/wt/odlux/apps/inventoryApp/webpack.config.js
@@ -57,6 +57,16 @@ module.exports = (env) => {
         use: [{
           loader: "babel-loader"
         }]
+      },{
+        //don't minify images
+        test: /\.(png|gif|jpg|svg)$/,
+        use: [{
+          loader: 'url-loader',
+          options: {
+            limit: 10,
+            name: './images/[name].[ext]'
+          }
+        }]
       }]
     },
 
@@ -127,37 +137,37 @@ module.exports = (env) => {
       },
       proxy: {
         "/oauth2/": {
-          target: "http://localhost:8181",
+          target: "http://sdnc-web:8080",
           secure: false
         },
         "/database/": {
-          target: "http://localhost:8181",
+          target: "http://sdnc-web:8080",
           secure: false
         },
         "/restconf/": {
-          target: "http://localhost:8181",
+          target: "http://sdnc-web:8080",
           secure: false
         },
         "/rests/": {
-          target: "http://localhost:8181",
+          target: "http://sdnc-web:8080",
           secure: false
         },
         "/help/": {
-          target: "http://localhost:8181",
+          target: "http://sdnc-web:8080",
           secure: false
         },
         "/tree/": {
-          target: "http://localhost:8181",
+          target: "http://sdnc-web:8080",
           secure: false
         },
         "/websocket": {
-          target: "http://localhost:8181",
+          target: "http://sdnc-web:8080",
           ws: true,
           changeOrigin: true,
           secure: false
         },
         "/yang-schema": {
-          target: "http://localhost:8181",
+          target: "http://sdnc-web:8080",
           ws: true,
           changeOrigin: true,
           secure: false