1
0
mirror of https://github.com/donaldzou/WGDashboard.git synced 2024-11-06 16:00:28 +01:00

Finished Traceroute

This commit is contained in:
Donald Zou 2024-06-13 16:56:06 +08:00
parent f0f486da9e
commit ff794033e1
6 changed files with 186 additions and 4 deletions

View File

@ -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
'''

View File

@ -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">

View File

@ -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">

View File

@ -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',

View File

@ -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>

View File

@ -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>