frontend: create widget to show upload/download speeds

core/frontend/src/App.vue

@@ -424,6 +424,7 @@ import menus, { menuItem } from './menus'
 import autopilot_data from './store/autopilot'
 import Cpu from './widgets/Cpu.vue'
 import Disk from './widgets/Disk.vue'
+import Networking from './widgets/Networking.vue'
 
 export default Vue.extend({
   name: 'App',
@@ -472,6 +473,10 @@ export default Vue.extend({
         component: Disk,
         name: 'Disk',
       },
+      {
+        component: Networking,
+        name: 'Networking',
+      },
     ],
     selected_widgets: settings.user_top_widgets,
     bootstrap_version: undefined as string|undefined,

core/frontend/src/store/system-information.ts

@@ -120,9 +120,20 @@ class SystemInformationStore extends VuexModule {
   }
 
   @Mutation
-  updateSystemNetwork(network: [Network]): void {
+  updateSystemNetwork(networks: [Network]): void {
     if (this.system) {
-      this.system.network = network
+      // derivate interface upload and download speeds from the previous values
+      const now = Date.now()
+      for(let network of networks) {
+        const previousNetwork = this.system.network.find(n => n.name === network.name)
+        const dt = (now - (previousNetwork?.last_update ?? 5)) / 1000
+        network.last_update = now
+        if (previousNetwork) {
+          network.upload_speed = (network.total_received_B - previousNetwork.total_received_B) / dt
+          network.download_speed = (network.total_transmitted_B - previousNetwork.total_transmitted_B) / dt
+        }
+      }
+      this.system.network = networks
     }
   }
 

core/frontend/src/types/system-information/system.ts

@@ -87,6 +87,7 @@ export interface Network {
      * @param total_received_B - Total number of bytes received
      * @param total_transmitted_B - Total number of bytes transmitted
      * @param transmitted_B - Number of bytes received since last probe
+     * @param last_update - Unix time in seconds
     * */
     description: string,
     errors_on_received: number,
@@ -106,6 +107,9 @@ export interface Network {
     total_received_B: number,
     total_transmitted_B: number,
     transmitted_B: number
+    last_update?: number
+    upload_speed?: number
+    download_speed?: number
 }
 
 /** Base structure that provides disk information for process */

core/frontend/src/widgets/Networking.vue

@@ -0,0 +1,65 @@
+<template>
+  <v-card class="d-flex align-center justify-center" height="40">
+    <v-card-title>
+      <v-icon>mdi-arrow-up</v-icon>
+      {{ formatBandwidth(upload) }}
+      <v-icon>mdi-arrow-down</v-icon>
+      {{ formatBandwidth(download) }}
+    </v-card-title>
+  </v-card>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+
+import { OneMoreTime } from '@/one-more-time'
+import system_information, { FetchType } from '@/store/system-information'
+
+export default Vue.extend({
+  name: 'CpuWidget',
+  data() {
+    return {
+      timer: 0,
+      check_backend_status_task: new OneMoreTime({ delay: 2000, disposeWith: this }),
+    }
+  },
+  computed: {
+    upload(): number {
+      const eth0 = system_information.system?.network?.find((iface) => iface.name === 'eth0')
+      return eth0?.upload_speed ?? 0
+    },
+    download(): number {
+      const eth0 = system_information.system?.network?.find((iface) => iface.name === 'eth0')
+      return eth0?.download_speed ?? 0
+    },
+  },
+  mounted() {
+    this.check_backend_status_task.setAction(() => {
+      system_information.fetchSystemInformation(FetchType.SystemNetworkType)
+    })
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+  },
+  methods: {
+    formatBandwidth(bytesPerSecond: number): string {
+      const units = ['bps', 'kbps', 'Mbps', 'Gbps']
+      const base = 1000
+
+      if (bytesPerSecond <= 0) return '0 bps'
+
+      const bitsPerSecond = bytesPerSecond * 8
+
+      const unitIndex = Math.max(0, Math.min(
+        Math.floor(Math.log(bitsPerSecond) / Math.log(base)),
+        units.length - 1,
+      ))
+
+      const exp = Math.min(Math.floor(Math.log(bytesPerSecond * 8) / Math.log(base)), units.length - 1)
+      const value = bytesPerSecond * 8 / base ** exp
+
+      return `${value.toFixed(2)} ${units[unitIndex]}`
+    },
+  },
+})
+</script>