kamp/WGDashboard
1
0
Fork 0
mirror of https://github.com/donaldzou/WGDashboard.git synced 2024-11-06 16:00:28 +01:00
Code

Finished adding data usage on configuration list

Browse Source
This commit is contained in:
Donald Zou 2024-08-09 17:30:44 -04:00
parent 764e0c7607
commit 9644e6195c
4 changed files with 59 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/static/app/src/components/configurationComponents/peerList.vue
View File

@ -212,7 +212,8 @@ export default {
{ {
label: 'Data Sent', label: 'Data Sent',
data: [...this.historySentData.datasets[0].data, data: [...this.historySentData.datasets[0].data,
((sent - this.historyDataSentDifference[this.historyDataSentDifference.length - 1])*1000).toFixed(4)], ((sent - this.historyDataSentDifference[this.historyDataSentDifference.length - 1])*1000)
.toFixed(4)],
fill: false, fill: false,
borderColor: '#198754', borderColor: '#198754',
tension: 0 tension: 0
@ -237,6 +238,15 @@ export default {
fill: false, fill: false,
borderColor: '#0d6efd', borderColor: '#0d6efd',
tension: 0 tension: 0
},
{
label: 'Data Sent',
data: [...this.historySentData.datasets[0].data,
((sent - this.historyDataSentDifference[this.historyDataSentDifference.length - 1])*1000)
.toFixed(4)],
fill: false,
borderColor: '#198754',
tension: 0
} }
], ],
} }

10
src/static/app/src/components/configurationList.vue
View File

@ -8,7 +8,6 @@ export default {
components: {ConfigurationCard}, components: {ConfigurationCard},
async setup(){ async setup(){
const wireguardConfigurationsStore = WireguardConfigurationsStore(); const wireguardConfigurationsStore = WireguardConfigurationsStore();
return {wireguardConfigurationsStore} return {wireguardConfigurationsStore}
}, },
data(){ data(){
@ -19,6 +18,13 @@ export default {
async mounted() { async mounted() {
await this.wireguardConfigurationsStore.getConfigurations(); await this.wireguardConfigurationsStore.getConfigurations();
this.configurationLoaded = true; this.configurationLoaded = true;
this.wireguardConfigurationsStore.ConfigurationListInterval = setInterval(() => {
this.wireguardConfigurationsStore.getConfigurations()
}, 10000)
},
beforeUnmount() {
clearInterval(this.wireguardConfigurationsStore.ConfigurationListInterval)
} }
} }
</script> </script>
@ -40,7 +46,7 @@ export default {
<p class="text-muted" v-if="this.wireguardConfigurationsStore.Configurations.length === 0"> <p class="text-muted" v-if="this.wireguardConfigurationsStore.Configurations.length === 0">
You don't have any WireGuard configurations yet. Please check the configuration folder or change it in "Settings". By default the folder is "/etc/wireguard". You don't have any WireGuard configurations yet. Please check the configuration folder or change it in "Settings". By default the folder is "/etc/wireguard".
</p> </p>
<div class="d-flex gap-3 flex-column" v-else> <div class="d-flex gap-3 flex-column mb-3" v-else>
<ConfigurationCard v-for="c in this.wireguardConfigurationsStore.Configurations" :key="c.Name" :c="c"></ConfigurationCard> <ConfigurationCard v-for="c in this.wireguardConfigurationsStore.Configurations" :key="c.Name" :c="c"></ConfigurationCard>
</div> </div>
</div> </div>

21
src/static/app/src/components/configurationListComponents/configurationCard.vue
View File

@ -10,7 +10,6 @@ export default {
Status: Boolean, Status: Boolean,
PublicKey: String, PublicKey: String,
PrivateKey: String PrivateKey: String
} }
}, },
data(){ data(){
@ -52,9 +51,24 @@ export default {
<i class="bi bi-chevron-right"></i> <i class="bi bi-chevron-right"></i>
</h6> </h6>
</RouterLink> </RouterLink>
<div class="card-footer d-flex align-items-center"> <div class="card-footer d-flex gap-2 flex-column">
<div class="d-flex gap-4">
<small >
<i class="bi bi-arrow-down-up me-2"></i>{{c.DataUsage.Total > 0 ? c.DataUsage.Total.toFixed(4) : 0}} GB
</small>
<small class="text-primary-emphasis">
<i class="bi bi-arrow-down me-2"></i>{{c.DataUsage.Receive > 0 ? c.DataUsage.Receive.toFixed(4) : 0}} GB
</small>
<small class="text-success-emphasis">
<i class="bi bi-arrow-up me-2"></i>{{c.DataUsage.Sent > 0 ? c.DataUsage.Sent.toFixed(4) : 0}} GB
</small>
<small class="ms-auto">
<span class="dot me-2" :class="{active: c.ConnectedPeers > 0}"></span>{{c.ConnectedPeers}} Peers
</small>
</div>
<div class="d-flex align-items-center">
<small class="me-2 text-muted"> <small class="me-2 text-muted">
<strong>PUBLIC KEY</strong> <strong>Public Key</strong>
</small> </small>
<small class="mb-0 d-block d-lg-inline-block "> <small class="mb-0 d-block d-lg-inline-block ">
<samp style="line-break: anywhere">{{c.PublicKey}}</samp> <samp style="line-break: anywhere">{{c.PublicKey}}</samp>
@ -76,6 +90,7 @@ export default {
</div> </div>
</div> </div>
</div> </div>
</div>
</template> </template>
<style scoped> <style scoped>

1
src/static/app/src/stores/WireguardConfigurationsStore.js
View File

@ -6,6 +6,7 @@ export const WireguardConfigurationsStore = defineStore('WireguardConfigurations
state: () => ({ state: () => ({
Configurations: undefined, Configurations: undefined,
searchString: "", searchString: "",
ConfigurationListInterval: undefined,
PeerScheduleJobs: { PeerScheduleJobs: {
dropdowns: { dropdowns: {
Field: [ Field: [