[webapp] reduce api requests on info pages
This commit is contained in:
Axel Hinrichs
parent
c54846f211
commit
9c56b97405
@ -3,13 +3,13 @@
|
||||
<div class="page-header">
|
||||
<h1>Network Info</h1>
|
||||
</div>
|
||||
<WifiStationInfo />
|
||||
<WifiStationInfo v-bind="networkDataList"/>
|
||||
<div class="mt-5"></div>
|
||||
<WifiApInfo />
|
||||
<WifiApInfo v-bind="networkDataList"/>
|
||||
<div class="mt-5"></div>
|
||||
<InterfaceStationInfo />
|
||||
<InterfaceStationInfo v-bind="networkDataList"/>
|
||||
<div class="mt-5"></div>
|
||||
<InterfaceApInfo />
|
||||
<InterfaceApInfo v-bind="networkDataList"/>
|
||||
<div class="mt-5"></div>
|
||||
</div>
|
||||
</template>
|
||||
@ -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));
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@ -3,11 +3,11 @@
|
||||
<div class="page-header">
|
||||
<h1>System Info</h1>
|
||||
</div>
|
||||
<FirmwareInfo />
|
||||
<FirmwareInfo v-bind="systemDataList"/>
|
||||
<div class="mt-5"></div>
|
||||
<HardwareInfo />
|
||||
<HardwareInfo v-bind="systemDataList"/>
|
||||
<div class="mt-5"></div>
|
||||
<MemoryInfo />
|
||||
<MemoryInfo v-bind="systemDataList"/>
|
||||
<div class="mt-5"></div>
|
||||
</div>
|
||||
</template>
|
||||
@ -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));
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -9,35 +9,35 @@
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>Hostname</th>
|
||||
<td>{{ systemDataList.hostname }}</td>
|
||||
<td>{{ hostname }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>SDK Version</th>
|
||||
<td>{{ systemDataList.sdkversion }}</td>
|
||||
<td>{{ sdkversion }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Firmware Version</th>
|
||||
<td>{{ systemDataList.firmware_version }}</td>
|
||||
<td>{{ firmware_version }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Git Hash</th>
|
||||
<td>{{ systemDataList.git_hash }}</td>
|
||||
<td>{{ git_hash }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Reset Reason CPU 0</th>
|
||||
<td>{{ systemDataList.resetreason_0 }}</td>
|
||||
<td>{{ resetreason_0 }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Reset Reason CPU 1</th>
|
||||
<td>{{ systemDataList.resetreason_1 }}</td>
|
||||
<td>{{ resetreason_1 }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Config save count</th>
|
||||
<td>{{ systemDataList.cfgsavecount }}</td>
|
||||
<td>{{ cfgsavecount }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Uptime</th>
|
||||
<td>{{ timeInHours(systemDataList.uptime) }}</td>
|
||||
<td>{{ timeInHours(uptime) }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@ -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));
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -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);
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
@ -9,19 +9,19 @@
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>Chip Model</th>
|
||||
<td>{{ systemDataList.chipmodel }}</td>
|
||||
<td>{{ chipmodel }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Chip Revision</th>
|
||||
<td>{{ systemDataList.chiprevision }}</td>
|
||||
<td>{{ chiprevision }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Chip Cores</th>
|
||||
<td>{{ systemDataList.chipcores }}</td>
|
||||
<td>{{ chipcores }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>CPU Frequency</th>
|
||||
<td>{{ systemDataList.cpufreq }} MHz</td>
|
||||
<td>{{ cpufreq }} MHz</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@ -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,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -9,11 +9,11 @@
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>IP Address</th>
|
||||
<td>{{ networkDataList.ap_ip }}</td>
|
||||
<td>{{ ap_ip }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>MAC Address</th>
|
||||
<td>{{ networkDataList.ap_mac }}</td>
|
||||
<td>{{ ap_mac }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@ -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,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -9,27 +9,27 @@
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>IP Address</th>
|
||||
<td>{{ networkDataList.sta_ip }}</td>
|
||||
<td>{{ sta_ip }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Netmask</th>
|
||||
<td>{{ networkDataList.sta_netmask }}</td>
|
||||
<td>{{ sta_netmask }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Default Gateway</th>
|
||||
<td>{{ networkDataList.sta_gateway }}</td>
|
||||
<td>{{ sta_gateway }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>DNS 1</th>
|
||||
<td>{{ networkDataList.sta_dns1 }}</td>
|
||||
<td>{{ sta_dns1 }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>DNS 2</th>
|
||||
<td>{{ networkDataList.sta_dns2 }}</td>
|
||||
<td>{{ sta_dns2 }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>MAC Address</th>
|
||||
<td>{{ networkDataList.sta_mac }}</td>
|
||||
<td>{{ sta_mac }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@ -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,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -14,10 +14,10 @@
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<FsInfo name="Heap" :total="systemDataList.heap_total" :used="systemDataList.heap_used" />
|
||||
<FsInfo name="LittleFs" :total="systemDataList.littlefs_total"
|
||||
:used="systemDataList.littlefs_used" />
|
||||
<FsInfo name="Sketch" :total="systemDataList.sketch_total" :used="systemDataList.sketch_used" />
|
||||
<FsInfo name="Heap" :total="heap_total" :used="heap_used" />
|
||||
<FsInfo name="LittleFs" :total="littlefs_total"
|
||||
:used="littlefs_used" />
|
||||
<FsInfo name="Sketch" :total="sketch_total" :used="sketch_used" />
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@ -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 },
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -10,20 +10,20 @@
|
||||
<tr>
|
||||
<th>Status</th>
|
||||
<td class="badge" :class="{
|
||||
'bg-danger': !networkDataList.ap_status,
|
||||
'bg-success': networkDataList.ap_status,
|
||||
'bg-danger': !ap_status,
|
||||
'bg-success': ap_status,
|
||||
}">
|
||||
<span v-if="networkDataList.ap_status">enabled</span>
|
||||
<span v-if="ap_status">enabled</span>
|
||||
<span v-else>disabled</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>SSID</th>
|
||||
<td>{{ networkDataList.ap_ssid }}</td>
|
||||
<td>{{ ap_ssid }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th># Stations</th>
|
||||
<td>{{ networkDataList.ap_stationnum }}</td>
|
||||
<td>{{ ap_stationnum }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@ -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 },
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -10,24 +10,24 @@
|
||||
<tr>
|
||||
<th>Status</th>
|
||||
<td class="badge" :class="{
|
||||
'bg-danger': !networkDataList.sta_status,
|
||||
'bg-success': networkDataList.sta_status,
|
||||
'bg-danger': !sta_status,
|
||||
'bg-success': sta_status,
|
||||
}">
|
||||
<span v-if="networkDataList.sta_status">enabled</span>
|
||||
<span v-if="sta_status">enabled</span>
|
||||
<span v-else>disabled</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>SSID</th>
|
||||
<td>{{ networkDataList.sta_ssid }}</td>
|
||||
<td>{{ sta_ssid }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Quality</th>
|
||||
<td>{{ getRSSIasQuality(networkDataList.sta_rssi) }} %</td>
|
||||
<td>{{ getRSSIasQuality(sta_rssi) }} %</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>RSSI</th>
|
||||
<td>{{ networkDataList.sta_rssi }}</td>
|
||||
<td>{{ sta_rssi }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@ -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;
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user