Added "State" status for webhook session

This commit is contained in:
Donald Zou
2025-09-14 15:38:19 +08:00
parent 628464d2e1
commit 2eb3a17775
8 changed files with 68 additions and 32 deletions

View File

@@ -13,6 +13,7 @@ import PeerListModals from "@/components/configurationComponents/peerListCompone
import PeerIntersectionObserver from "@/components/configurationComponents/peerIntersectionObserver.vue";
import ConfigurationDescription from "@/components/configurationComponents/configurationDescription.vue";
import PeerDetailsModal from "@/components/configurationComponents/peerDetailsModal.vue";
import {parseCidr} from "cidr-tools";
// Async Components
const PeerSearchBar = defineAsyncComponent(() => import("@/components/configurationComponents/peerSearchBar.vue"))
@@ -168,6 +169,14 @@ const taggedPeers = computed(() => {
return Object.values(configurationInfo.value.Info.PeerGroups).map(x => x.Peers).flat()
})
const firstAllowedIPCount = (allowed_ip) => {
try{
return parseCidr(allowed_ip.replace(" ", "").split(",")[0]).start
}catch (e){
return 0
}
}
const searchPeers = computed(() => {
const result = wireguardConfigurationStore.searchString ?
configurationPeers.value.filter(x => {
@@ -196,17 +205,36 @@ const searchPeers = computed(() => {
}).slice(0, showPeersCount.value);
}
return result.sort((a, b) => {
if ( a[dashboardStore.Configuration.Server.dashboard_sort]
< b[dashboardStore.Configuration.Server.dashboard_sort] ){
return -1;
}
if ( a[dashboardStore.Configuration.Server.dashboard_sort]
> b[dashboardStore.Configuration.Server.dashboard_sort]){
return 1;
}
return 0;
}).slice(0, showPeersCount.value)
let re = []
if (dashboardStore.Configuration.Server.dashboard_sort === 'allowed_ip'){
re = result.sort((a, b) => {
if ( firstAllowedIPCount(a[dashboardStore.Configuration.Server.dashboard_sort])
< firstAllowedIPCount(b[dashboardStore.Configuration.Server.dashboard_sort]) ){
return -1;
}
if ( firstAllowedIPCount(a[dashboardStore.Configuration.Server.dashboard_sort])
> firstAllowedIPCount(b[dashboardStore.Configuration.Server.dashboard_sort])){
return 1;
}
return 0;
}).slice(0, showPeersCount.value)
}else{
re = result.sort((a, b) => {
if ( a[dashboardStore.Configuration.Server.dashboard_sort]
< b[dashboardStore.Configuration.Server.dashboard_sort] ){
return -1;
}
if ( a[dashboardStore.Configuration.Server.dashboard_sort]
> b[dashboardStore.Configuration.Server.dashboard_sort]){
return 1;
}
return 0;
}).slice(0, showPeersCount.value)
}
return re
})
watch(() => route.query.id, (newValue) => {
@@ -218,11 +246,6 @@ watch(() => route.query.id, (newValue) => {
}, {
immediate: true
})
// onMounted(() => {
// configurationModalSelectedPeer.value = searchPeers.value[0]
// })
</script>
<template>

View File

@@ -9,10 +9,13 @@ const collapse = ref(true)
<div class="card">
<div class="card-body">
<p class="d-flex mb-0" role="button" @click="collapse = !collapse">
<span :class="{'text-success': session.Status === 0, 'text-danger': session.Status === 1}">
<span :class="{'text-success': session.Status === 0, 'text-danger': session.Status === 1, 'text-warning': session.Status === 2}">
<span v-if="session.Status === 0">
<i class="bi bi-check-circle-fill me-2"></i>
</span>
<span v-else-if="session.Status === 2">
<i class="bi bi-trash3-fill me-2"></i>
</span>
<span v-else-if="session.Status === 1">
<i class="bi bi-x-circle-fill me-2"></i>
</span>

View File

@@ -14,16 +14,19 @@ const formattedBody = computed(() => {
<small class="text-muted">
<LocaleText t="Status"></LocaleText>
</small>
<h3 :class="{'text-success': session.Status === 0, 'text-danger': session.Status === 1}">
<span v-if="session.Status === 0">
<i class="bi bi-check-circle-fill me-2"></i><LocaleText t="Success"></LocaleText>
</span>
<h3 :class="{'text-success': session.Status === 0, 'text-danger': session.Status === 1, 'text-warning': session.Status === 2}">
<span v-if="session.Status === 0">
<i class="bi bi-check-circle-fill me-2"></i><LocaleText t="Success"></LocaleText>
</span>
<span v-if="session.Status === 2">
<i class="bi bi-trash3-fill me-2"></i><LocaleText t="Timeout"></LocaleText>
</span>
<span v-else-if="session.Status === 1">
<i class="bi bi-x-circle-fill me-2"></i><LocaleText t="Failed"></LocaleText>
</span>
<span v-else-if="session.Status === -1">
<i class="spinner-border me-2"></i><LocaleText t="Requesting..."></LocaleText>
</span>
</span>
</h3>
<div class="d-flex gap-4 align-items-center">
<div>