mirror
/
wg-easy
mirror of https://github.com/wg-easy/wg-easy
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Add `UI_TRAFFIC_STATS` (#873) 

Thank you @suxscribe!
pull/862/head
Philip H 1 year ago
committed by GitHub
parent
18d774b598 1a6e5e3ea7
commit
f603d6b5da
No known key found for this signature in database GPG Key ID: B5690EEEBB952194
9 changed files with 225 additions and 86 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      README.md
  2. 1
      docker-compose.yml
  3. 1
      src/config.js
  4. 4
      src/lib/Server.js
  5. 11
      src/tailwind.config.js
  6. 80
      src/www/css/app.css
  7. 194
      src/www/index.html
  8. 7
      src/www/js/api.js
  9. 12
      src/www/js/app.js

1
README.md
View File

@ -98,6 +98,7 @@ These options can be configured by setting environment variables using `-e KEY="
| `WG_PRE_DOWN` | `...` | - | See [config.js](https://github.com/wg-easy/wg-easy/blob/master/src/config.js#L27) for the default value. |
| `WG_POST_DOWN` | `...` | `iptables ...` | See [config.js](https://github.com/wg-easy/wg-easy/blob/master/src/config.js#L28) for the default value. |
| `LANG` | `en` | `de` | Web UI language (Supports: en, ua, ru, tr, no, pl, fr, de, ca, es, ko, vi, nl, is, pt, chs, cht, it, th). |
| `UI_TRAFFIC_STATS` | `false` | `true` | Enable detailed RX / TX client stats in Web UI |
> If you change `WG_PORT`, make sure to also change the exposed port.

1
docker-compose.yml
View File

@ -24,6 +24,7 @@ services:
# - WG_POST_UP=echo "Post Up" > /etc/wireguard/post-up.txt
# - WG_PRE_DOWN=echo "Pre Down" > /etc/wireguard/pre-down.txt
# - WG_POST_DOWN=echo "Post Down" > /etc/wireguard/post-down.txt
# - UI_TRAFFIC_STATS=true
image: ghcr.io/wg-easy/wg-easy
container_name: wg-easy

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_TRAFFIC_STATS = process.env.UI_TRAFFIC_STATS || 'false';

4
src/lib/Server.js
View File

@ -18,6 +18,7 @@ const {
RELEASE,
PASSWORD,
LANG,
UI_TRAFFIC_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-traffic-stats', (Util.promisify(async () => {
return UI_TRAFFIC_STATS === 'true';
})))
// Authentication
.get('/api/session', Util.promisify(async (req) => {

11
src/tailwind.config.js
View File

@ -5,4 +5,15 @@
module.exports = {
darkMode: 'media',
content: ['./www/**/*.{html,js}'],
theme: {
screens: {
xxs: '450px',
xs: '576px',
sm: '640px',
md: '768px',
lg: '1024px',
xl: '1280px',
'2xl': '1536px',
},
},
};

80
src/www/css/app.css
View File

@ -548,6 +548,18 @@ video {
width: 100%;
}
@media (min-width: 450px) {
.container {
max-width: 450px;
}
}
@media (min-width: 576px) {
.container {
max-width: 576px;
}
}
@media (min-width: 640px) {
.container {
max-width: 640px;
@ -700,8 +712,12 @@ video {
margin-right: 0.5rem;
}
.mr-5 {
margin-right: 1.25rem;
.mt-0 {
margin-top: 0px;
}
.mt-0\.5 {
margin-top: 0.125rem;
}
.mt-10 {
@ -720,6 +736,10 @@ video {
margin-top: 1.25rem;
}
.mt-px {
margin-top: 1px;
}
.block {
display: block;
}
@ -832,6 +852,10 @@ video {
width: 100%;
}
.min-w-20 {
min-width: 5rem;
}
.max-w-3xl {
max-width: 48rem;
}
@ -844,6 +868,10 @@ video {
flex-shrink: 0;
}
.shrink-0 {
flex-shrink: 0;
}
.flex-grow {
flex-grow: 1;
}
@ -917,6 +945,18 @@ video {
gap: 0.25rem;
}
.gap-2 {
gap: 0.5rem;
}
.gap-3 {
gap: 0.75rem;
}
.self-start {
align-self: flex-start;
}
.overflow-hidden {
overflow: hidden;
}
@ -931,6 +971,10 @@ video {
white-space: nowrap;
}
.whitespace-nowrap {
white-space: nowrap;
}
.rounded {
border-radius: 0.25rem;
}
@ -1097,6 +1141,11 @@ video {
padding-bottom: 0.75rem;
}
.py-5 {
padding-top: 1.25rem;
padding-bottom: 1.25rem;
}
.pb-1 {
padding-bottom: 0.25rem;
}
@ -1105,10 +1154,6 @@ video {
padding-bottom: 3rem;
}
.pb-2 {
padding-bottom: 0.5rem;
}
.pb-20 {
padding-bottom: 5rem;
}
@ -1413,6 +1458,12 @@ video {
opacity: 1;
}
@media (min-width: 450px) {
.xxs\:flex-row {
flex-direction: row;
}
}
@media (min-width: 640px) {
.sm\:mx-0 {
margin-left: 0px;
@ -1480,6 +1531,10 @@ video {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.sm\:flex-row {
flex-direction: row;
}
.sm\:flex-row-reverse {
flex-direction: row-reverse;
}
@ -1524,8 +1579,12 @@ video {
display: inline-block;
}
.md\:flex-row {
flex-direction: row;
.md\:min-w-24 {
min-width: 6rem;
}
.md\:gap-4 {
gap: 1rem;
}
.md\:px-0 {
@ -1536,6 +1595,11 @@ video {
.md\:pb-0 {
padding-bottom: 0px;
}
.md\:text-base {
font-size: 1rem;
line-height: 1.5rem;
}
}
@media (prefers-color-scheme: dark) {

194
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-cloak class="container mx-auto max-w-3xl px-3 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"
@ -89,11 +86,14 @@
style="transform: scaleY(-1);">
</apexchart>
</div>
<div class="relative p-5 z-10 flex flex-col md:flex-row justify-between">
<div class="flex items-center pb-2 md:pb-0">
<div class="h-10 w-10 mr-5 rounded-full bg-gray-50 relative">
<svg class="w-6 m-2 text-gray-300" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20" fill="currentColor">
<div class="relative py-5 px-3 z-10 flex flex-col sm:flex-row justify-between gap-3">
<div class="flex gap-3 md:gap-4 w-full items-center ">
<!-- Avatar -->
<div class="h-10 w-10 mt-2 self-start rounded-full bg-gray-50 relative">
<svg class="w-6 m-2 text-gray-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
clip-rule="evenodd" />
</svg>
@ -108,52 +108,26 @@
</div>
</div>
<div class="flex-grow">
<!-- Name & Info -->
<div class="flex flex-col xxs:flex-row w-full gap-2">
<!-- Name -->
<div class="text-gray-700 dark:text-neutral-200 group"
:title="$t('createdOn') + dateTime(new Date(client.createdAt))">
<!-- Show -->
<input v-show="clientEditNameId === client.id" v-model="clientEditName"
v-on:keyup.enter="updateClientName(client, clientEditName); clientEditName = null; clientEditNameId = null;"
v-on:keyup.escape="clientEditName = null; clientEditNameId = null;"
:ref="'client-' + client.id + '-name'"
class="rounded px-1 border-2 dark:bg-neutral-700 border-gray-100 dark:border-neutral-600 focus:border-gray-200 dark:focus:border-neutral-500 dark:placeholder:text-neutral-500 outline-none w-30" />
<span v-show="clientEditNameId !== client.id"
class="inline-block border-t-2 border-b-2 border-transparent">{{client.name}}</span>
<!-- Edit -->
<span v-show="clientEditNameId !== client.id"
@click="clientEditName = client.name; clientEditNameId = client.id; setTimeout(() => $refs['client-' + client.id + '-name'][0].select(), 1);"
class="cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity">
<svg xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4 inline align-middle opacity-25 hover:opacity-100" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
</svg>
</span>
</div>
<!-- Info -->
<div class="text-gray-400 dark:text-neutral-400 text-xs">
<!-- Address -->
<span class="group block md:inline-block pb-1 md:pb-0">
<div class="flex flex-col flex-grow gap-1">
<div class="text-gray-700 dark:text-neutral-200 group text-sm md:text-base"
:title="$t('createdOn') + dateTime(new Date(client.createdAt))">
<!-- Show -->
<input v-show="clientEditAddressId === client.id" v-model="clientEditAddress"
v-on:keyup.enter="updateClientAddress(client, clientEditAddress); clientEditAddress = null; clientEditAddressId = null;"
v-on:keyup.escape="clientEditAddress = null; clientEditAddressId = null;"
:ref="'client-' + client.id + '-address'"
class="rounded border-2 dark:bg-neutral-700 border-gray-100 dark:border-neutral-600 focus:border-gray-200 dark:focus:border-neutral-500 outline-none w-20 text-black dark:text-neutral-300 dark:placeholder:text-neutral-500" />
<span v-show="clientEditAddressId !== client.id"
class="inline-block border-t-2 border-b-2 border-transparent">{{client.address}}</span>
<input v-show="clientEditNameId === client.id" v-model="clientEditName"
v-on:keyup.enter="updateClientName(client, clientEditName); clientEditName = null; clientEditNameId = null;"
v-on:keyup.escape="clientEditName = null; clientEditNameId = null;"
:ref="'client-' + client.id + '-name'"
class="rounded px-1 border-2 dark:bg-neutral-700 border-gray-100 dark:border-neutral-600 focus:border-gray-200 dark:focus:border-neutral-500 dark:placeholder:text-neutral-500 outline-none w-30" />
<span v-show="clientEditNameId !== client.id"
class="border-t-2 border-b-2 border-transparent">{{client.name}}</span>
<!-- Edit -->
<span v-show="clientEditAddressId !== client.id"
@click="clientEditAddress = client.address; clientEditAddressId = client.id; setTimeout(() => $refs['client-' + client.id + '-address'][0].select(), 1);"
<span v-show="clientEditNameId !== client.id"
@click="clientEditName = client.name; clientEditNameId = client.id; setTimeout(() => $refs['client-' + client.id + '-name'][0].select(), 1);"
class="cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity">
<svg xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4 inline align-middle opacity-25 hover:opacity-100" fill="none"
@ -162,39 +136,105 @@
d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
</svg>
</span>
</span>
</div>
<!-- Address -->
<div class=" block md:inline-block pb-1 md:pb-0 text-gray-500 dark:text-neutral-400 text-xs">
<span class="group">
<!-- Show -->
<input v-show="clientEditAddressId === client.id" v-model="clientEditAddress"
v-on:keyup.enter="updateClientAddress(client, clientEditAddress); clientEditAddress = null; clientEditAddressId = null;"
v-on:keyup.escape="clientEditAddress = null; clientEditAddressId = null;"
:ref="'client-' + client.id + '-address'"
class="rounded border-2 dark:bg-neutral-700 border-gray-100 dark:border-neutral-600 focus:border-gray-200 dark:focus:border-neutral-500 outline-none w-20 text-black dark:text-neutral-300 dark:placeholder:text-neutral-500" />
<span v-show="clientEditAddressId !== client.id"
class="inline-block ">{{client.address}}</span>
<!-- Edit -->
<span v-show="clientEditAddressId !== client.id"
@click="clientEditAddress = client.address; clientEditAddressId = client.id; setTimeout(() => $refs['client-' + client.id + '-address'][0].select(), 1);"
class="cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity">
<svg xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4 inline align-middle opacity-25 hover:opacity-100" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
</svg>
</span>
</span>
<!-- Inline Transfer TX -->
<span v-if="!uiTrafficStats && client.transferTx" class="whitespace-nowrap" :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="!uiTrafficStats && client.transferRx" class="whitespace-nowrap" :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 whitespace-nowrap" v-if="client.latestHandshakeAt"
:title="$t('lastSeen') + dateTime(new Date(client.latestHandshakeAt))">
{{!uiTrafficStats ? " · " : ""}}{{new Date(client.latestHandshakeAt) | timeago}}
</span>
</div>
</div>
<!-- Info -->
<div v-if="uiTrafficStats"
class="flex gap-2 items-center shrink-0 text-gray-400 dark:text-neutral-400 text-xs mt-px justify-end">
<!-- Transfer TX -->
<span v-if="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>
<div class="min-w-20 md:min-w-24" v-if="client.transferTx">
<span class="flex gap-1" :title="$t('totalDownload') + bytes(client.transferTx)">
<svg class="align-middle h-3 inline mt-0.5" 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>
<div>
<span class="text-gray-700 dark:text-neutral-200">{{client.transferTxCurrent |
bytes}}/s</span>
<!-- Total TX -->
<br><span class="font-regular" style="font-size:0.85em">{{bytes(client.transferTx)}}</span>
</div>
</span>
</div>
<!-- Transfer RX -->
<span v-if="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 v-if="client.latestHandshakeAt"
:title="$t('lastSeen') + dateTime(new Date(client.latestHandshakeAt))">
· {{new Date(client.latestHandshakeAt) | timeago}}
</span>
<div class="min-w-20 md:min-w-24" v-if="client.transferRx">
<span class="flex gap-1" :title="$t('totalUpload') + bytes(client.transferRx)">
<svg class="align-middle h-3 inline mt-0.5" 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>
<div>
<span class="text-gray-700 dark:text-neutral-200">{{client.transferRxCurrent |
bytes}}/s</span>
<!-- Total RX -->
<br><span class="font-regular" style="font-size:0.85em">{{bytes(client.transferRx)}}</span>
</div>
</span>
</div>
</div>
</div>
<!-- </div> --> <!-- <div class="flex flex-grow items-center"> -->
</div>
<div class="flex items-center justify-end">
@ -509,4 +549,4 @@
<script src="./js/app.js"></script>
</body>
</html>
</html>

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

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

12
src/www/js/app.js
View File

@ -53,6 +53,7 @@ new Vue({
latestRelease: null,
isDark: null,
uiTrafficStats: false,
chartOptions: {
chart: {
@ -292,6 +293,15 @@ new Vue({
}).catch(console.error);
}, 1000);
this.api.getuiTrafficStats()
.then((res) => {
this.uiTrafficStats = res;
})
.catch(() => {
console.log('Failed to get ui-traffic-stats');
this.uiTrafficStats = false;
});
Promise.resolve().then(async () => {
const lang = await this.api.getLang();
if (lang !== localStorage.getItem('lang') && i18n.availableLocales.includes(lang)) {
@ -321,6 +331,6 @@ new Vue({
this.currentRelease = currentRelease;
this.latestRelease = latestRelease;
}).catch(console.error);
}).catch((err) => console.error(err));
},
});

Write Preview
Loading…
Cancel
Save