From 15e2d3a29b0d1a304965e34f114a911e5a7abdb3 Mon Sep 17 00:00:00 2001
From: sai-neetha <sai-neetha.phulmali@highstreet-technologies.com>
Date: Mon, 20 Mar 2023 08:05:47 +0100
Subject: 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>
---
 .../apps/inventoryApp/src/views/dashboard.tsx      | 139 ++++++++++-----------
 .../odlux/apps/inventoryApp/src/views/detail.tsx   |  15 ++-
 .../odlux/apps/inventoryApp/src/views/treeview.tsx |  63 +++++-----
 3 files changed, 100 insertions(+), 117 deletions(-)

(limited to 'sdnr/wt/odlux/apps/inventoryApp/src/views')

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('*');
   }
 }
 
-- 
cgit 1.2.3-korg