UniqueSoft/wg-portal
2
0
Fork 0
mirror of https://github.com/h44z/wg-portal synced 2025-06-26 18:16:21 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add RX/TX column and fix add-peer button title

Browse Source
This commit is contained in:
Dmytro Bondar 2024-09-23 11:52:49 +02:00
parent 1ac1b8c6fc
commit 58ce0dadb7
No known key found for this signature in database
GPG Key ID: C123CD37BBED8BB7
5 changed files with 30 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/src/helpers/utils.js
View File

@ -11,3 +11,10 @@ export function ipToBigInt(ip) {
const addr = new Address6(ip)
return addr.bigInteger()
}
export function humanFileSize(size) {
const sizes = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"]
if (size === 0) return "0B"
const i = parseInt(Math.floor(Math.log(size) / Math.log(1024)))
return Math.round(size / Math.pow(1024, i), 2) + sizes[i]
}

4
frontend/src/stores/peers.js
View File

@ -54,6 +54,10 @@ export const peerStore = defineStore({
aValue = state.statsEnabled && state.stats[a.Identifier]?.IsConnected ? 1 : 0;
bValue = state.statsEnabled && state.stats[b.Identifier]?.IsConnected ? 1 : 0;
}
if (state.sortKey === 'Traffic') {
aValue = state.statsEnabled ? (state.stats[a.Identifier].BytesReceived + state.stats[a.Identifier].BytesTransmitted) : 0;
bValue = state.statsEnabled ? (state.stats[b.Identifier].BytesReceived + state.stats[b.Identifier].BytesTransmitted) : 0;
}
let result = 0;
if (aValue > bValue) result = 1;
if (aValue < bValue) result = -1;

4
frontend/src/stores/profile.js
View File

@ -50,6 +50,10 @@ export const profileStore = defineStore({
aValue = state.statsEnabled && state.stats[a.Identifier]?.IsConnected ? 1 : 0;
bValue = state.statsEnabled && state.stats[b.Identifier]?.IsConnected ? 1 : 0;
}
if (state.sortKey === 'Traffic') {
aValue = state.statsEnabled ? (state.stats[a.Identifier].BytesReceived + state.stats[a.Identifier].BytesTransmitted) : 0;
bValue = state.statsEnabled ? (state.stats[b.Identifier].BytesReceived + state.stats[b.Identifier].BytesTransmitted) : 0;
}
let result = 0;
if (aValue > bValue) result = 1;
if (aValue < bValue) result = -1;

7
frontend/src/views/InterfaceView.vue
View File

@ -10,6 +10,7 @@ import {peerStore} from "@/stores/peers";
import {interfaceStore} from "@/stores/interfaces";
import {notify} from "@kyvg/vue3-notification";
import {settingsStore} from "@/stores/settings";
import {humanFileSize} from '@/helpers/utils';
const settings = settingsStore()
const interfaces = interfaceStore()
@ -347,6 +348,9 @@ onMounted(async () => {
{{ $t("interfaces.table-heading.status") }}
<i v-if="sortKey === 'IsConnected'" :class="sortOrder === 1 ? 'asc' : 'desc'"></i>
</th>
<th v-if="peers.hasStatistics" scope="col" @click="sortBy('Traffic')">RX/TX
<i v-if="sortKey === 'Traffic'" :class="sortOrder === 1 ? 'asc' : 'desc'"></i>
</th>
<th scope="col"></th><!-- Actions -->
</tr>
</thead>
@ -373,6 +377,9 @@ onMounted(async () => {
<span class="badge rounded-pill bg-light" :title="$t('interfaces.peer-not-connected')"><i class="fa-solid fa-link-slash"></i></span>
</div>
</td>
<td v-if="peers.hasStatistics" >
<span class="text-center" >{{ humanFileSize(peers.Statistics(peer.Identifier).BytesReceived) }} / {{ humanFileSize(peers.Statistics(peer.Identifier).BytesTransmitted) }}</span>
</td>
<td class="text-center">
<a href="#" :title="$t('interfaces.button-show-peer')" @click.prevent="viewedPeerId=peer.Identifier"><i class="fas fa-eye me-2"></i></a>
<a href="#" :title="$t('interfaces.button-edit-peer')" @click.prevent="editPeerId=peer.Identifier"><i class="fas fa-cog"></i></a>

9
frontend/src/views/ProfileView.vue
View File

@ -5,6 +5,7 @@ import { onMounted, ref } from "vue";
import { profileStore } from "@/stores/profile";
import PeerEditModal from "@/components/PeerEditModal.vue";
import { settingsStore } from "@/stores/settings";
import { humanFileSize } from "@/helpers/utils";
const settings = settingsStore()
const profile = profileStore()
@ -56,7 +57,7 @@ onMounted(async () => {
</div>
<div class="col-12 col-lg-3 text-lg-end">
<a v-if="settings.Setting('SelfProvisioning')" class="btn btn-primary ms-2" href="#"
:title="$t('general.search.button-add-peer')" @click.prevent="editPeerId = '#NEW#'"><i
:title="$t('interfaces.button-add-peer')" @click.prevent="editPeerId = '#NEW#'"><i
class="fa fa-plus me-1"></i><i class="fa fa-user"></i></a>
</div>
</div>
@ -85,6 +86,9 @@ onMounted(async () => {
{{ $t("profile.table-heading.stats") }}
<i v-if="sortKey === 'IsConnected'" :class="sortOrder === 1 ? 'asc' : 'desc'"></i>
</th>
<th v-if="profile.hasStatistics" scope="col" @click="sortBy('Traffic')">RX/TX
<i v-if="sortKey === 'Traffic'" :class="sortOrder === 1 ? 'asc' : 'desc'"></i>
</th>
<th scope="col">{{ $t('profile.table-heading.interface') }}</th>
<th scope="col"></th><!-- Actions -->
</tr>
@ -114,6 +118,9 @@ onMounted(async () => {
<span class="badge rounded-pill bg-light"><i class="fa-solid fa-link-slash"></i></span>
</div>
</td>
<td v-if="profile.hasStatistics" >
<span class="text-center" >{{ humanFileSize(profile.Statistics(peer.Identifier).BytesReceived) }} / {{ humanFileSize(profile.Statistics(peer.Identifier).BytesTransmitted) }}</span>
</td>
<td>{{ peer.InterfaceIdentifier }}</td>
<td class="text-center">
<a href="#" :title="$t('profile.button-show-peer')" @click.prevent="viewedPeerId = peer.Identifier"><i