From 6dcc35ea8184a25ff303965830a0645b8dd49758 Mon Sep 17 00:00:00 2001 From: liamcottle Date: Thu, 5 Dec 2024 00:32:55 +1300 Subject: [PATCH] show trace route path toward and back --- src/components/pages/NodeTraceRoutesPage.vue | 6 +- src/components/pages/TraceRoutePage.vue | 169 ++++++++++++------- src/js/TimeUtils.js | 4 + 3 files changed, 117 insertions(+), 62 deletions(-) diff --git a/src/components/pages/NodeTraceRoutesPage.vue b/src/components/pages/NodeTraceRoutesPage.vue index ecb57ff..e9d42dd 100644 --- a/src/components/pages/NodeTraceRoutesPage.vue +++ b/src/components/pages/NodeTraceRoutesPage.vue @@ -31,7 +31,7 @@ {{ getNodeLongName(traceRoute.from) || '???' }}
- {{ 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) }}
@@ -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: { diff --git a/src/components/pages/TraceRoutePage.vue b/src/components/pages/TraceRoutePage.vue index 51e7678..67a2139 100644 --- a/src/components/pages/TraceRoutePage.vue +++ b/src/components/pages/TraceRoutePage.vue @@ -8,74 +8,125 @@
- -
-
Route Towards
-
-
    - - -
  • -
    -
    -
    -
    -
    - -
    +
    +
    Route
    +
    + {{ traceRoute.data.route.length }} {{ traceRoute.data.route.length === 1 ? 'hop' : 'hops' }} there + • + {{ traceRoute.data.routeBack.length }} {{ traceRoute.data.routeBack.length === 1 ? 'hop' : 'hops' }} back +
    +
    + + +
    +
      + + +
    • +
      +
      +
      +
      +
      +
      -
      -
      {{ getNodeLongName(traceRoute.to) || '???' }}
      -
      {{ getNodeHexId(traceRoute.to) }}
      -
      Started the traceroute
      +
      +
      +
      {{ getNodeLongName(traceRoute.to) || '???' }}
      +
      {{ getNodeHexId(traceRoute.to) }}
      +
      Started the traceroute
      +
      +
      + +
      +
      • + + +
    • +
      +
      +
      +
      +
      +
      -
      - +
      +
      +
      {{ getNodeLongName(route) || '???' }}
      +
      {{ getNodeHexId(route) }}
      +
      Forwarded the packet
      +
      +
      + +
      +
      • + + +
    • +
      +
      +
      +
      +
      +
      -
      • +
    +
    +
    {{ getNodeLongName(traceRoute.from) || '???' }}
    +
    {{ getNodeHexId(traceRoute.from) }}
    +
    Replied to traceroute
    +
    +
    + +
    +
    • - -
  • -
    -
    + +
  • +
    +
    +
    +
    +
    +
    -
    -
    - -
    +
    +
    +
    +
    Unknown Node
    -
    +
    {{ getNodeLongName(route) || '???' }}
    {{ getNodeHexId(route) }}
    -
    Forwarded the packet
    -
    -
    -
    -
    • +
    Forwarded the packet
    +
+
+ +
+ - -
  • -
    -
    -
    -
    -
    - -
    + +
  • +
    +
    +
    +
    +
    +
    -
    -
    {{ getNodeLongName(traceRoute.from) || '???' }}
    -
    {{ getNodeHexId(traceRoute.from) }}
    -
    Replied to traceroute
    -
    -
    - -
    -
    • +
    +
    +
    {{ getNodeLongName(traceRoute.to) || '???' }}
    +
    {{ getNodeHexId(traceRoute.to) }}
    +
    Received traceroute response
    +
    +
    + +
    + - -
    +
    @@ -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}`; } diff --git a/src/js/TimeUtils.js b/src/js/TimeUtils.js index 3f677ec..ae578e2 100644 --- a/src/js/TimeUtils.js +++ b/src/js/TimeUtils.js @@ -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(); };