diff options
Diffstat (limited to 'sdnr/wt/odlux/apps/inventoryApp/src/views/dashboard.tsx')
-rw-r--r-- | sdnr/wt/odlux/apps/inventoryApp/src/views/dashboard.tsx | 139 |
1 files changed, 65 insertions, 74 deletions
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'); } - } } |