diff --git a/core/frontend/src/App.vue b/core/frontend/src/App.vue
index da28e23bbb..46c09c6831 100644
--- a/core/frontend/src/App.vue
+++ b/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,
diff --git a/core/frontend/src/store/system-information.ts b/core/frontend/src/store/system-information.ts
index 3e2b6c696e..02c591b513 100644
--- a/core/frontend/src/store/system-information.ts
+++ b/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
}
}
diff --git a/core/frontend/src/types/system-information/system.ts b/core/frontend/src/types/system-information/system.ts
index 84ee9dffe7..06a013dd4d 100644
--- a/core/frontend/src/types/system-information/system.ts
+++ b/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 */
diff --git a/core/frontend/src/widgets/Networking.vue b/core/frontend/src/widgets/Networking.vue
new file mode 100644
index 0000000000..a2a00d1127
--- /dev/null
+++ b/core/frontend/src/widgets/Networking.vue
@@ -0,0 +1,65 @@
+
+
+
+ mdi-arrow-up
+ {{ formatBandwidth(upload) }}
+ mdi-arrow-down
+ {{ formatBandwidth(download) }}
+
+
+
+
+