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

h44z · Sep 23, 2024 · 58ce0da · 58ce0da
1 parent 1ac1b8c
commit 58ce0da
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 1 deletion.
diff --git a/frontend/src/helpers/utils.js b/frontend/src/helpers/utils.js
@@ -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]
+}
diff --git a/frontend/src/stores/peers.js b/frontend/src/stores/peers.js
@@ -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;

diff --git a/frontend/src/stores/profile.js b/frontend/src/stores/profile.js
@@ -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;

diff --git a/frontend/src/views/InterfaceView.vue b/frontend/src/views/InterfaceView.vue
@@ -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>

diff --git a/frontend/src/views/ProfileView.vue b/frontend/src/views/ProfileView.vue
@@ -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