From bd48b02ef30078ea591d092c226784d581e96be8 Mon Sep 17 00:00:00 2001 From: Tilen Komel Date: Wed, 18 Sep 2024 11:17:18 +0200 Subject: [PATCH 1/5] Updated traceroute response --- .../PageComponents/Messages/TraceRoute.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/PageComponents/Messages/TraceRoute.tsx b/src/components/PageComponents/Messages/TraceRoute.tsx index e2adf30e..cdc20760 100644 --- a/src/components/PageComponents/Messages/TraceRoute.tsx +++ b/src/components/PageComponents/Messages/TraceRoute.tsx @@ -18,17 +18,17 @@ export const TraceRoute = ({ return route.length === 0 ? (
- {to?.user?.longName}↔{from?.user?.longName} + {to?.user?.longName} ↔ {from?.user?.longName}
) : (
- {to?.user?.longName}↔ - {route.map((hop) => { - const node = nodes.get(hop); - return `${node?.user?.longName ?? (node?.num ? numberToHexUnpadded(node.num) : "Unknown")}↔`; - })} + {to?.user?.longName} ↔{" "} + {route.map( + (hop) => + `${nodes.get(hop)?.user?.longName ?? `!${numberToHexUnpadded(hop)}`} ↔ `, + )} {from?.user?.longName}
From 93e04e1b69674086294fa5490ab83acdaf7d8eb3 Mon Sep 17 00:00:00 2001 From: Tilen Komel Date: Wed, 18 Sep 2024 11:21:15 +0200 Subject: [PATCH 2/5] Add traceroute dialog --- .../Dialog/TracerouteResponseDialog.tsx | 46 +++++++++++++++++++ 1 file changed, 46 insertions(+) create mode 100644 src/components/Dialog/TracerouteResponseDialog.tsx diff --git a/src/components/Dialog/TracerouteResponseDialog.tsx b/src/components/Dialog/TracerouteResponseDialog.tsx new file mode 100644 index 00000000..f3b1502f --- /dev/null +++ b/src/components/Dialog/TracerouteResponseDialog.tsx @@ -0,0 +1,46 @@ +import { useDevice } from "@app/core/stores/deviceStore"; +import { + Dialog, + DialogContent, + DialogDescription, + DialogHeader, + DialogTitle, +} from "@components/UI/Dialog.js"; +import type { Protobuf, Types } from "@meshtastic/js"; +import { numberToHexUnpadded } from "@noble/curves/abstract/utils"; +import { TraceRoute } from "../PageComponents/Messages/TraceRoute"; + +export interface TracerouteResponseDialogProps { + traceroute: Types.PacketMetadata | undefined; + open: boolean; + onOpenChange: () => void; +} + +export const TracerouteResponseDialog = ({ + traceroute, + open, + onOpenChange, +}: TracerouteResponseDialogProps): JSX.Element => { + const { nodes } = useDevice(); + const route: number[] = traceroute?.data.route ?? []; + const from = nodes.get(traceroute?.from ?? 0); + const longName = + from?.user?.longName ?? + (from ? `!${numberToHexUnpadded(from?.num)}` : "Unknown"); + const shortName = + from?.user?.shortName ?? + (from ? `${numberToHexUnpadded(from?.num).substring(0, 4)}` : "UNK"); + const to = nodes.get(traceroute?.to ?? 0); + return ( + + + + {`Traceroute: ${longName} (${shortName})`} + + + + + + + ); +}; From 2a5acb877143160468af4926793a0615c62c5f84 Mon Sep 17 00:00:00 2001 From: Tilen Komel Date: Wed, 18 Sep 2024 11:34:27 +0200 Subject: [PATCH 3/5] Add node dialog --- src/components/Dialog/NodeOptionsDialog.tsx | 75 +++++++++++++++++++++ 1 file changed, 75 insertions(+) create mode 100644 src/components/Dialog/NodeOptionsDialog.tsx diff --git a/src/components/Dialog/NodeOptionsDialog.tsx b/src/components/Dialog/NodeOptionsDialog.tsx new file mode 100644 index 00000000..9269f7f9 --- /dev/null +++ b/src/components/Dialog/NodeOptionsDialog.tsx @@ -0,0 +1,75 @@ +import { toast } from "@app/core/hooks/useToast"; +import { useDevice } from "@app/core/stores/deviceStore"; +import { + Dialog, + DialogContent, + DialogHeader, + DialogTitle, +} from "@components/UI/Dialog.js"; +import type { Protobuf } from "@meshtastic/js"; +import { numberToHexUnpadded } from "@noble/curves/abstract/utils"; +import { Button } from "../UI/Button"; + +export interface NodeOptionsDialogProps { + node: Protobuf.Mesh.NodeInfo | undefined; + open: boolean; + onOpenChange: () => void; +} + +export const NodeOptionsDialog = ({ + node, + open, + onOpenChange, +}: NodeOptionsDialogProps): JSX.Element => { + const { connection } = useDevice(); + const longName = + node?.user?.longName ?? + (node ? `!${numberToHexUnpadded(node?.num)}` : "Unknown"); + const shortName = + node?.user?.shortName ?? + (node ? `${numberToHexUnpadded(node?.num).substring(0, 4)}` : "UNK"); + + function handleTraceroute() { + if (!node) return; + toast({ + title: "Sending Traceroute, please wait...", + }); + connection?.traceRoute(node.num).then(() => + toast({ + title: "Traceroute sent.", + }), + ); + onOpenChange(); + } + + function handleRequestPosition() { + if (!node) return; + toast({ + title: "Requesting position, please wait...", + }); + connection?.requestPosition(node.num).then(() => + toast({ + title: "Position request sent.", + }), + ); + onOpenChange(); + } + + return ( + + + + {`${longName} (${shortName})`} + +
+
+ +
+
+ +
+
+ + + ); +}; From 56ac1d55f41446f51d19ddbaefc5490ca38eccf7 Mon Sep 17 00:00:00 2001 From: Tilen Komel Date: Wed, 18 Sep 2024 11:34:47 +0200 Subject: [PATCH 4/5] Implement on nodes page --- src/pages/Nodes.tsx | 43 +++++++++++++++++++++++++++++++++++++++---- 1 file changed, 39 insertions(+), 4 deletions(-) diff --git a/src/pages/Nodes.tsx b/src/pages/Nodes.tsx index 038d81a8..4b6303fd 100644 --- a/src/pages/Nodes.tsx +++ b/src/pages/Nodes.tsx @@ -1,3 +1,5 @@ +import { NodeOptionsDialog } from "@app/components/Dialog/NodeOptionsDialog"; +import { TracerouteResponseDialog } from "@app/components/Dialog/TracerouteResponseDialog"; import Footer from "@app/components/UI/Footer"; import { useAppStore } from "@app/core/stores/appStore"; import { Sidebar } from "@components/Sidebar.js"; @@ -7,10 +9,10 @@ import { Table } from "@components/generic/Table/index.js"; import { TimeAgo } from "@components/generic/Table/tmp/TimeAgo.js"; import { useDevice } from "@core/stores/deviceStore.js"; import { Hashicon } from "@emeraldpay/hashicon-react"; -import { Protobuf } from "@meshtastic/js"; +import { Protobuf, type Types } from "@meshtastic/js"; import { numberToHexUnpadded } from "@noble/curves/abstract/utils"; import { LockIcon, LockOpenIcon, TrashIcon } from "lucide-react"; -import { Fragment } from "react"; +import { Fragment, useCallback, useEffect, useState } from "react"; import { base16 } from "rfc4648"; export interface DeleteNoteDialogProps { @@ -19,13 +21,36 @@ export interface DeleteNoteDialogProps { } export const NodesPage = (): JSX.Element => { - const { nodes, hardware, setDialogOpen } = useDevice(); + const { nodes, hardware, setDialogOpen, connection } = useDevice(); const { setNodeNumToBeRemoved } = useAppStore(); + const [selectedNode, setSelectedNode] = useState< + Protobuf.Mesh.NodeInfo | undefined + >(undefined); + const [selectedTraceroute, setSelectedTraceroute] = useState< + Types.PacketMetadata | undefined + >(); const filteredNodes = Array.from(nodes.values()).filter( (n) => n.num !== hardware.myNodeNum, ); + useEffect(() => { + connection?.events.onTraceRoutePacket.subscribe(handleTraceroute); + return () => { + connection?.events.onTraceRoutePacket.unsubscribe(handleTraceroute); + }; + }, [ + connection?.events.onTraceRoutePacket.subscribe, + connection?.events.onTraceRoutePacket.unsubscribe, + ]); + + const handleTraceroute = useCallback( + (traceroute: Types.PacketMetadata) => { + setSelectedTraceroute(traceroute); + }, + [], + ); + return ( <> @@ -45,7 +70,7 @@ export const NodesPage = (): JSX.Element => { ]} rows={filteredNodes.map((node) => [ , -

+

setSelectedNode(node)}> {node.user?.longName ?? (node.user?.macaddr ? `Meshtastic ${base16 @@ -105,6 +130,16 @@ export const NodesPage = (): JSX.Element => { , ])} /> + setSelectedNode(undefined)} + /> + setSelectedTraceroute(undefined)} + />