mirror of
https://github.com/donaldzou/WGDashboard.git
synced 2024-11-06 16:00:28 +01:00
Finished Traceroute
This commit is contained in:
parent
f0f486da9e
commit
ff794033e1
@ -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
|
||||
'''
|
||||
|
@ -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">
|
||||
|
@ -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">
|
||||
|
@ -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',
|
||||
|
@ -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>
|
||||
|
136
src/static/app/src/views/traceroute.vue
Normal file
136
src/static/app/src/views/traceroute.vue
Normal 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>
|
Loading…
Reference in New Issue
Block a user