(plc4x) 01/02: chore: Started working on the logic for triggering scans for devices.

[cdutz]

This is an automated email from the ASF dual-hosted git repository.

cdutz pushed a commit to branch feature/new-ui-tool
in repository https://gitbox.apache.org/repos/asf/plc4x.git

commit 7371b868ccf1a0e3ab749c987b106d03b33b8984
Author: Christofer Dutz <cd...@apache.org>
AuthorDate: Mon Jan 8 08:44:39 2024 +0100

    chore: Started working on the logic for triggering scans for devices.
---
 .../frontend/src/components/NavigationTree.tsx     | 42 +++++++++++++++++++++-
 .../ui/frontend/frontend/src/model/TreeItemData.ts |  2 +-
 .../ui/frontend/frontend/src/pages/Inspect.tsx     | 21 ++++++++---
 3 files changed, 58 insertions(+), 7 deletions(-)

diff --git a/plc4j/tools/ui/frontend/frontend/src/components/NavigationTree.tsx 
b/plc4j/tools/ui/frontend/frontend/src/components/NavigationTree.tsx
index e6d4fad617..ea61db48d6 100644
--- a/plc4j/tools/ui/frontend/frontend/src/components/NavigationTree.tsx
+++ b/plc4j/tools/ui/frontend/frontend/src/components/NavigationTree.tsx
@@ -22,12 +22,38 @@ import {Tree} from "primereact/tree";
 import {TreeNode} from "primereact/treenode";
 import {IconType} from "primereact/utils";
 import 'primeicons/primeicons.css';
+import {useRef, useState} from "react";
+import {Toast} from "primereact/toast";
+import {ContextMenu} from "primereact/contextmenu";
+import {RestApplicationClient} from "../generated/plc4j-tools-ui-frontend.ts";
+import axios from "axios";
 
 type NavigationTreeProps = {
     treeItems: TreeItemData[];
 }
 
+const restClient = new RestApplicationClient(axios);
+
 export default function NavigationTree({treeItems}: NavigationTreeProps) {
+    const [selectedNodeKey, setSelectedNodeKey] = useState<string>("");
+    const toast = useRef<Toast>(null);
+    const cm = useRef<ContextMenu>(null);
+    const menu = [
+        {
+            label: 'Discover',
+            icon: 'pi pi-search',
+            command: () => {
+                restClient.discover(selectedNodeKey);
+            }
+        },
+        {
+            label: 'Add',
+            icon: 'pi pi-plus-circle',
+            command: () => {
+                console.log("Toggle")
+            }
+        }
+    ];
     function getIcon(curItem: TreeItemData):IconType<TreeNode> {
         switch (curItem.type) {
             case "DRIVER":
@@ -55,5 +81,19 @@ export default function NavigationTree({treeItems}: 
NavigationTreeProps) {
     }
 
     const treeNodes: TreeNode[] = treeItems.map(value => createTreeNode(value))
-    return <Tree value={treeNodes} selectionMode="single"/>
+    return(
+        <div>
+            <Toast ref={toast} />
+
+            <ContextMenu model={menu} ref={cm} onHide={() => 
setSelectedNodeKey("")} />
+
+            <Tree value={treeNodes} selectionMode="single"
+                  contextMenuSelectionKey={selectedNodeKey}
+                  onContextMenuSelectionChange={event => 
setSelectedNodeKey(event.value as string)}
+                  onContextMenu={event => {
+                      if(cm.current) {
+                          cm.current.show(event.originalEvent);
+                      }
+                  }}/>
+        </div>)
 }
\ No newline at end of file
diff --git a/plc4j/tools/ui/frontend/frontend/src/model/TreeItemData.ts 
b/plc4j/tools/ui/frontend/frontend/src/model/TreeItemData.ts
index 30026857fc..d015ebeb86 100644
--- a/plc4j/tools/ui/frontend/frontend/src/model/TreeItemData.ts
+++ b/plc4j/tools/ui/frontend/frontend/src/model/TreeItemData.ts
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-export type TreeItemType = "DRIVER" | "CONNECTION" | "DEVICE";
+export type TreeItemType = "ROOT" | "DRIVER" | "CONNECTION" | "DEVICE";
 
 export interface TreeItemData {
     id: string,
diff --git a/plc4j/tools/ui/frontend/frontend/src/pages/Inspect.tsx 
b/plc4j/tools/ui/frontend/frontend/src/pages/Inspect.tsx
index 00dbed9809..a224e64522 100644
--- a/plc4j/tools/ui/frontend/frontend/src/pages/Inspect.tsx
+++ b/plc4j/tools/ui/frontend/frontend/src/pages/Inspect.tsx
@@ -42,15 +42,26 @@ function getByDriverTree(driverList: Driver[], deviceList: 
Device[]):TreeItemDat
                 supportsPublishing: false
             }]
         })
-        // TODO: Now add each connection to the driver it belongs to.
         return result
     }
     return []
 }
 
-function getByDeviceTree(driverList: Driver[], deviceList: 
Device[]):TreeItemData[] {
-    if(driverList && deviceList) {
-        // TODO: Do something ...
+function getByDeviceTree(deviceList: Device[]):TreeItemData[] {
+    if(deviceList) {
+        // Group the connections by transport-url.
+        // TODO: Possibly create filters for the different types of urls (IP, 
Hostname, Port, Mac-Address, ...)
+        const deviceMap = new Map<string, Device[]>
+        deviceList.forEach(device => {
+            const devices = deviceMap.get(device.getTransportUrl)
+            if(devices) {
+                deviceMap.set(device.getTransportUrl, [...devices, device])
+            } else {
+                deviceMap.set(device.getTransportUrl, [device])
+            }
+        })
+
+        // Build a tree based on the grouped locations.
     }
     return []
 }
@@ -72,7 +83,7 @@ export default function Inspect() {
                     </TabPanel>
                     <TabPanel header="By Device">
                         <ScrollPanel style={{width: '100%', height:'100%'}}>
-                            <NavigationTree  
treeItems={getByDeviceTree(lists.driverList, lists.deviceList)}/>
+                            <NavigationTree  
treeItems={getByDeviceTree(lists.deviceList)}/>
                         </ScrollPanel>
                     </TabPanel>
                 </TabView>