Skip to content

Commit

Permalink
show trace route path toward and back
Browse files Browse the repository at this point in the history
  • Loading branch information
@liamcottle
liamcottle committed Dec 4, 2024
1 parent a61eb6f commit 6dcc35e
Show file tree
Hide file tree
Showing 3 changed files with 117 additions and 62 deletions.
6 changes: 3 additions & 3 deletions src/components/pages/NodeTraceRoutesPage.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
<span class="font-medium">{{ getNodeLongName(traceRoute.from) || '???' }}</span>
</div>
<div class="text-sm text-gray-700">
{{ getTimeAgo(new Date(traceRoute.timestamp)) }} • {{ traceRoute.data.route.length }} hop(s) on channel {{ getChannelName(traceRoute.channel) }}
{{ formatDateTime(new Date(traceRoute.timestamp)) }} • {{ traceRoute.data.route.length }} {{ traceRoute.data.route.length === 1 ? 'hop' : 'hops' }} on {{ getChannelName(traceRoute.channel) }}
</div>
</div>
</div>
Expand Down Expand Up @@ -98,9 +98,9 @@ export default {
},
methods: {
getNodeLongName: (nodeId) => NodeUtils.getNodeLongName(nodeId),
getTimeAgo: (date) => TimeUtils.getTimeAgo(date),
formatDateTime: (date) => TimeUtils.formatDateTime(date),
getChannelName: (channelId) => {
return ChannelUtils.getChannelName(channelId) || `#${channelId}`;
return ChannelUtils.getChannelName(channelId) || `channel #${channelId}`;
},
},
computed: {
Expand Down
169 changes: 110 additions & 59 deletions src/components/pages/TraceRoutePage.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,74 +8,125 @@
<div v-if="traceRoute" class="flex flex-col h-full w-full overflow-hidden">
<div class="overflow-y-auto">

<!-- details -->
<div>
<div class="bg-gray-200 p-2 font-semibold">Route Towards</div>
<div class="p-2 bg-white">
<ul role="list" class="space-y-3">

<!-- node that initiated traceroute -->
<li class="relative flex gap-x-4">
<div class="absolute left-0 top-0 flex w-12 justify-center top-3 -bottom-3">
<div class="w-px bg-gray-200"></div>
</div>
<div class="my-auto relative flex flex-none items-center justify-center">
<div>
<NodeIcon :node-id="traceRoute.to"/>
</div>
<div class="bg-gray-200 p-2">
<div class="font-semibold">Route</div>
<div class="text-sm text-gray-500">
<span>{{ traceRoute.data.route.length }} {{ traceRoute.data.route.length === 1 ? 'hop' : 'hops' }} there</span>
<span> • </span>
<span>{{ traceRoute.data.routeBack.length }} {{ traceRoute.data.routeBack.length === 1 ? 'hop' : 'hops' }} back</span>
</div>
</div>

<!-- route towards -->
<div class="p-2 bg-white">
<ul role="list" class="space-y-3">

<!-- node that initiated traceroute -->
<li class="relative flex gap-x-4">
<div class="absolute left-0 top-3 flex w-12 justify-center -bottom-3">
<div class="w-px bg-gray-200"></div>
</div>
<div class="my-auto relative flex flex-none items-center justify-center">
<div>
<NodeIcon :node-id="traceRoute.to"/>
</div>
<div class="flex-auto py-0.5 text-sm leading-5 text-gray-500">
<div class="font-medium text-gray-900">{{ getNodeLongName(traceRoute.to) || '???' }}</div>
<div>{{ getNodeHexId(traceRoute.to) }}</div>
<div>Started the traceroute</div>
</div>
<div class="flex-auto py-0.5 text-sm leading-5 text-gray-500">
<div class="font-medium text-gray-900">{{ getNodeLongName(traceRoute.to) || '???' }}</div>
<div>{{ getNodeHexId(traceRoute.to) }}</div>
<div>Started the traceroute</div>
</div>
<div class="my-auto">
<NodeDropDownMenu :node="findNodeById(traceRoute.to)"/>
</div>
</li>

<!-- route toward nodes -->
<li v-for="route of traceRoute.data.route" class="relative flex gap-x-4">
<div class="absolute left-0 top-0 flex w-12 justify-center -bottom-3">
<div class="w-px bg-gray-200"></div>
</div>
<div class="my-auto relative flex flex-none items-center justify-center">
<div>
<NodeIcon :node-id="route"/>
</div>
<div class="my-auto">
<NodeDropDownMenu :node="findNodeById(traceRoute.to)"/>
</div>
<div class="flex-auto py-0.5 text-sm leading-5 text-gray-500">
<div class="font-medium text-gray-900">{{ getNodeLongName(route) || '???' }}</div>
<div>{{ getNodeHexId(route) }}</div>
<div>Forwarded the packet</div>
</div>
<div class="my-auto">
<NodeDropDownMenu :node="findNodeById(route)"/>
</div>
</li>

<!-- node that replied to traceroute -->
<li v-if="traceRoute.from" class="relative flex gap-x-4">
<div class="absolute left-0 top-0 flex w-12 justify-center -bottom-3">
<div class="w-px bg-gray-200"></div>
</div>
<div class="my-auto relative flex flex-none items-center justify-center">
<div>
<NodeIcon :node-id="traceRoute.from"/>
</div>
</li>
</div>
<div class="flex-auto py-0.5 text-sm leading-5 text-gray-500">
<div class="font-medium text-gray-900">{{ getNodeLongName(traceRoute.from) || '???' }}</div>
<div>{{ getNodeHexId(traceRoute.from) }}</div>
<div>Replied to traceroute</div>
</div>
<div class="my-auto">
<NodeDropDownMenu :node="findNodeById(traceRoute.from)"/>
</div>
</li>

<!-- middleman nodes -->
<li v-for="route of traceRoute.data.route" class="relative flex gap-x-4">
<div class="absolute left-0 top-0 flex w-12 justify-center -bottom-3">
<div class="w-px bg-gray-200"></div>
<!-- route back nodes -->
<li v-for="route of traceRoute.data.routeBack" class="relative flex gap-x-4">
<div class="absolute left-0 top-0 flex w-12 justify-center -bottom-3">
<div class="w-px bg-gray-200"></div>
</div>
<div class="my-auto relative flex flex-none items-center justify-center">
<div>
<NodeIcon :node-id="route"/>
</div>
<div class="my-auto relative flex flex-none items-center justify-center">
<div>
<NodeIcon :node-id="route"/>
</div>
</div>
<div class="flex-auto py-0.5 text-sm leading-5 text-gray-500">
<div v-if="route === 0xFFFFFFFF">
<div class="font-medium text-gray-900">Unknown Node</div>
</div>
<div class="flex-auto py-0.5 text-sm leading-5 text-gray-500">
<div v-else>
<div class="font-medium text-gray-900">{{ getNodeLongName(route) || '???' }}</div>
<div>{{ getNodeHexId(route) }}</div>
<div>Forwarded the packet</div>
</div>
<div class="my-auto">
<NodeDropDownMenu :node="findNodeById(route)"/>
</div>
</li>
<div>Forwarded the packet</div>
</div>
<div class="my-auto">
<NodeDropDownMenu :node="findNodeById(route)"/>
</div>
</li>

<!-- node that replied to traceroute -->
<li v-if="traceRoute.from" class="relative flex gap-x-4">
<div class="absolute left-0 top-0 flex w-12 justify-center h-6">
<div class="w-px bg-gray-200"></div>
</div>
<div class="my-auto relative flex flex-none items-center justify-center">
<div>
<NodeIcon :node-id="traceRoute.from"/>
</div>
<!-- node that initiated traceroute -->
<li class="relative flex gap-x-4">
<div class="absolute left-0 top-0 flex w-12 justify-center h-6">
<div class="w-px bg-gray-200"></div>
</div>
<div class="my-auto relative flex flex-none items-center justify-center">
<div>
<NodeIcon :node-id="traceRoute.to"/>
</div>
<div class="flex-auto py-0.5 text-sm leading-5 text-gray-500">
<div class="font-medium text-gray-900">{{ getNodeLongName(traceRoute.from) || '???' }}</div>
<div>{{ getNodeHexId(traceRoute.from) }}</div>
<div>Replied to traceroute</div>
</div>
<div class="my-auto">
<NodeDropDownMenu :node="findNodeById(traceRoute.from)"/>
</div>
</li>
</div>
<div class="flex-auto py-0.5 text-sm leading-5 text-gray-500">
<div class="font-medium text-gray-900">{{ getNodeLongName(traceRoute.to) || '???' }}</div>
<div>{{ getNodeHexId(traceRoute.to) }}</div>
<div>Received traceroute response</div>
</div>
<div class="my-auto">
<NodeDropDownMenu :node="findNodeById(traceRoute.to)"/>
</div>
</li>

</ul>
</div>
</ul>
</div>

<!-- raw data -->
Expand Down Expand Up @@ -138,15 +189,15 @@ export default {
findNodeById(nodeId){
return GlobalState.nodesById[nodeId];
},
getTimeAgo: (date) => TimeUtils.getTimeAgo(date),
formatDateTime: (date) => TimeUtils.formatDateTime(date),
getChannelName: (channelId) => {
return ChannelUtils.getChannelName(channelId) || `#${channelId}`;
return ChannelUtils.getChannelName(channelId) || `channel #${channelId}`;
},
},
computed: {
subtitle() {
if(this.traceRoute){
return `${this.getTimeAgo(this.traceRoute.rxTime)} • ${this.traceRoute.data.route.length} hop(s) on channel ${this.getChannelName(this.traceRoute.channel)}`;
return `${this.formatDateTime(this.traceRoute.rxTime)} • on ${this.getChannelName(this.traceRoute.channel)}`;
} else {
return `#${this.traceRouteId}`;
}
Expand Down
4 changes: 4 additions & 0 deletions src/js/TimeUtils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@ import moment from "moment";

class TimeUtils {

static formatDateTime(date) {
return moment(date).format("DD/MMM/YYYY hh:mm A");
};

static getTimeAgo(date) {
return moment(date).fromNow();
};
Expand Down

0 comments on commit 6dcc35e

Please sign in to comment.