forks/amnezia-wg-easy
1
0
Fork 0
forked from mirrors/amnezia-wg-easy
Code Pull requests Activity

Add UI_DETAILED_STATS variable

Browse source 
Show detailed RX / TX stats when UI_DETAILED_STATS = true
Add api method to get UI_DETAILED_STATS value on frontend
This commit is contained in:
Sergei Birukov 2024-02-13 12:53:32 +03:00
parent a1fdc610ad
commit fa392cf260
5 changed files with 39 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/config.js
View file

@ -29,3 +29,4 @@ iptables -A FORWARD -o wg0 -j ACCEPT;
module.exports.WG_PRE_DOWN = process.env.WG_PRE_DOWN || '';
module.exports.WG_POST_DOWN = process.env.WG_POST_DOWN || '';
module.exports.LANG = process.env.LANG || 'en';
module.exports.UI_DETAILED_STATS = process.env.UI_DETAILED_STATS || 'false';

4
src/lib/Server.js
View file

@ -18,6 +18,7 @@ const {
RELEASE,
PASSWORD,
LANG,
UI_DETAILED_STATS,
} = require('../config');
module.exports = class Server {
@ -44,6 +45,9 @@ module.exports = class Server {
.get('/api/lang', (Util.promisify(async () => {
return LANG;
})))
.get('/api/ui-detailed-stats', (Util.promisify(async () => {
return UI_DETAILED_STATS === 'true' ? true : false;
})))
// Authentication
.get('/api/session', Util.promisify(async (req) => {

32
src/www/index.html
View file

@ -17,11 +17,8 @@
</style>
<body class="bg-gray-50 dark:bg-neutral-800">
<div id="app">
<div v-cloak class="container mx-auto max-w-3xl px-5 md:px-0">
<div v-if="authenticated === true">
<span v-if="requiresPassword"
class="text-sm text-gray-400 dark:text-neutral-400 mb-10 mr-2 mt-3 cursor-pointer hover:underline float-right"
@ -92,8 +89,6 @@
<div class="relative p-5 z-10 flex flex-col xs:flex-row justify-between gap-3">
<div class="flex gap-2 w-full items-center ">
<!-- flex-wrap sm:flex-nowrap flex-col sm:flex-row pb-2 md:pb-0-->
<!-- <div class="flex flex-grow items-center"> -->
<!-- Avatar -->
<div class="h-10 w-10 mr-4 mt-2 self-start rounded-full bg-gray-50 relative">
@ -166,16 +161,37 @@
</svg>
</span>
</span>
<!-- Inline Transfer TX -->
<span v-if="!uiDetailedStats && client.transferTx" :title="$t('totalDownload') + bytes(client.transferTx)">
·
<svg class="align-middle h-3 inline" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd"
d="M16.707 10.293a1 1 0 010 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 111.414-1.414L9 14.586V3a1 1 0 012 0v11.586l4.293-4.293a1 1 0 011.414 0z"
clip-rule="evenodd" />
</svg>
{{client.transferTxCurrent | bytes}}/s
</span>
<!-- Inline Transfer RX -->
<span v-if="!uiDetailedStats && client.transferRx" :title="$t('totalUpload') + bytes(client.transferRx)">
·
<svg class="align-middle h-3 inline" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd"
d="M3.293 9.707a1 1 0 010-1.414l6-6a1 1 0 011.414 0l6 6a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L4.707 9.707a1 1 0 01-1.414 0z"
clip-rule="evenodd" />
</svg>
{{client.transferRxCurrent | bytes}}/s
</span>
<!-- Last seen -->
<span class="text-gray-400 dark:text-neutral-500" v-if=" client.latestHandshakeAt"
<span class="text-gray-400 dark:text-neutral-500" v-if="true"
:title="$t('lastSeen') + dateTime(new Date(client.latestHandshakeAt))">
{{new Date(client.latestHandshakeAt) | timeago}}
{{!uiDetailedStats ? " · " : ""}}{{new Date(client.latestHandshakeAt) | timeago}}
</span>
</div>
</div>
<!-- Info -->
<div
<div v-if="uiDetailedStats"
class="flex gap-2 items-center text-gray-400 dark:text-neutral-400 text-xs mt-px -ml-4 md:ml-0">
<!-- Transfer TX -->

7
src/www/js/api.js
View file

@ -43,6 +43,13 @@ class API {
});
}
async getUiDetailedStats() {
return this.call({
method: 'get',
path: '/ui-detailed-stats',
});
}
async getSession() {
return this.call({
method: 'get',

3
src/www/js/app.js
View file

@ -53,6 +53,7 @@ new Vue({
latestRelease: null,
isDark: null,
uiDetailedStats: false,
chartOptions: {
chart: {
@ -299,6 +300,8 @@ new Vue({
i18n.locale = lang;
}
this.uiDetailedStats = await this.api.getUiDetailedStats();
const currentRelease = await this.api.getRelease();
const latestRelease = await fetch('https://wg-easy.github.io/wg-easy/changelog.json')
.then((res) => res.json())