Mirrors/WGDashboard
1
0
Fork 0
mirror of https://github.com/donaldzou/WGDashboard.git synced 2025-10-04 16:26:18 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Testing system status and webhook

Browse Source
This commit is contained in:
Donald Zou
2025-08-27 19:39:52 +08:00
parent 45524eaee5
commit c3c7e50f08
67 changed files with 301 additions and 267 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/static/app/src/components/navbar.vue
View File

@@ -90,6 +90,13 @@ export default {
<LocaleText t="Clients"></LocaleText>
</RouterLink>
</li>
<li class="nav-item">
<RouterLink class="nav-link rounded-3" to="/webhooks"
active-class="active">
<i class="bi bi-postcard me-2"></i>
<LocaleText t="Webhooks"></LocaleText>
</RouterLink>
</li>
<li class="nav-item">
<a class="nav-link rounded-3" role="button" @click="openAgentModal = true">
<i class="bi bi-question-circle me-2"></i>

67
src/static/app/src/components/settingsComponent/dashboardWebHooks.vue
View File

@@ -4,6 +4,8 @@ import { fetchGet } from "@/utilities/fetch.js"
import {onMounted, ref} from "vue";
import AddWebHook from "@/components/settingsComponent/dashboardWebHooksComponents/addWebHook.vue";
import WebHookSessions from "@/components/settingsComponent/dashboardWebHooksComponents/webHookSessions.vue";
import ClientGroup from "@/components/clientComponents/clientGroup.vue";
import ClientSettings from "@/components/clientComponents/clientSettings.vue";
const webHooks = ref([])
const webHooksLoaded = ref(false)
@@ -24,31 +26,33 @@ const view = ref("edit")
</script>
<template>
<div class="card rounded-3">
<div class="card-header d-flex align-items-center">
<h6 class="my-2">
<i class="bi bi-plug-fill me-2"></i>
<LocaleText t="Webhooks"></LocaleText>
</h6>
<button class="btn bg-primary-subtle text-primary-emphasis border-1 border-primary-subtle rounded-3 shadow-sm ms-auto"
@click="addWebHook = true; selectedWebHook = undefined"
v-if="!addWebHook"
>
<i class="bi bi-plus-circle-fill me-2"></i>
<LocaleText t="Webhook"></LocaleText>
</button>
<button class="btn bg-secondary-subtle text-secondary-emphasis border-1 border-secondary-subtle rounded-3 shadow-sm ms-auto"
@click="addWebHook = false"
v-else
>
<i class="bi bi-chevron-left me-2"></i>
<LocaleText t="Back"></LocaleText>
</button>
</div>
<div class="card-body p-0">
<div style="height: 600px" class="overflow-scroll">
<div class="row g-0 h-100" v-if="!addWebHook">
<div class="col-sm-4 border-end h-100" style="overflow-y: scroll">
<div class="text-body w-100 h-100 pb-2 position-relative">
<div class="w-100 h-100 card rounded-3">
<div class="border-bottom z-0">
<div class="d-flex text-body align-items-center sticky-top p-3 bg-body-tertiary rounded-top-3" style="border-top-right-radius: 0 !important;">
<h6 class="my-2">
<i class="bi bi-plug-fill me-2"></i>
<LocaleText t="Webhooks"></LocaleText>
</h6>
<button class="btn bg-primary-subtle text-primary-emphasis border-1 border-primary-subtle rounded-3 shadow-sm ms-auto"
@click="addWebHook = true; selectedWebHook = undefined"
v-if="!addWebHook"
>
<i class="bi bi-plus-circle-fill me-2"></i>
<LocaleText t="Webhook"></LocaleText>
</button>
<button class="btn bg-secondary-subtle text-secondary-emphasis border-1 border-secondary-subtle rounded-3 shadow-sm ms-auto"
@click="addWebHook = false"
v-else
>
<i class="bi bi-chevron-left me-2"></i>
<LocaleText t="Back"></LocaleText>
</button>
</div>
</div>
<div class="row h-100 g-0" v-if="!addWebHook">
<div class="col-sm-4 border-end d-flex flex-column clientListContainer">
<div class="d-flex flex-column overflow-y-scroll" style="flex: 1 0 0">
<div class="list-group d-flex flex-column d-flex h-100">
<a role="button"
@click="selectedWebHook = webHook"
@@ -69,7 +73,11 @@ const view = ref("edit")
</div>
</div>
</div>
<div class="col-sm-8 overflow-scroll h-100" v-if="selectedWebHook">
</div>
<div
v-if="selectedWebHook"
class="col-sm-8 clientViewerContainer d-flex flex-column " >
<div class="overflow-scroll" style="flex: 1 0 0">
<nav class="navbar navbar-expand-lg bg-body-tertiary sticky-top">
<div class="container-fluid">
<div>
@@ -108,12 +116,11 @@ const view = ref("edit")
</Suspense>
</div>
</div>
<suspense v-else>
<AddWebHook @refresh="selectedWebHook = undefined; addWebHook = false; getWebHooks(); "></AddWebHook>
</suspense>
</div>
<suspense v-else>
<AddWebHook @refresh="selectedWebHook = undefined; addWebHook = false; getWebHooks(); "></AddWebHook>
</suspense>
</div>
</div>
</template>

34
src/static/app/src/components/settingsComponent/dashboardWebHooksComponents/previousWebHookSession.vue Normal file
View File

@@ -0,0 +1,34 @@
<script setup lang="ts">
import WebHookSession from "@/components/settingsComponent/dashboardWebHooksComponents/webHookSession.vue";
import {ref} from "vue";
const props = defineProps(['session'])
const collapse = ref(true)
</script>
<template>
<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 v-if="session.Status === 0">
<i class="bi bi-check-circle-fill me-2"></i>
</span>
<span v-else-if="session.Status === 1">
<i class="bi bi-x-circle-fill me-2"></i>
</span>
<span v-else-if="session.Status === -1">
<i class="spinner-border spinner-border-sm me-2"></i>
</span>
</span>
{{ session.StartDate }}
<i class="bi bi-chevron-right ms-auto"></i>
</p>
<WebHookSession :session="session" v-if="!collapse" class="mt-2"></WebHookSession>
</div>
</div>
</template>
<style scoped>
</style>

105
src/static/app/src/components/settingsComponent/dashboardWebHooksComponents/webHookSession.vue Normal file
View File

@@ -0,0 +1,105 @@
<script setup lang="ts">
import LocaleText from "@/components/text/localeText.vue";
const props = defineProps(['session'])
</script>
<template>
<div class="d-flex flex-column gap-3">
<div>
<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>
<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>
</h3>
<div class="d-flex gap-4 align-items-center">
<div>
<small class="text-muted">
<LocaleText t="Started At"></LocaleText>
</small>
<h6>
{{ session.StartDate }}
</h6>
</div>
<div v-if="session.EndDate">
<i class="bi bi-arrow-right"></i>
</div>
<div v-if="session.EndDate">
<small class="text-muted">
<LocaleText t="Ended At"></LocaleText>
</small>
<h6>
{{ session.EndDate }}
</h6>
</div>
</div>
</div>
<div>
<h6>
<LocaleText t="Logs"></LocaleText>
</h6>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th scope="col">
<LocaleText t="Datetime"></LocaleText>
</th>
<th scope="col">
<LocaleText t="Status"></LocaleText>
</th>
<th scope="col">
<LocaleText t="Message"></LocaleText>
</th>
</tr>
</thead>
<tbody>
<tr v-for="log in [...session.Logs.Logs].reverse()">
<td style="white-space: nowrap">
{{ log.LogTime }}
</td>
<td style="white-space: nowrap" :class="{'text-success': log.Status === 0, 'text-danger': log.Status === 1}">
<span v-if="log.Status === 0">
<i class="bi bi-check-circle-fill me-2"></i>
</span>
<span v-else-if="log.Status === 1">
<i class="bi bi-x-circle-fill me-2"></i>
</span>
<span v-else-if="log.Status === -1">
<i class="bi bi-circle me-2"></i>
</span>
</td>
<td style="white-space: nowrap; overflow-x: scroll">
{{ log.Message }}
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div>
<h6>
<LocaleText t="Data"></LocaleText>
</h6>
<div class="bg-body-tertiary p-3 rounded-3">
<pre class="mb-0"><code>{{ JSON.stringify(session.Data, null, 4) }}</code></pre>
</div>
</div>
</div>
</template>
<style scoped>
</style>

121
src/static/app/src/components/settingsComponent/dashboardWebHooksComponents/webHookSessions.vue
View File

@@ -1,7 +1,10 @@
<script setup lang="ts">
import { fetchGet } from "@/utilities/fetch.js"
import LocaleText from "@/components/text/localeText.vue";
import {computed, ref, watch} from "vue";
import {computed, onBeforeUnmount, ref, watch} from "vue";
import WebHookSession from "@/components/settingsComponent/dashboardWebHooksComponents/webHookSession.vue";
import PreviousWebHookSession
from "@/components/settingsComponent/dashboardWebHooksComponents/previousWebHookSession.vue";
const props = defineProps(['webHook'])
const sessions = ref([])
@@ -24,107 +27,37 @@ const latestSession = computed(() => {
return sessions.value[0]
})
watch(() => latestSession.value.Status, () => {
if (latestSession.value.Status > -1) clearInterval(refreshInterval.value)
// watch(() => latestSession.value.Status, () => {
// if (latestSession.value.Status > -1) clearInterval(refreshInterval.value)
// })
// if (latestSession.value.Status === -1){
//
// }
refreshInterval.value = setInterval(() => {
getSessions()
}, 5000)
onBeforeUnmount(() => {
clearInterval(refreshInterval.value)
})
if (latestSession.value.Status === -1){
refreshInterval.value = setInterval(() => {
getSessions()
}, 5000)
}
</script>
<template>
<div class="p-3" v-if="latestSession">
<h6 class="mb-3">
<LocaleText t="Latest Session"></LocaleText>
</h6>
<h3 :class="{'text-success': latestSession.Status === 0, 'text-danger': latestSession.Status === 1}">
<span v-if="latestSession.Status === 0">
<i class="bi bi-check-circle-fill me-2"></i><LocaleText t="Success"></LocaleText>
</span>
<span v-else-if="latestSession.Status === 1">
<i class="bi bi-x-circle-fill me-2"></i><LocaleText t="Failed"></LocaleText>
</span>
<span v-else-if="latestSession.Status === -1">
<i class="spinner-border me-2"></i><LocaleText t="Requesting..."></LocaleText>
</span>
</h3>
<div class="d-flex gap-4 align-items-center">
<div>
<small class="text-muted">
<LocaleText t="Started At"></LocaleText>
</small>
<h6>
{{ latestSession.StartDate }}
</h6>
</div>
<div v-if="latestSession.EndDate">
<i class="bi bi-arrow-right"></i>
</div>
<div v-if="latestSession.EndDate">
<small class="text-muted">
<LocaleText t="Ended At"></LocaleText>
</small>
<h6>
{{ latestSession.EndDate }}
</h6>
</div>
</div>
<hr>
<div>
<h6>
<LocaleText t="Logs"></LocaleText>
<div v-if="latestSession">
<div class="p-3">
<h6 class="mb-3">
<LocaleText t="Latest Session"></LocaleText>
</h6>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th scope="col">
<LocaleText t="Datetime"></LocaleText>
</th>
<th scope="col">
<LocaleText t="Status"></LocaleText>
</th>
<th scope="col">
<LocaleText t="Message"></LocaleText>
</th>
</tr>
</thead>
<tbody>
<tr v-for="log in [...latestSession.Logs.Logs].reverse()">
<td style="white-space: nowrap">
{{ log.LogTime }}
</td>
<td style="white-space: nowrap" :class="{'text-success': log.Status === 0, 'text-danger': log.Status === 1}">
<span v-if="log.Status === 0">
<i class="bi bi-check-circle-fill me-2"></i>
</span>
<span v-else-if="log.Status === 1">
<i class="bi bi-x-circle-fill me-2"></i>
</span>
<span v-else-if="log.Status === -1">
<i class="bi bi-circle me-2"></i>
</span>
</td>
<td>
{{ log.Message }}
</td>
</tr>
</tbody>
</table>
</div>
<WebHookSession :session="latestSession" :key="latestSession.WebHookSessionID"></WebHookSession>
</div>
<div>
<div class="border-top p-3" v-if="sessions.length > 1">
<h6>
<LocaleText t="Data"></LocaleText>
<LocaleText t="Previous Sessions"></LocaleText>
</h6>
<div class="bg-body-tertiary p-3 rounded-3" style="max-height: 200px; overflow: scroll">
<pre><code>{{ JSON.stringify(latestSession.Data, null, 4) }}</code></pre>
<div class="d-flex flex-column gap-2">
<PreviousWebHookSession :session="session"
:key="session.WebHookSessionID"
v-for="session in sessions.slice(1)"></PreviousWebHookSession>
</div>
</div>
</div>

1
src/static/app/src/components/settingsComponent/wgdashboardSettings.vue
View File

@@ -78,7 +78,6 @@ const dashboardConfigurationStore = DashboardConfigurationStore()
<DashboardAPIKeys></DashboardAPIKeys>
<DashboardEmailSettings></DashboardEmailSettings>
<DashboardWebHooks></DashboardWebHooks>
</div>
</template>

11
src/static/app/src/components/systemStatusComponents/networkInterface.vue
View File

@@ -75,12 +75,19 @@ const networkSpeedChartOption = computed(() => {
})
const networkSpeedHistoricalChartData = computed(() => {
let bytes_recv = []
let bytes_sent = []
if (props.historicalNetworkSpeed.bytes_recv && props.historicalNetworkSpeed.bytes_sent){
bytes_recv = [...props.historicalNetworkSpeed.bytes_recv]
bytes_sent = [...props.historicalNetworkSpeed.bytes_sent]
}
return {
labels: [...props.historicalChartTimestamp],
datasets: [
{
label: GetLocale('Real Time Received Data Usage'),
data: [...props.historicalNetworkSpeed.bytes_recv],
data: bytes_recv,
fill: 'origin',
borderColor: '#0dcaf0',
backgroundColor: '#0dcaf090',
@@ -90,7 +97,7 @@ const networkSpeedHistoricalChartData = computed(() => {
},
{
label: GetLocale('Real Time Sent Data Usage'),
data: [...props.historicalNetworkSpeed.bytes_sent],
data: bytes_sent,
fill: 'origin',
backgroundColor: '#ffc10790',
borderColor: '#ffc107',

8
src/static/app/src/router/router.js
View File

@@ -124,6 +124,14 @@ const router = createRouter({
}
]
},
{
name: "Webhooks",
path: "webhooks",
component: () => import("@/components/settingsComponent/dashboardWebHooks.vue"),
meta: {
title: "Webhooks"
}
},
{
name: "Configuration",
path: 'configuration/:id',

81
src/static/app/src/views/systemStatus.vue
View File

@@ -8,9 +8,11 @@ import Process from "@/components/systemStatusComponents/process.vue";
import {DashboardConfigurationStore} from "@/stores/DashboardConfigurationStore.js";
const dashboardStore = DashboardConfigurationStore()
const loaded = ref(false)
const data = computed(() => {
return dashboardStore.SystemStatus
return loaded.value ? dashboardStore.SystemStatus : undefined
})
let interval = null;
import {
Chart,
@@ -59,16 +61,10 @@ const historicalChartTimestamp = ref([])
const historicalCpuUsage = ref([])
const historicalVirtualMemoryUsage = ref([])
const historicalSwapMemoryUsage = ref([])
const historicalNetworkData = ref({
bytes_recv: [],
bytes_sent: []
})
const historicalNetworkSpeed = reactive({
const historicalNetworkSpeed = reactive({})
})
const getData = () => {
fetchGet("/api/systemStatus", {}, (res) => {
const getData = async () => {
await fetchGet("/api/systemStatus", {}, (res) => {
historicalChartTimestamp.value.push(dayjs().format("HH:mm:ss A"))
dashboardStore.SystemStatus = res.data
historicalCpuUsage.value.push(res.data.CPU.cpu_percent)
@@ -85,6 +81,7 @@ const getData = () => {
historicalNetworkSpeed[i].bytes_recv.push(res.data.NetworkInterfaces[i].realtime.recv)
historicalNetworkSpeed[i].bytes_sent.push(res.data.NetworkInterfaces[i].realtime.sent)
}
loaded.value = true
})
}
@@ -125,43 +122,6 @@ const chartOption = computed(() => {
}
}
})
const networkSpeedChartOption = computed(() => {
return {
responsive: true,
plugins: {
legend: {
display: true
},
tooltip: {
callbacks: {
label: (tooltipItem) => {
return `${tooltipItem.formattedValue} MB/s`
}
}
}
},
scales: {
x: {
ticks: {
display: false,
},
grid: {
display: false
},
},
y:{
ticks: {
callback: (val, index) => {
return `${val} MB/s`
}
},
grid: {
display: false
},
}
}
}
})
const cpuHistoricalChartData = computed(() => {
return {
labels: [...historicalChartTimestamp.value],
@@ -208,33 +168,6 @@ const memoryHistoricalChartData = computed(() => {
}
})
const networkSpeedHistoricalChartData = computed(() => {
return {
labels: [...historicalChartTimestamp.value],
datasets: [
{
label: GetLocale('Real Time Received Data Usage'),
data: [...historicalNetworkSpeed.value.bytes_recv],
fill: 'origin',
borderColor: '#0dcaf0',
backgroundColor: '#0dcaf090',
tension: 0,
pointRadius: 2,
borderWidth: 1,
},
{
label: GetLocale('Real Time Sent Data Usage'),
data: [...historicalNetworkSpeed.value.bytes_sent],
fill: 'origin',
backgroundColor: '#ffc10790',
borderColor: '#ffc107',
tension: 0,
pointRadius: 2,
borderWidth: 1,
}
]
}
})
</script>
<template>