From 76aa9168ca509f0e46f01fbb4cf3fb0a7c8d21c8 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Tue, 24 Dec 2024 16:56:21 +1300
Subject: [PATCH] implement ping page to allow for continuous pinging

---
 src/frontend/components/ping/PingPage.vue   | 195 ++++++++++++++++++++
 src/frontend/components/tools/ToolsPage.vue |  20 ++
 src/frontend/main.js                        |   5 +
 3 files changed, 220 insertions(+)
 create mode 100644 src/frontend/components/ping/PingPage.vue

diff --git a/src/frontend/components/ping/PingPage.vue b/src/frontend/components/ping/PingPage.vue
new file mode 100644
index 0000000..ab2debc
--- /dev/null
+++ b/src/frontend/components/ping/PingPage.vue
@@ -0,0 +1,195 @@
+<template>
+    <div class="flex flex-col flex-1 overflow-hidden min-w-full sm:min-w-[500px] dark:bg-zinc-950">
+        <div class="flex flex-col h-full space-y-2 p-2 overflow-y-auto">
+
+            <!-- appearance -->
+            <div class="bg-white dark:bg-zinc-800 rounded shadow">
+                <div class="flex border-b border-gray-300 dark:border-zinc-700 text-gray-700 dark:text-gray-200 p-2 font-semibold">Ping</div>
+                <div class="dark:divide-zinc-700 text-gray-900 dark:text-gray-100 p-2">
+                    Only lxmf.delivery destinations can be pinged.
+                </div>
+            </div>
+
+            <!-- inputs -->
+            <div class="bg-white dark:bg-zinc-800 rounded shadow">
+                <div class="divide-y divide-gray-300 dark:divide-zinc-700 text-gray-900 dark:text-gray-100">
+
+                    <div class="p-2">
+                        <div class="text-sm font-medium text-gray-900 dark:text-gray-100">Destination Hash</div>
+                        <div class="flex">
+                            <input v-model="destinationHash" type="text" placeholder="e.g: 7b746057a7294469799cd8d7d429676a" class="bg-gray-50 dark:bg-zinc-700 border border-gray-300 dark:border-zinc-600 text-gray-900 dark:text-gray-100 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-600 dark:focus:border-blue-600 block w-full p-2.5">
+                        </div>
+                    </div>
+
+                    <div class="p-2">
+                        <div class="text-sm font-medium text-gray-900 dark:text-gray-100">Ping Timeout (seconds)</div>
+                        <div class="flex">
+                            <input v-model="timeout" type="number" placeholder="Timeout" class="bg-gray-50 dark:bg-zinc-700 border border-gray-300 dark:border-zinc-600 text-gray-900 dark:text-gray-100 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-600 dark:focus:border-blue-600 block w-full p-2.5">
+                        </div>
+                    </div>
+
+                    <div class="p-2 space-x-1">
+                        <button v-if="!isRunning" @click.stop="start" type="button" class="my-auto inline-flex items-center gap-x-1 rounded-md bg-gray-500 px-2 py-1 text-sm font-semibold text-white shadow-sm hover:bg-gray-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500 dark:bg-zinc-800 dark:text-white dark:hover:bg-zinc-700 dark:focus-visible:outline-zinc-500">
+                            Start
+                        </button>
+                        <button v-if="isRunning" @click.stop="stop" type="button" class="my-auto inline-flex items-center gap-x-1 rounded-md bg-gray-500 px-2 py-1 text-sm font-semibold text-white shadow-sm hover:bg-gray-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500 dark:bg-zinc-800 dark:text-white dark:hover:bg-zinc-700 dark:focus-visible:outline-zinc-500">
+                            Stop
+                        </button>
+                        <button @click.stop="clear" type="button" class="my-auto inline-flex items-center gap-x-1 rounded-md bg-gray-500 px-2 py-1 text-sm font-semibold text-white shadow-sm hover:bg-gray-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500 dark:bg-zinc-800 dark:text-white dark:hover:bg-zinc-700 dark:focus-visible:outline-zinc-500">
+                            Clear Results
+                        </button>
+                    </div>
+
+                </div>
+            </div>
+
+            <!-- results -->
+            <div class="flex flex-col h-full bg-white dark:bg-zinc-800 rounded shadow overflow-hidden">
+                <div class="flex border-b border-gray-300 dark:border-zinc-700 text-gray-700 dark:text-gray-200 p-2 font-semibold">Results</div>
+                <div id="results" class="flex flex-col h-full bg-black text-white p-2 overflow-y-scroll">
+                    <div v-for="pingResult of pingResults">{{ pingResult }}</div>
+                </div>
+            </div>
+
+        </div>
+    </div>
+</template>
+
+<script>
+import {CanceledError} from "axios";
+import DialogUtils from "../../js/DialogUtils";
+
+export default {
+    name: 'PingPage',
+    data() {
+        return {
+            isRunning: false,
+            destinationHash: null,
+            timeout: 10,
+            pingResults: [],
+            abortController: null,
+        };
+    },
+    beforeUnmount() {
+        this.stop();
+    },
+    methods: {
+        async start() {
+
+            // do nothing if already running
+            if(this.isRunning){
+                return;
+            }
+
+            // simple check to ensure destination hash is valid
+            if(this.destinationHash == null || this.destinationHash.length !== 32){
+                DialogUtils.alert("Invalid Destination Hash!");
+                return;
+            }
+
+            // simple check to ensure destination hash is valid
+            if(this.timeout == null || this.timeout < 0){
+                DialogUtils.alert("Timeout must be a number!");
+                return;
+            }
+
+            // we are now running ping
+            this.isRunning = true;
+            this.abortController = new AbortController();
+
+            // run ping until stopped
+            while(this.isRunning){
+
+                // run ping
+                await this.ping();
+
+                // wait a bit before running next ping
+                await this.sleep(500);
+
+            }
+
+        },
+        async stop() {
+            this.isRunning = false;
+            this.abortController.abort();
+        },
+        async clear() {
+            this.pingResults = [];
+        },
+        async sleep(millis) {
+            return new Promise((resolve, reject) => setTimeout(resolve, millis));
+        },
+        async ping() {
+            try {
+
+                // ping destination
+                const response = await window.axios.get(`/api/v1/ping/${this.destinationHash}/lxmf.delivery`, {
+                    signal: this.abortController.signal,
+                    params: {
+                        timeout: this.timeout,
+                    },
+                });
+
+                const pingResult = response.data.ping_result;
+                const rttMilliseconds = (pingResult.rtt * 1000).toFixed(3);
+                const rttDurationString = `${rttMilliseconds} ms`;
+
+                const info = [
+                    `Valid reply:`,
+                    `duration=${rttDurationString}`,
+                    `hops_there=${pingResult.hops_there}`,
+                    `hops_back=${pingResult.hops_back}`,
+                ];
+
+                // add rssi if available
+                if(pingResult.rssi != null){
+                    info.push(`rssi=${pingResult.rssi}dBm`);
+                }
+
+                // add snr if available
+                if(pingResult.snr != null){
+                    info.push(`snr=${pingResult.snr}dB`);
+                }
+
+                // add signal quality if available
+                if(pingResult.quality != null){
+                    info.push(`quality=${pingResult.quality}%`);
+                }
+
+                // update ui
+                this.addPingResult(info.join(" "));
+
+            } catch(e) {
+
+                // ignore cancelled error
+                if(e instanceof CanceledError){
+                    return;
+                }
+
+                console.log(e);
+
+                // add ping error to results
+                const message = e.response?.data?.message ?? `Ping failed: ${e}`;
+                this.addPingResult(message);
+
+            }
+        },
+        addPingResult(result) {
+            this.pingResults.push(result);
+            this.scrollPingResultsToBottom();
+        },
+        scrollPingResultsToBottom: function() {
+            // next tick waits for the ui to have the new elements added
+            this.$nextTick(() => {
+                // set timeout with zero millis seems to fix issue where it doesn't scroll all the way to the bottom...
+                setTimeout(() => {
+                    const container = document.getElementById("results");
+                    if(container){
+                        container.scrollTop = container.scrollHeight;
+                    }
+                }, 0);
+            });
+        },
+    },
+}
+</script>
diff --git a/src/frontend/components/tools/ToolsPage.vue b/src/frontend/components/tools/ToolsPage.vue
index 101bcd1..990ca7a 100644
--- a/src/frontend/components/tools/ToolsPage.vue
+++ b/src/frontend/components/tools/ToolsPage.vue
@@ -28,6 +28,26 @@
                 </div>
             </a>
 
+            <!-- ping -->
+            <RouterLink :to="{ name: 'ping' }" class="group flex bg-white dark:bg-zinc-800 p-2 rounded shadow hover:bg-gray-50 dark:hover:bg-zinc-700">
+                <div class="mr-2">
+                    <div class="flex bg-gray-300 text-gray-500 rounded shadow p-2">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-10">
+                            <path fill-rule="evenodd" d="M14.615 1.595a.75.75 0 0 1 .359.852L12.982 9.75h7.268a.75.75 0 0 1 .548 1.262l-10.5 11.25a.75.75 0 0 1-1.272-.71l1.992-7.302H3.75a.75.75 0 0 1-.548-1.262l10.5-11.25a.75.75 0 0 1 .913-.143Z" clip-rule="evenodd" />
+                        </svg>
+                    </div>
+                </div>
+                <div class="my-auto mr-auto dark:text-gray-200">
+                    <div class="font-bold">Ping</div>
+                    <div class="text-sm">Allows you to ping an lxmf.delivery destination hash</div>
+                </div>
+                <div class="my-auto text-gray-400 group-hover:text-gray-500">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"></path>
+                    </svg>
+                </div>
+            </RouterLink>
+
         </div>
     </div>
 </template>
diff --git a/src/frontend/main.js b/src/frontend/main.js
index 28ca8f6..ace5599 100644
--- a/src/frontend/main.js
+++ b/src/frontend/main.js
@@ -60,6 +60,11 @@ const router = createRouter({
             path: '/propagation-nodes',
             component: defineAsyncComponent(() => import("./components/propagation-nodes/PropagationNodesPage.vue")),
         },
+        {
+            name: "ping",
+            path: '/ping',
+            component: defineAsyncComponent(() => import("./components/ping/PingPage.vue")),
+        },
         {
             name: "settings",
             path: '/settings',