From 948204ee82cd6c2c0cedf2820eec0610a9df7185 Mon Sep 17 00:00:00 2001 From: Aijana Schumann Date: Fri, 30 Jul 2021 09:03:14 +0200 Subject: Update InventoryApp Fix several bugs and improve usability Issue-ID: CCSDK-3395 Signed-off-by: Aijana Schumann Change-Id: I25a3badc2d179ccc99ffd38e860046dbfd771df1 --- sdnr/wt/odlux/apps/inventoryApp/src/index.html | 3 +- .../apps/inventoryApp/src/pluginInventory.tsx | 56 ++++++++++++++++++- .../inventoryApp/src/services/inventoryService.ts | 4 +- .../apps/inventoryApp/src/views/dashboard.tsx | 28 +++++----- .../odlux/apps/inventoryApp/src/views/treeview.tsx | 65 +++++++++++++++------- sdnr/wt/odlux/odlux.properties | 2 +- 6 files changed, 118 insertions(+), 40 deletions(-) (limited to 'sdnr/wt') diff --git a/sdnr/wt/odlux/apps/inventoryApp/src/index.html b/sdnr/wt/odlux/apps/inventoryApp/src/index.html index 21f31300f..2c44424dd 100644 --- a/sdnr/wt/odlux/apps/inventoryApp/src/index.html +++ b/sdnr/wt/odlux/apps/inventoryApp/src/index.html @@ -15,10 +15,11 @@ diff --git a/sdnr/wt/odlux/apps/inventoryApp/src/pluginInventory.tsx b/sdnr/wt/odlux/apps/inventoryApp/src/pluginInventory.tsx index 665e085e6..50339c0ab 100644 --- a/sdnr/wt/odlux/apps/inventoryApp/src/pluginInventory.tsx +++ b/sdnr/wt/odlux/apps/inventoryApp/src/pluginInventory.tsx @@ -21,16 +21,68 @@ 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 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 Dashboard from "./views/dashboard"; +import Dashboard from './views/dashboard'; + +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"; + +let currentMountId: string | undefined = undefined; +const mapProps = (state: IApplicationStoreState) => ({ + inventoryProperties: createInventoryElementsProperties(state), + panelId: state.inventory.currentOpenPanel, + connectedNetworkElementsProperties: createConnectedNetworkElementsProperties(state), +}); + +const mapDisp = (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) => { + if (currentMountId !== props.match.params.mountId) { + // route parameter has changed + currentMountId = props.match.params.mountId || undefined; + // Hint: This timeout is needed, since it is not recommended to change the state while rendering is in progress ! + window.setTimeout(() => { + if (currentMountId) { + if (props.panelId) { + props.setCurrentPanel(props.panelId); + } + else { + props.setCurrentPanel("InventoryElementsTable"); + } + props.inventoryActions.onFilterChanged("nodeId", currentMountId); + props.connectedNetworkElementsActions.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 ( + + ) +}); const App = withRouter((props: RouteComponentProps) => ( + - + )); diff --git a/sdnr/wt/odlux/apps/inventoryApp/src/services/inventoryService.ts b/sdnr/wt/odlux/apps/inventoryApp/src/services/inventoryService.ts index cf25a40a8..cb70bf522 100644 --- a/sdnr/wt/odlux/apps/inventoryApp/src/services/inventoryService.ts +++ b/sdnr/wt/odlux/apps/inventoryApp/src/services/inventoryService.ts @@ -32,7 +32,7 @@ class InventoryService { "query": searchTerm }; const inventoryTree = await requestRest(path, { method: "POST" , body: JSON.stringify(body)}); - return inventoryTree && convertPropertyNames(inventoryTree, replaceHyphen) || null; + return inventoryTree && inventoryTree || null; } public async getInventoryEntry(id: string): Promise { @@ -61,7 +61,7 @@ class InventoryService { }>(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 && convertPropertyNames(inventoryTreeElement["data-provider:output"].data[0], replaceHyphen) || undefined; + inventoryTreeElement["data-provider:output"].data && inventoryTreeElement["data-provider:output"].data[0] || undefined; // return await getElement(id); } 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 { - 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 > + { + 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 > } 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 - 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)} /> -
{ - selectedNode && renderObject(selectedNode, "tree-view") || null - }
+
+
+ + ) => { + event.preventDefault(); + this.props.history.push(filteredDashboardPath); + }}>Back + ) => { + event.preventDefault(); + this.props.history.push(basePath); + }}>{this.props.match.params.mountId} + +
+
+
+ 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)} /> +
{ + selectedNode && renderObject(selectedNode, "tree-view") || null + }
+
); } @@ -125,7 +150,7 @@ class DashboardComponent extends React.Component