diff options
author | Aijana Schumann <aijana.schumann@highstreet-technologies.com> | 2021-07-30 09:03:14 +0200 |
---|---|---|
committer | Aijana Schumann <aijana.schumann@highstreet-technologies.com> | 2021-07-30 09:03:14 +0200 |
commit | 948204ee82cd6c2c0cedf2820eec0610a9df7185 (patch) | |
tree | 88ddc92346e61721955ed354db9f49a1f288cdc6 /sdnr/wt/odlux/apps/inventoryApp/src/views | |
parent | e4f3ee3ce9264c6ca41928e49c3075d4ca99eb0f (diff) |
Update InventoryApp
Fix several bugs and improve usability
Issue-ID: CCSDK-3395
Signed-off-by: Aijana Schumann <aijana.schumann@highstreet-technologies.com>
Change-Id: I25a3badc2d179ccc99ffd38e860046dbfd771df1
Diffstat (limited to 'sdnr/wt/odlux/apps/inventoryApp/src/views')
-rw-r--r-- | sdnr/wt/odlux/apps/inventoryApp/src/views/dashboard.tsx | 28 | ||||
-rw-r--r-- | sdnr/wt/odlux/apps/inventoryApp/src/views/treeview.tsx | 65 |
2 files changed, 59 insertions, 34 deletions
diff --git a/sdnr/wt/odlux/apps/inventoryApp/src/views/dashboard.tsx b/sdnr/wt/odlux/apps/inventoryApp/src/views/dashboard.tsx index 11427fba9..b672dc336 100644 --- a/sdnr/wt/odlux/apps/inventoryApp/src/views/dashboard.tsx +++ b/sdnr/wt/odlux/apps/inventoryApp/src/views/dashboard.tsx @@ -55,7 +55,7 @@ const mapDispatch = (dispatcher: IDispatcher) => ({ }, inventoryElementsActions: createInventoryElementsActions(dispatcher.dispatch), navigateToApplication: (applicationName: string, path?: string) => dispatcher.dispatch(new NavigateToApplication(applicationName, path)), - updateInventoryTree: (mountId: string, seatchTerm?: string) => dispatcher.dispatch(updateInventoryTreeAsyncAction(mountId, seatchTerm)), + updateInventoryTree: (mountId: string, searchTerm?: string) => dispatcher.dispatch(updateInventoryTreeAsyncAction(mountId, searchTerm)), }); let treeViewInitialSorted = false; @@ -173,19 +173,19 @@ class DashboardSelectorComponent extends React.Component<DashboardComponentProps { activePanelId === "TreeviewTable" && - <ConnectedElementTable stickyHeader tableId="treeview-networkelement-selection-table" - onHandleClick={(e, row) => { - this.props.history.push(`${this.props.match.path}/${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 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> } </> diff --git a/sdnr/wt/odlux/apps/inventoryApp/src/views/treeview.tsx b/sdnr/wt/odlux/apps/inventoryApp/src/views/treeview.tsx index 9544861ef..cfcfd3fec 100644 --- a/sdnr/wt/odlux/apps/inventoryApp/src/views/treeview.tsx +++ b/sdnr/wt/odlux/apps/inventoryApp/src/views/treeview.tsx @@ -24,10 +24,13 @@ import { TreeView, TreeViewCtorType, SearchMode } from '../../../../framework/sr import { IApplicationStoreState } from "../../../../framework/src/store/applicationStore"; +import Breadcrumbs from '@material-ui/core/Breadcrumbs'; +import Link from '@material-ui/core/Link'; + import { updateInventoryTreeAsyncAction, selectInventoryNodeAsyncAction, UpdateSelectedNodeAction, UpdateExpandedNodesAction, setSearchTermAction } from "../actions/inventoryTreeActions"; import { TreeDemoItem } from "../models/inventory"; -import { RouteComponentProps } from "react-router-dom"; +import { RouteComponentProps } from 'react-router-dom'; const styles = (theme: Theme) => createStyles({ root: { @@ -56,7 +59,7 @@ const mapProps = (state: IApplicationStoreState) => ({ const mapDispatch = (dispatcher: IDispatcher) => ({ updateExpendedNodes: (expendedNodes: TreeDemoItem[]) => dispatcher.dispatch(new UpdateExpandedNodesAction(expendedNodes)), - updateInventoryTree: (mountId: string, seatchTerm?: string) => dispatcher.dispatch(updateInventoryTreeAsyncAction(mountId, seatchTerm)), + updateInventoryTree: (mountId: string, searchTerm?: string) => dispatcher.dispatch(updateInventoryTreeAsyncAction(mountId, searchTerm)), selectTreeNode: (nodeId?: string) => nodeId ? dispatcher.dispatch(selectInventoryNodeAsyncAction(nodeId)) : dispatcher.dispatch(new UpdateSelectedNodeAction(undefined)), setSearchTerm: (searchTerm: string) => dispatcher.dispatch(setSearchTermAction(searchTerm)), }); @@ -97,24 +100,46 @@ class DashboardComponent extends React.Component<TreeviewComponentProps, Treevie render() { const { classes, updateInventoryTree, updateExpendedNodes, expendedItems, selectedNode, selectTreeNode, searchTerm, match: { params: { mountId } } } = this.props; const scrollbar = { overflow: "auto", paddingRight: "20px" } + + let filteredDashboardPath = `/inventory/dashboard/${this.props.match.params.mountId}`; + let basePath = `/inventory/${this.props.match.params.mountId}`; + return ( - <div style={scrollbar} className={classes.root}> - <InventoryTree className={classes.tree} items={this.state.rootNodes} enableSearchBar initialSearchTerm={searchTerm} searchMode={SearchMode.OnEnter} searchTerm={searchTerm} - onSearch={(searchTerm) => updateInventoryTree(mountId, searchTerm)} expandedItems={expendedItems} onFolderClick={(item) => { - const indexOfItemToToggle = expendedItems.indexOf(item); - if (indexOfItemToToggle === -1) { - updateExpendedNodes([...expendedItems, item]); - } else { - updateExpendedNodes([ - ...expendedItems.slice(0, indexOfItemToToggle), - ...expendedItems.slice(indexOfItemToToggle + 1), - ]); - } - }} - onItemClick={(elm) => selectTreeNode(elm.value)} /> - <div className={classes.details}>{ - selectedNode && renderObject(selectedNode, "tree-view") || null - }</div> + <div style={scrollbar} > + <div > + <Breadcrumbs aria-label="breadcrumbs"> + <Link color="inherit" href="#" aria-label="back-breadcrumb" + onClick={(event: React.MouseEvent<HTMLElement>) => { + event.preventDefault(); + this.props.history.push(filteredDashboardPath); + }}>Back</Link> + <Link color="inherit" href="#" + aria-label={this.props.match.params.mountId + '-breadcrumb'} + onClick={(event: React.MouseEvent<HTMLElement>) => { + event.preventDefault(); + this.props.history.push(basePath); + }}><span>{this.props.match.params.mountId}</span></Link> + </Breadcrumbs> + </div> + <br /> + <div style={scrollbar} className={classes.root}> + <InventoryTree className={classes.tree} items={this.state.rootNodes} enableSearchBar initialSearchTerm={searchTerm} searchMode={SearchMode.OnEnter} searchTerm={searchTerm} + onSearch={(searchTerm) => updateInventoryTree(mountId, searchTerm)} expandedItems={expendedItems} onFolderClick={(item) => { + const indexOfItemToToggle = expendedItems.indexOf(item); + if (indexOfItemToToggle === -1) { + updateExpendedNodes([...expendedItems, item]); + } else { + updateExpendedNodes([ + ...expendedItems.slice(0, indexOfItemToToggle), + ...expendedItems.slice(indexOfItemToToggle + 1), + ]); + } + }} + onItemClick={(elm) => selectTreeNode(elm.value)} /> + <div className={classes.details}>{ + selectedNode && renderObject(selectedNode, "tree-view") || null + }</div> + </div> </div> ); } @@ -125,7 +150,7 @@ class DashboardComponent extends React.Component<TreeviewComponentProps, Treevie } componentWillUnmount() { - this.props.setSearchTerm(""); + this.props.setSearchTerm("*"); } } |