Finished Traceroute

src/dashboard_new.py

@@ -1346,6 +1346,43 @@ def API_ping_execute():
     return ResponseObject(False, "Please provide ipAddress and count")
 
 
+@app.route('/api/traceroute/execute')
+def API_traceroute_execute():
+    if "ipAddress" in request.args.keys() and len(request.args.get("ipAddress")) > 0:
+        ipAddress = request.args.get('ipAddress')
+        try:
+            tracerouteResult = traceroute(ipAddress)
+            result = []
+            for hop in tracerouteResult:
+                if len(result) > 1:
+                    skipped = False
+                    for i in range(result[-1]["hop"] + 1, hop.distance):
+                        result.append(
+                            {
+                                "hop": i,
+                                "ip": "*",
+                                "avg_rtt": "*",
+                                "min_rtt": "*",
+                                "max_rtt": "*"
+                            }
+                        )
+                        skip = True
+                    if skipped: continue
+                result.append(
+                    {
+                        "hop": hop.distance,
+                        "ip": hop.address,
+                        "avg_rtt": hop.avg_rtt,
+                        "min_rtt": hop.min_rtt,
+                        "max_rtt": hop.max_rtt
+                    })
+            return ResponseObject(data=result)
+        except Exception as exp:
+            return ResponseObject(False, exp)
+    else:
+        return ResponseObject(False, "Please provide ipAddress")
+
+
 '''
 Sign Up
 '''

src/static/app/src/components/configurationList.vue

@@ -30,8 +30,9 @@ export default {
 			<div class="d-flex mb-4 ">
 				<h3 class="text-body">WireGuard Configurations</h3>
 				<RouterLink to="/new_configuration" class="btn btn-dark btn-brand rounded-3 px-3 py-2 shadow ms-auto rounded-3">
+					<i class="bi bi-plus-circle-fill me-2"></i>
 					Configuration
-					<i class="bi bi-plus-circle-fill ms-2"></i>
+					
 				</RouterLink>
 			</div>
 			<Transition name="fade" mode="out-in">

src/static/app/src/components/navbar.vue

@@ -44,8 +44,10 @@ export default {
 				</h6>
 				<ul class="nav flex-column">
 					<li class="nav-item">
-						<RouterLink to="/ping" class="nav-link">Ping</RouterLink></li>
-					<li class="nav-item"><a class="nav-link" data-toggle="modal" data-target="#traceroute_modal" href="#">Traceroute</a></li>
+						<RouterLink to="/ping" class="nav-link" active-class="active">Ping</RouterLink></li>
+					<li class="nav-item">
+						<RouterLink to="/traceroute" class="nav-link" active-class="active">Traceroute</RouterLink>
+					</li>
 				</ul>
 				<hr>
 				<ul class="nav flex-column">

src/static/app/src/router/index.js

@@ -16,6 +16,7 @@ import PeerList from "@/components/configurationComponents/peerList.vue";
 import PeerCreate from "@/components/configurationComponents/peerCreate.vue";
 import RestrictedPeers from "@/components/configurationComponents/restrictedPeers.vue";
 import Ping from "@/views/ping.vue";
+import Traceroute from "@/views/traceroute.vue";
 
 const checkAuth = async () => {
   let result = false
@@ -57,6 +58,11 @@ const router = createRouter({
           name: "Ping",
           component: Ping,
         },
+        {
+          path: '/traceroute',
+          name: "Traceroute",
+          component: Traceroute,
+        },
         {
           name: "New Configuration",
           path: '/new_configuration',

src/static/app/src/views/ping.vue

@@ -115,7 +115,7 @@ export default {
 				<div class="col-sm-8">
 					<TransitionGroup name="ping">
 						<div v-if="!this.pingResult" key="pingPlaceholder">
-							<div class="pingPlaceholder bg-dark rounded-3 mb-3"
+							<div class="pingPlaceholder bg-body-secondary rounded-3 mb-3"
 							      :class="{'animate__animated animate__flash animate__slower animate__infinite': this.pinging}"
 							     :style="{'animation-delay': `${x*0.15}s`}"
 							     v-for="x in 4" ></div>

src/static/app/src/views/traceroute.vue

@@ -0,0 +1,136 @@
+<script>
+import {fetchGet} from "@/utilities/fetch.js";
+import {WireguardConfigurationsStore} from "@/stores/WireguardConfigurationsStore.js";
+
+export default {
+	name: "traceroute",
+	data(){
+		return {
+			tracing: false,
+			ipAddress: undefined,
+			tracerouteResult: undefined
+		}
+	},
+	setup(){
+		const store = WireguardConfigurationsStore();
+		return {store}
+	},
+	methods: {
+		execute(){
+			if (this.ipAddress){
+				this.tracing = true;
+				this.tracerouteResult = undefined
+				fetchGet("/api/traceroute/execute", {
+					ipAddress: this.ipAddress,
+				}, (res) => {
+					if (res.status){
+						this.tracerouteResult = res.data
+					}else{
+						this.store.newMessage("Server", res.message, "danger")
+					}
+					this.tracing = false
+				})
+			}
+		}
+	},
+	
+}
+</script>
+
+<template>
+	<div class="mt-5 text-body">
+		<div class="container">
+			<h3 class="mb-3 text-body">Traceroute</h3>
+			<div class="row">
+				<div class="col-sm-4 d-flex gap-2 flex-column">
+					<div>
+						<label class="mb-1 text-muted" for="ipAddress">
+							<small>IP Address</small></label>
+						<input 
+							id="ipAddress"
+							class="form-control"
+							v-model="this.ipAddress"
+							type="text" placeholder="Enter an IP Address you want to trace :)">
+					</div>
+					<button class="btn btn-primary rounded-3 mt-3"
+					        :disabled="!this.store.regexCheckIP(this.ipAddress) || this.tracing"
+					        @click="this.execute()">
+						<i class="bi bi-bullseye me-2"></i> {{this.tracing ? "Tracing...":"Trace It!"}}
+					</button>
+				</div>
+				<div class="col-sm-8 position-relative">
+					<TransitionGroup name="ping">
+						<div v-if="!this.tracerouteResult" key="pingPlaceholder">
+							<div class="pingPlaceholder bg-body-secondary rounded-3 mb-3"
+							     :class="{'animate__animated animate__flash animate__slower animate__infinite': this.tracing}"
+							     :style="{'animation-delay': `${x*0.05}s`}"
+							     v-for="x in 10" ></div>
+						</div>
+						<div v-else key="table" class="w-100">
+							<table class="table table-borderless rounded-3 w-100">
+								<thead>
+								<tr>
+									<th scope="col">Hop</th>
+									<th scope="col">IP Address</th>
+									<th scope="col">Average / Min / Max Round Trip Time</th>
+								</tr>
+								</thead>
+								<tbody>
+									<tr v-for="(hop, key) in this.tracerouteResult"
+										class="animate__fadeInUp animate__animated"
+									    :style="{'animation-delay': `${key * 0.05}s`}"
+									>
+										<td>{{hop.hop}}</td>
+										<td>{{hop.ip}}</td>
+										<td>{{hop.avg_rtt}} / {{hop.min_rtt}} / {{hop.max_rtt}}</td>
+									</tr>
+								</tbody>
+								
+							</table>
+						</div>
+					</TransitionGroup>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<style scoped>
+.pingPlaceholder{
+	width: 100%;
+	height: 40px;
+}
+.ping-move, /* apply transition to moving elements */
+.ping-enter-active,
+.ping-leave-active {
+	transition: all 0.4s cubic-bezier(0.82, 0.58, 0.17, 0.9);
+}
+
+.ping-leave-active{
+	position: absolute;
+}
+
+.ping-enter-from,
+.ping-leave-to {
+	opacity: 0;
+	//transform: scale(0.9);
+}
+
+/* ensure leaving items are taken out of layout flow so that moving
+   animations can be calculated correctly. */
+.ping-leave-active {
+	position: absolute;
+}
+
+table th, table td{
+	padding: 0.9rem;
+}
+
+table tbody{
+	border-top: 1em solid transparent;
+}
+
+.table > :not(caption) > * > *{
+	background-color: transparent !important;
+}
+</style>