diff options
Diffstat (limited to 'sdnr/wt/odlux/apps/inventoryApp/src/views')
3 files changed, 100 insertions, 117 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'); } - } } 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('*'); } } |