lkddi/Easytier_lkddi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

show traffic stats chart in web/gui (#1410)

Browse Source
This commit is contained in:
Sijie.Sun
2025-09-25 13:43:11 +08:00
committed by GitHub
parent 7a694257d9
commit f5ba5bb146
17 changed files with 3163 additions and 10776 deletions
Download Patch File Download Diff File Expand all files Collapse all files
easytier-web/frontend-lib/src/components/Status.vue
+29 -29
View File
@@ -5,7 +5,8 @@ import { NetworkInstance, type TunnelInfo, type NodeInfo, type PeerRoutePair } f
import { useI18n } from 'vue-i18n';
import { computed, onMounted, onUnmounted, ref } from 'vue';
import { ipv4InetToString, ipv4ToString, ipv6ToString } from '../modules/utils';
import { DataTable, Column, Tag, Chip, Button, Dialog, ScrollPanel, Timeline, Divider, Card, } from 'primevue';
import { Badge, DataTable, Column, Tag, Chip, Button, Dialog, ScrollPanel, Timeline, Divider, Card, } from 'primevue';
import NetworkChart from './NetworkChart.vue';
const props = defineProps<{
curNetworkInst: NetworkInstance | null,
@@ -285,6 +286,10 @@ let prevTxSum = 0
let prevRxSum = 0
const txRate = ref('0')
const rxRate = ref('0')
// 控制节点详细信息chips的显示/隐藏
const showNodeDetails = ref(false)
onMounted(() => {
rateIntervalId = window.setInterval(() => {
const curTxSum = txGlobalSum()
@@ -365,36 +370,23 @@ function showEventLogs() {
</template>
<template #content>
<div class="flex w-full flex-col gap-y-5">
<div class="m-0 flex flex-row justify-center gap-x-5">
<div class="rounded-full w-32 h-32 flex flex-col items-center pt-6" style="border: 1px solid green">
<div class="font-bold">
{{ t('peer_count') }}
</div>
<div class="text-5xl mt-1">
{{ peerCount }}
</div>
</div>
<div class="rounded-full w-32 h-32 flex flex-col items-center pt-6" style="border: 1px solid purple">
<div class="font-bold">
{{ t('upload') }}
</div>
<div class="text-xl mt-2">
{{ txRate }}/s
</div>
</div>
<div class="rounded-full w-32 h-32 flex flex-col items-center pt-6" style="border: 1px solid fuchsia">
<div class="font-bold">
{{ t('download') }}
</div>
<div class="text-xl mt-2">
{{ rxRate }}/s
</div>
<div class="gap-4">
<!-- 网络流量图表 -->
<div class="w-full">
<NetworkChart :upload-rate="txRate" :download-rate="rxRate" />
</div>
</div>
<div class="flex flex-row items-center flex-wrap w-full max-h-40 overflow-scroll">
<!-- 展开/收起节点详细信息的divider按钮 -->
<div class="w-full">
<Button @click="showNodeDetails = !showNodeDetails"
:icon="showNodeDetails ? 'pi pi-chevron-up' : 'pi pi-chevron-down'"
:label="showNodeDetails ? t('hide_node_details') : t('show_node_details')" severity="secondary" outlined
class="w-full justify-center" size="small" />
</div>
<!-- 节点详细信息chips，根据showNodeDetails状态显示/隐藏 -->
<div v-show="showNodeDetails" class="flex flex-row items-center flex-wrap w-full max-h-40 overflow-scroll">
<Chip v-for="(chip, i) in myNodeInfoChips" :key="i" :label="chip.label" :icon="chip.icon"
class="mr-2 mt-2 text-sm" />
</div>
@@ -411,7 +403,15 @@ function showEventLogs() {
<Card>
<template #title>
{{ t('peer_info') }}
<div class="flex items-center gap-3">
<div class="flex items-center gap-2">
<span>{{ t('peer_info') }}</span>
</div>
<div class="flex items-center gap-1">
<Badge :value="peerCount" severity="info"
class="text-lg font-semibold px-2 py-1 rounded-full bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200" />
</div>
</div>
</template>
<template #content>
<DataTable :value="peerRouteInfos" column-resize-mode="fit" table-class="w-full">