From 7dbe38ba0522b346a0fcd9851e797f0fd71ecd5e Mon Sep 17 00:00:00 2001
From: Michael Dürre <michael.duerre@highstreet-technologies.com>
Date: Thu, 16 Jul 2020 05:55:07 +0200
Subject: switch to rfc8040 restconf
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

change rest interface and some small code cleanups

Issue-ID: CCSDK-2572
Signed-off-by: Michael Dürre <michael.duerre@highstreet-technologies.com>
Change-Id: I3475bd2574b32950c4bf84fbd1c2a9dac9af208a
---
 .../apps/inventoryApp/src/views/dashboard.tsx      | 195 ++++++++++++++-------
 1 file changed, 135 insertions(+), 60 deletions(-)

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

diff --git a/sdnr/wt/odlux/apps/inventoryApp/src/views/dashboard.tsx b/sdnr/wt/odlux/apps/inventoryApp/src/views/dashboard.tsx
index b63f628a3..14792df5b 100644
--- a/sdnr/wt/odlux/apps/inventoryApp/src/views/dashboard.tsx
+++ b/sdnr/wt/odlux/apps/inventoryApp/src/views/dashboard.tsx
@@ -15,88 +15,163 @@
  * the License.
  * ============LICENSE_END==========================================================================
  */
-import * as React from "react";
-import { withStyles, WithStyles, createStyles, Theme } from '@material-ui/core/styles';
 
-import { Connect, connect, IDispatcher } from '../../../../framework/src/flux/connect';
-import { MaterialTable, MaterialTableCtorType } from '../../../../framework/src/components/material-table';
-import { TreeView, TreeItem, TreeViewCtorType } from '../../../../framework/src/components/material-ui/treeView';
+import * as React from 'react';
+import { RouteComponentProps, withRouter } from 'react-router-dom';
 
-import { InventoryType } from '../models/inventory';
+import connect, { IDispatcher, Connect } from "../../../../framework/src/flux/connect";
 import { IApplicationStoreState } from "../../../../framework/src/store/applicationStore";
-import { createInventoryElementsProperties, createInventoryElementsActions } from "../handlers/inventoryElementsHandler";
+import { MaterialTable, MaterialTableCtorType, ColumnType } from "../../../../framework/src/components/material-table";
+import { AppBar, Tabs, Tab, MenuItem, Typography } from "@material-ui/core";
+import { PanelId } from "../models/panelId";
+import { setPanelAction } from "../actions/panelActions";
 
-const styles = (theme: Theme) => createStyles({
-  root: {
-    flex: "1 0 0%",
-    display: "flex",
-    flexDirection: "row",
-  },
-  tree: {
-    flex: "1 0 0%",
-    minWidth: "250px",
-    padding: `0px ${theme.spacing(1)}px`
-  },
-  details: {
-    flex: "5 0 0%",
-    padding: `0px ${theme.spacing(1)}px`
-  }
-});
 
-const InventoryTable = MaterialTable as MaterialTableCtorType<InventoryType & {_id: string}>;
+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 { updateInventoryTreeAsyncAction } from '../actions/inventoryTreeActions';
+
+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
 });
 
 const mapDispatch = (dispatcher: IDispatcher) => ({
-  inventoryElementsActions: createInventoryElementsActions(dispatcher.dispatch)
+  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, seatchTerm?: string) => dispatcher.dispatch(updateInventoryTreeAsyncAction(mountId, seatchTerm)),
 });
 
-const SampleTree = TreeView as any as TreeViewCtorType<string>;
+let treeViewInitialSorted = false;
+let inventoryInitialSorted = false;
 
+const ConnectedElementTable = MaterialTable as MaterialTableCtorType<NetworkElementConnection>;
 
-type TreeDemoItem = TreeItem<string>;
+type DashboardComponentProps = RouteComponentProps & Connect<typeof mapProps, typeof mapDispatch>;
 
-const treeData: TreeDemoItem[] = [
-  {
-    content: "Erste Ebene", children: [
-      {
-        content: "Zweite Ebene", children: [
-          { content: "Dritte Ebene" },
-        ]
-      },
-      { content: "Zweite Ebene 2" },
-    ]
-  },
-  { content: "Erste Ebene 3" },
-];
+class DashboardSelectorComponent extends React.Component<DashboardComponentProps> {
+
+  private onHandleTabChange = (event: React.ChangeEvent<{}>, newValue: PanelId) => {
+    this.onTogglePanel(newValue);
+  }
+
+  private onTogglePanel = (panelId: PanelId) => {
+    const nextActivePanel = panelId;
+    this.props.switchActivePanel(nextActivePanel);
+
+    switch (nextActivePanel) {
+      case 'InventoryElementsTable':
+
+        if (!inventoryInitialSorted) {
+          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();
+        }
+        break;
+      case null:
+        // do nothing if all panels are closed
+        break;
+      default:
+        console.warn("Unknown nextActivePanel [" + nextActivePanel + "] in connectView");
+        break;
+    }
+
+  };
+
+  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>,
+    ];
+
+  }
 
-class DashboardComponent extends React.Component<& WithStyles<typeof styles> & Connect<typeof mapProps, typeof mapDispatch>> {
   render() {
-    return <InventoryTable stickyHeader title="Inventory" idProperty="_id" 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} >
-    </InventoryTable>
+
+    const { panelId: activePanelId } = this.props;
+    return (
+      <>
+        <AppBar position="static">
+          <Tabs value={activePanelId} onChange={this.onHandleTabChange} aria-label="simple tabs example">
+            <Tab label="Table View" value="InventoryElementsTable" />
+            <Tab label="Tree view" value="TreeviewTable" />
+          </Tabs>
+        </AppBar>
+
+        {
+
+          activePanelId === "InventoryElementsTable" &&
+
+          <InventoryTable stickyHeader title="Inventory" idProperty="_id" 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 => {
+
+              return this.getContextMenu(rowData);
+            }} >
+          </InventoryTable>
+
+        }
+        {
+          activePanelId === "TreeviewTable" &&
+
+          <ConnectedElementTable stickyHeader onHandleClick={(e, row) => { this.props.history.push(`${this.props.match.path}/${row.nodeId}`) }} columns={[
+            { property: "nodeId", title: "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>
+        }
+      </>
+    );
   }
 
   componentDidMount() {
-    this.props.inventoryElementsActions.onToggleFilter();
-    this.props.inventoryElementsActions.onHandleRequestSort("node-id");
+
+    if (this.props.panelId === null) { //set default tab if none is set
+      this.onTogglePanel("InventoryElementsTable");
+    }
+
   }
 }
 
-export const Dashboard = connect(mapProps, mapDispatch)(withStyles(styles)(DashboardComponent));
-export default Dashboard;
\ No newline at end of file
+export const Dashboard = withRouter(connect(mapProps, mapDispatch)(DashboardSelectorComponent));
+export default Dashboard;
+
-- 
cgit 1.2.3-korg

