Add server status info to help dialogue

lib/www/client/source/src/components/help-dialog.vue

@@ -2,6 +2,7 @@
 <v-dialog
   v-model="dialog"
   max-width="500"
+  scrollable
   style="z-index:2020;"
 >
   <template v-slot:activator="{ on, attrs }">
@@ -58,6 +59,9 @@
 
 
       </v-window-item>
+      <v-window-item value="serverinfo">
+        <dougal-server-status :status="serverStatus"></dougal-server-status>
+      </v-window-item>
     </v-window>
 
     <v-divider></v-divider>
@@ -69,8 +73,7 @@
         text
         :href="`mailto:${email}?Subject=Question`"
       >
-        <v-icon class="d-lg-none">mdi-help-circle</v-icon>
+        <v-icon title="Ask a question">mdi-help-circle</v-icon>
-        <span class="d-none d-lg-inline">Ask a question</span>
       </v-btn>
 
       <v-btn
@@ -78,8 +81,7 @@
         text
         href="mailto:dougal-support@aaltronav.eu?Subject=Bug report"
       >
-        <v-icon class="d-lg-none">mdi-bug</v-icon>
+        <v-icon title="Report a bug">mdi-bug</v-icon>
-        <span class="d-none d-lg-inline">Report a bug</span>
       </v-btn>
 
       <!---
@@ -93,16 +95,36 @@
       </v-btn>
       --->
 
+      <v-btn
+        color="info"
+        text
+        title="View support info"
+        :input-value="page == 'support'"
+        @click="page = 'support'"
+      >
+        <v-icon>mdi-account-question</v-icon>
+      </v-btn>
+
       <v-btn v-if="versionHistory"
         color="info"
         text
-        :title="page == 'support' ? 'View release notes' : 'View support info'"
+        title="View release notes"
         :input-value="page == 'changelog'"
-        @click="page = page == 'support' ? 'changelog' : 'support'"
+        @click="page = 'changelog'"
       >
         <v-icon>mdi-history</v-icon>
       </v-btn>
 
+      <v-btn v-if="serverStatus"
+        color="info"
+        text
+        title="View server status"
+        :input-value="page == 'serverinfo'"
+        @click="page = 'serverinfo'"
+      >
+        <v-icon>mdi-server-network</v-icon>
+      </v-btn>
+
       <v-spacer></v-spacer>
 
 
@@ -124,46 +146,110 @@
 
 <script>
 import { mapActions, mapGetters } from 'vuex';
+import DougalServerStatus from './server-status';
 
 export default {
   name: 'DougalHelpDialog',
 
+  components: {
+    DougalServerStatus
+  },
+
   data () {
     return {
       dialog: false,
       email: "dougal-support@aaltronav.eu",
       feed: btoa(encodeURIComponent("https://gitlab.com/wgp/dougal/software.atom?feed_token=XSPpvsYEny8YmH75Nz5W")),
+      serverStatus: null,
       clientVersion: process.env.DOUGAL_FRONTEND_VERSION ?? "(unknown)",
       serverVersion: null,
       versionHistory: null,
       releaseHistory: [],
       releaseShown: null,
-      page: "support"
+      page: "support",
+
+      lastUpdate: 0,
+      updateInterval: 12000,
+      refreshTimer: null
     };
   },
 
+  computed: {
+    sinceUpdate () {
+      return this.lastUpdate
+        ? (Date.now() - this.lastUpdate)
+        : +Infinity;
+    }
+  },
+
+  watch: {
+    dialog(newVal) {
+      if (newVal) {
+        this.startAutoRefresh();
+      } else {
+        this.stopAutoRefresh();
+      }
+    },
+    page(newVal) {
+      if (newVal === 'serverinfo' && this.dialog) {
+        this.getServerStatus(); // Immediate update when switching to serverinfo
+        this.startAutoRefresh();
+      } else {
+        this.stopAutoRefresh();
+      }
+    }
+  },
+
   methods: {
     async getServerVersion () {
       if (!this.serverVersion) {
         const version = await this.api(['/version', {}, null, {silent:true}]);
         this.serverVersion = version?.tag ?? "(unknown)";
+        if (version) this.lastUpdate = Date.now();
       }
       if (!this.versionHistory) {
-        const history = await this.api(['/version/history?count=3', {}, null, {silent:true}]);
+        const history = await this.api(['/version/history?count=6', {}, null, {silent:true}]);
         this.releaseHistory = history;
         this.versionHistory = history?.[this.serverVersion.replace(/-.*$/, "")] ?? null;
       }
     },
 
+    async getServerStatus () {
+      const status = await this.api(['/diagnostics', {}, null, {silent: true}]);
+      if (status) {
+        this.serverStatus = status;
+        this.lastUpdate = Date.now();
+      }
+    },
+
+    startAutoRefresh() {
+      if (this.refreshTimer) return; // Prevent multiple timers
+      this.refreshTimer = setInterval(() => {
+        if (this.dialog && this.page === 'serverinfo') {
+          this.getServerStatus();
+          // Optionally refresh server version if needed
+          // this.getServerVersion();
+        }
+      }, this.updateInterval);
+    },
+
+    stopAutoRefresh() {
+      if (this.refreshTimer) {
+        clearInterval(this.refreshTimer);
+        this.refreshTimer = null;
+      }
+    },
+
     ...mapActions(["api"])
   },
 
   async mounted () {
     this.getServerVersion();
+    this.getServerStatus();
   },
 
-  async beforeUpdate () {
+  beforeDestroy() {
-    this.getServerVersion();
+    this.stopAutoRefresh(); // Clean up timer on component destruction
   }
 
 };

lib/www/client/source/src/components/server-status.vue

@@ -0,0 +1,213 @@
+<template>
+  <v-card max-width="800" max-height="600" class="mx-auto" style="overflow-y: auto;">
+    <v-card-title class="headline">
+      Server status – {{ status.hostname }}
+    </v-card-title>
+    <v-card-text>
+      <v-expansion-panels accordion>
+        <!-- System Info -->
+        <v-expansion-panel>
+          <v-expansion-panel-header>System Info</v-expansion-panel-header>
+          <v-expansion-panel-content>
+            <v-row>
+              <v-col cols="6">
+                <strong>Uptime:</strong> {{ formatUptime(status.uptime) }}
+              </v-col>
+              <v-col cols="6">
+                <strong>Load:</strong> {{ status.loadavg[0].toFixed(2) }} / {{ status.loadavg[1].toFixed(2) }} / {{ status.loadavg[2].toFixed(2) }}
+                <v-progress-linear
+                  :value="loadAvgPercent"
+                  :color="getLoadAvgColor(status.loadavg[0])"
+                  height="6"
+                  rounded
+                ></v-progress-linear>
+                <div class="text-caption">
+                  1-min Load: {{ status.loadavg[0].toFixed(2) }} ({{ loadAvgPercent.toFixed(1) }}% of max)
+                </div>
+              </v-col>
+            </v-row>
+          </v-expansion-panel-content>
+        </v-expansion-panel>
+
+        <!-- Memory -->
+        <v-expansion-panel>
+          <v-expansion-panel-header>Memory</v-expansion-panel-header>
+          <v-expansion-panel-content>
+            <v-progress-linear
+              :value="memoryUsedPercent"
+              :color="getProgressColor(memoryUsedPercent)"
+              height="10"
+              rounded
+            ></v-progress-linear>
+            <div class="text-caption mt-2">
+              Used: {{ formatBytes(status.memory.total - status.memory.free) }} / Total: {{ formatBytes(status.memory.total) }} ({{ memoryUsedPercent.toFixed(1) }}%)
+            </div>
+          </v-expansion-panel-content>
+        </v-expansion-panel>
+
+        <!-- CPUs -->
+        <v-expansion-panel>
+          <v-expansion-panel-header>CPUs ({{ status.cpus.length }} cores)</v-expansion-panel-header>
+          <v-expansion-panel-content>
+            <v-row dense>
+              <v-col v-for="(cpu, index) in status.cpus" :key="index" cols="12" sm="6">
+                <v-card outlined class="pa-2">
+                  <div class="text-caption">Core {{ index + 1 }}: {{ cpu.model }} @ {{ cpu.speed }} MHz</div>
+                  <v-progress-linear
+                    :value="cpuUsagePercent(cpu)"
+                    :color="getProgressColor(cpuUsagePercent(cpu))"
+                    height="8"
+                    rounded
+                  ></v-progress-linear>
+                  <div class="text-caption">
+                    Usage: {{ cpuUsagePercent(cpu).toFixed(1) }}% (Idle: {{ cpuIdlePercent(cpu).toFixed(1) }}%)
+                  </div>
+                </v-card>
+              </v-col>
+            </v-row>
+          </v-expansion-panel-content>
+        </v-expansion-panel>
+
+        <!-- Network Interfaces -->
+        <v-expansion-panel>
+          <v-expansion-panel-header>Network Interfaces</v-expansion-panel-header>
+          <v-expansion-panel-content>
+            <v-list dense>
+              <v-list-item v-for="(iface, name) in status.networkInterfaces" :key="name">
+                <v-list-item-content>
+                  <v-list-item-title>{{ name }}</v-list-item-title>
+                  <v-list-item-subtitle v-for="(addr, idx) in iface" :key="idx">
+                    {{ addr.family }}: {{ addr.address }} (Netmask: {{ addr.netmask }})
+                  </v-list-item-subtitle>
+                </v-list-item-content>
+              </v-list-item>
+            </v-list>
+          </v-expansion-panel-content>
+        </v-expansion-panel>
+
+        <!-- Storage -->
+        <v-expansion-panel>
+          <v-expansion-panel-header>Storage</v-expansion-panel-header>
+          <v-expansion-panel-content>
+            <!-- Root -->
+            <div class="mb-4">
+              <strong>Root (/):</strong>
+              <v-progress-linear
+                :value="status.storage.root.usedPercent"
+                :color="getProgressColor(status.storage.root.usedPercent)"
+                height="10"
+                rounded
+              ></v-progress-linear>
+              <div class="text-caption">
+                Used: {{ formatBytes(status.storage.root.used) }} / Total: {{ formatBytes(status.storage.root.total) }} ({{ status.storage.root.usedPercent.toFixed(1) }}%)
+              </div>
+            </div>
+            <!-- Data subfolders -->
+            <div>
+              <strong>Data:</strong>
+              <v-expansion-panels flat>
+                <v-expansion-panel v-for="(folder, name) in status.storage.data" :key="name">
+                  <v-expansion-panel-header disable-icon-rotate>{{ name }}</v-expansion-panel-header>
+                  <v-expansion-panel-content>
+                    <v-progress-linear
+                      :value="folder.usedPercent"
+                      :color="getProgressColor(folder.usedPercent)"
+                      height="10"
+                      rounded
+                    ></v-progress-linear>
+                    <div class="text-caption">
+                      Used: {{ formatBytes(folder.used) }} / Total: {{ formatBytes(folder.total) }} ({{ folder.usedPercent.toFixed(1) }}%)
+                    </div>
+                  </v-expansion-panel-content>
+                </v-expansion-panel>
+              </v-expansion-panels>
+            </div>
+          </v-expansion-panel-content>
+        </v-expansion-panel>
+
+        <!-- Database -->
+        <v-expansion-panel>
+          <v-expansion-panel-header>Database</v-expansion-panel-header>
+          <v-expansion-panel-content>
+            <div class="mb-2">
+              <strong>Total Size:</strong> {{ formatBytes(status.database.size) }}
+            </div>
+            <v-list dense>
+              <v-list-item v-for="(project, name) in status.database.projects" :key="name">
+                <v-list-item-content>
+                  <v-list-item-title>{{ name }}</v-list-item-title>
+                  <v-progress-linear
+                    :value="project.percent"
+                    :color="getProgressColor(project.percent)"
+                    height="8"
+                    rounded
+                  ></v-progress-linear>
+                  <v-list-item-subtitle>
+                    Size: {{ formatBytes(project.size) }} ({{ project.percent.toFixed(2) }}%)
+                  </v-list-item-subtitle>
+                </v-list-item-content>
+              </v-list-item>
+            </v-list>
+          </v-expansion-panel-content>
+        </v-expansion-panel>
+      </v-expansion-panels>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script>
+export default {
+  name: "DougalServerStatus",
+  props: {
+    status: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    memoryUsedPercent() {
+      return ((this.status.memory.total - this.status.memory.free) / this.status.memory.total) * 100;
+    },
+    loadAvgPercent() {
+      const maxLoad = this.status.cpus.length * 4; // Assume 4x cores as max for scaling
+      return Math.min((this.status.loadavg[0] / maxLoad) * 100, 100); // Cap at 100%
+    }
+  },
+  methods: {
+    getProgressColor(value) {
+      if (value >= 80) return 'error'; // Red for 80–100%
+      if (value >= 60) return 'warning'; // Yellow for 60–80%
+      return 'success'; // Green for 0–60%
+    },
+    getLoadAvgColor(load) {
+      const coreCount = this.status.cpus.length;
+      if (load >= coreCount * 2) return 'error'; // Red for load ≥ 2x cores
+      if (load >= coreCount) return 'warning'; // Yellow for load ≥ 1x cores but < 2x
+      return 'success'; // Green for load < 1x cores
+    },
+    formatBytes(bytes) {
+      if (bytes === 0) return '0 Bytes';
+      const k = 1024;
+      const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB'];
+      const i = Math.floor(Math.log(bytes) / Math.log(k));
+      return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+    },
+    formatUptime(seconds) {
+      const days = Math.floor(seconds / 86400);
+      seconds %= 86400;
+      const hours = Math.floor(seconds / 3600);
+      seconds %= 3600;
+      const minutes = Math.floor(seconds / 60);
+      return `${days}d ${hours}h ${minutes}m`;
+    },
+    cpuUsagePercent(cpu) {
+      const total = cpu.times.user + cpu.times.nice + cpu.times.sys + cpu.times.idle + cpu.times.irq;
+      return ((total - cpu.times.idle) / total) * 100;
+    },
+    cpuIdlePercent(cpu) {
+      const total = cpu.times.user + cpu.times.nice + cpu.times.sys + cpu.times.idle + cpu.times.irq;
+      return (cpu.times.idle / total) * 100;
+    }
+  }
+};
+</script>