From 9c56b974057b34d175d05f3a96da810753c31d4e Mon Sep 17 00:00:00 2001 From: Axel Hinrichs Date: Mon, 4 Jul 2022 16:20:28 +0200 Subject: [PATCH] [webapp] reduce api requests on info pages --- webapp/src/components/NetworkInfoView.vue | 42 ++++++++++++++-- webapp/src/components/SystemInfoView.vue | 43 +++++++++++++++-- .../src/components/partials/FirmwareInfo.vue | 48 +++++++------------ webapp/src/components/partials/FsInfo.vue | 2 +- .../src/components/partials/HardwareInfo.vue | 32 ++++--------- .../components/partials/InterfaceApInfo.vue | 24 ++-------- .../partials/InterfaceStationInfo.vue | 40 +++++----------- webapp/src/components/partials/MemoryInfo.vue | 36 +++++--------- webapp/src/components/partials/WifiApInfo.vue | 32 ++++--------- .../components/partials/WifiStationInfo.vue | 32 ++++--------- 10 files changed, 153 insertions(+), 178 deletions(-) diff --git a/webapp/src/components/NetworkInfoView.vue b/webapp/src/components/NetworkInfoView.vue index d87c43b5..eb53ae7a 100644 --- a/webapp/src/components/NetworkInfoView.vue +++ b/webapp/src/components/NetworkInfoView.vue @@ -3,13 +3,13 @@

Network Info

- +
- +
- +
- +
@@ -28,5 +28,39 @@ export default defineComponent({ InterfaceStationInfo, InterfaceApInfo, }, + data() { + return { + networkDataList: { + // WifiStationInfo + sta_status: false, + sta_ssid: "", + sta_rssi: 0, + // WifiApInfo + ap_status: false, + ap_ssid: "", + ap_stationnum: 0, + // InterfaceStationInfo + sta_ip: "", + sta_netmask: "", + sta_gateway: "", + sta_dns1: "", + sta_dns2: "", + sta_mac: "", + // InterfaceApInfo + ap_ip: "", + ap_mac: "", + } + } + }, + created() { + this.getNetworkInfo(); + }, + methods: { + getNetworkInfo() { + fetch("/api/network/status") + .then((response) => response.json()) + .then((data) => (this.networkDataList = data)); + }, + }, }); \ No newline at end of file diff --git a/webapp/src/components/SystemInfoView.vue b/webapp/src/components/SystemInfoView.vue index a60173fd..3385e9ef 100644 --- a/webapp/src/components/SystemInfoView.vue +++ b/webapp/src/components/SystemInfoView.vue @@ -3,11 +3,11 @@

System Info

- +
- +
- +
@@ -24,5 +24,42 @@ export default defineComponent({ FirmwareInfo, MemoryInfo, }, + data() { + return { + systemDataList: { + // HardwareInfo + chipmodel: "", + chiprevision: "", + chipcores: "", + cpufreq: "", + // FirmwareInfo + hostname: "", + sdkversion: "", + firmware_version: "", + git_hash: "", + resetreason_0: "", + resetreason_1: "", + cfgsavecount: 0, + uptime: 0, + // MemoryInfo + heap_total: 0, + heap_used: 0, + littlefs_total: 0, + littlefs_used: 0, + sketch_total: 0, + sketch_used: 0 + } + } + }, + created() { + this.getSystemInfo(); + }, + methods: { + getSystemInfo() { + fetch("/api/system/status") + .then((response) => response.json()) + .then((data) => (this.systemDataList = data)); + }, + }, }); diff --git a/webapp/src/components/partials/FirmwareInfo.vue b/webapp/src/components/partials/FirmwareInfo.vue index c95d65e7..fdcbb8cb 100644 --- a/webapp/src/components/partials/FirmwareInfo.vue +++ b/webapp/src/components/partials/FirmwareInfo.vue @@ -9,35 +9,35 @@ Hostname - {{ systemDataList.hostname }} + {{ hostname }} SDK Version - {{ systemDataList.sdkversion }} + {{ sdkversion }} Firmware Version - {{ systemDataList.firmware_version }} + {{ firmware_version }} Git Hash - {{ systemDataList.git_hash }} + {{ git_hash }} Reset Reason CPU 0 - {{ systemDataList.resetreason_0 }} + {{ resetreason_0 }} Reset Reason CPU 1 - {{ systemDataList.resetreason_1 }} + {{ resetreason_1 }} Config save count - {{ systemDataList.cfgsavecount }} + {{ cfgsavecount }} Uptime - {{ timeInHours(systemDataList.uptime) }} + {{ timeInHours(uptime) }} @@ -50,22 +50,15 @@ import { defineComponent } from 'vue'; export default defineComponent({ - data() { - return { - systemDataList: { - hostname: "", - sdkversion: "", - firmware_version: "", - git_hash: "", - resetreason_0: "", - resetreason_1: "", - cfgsavecount: 0, - uptime: 0 - }, - }; - }, - created() { - this.getSystemInfo(); + props: { + hostname: String, + sdkversion: String, + firmware_version: String, + git_hash: String, + resetreason_0: String, + resetreason_1: String, + cfgsavecount: { type: Number, required: true }, + uptime: { type: Number, required: true }, }, computed: { timeInHours() { @@ -83,12 +76,5 @@ export default defineComponent({ }; }, }, - methods: { - getSystemInfo() { - fetch("/api/system/status") - .then((response) => response.json()) - .then((data) => (this.systemDataList = data)); - }, - }, }); diff --git a/webapp/src/components/partials/FsInfo.vue b/webapp/src/components/partials/FsInfo.vue index 9d433c96..4fa3e4a8 100644 --- a/webapp/src/components/partials/FsInfo.vue +++ b/webapp/src/components/partials/FsInfo.vue @@ -29,7 +29,7 @@ export default defineComponent({ }, methods: { getPercent() { - return Math.round((this.used / this.total) * 100); + return this.total === 0 ? 0 : Math.round((this.used / this.total) * 100); }, }, }); diff --git a/webapp/src/components/partials/HardwareInfo.vue b/webapp/src/components/partials/HardwareInfo.vue index 6ff920cf..1b9fccee 100644 --- a/webapp/src/components/partials/HardwareInfo.vue +++ b/webapp/src/components/partials/HardwareInfo.vue @@ -9,19 +9,19 @@ Chip Model - {{ systemDataList.chipmodel }} + {{ chipmodel }} Chip Revision - {{ systemDataList.chiprevision }} + {{ chiprevision }} Chip Cores - {{ systemDataList.chipcores }} + {{ chipcores }} CPU Frequency - {{ systemDataList.cpufreq }} MHz + {{ cpufreq }} MHz @@ -34,25 +34,11 @@ import { defineComponent } from 'vue'; export default defineComponent({ - data() { - return { - systemDataList: { - chipmodel: "", - chiprevision: "", - chipcores: "", - cpufreq: "" - }, - }; - }, - created() { - this.getSystemInfo(); - }, - methods: { - getSystemInfo() { - fetch("/api/system/status") - .then((response) => response.json()) - .then((data) => (this.systemDataList = data)); - }, + props: { + chipmodel: String, + chiprevision: String, + chipcores: String, + cpufreq: String, }, }); diff --git a/webapp/src/components/partials/InterfaceApInfo.vue b/webapp/src/components/partials/InterfaceApInfo.vue index 91e13350..21c1324b 100644 --- a/webapp/src/components/partials/InterfaceApInfo.vue +++ b/webapp/src/components/partials/InterfaceApInfo.vue @@ -9,11 +9,11 @@ IP Address - {{ networkDataList.ap_ip }} + {{ ap_ip }} MAC Address - {{ networkDataList.ap_mac }} + {{ ap_mac }} @@ -26,23 +26,9 @@ import { defineComponent } from 'vue'; export default defineComponent({ - data() { - return { - networkDataList: { - ap_ip: "", - ap_mac: "" - }, - }; - }, - created() { - this.getNetworkInfo(); - }, - methods: { - getNetworkInfo() { - fetch("/api/network/status") - .then((response) => response.json()) - .then((data) => (this.networkDataList = data)); - }, + props: { + ap_ip: String, + ap_mac: String, }, }); diff --git a/webapp/src/components/partials/InterfaceStationInfo.vue b/webapp/src/components/partials/InterfaceStationInfo.vue index 87e3ac34..c70389ec 100644 --- a/webapp/src/components/partials/InterfaceStationInfo.vue +++ b/webapp/src/components/partials/InterfaceStationInfo.vue @@ -9,27 +9,27 @@ IP Address - {{ networkDataList.sta_ip }} + {{ sta_ip }} Netmask - {{ networkDataList.sta_netmask }} + {{ sta_netmask }} Default Gateway - {{ networkDataList.sta_gateway }} + {{ sta_gateway }} DNS 1 - {{ networkDataList.sta_dns1 }} + {{ sta_dns1 }} DNS 2 - {{ networkDataList.sta_dns2 }} + {{ sta_dns2 }} MAC Address - {{ networkDataList.sta_mac }} + {{ sta_mac }} @@ -42,27 +42,13 @@ import { defineComponent } from 'vue'; export default defineComponent({ - data() { - return { - networkDataList: { - sta_ip: "", - sta_netmask: "", - sta_gateway: "", - sta_dns1: "", - sta_dns2: "", - sta_mac: "" - }, - }; - }, - created() { - this.getNetworkInfo(); - }, - methods: { - getNetworkInfo() { - fetch("/api/network/status") - .then((response) => response.json()) - .then((data) => (this.networkDataList = data)); - }, + props: { + sta_ip: String, + sta_netmask: String, + sta_gateway: String, + sta_dns1: String, + sta_dns2: String, + sta_mac: String, }, }); diff --git a/webapp/src/components/partials/MemoryInfo.vue b/webapp/src/components/partials/MemoryInfo.vue index 3700e167..402bc5b0 100644 --- a/webapp/src/components/partials/MemoryInfo.vue +++ b/webapp/src/components/partials/MemoryInfo.vue @@ -14,10 +14,10 @@ - - - + + + @@ -33,27 +33,13 @@ export default defineComponent({ components: { FsInfo, }, - data() { - return { - systemDataList: { - heap_total: 0, - heap_used: 0, - littlefs_total: 0, - littlefs_used: 0, - sketch_total: 0, - sketch_used: 0 - }, - }; - }, - created() { - this.getSystemInfo(); - }, - methods: { - getSystemInfo() { - fetch("/api/system/status") - .then((response) => response.json()) - .then((data) => (this.systemDataList = data)); - }, + props: { + heap_total: { type: Number, required: true }, + heap_used: { type: Number, required: true }, + littlefs_total: { type: Number, required: true }, + littlefs_used: { type: Number, required: true }, + sketch_total: { type: Number, required: true }, + sketch_used: { type: Number, required: true }, }, }); diff --git a/webapp/src/components/partials/WifiApInfo.vue b/webapp/src/components/partials/WifiApInfo.vue index f8bc109d..bdf1eb98 100644 --- a/webapp/src/components/partials/WifiApInfo.vue +++ b/webapp/src/components/partials/WifiApInfo.vue @@ -10,20 +10,20 @@ Status - enabled + enabled disabled SSID - {{ networkDataList.ap_ssid }} + {{ ap_ssid }} # Stations - {{ networkDataList.ap_stationnum }} + {{ ap_stationnum }} @@ -36,24 +36,10 @@ import { defineComponent } from 'vue'; export default defineComponent({ - data() { - return { - networkDataList: { - ap_status: false, - ap_ssid: "", - ap_stationnum: 0 - }, - }; - }, - created() { - this.getNetworkInfo(); - }, - methods: { - getNetworkInfo() { - fetch("/api/network/status") - .then((response) => response.json()) - .then((data) => (this.networkDataList = data)); - }, + props: { + ap_status: { type: Boolean, required: true }, + ap_ssid: String, + ap_stationnum: { type: Number, required: true }, }, }); diff --git a/webapp/src/components/partials/WifiStationInfo.vue b/webapp/src/components/partials/WifiStationInfo.vue index 47d703cb..a3e3e047 100644 --- a/webapp/src/components/partials/WifiStationInfo.vue +++ b/webapp/src/components/partials/WifiStationInfo.vue @@ -10,24 +10,24 @@ Status - enabled + enabled disabled SSID - {{ networkDataList.sta_ssid }} + {{ sta_ssid }} Quality - {{ getRSSIasQuality(networkDataList.sta_rssi) }} % + {{ getRSSIasQuality(sta_rssi) }} % RSSI - {{ networkDataList.sta_rssi }} + {{ sta_rssi }} @@ -40,24 +40,12 @@ import { defineComponent } from 'vue'; export default defineComponent({ - data() { - return { - networkDataList: { - sta_status: false, - sta_ssid: "", - sta_rssi: 0 - }, - }; - }, - created() { - this.getNetworkInfo(); + props: { + sta_status: { type: Boolean, required: true }, + sta_ssid: String, + sta_rssi: { type: Number, required: true }, }, methods: { - getNetworkInfo() { - fetch("/api/network/status") - .then((response) => response.json()) - .then((data) => (this.networkDataList = data)); - }, getRSSIasQuality(rssi: number) { let quality = 0;