Add UI_DETAILED_STATS variable

Show detailed RX / TX stats when UI_DETAILED_STATS = true Add api method to get UI_DETAILED_STATS value on frontend
1 year ago · fa392cf260
5 changed files with 39 additions and 8 deletions
--- a/src/config.js
+++ b/src/config.js
@ -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';
--- a/src/lib/Server.js
+++ b/src/lib/Server.js
@ -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) => {
--- a/src/www/index.html
+++ b/src/www/index.html
@ -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 -->
--- a/src/www/js/api.js
+++ b/src/www/js/api.js
@ -43,6 +43,13 @@ class API {
    });
  }

+  async getUiDetailedStats() {
+    return this.call({
+      method: 'get',
+      path: '/ui-detailed-stats',
+    });
+  }
+
  async getSession() {
    return this.call({
      method: 'get',
--- a/src/www/js/app.js
+++ b/src/www/js/app.js
@ -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())