From 6e21f19bd591d426571f86a453cb6350b65951eb Mon Sep 17 00:00:00 2001
From: Johannes Zellner <johannes@cloudron.io>
Date: Wed, 21 May 2025 09:09:12 +0200
Subject: [PATCH] Add timeframe selector in cpu and memory graphs

---
 dashboard/src/components/CpuUsage.vue    | 42 ++++++++++++++++++++--
 dashboard/src/components/MemoryUsage.vue | 44 ++++++++++++++++++++++--
 dashboard/src/views/SystemView.vue       |  1 +
 3 files changed, 82 insertions(+), 5 deletions(-)

diff --git a/dashboard/src/components/CpuUsage.vue b/dashboard/src/components/CpuUsage.vue
index b6eb0ca06..740d33167 100644
--- a/dashboard/src/components/CpuUsage.vue
+++ b/dashboard/src/components/CpuUsage.vue
@@ -1,17 +1,45 @@
 <script setup>
 
+import { useI18n } from 'vue-i18n';
+const i18n = useI18n();
+const t = i18n.t;
+
 import { ref, onMounted, useTemplateRef } from 'vue';
 import Chart from 'chart.js/auto';
 import moment from 'moment-timezone';
+import { SingleSelect, Spinner } from 'pankow';
 import Section from './Section.vue';
 import SystemModel from '../models/SystemModel.js';
 
 const systemModel = SystemModel.create();
 
+function trKeyFromPeriod(period) {
+  if (period === 6) return 'app.graphs.period.6h';
+  if (period === 12) return 'app.graphs.period.12h';
+  if (period === 24) return 'app.graphs.period.24h';
+  if (period === 24*7) return 'app.graphs.period.7d';
+  if (period === 24*30) return 'app.graphs.period.30d';
+
+  return '';
+}
+
+const periods = [
+  { id: 6,     label: t(trKeyFromPeriod(6)) },
+  { id: 12,    label: t(trKeyFromPeriod(12)) },
+  { id: 24,    label: t(trKeyFromPeriod(24)) },
+  { id: 24*7,  label: t(trKeyFromPeriod(24*7)) },
+  { id: 24*30, label: t(trKeyFromPeriod(24*30)) },
+];
+
 const graph = useTemplateRef('graph');
 const period = ref(6);
+const busy = ref(true);
+
+let gGraph = null;
 
 async function refresh() {
+  busy.value = true;
+
   const [error, result] = await systemModel.graphs({ fromSecs: period.value * 60 * 60, intervalSecs: 300 });
   if (error) return console.error(error);
 
@@ -21,7 +49,8 @@ async function refresh() {
 
   const data = result.cpu.map(v => v[0]); // already scaled to cpu*100
 
-  new Chart(graph.value, {
+  if (gGraph) gGraph.destroy();
+  gGraph = new Chart(graph.value, {
     type: 'line',
     data: {
       labels,
@@ -67,6 +96,8 @@ async function refresh() {
       }
     }
   });
+
+  busy.value = false;
 }
 
 onMounted(async () => {
@@ -77,6 +108,13 @@ onMounted(async () => {
 
 <template>
   <Section :title="$t('system.cpuUsage.title')">
-    <div style="position: relative; width: 100%; height: 200px;"><canvas ref="graph"></canvas></div>
+    <template #header-buttons>
+      <SingleSelect @select="refresh()" v-model="period" :options="periods" option-key="id" option-label="label"/>
+    </template>
+
+    <div style="position: relative; width: 400px; height: 200px;">
+      <div style="text-align: center" v-if="busy"><Spinner/></div>
+      <canvas v-show="!busy" ref="graph"></canvas>
+    </div>
   </Section>
 </template>
diff --git a/dashboard/src/components/MemoryUsage.vue b/dashboard/src/components/MemoryUsage.vue
index ce580d9e8..121e28de8 100644
--- a/dashboard/src/components/MemoryUsage.vue
+++ b/dashboard/src/components/MemoryUsage.vue
@@ -1,18 +1,46 @@
 <script setup>
 
+import { useI18n } from 'vue-i18n';
+const i18n = useI18n();
+const t = i18n.t;
+
 import { ref, onMounted, useTemplateRef } from 'vue';
 import Chart from 'chart.js/auto';
 import moment from 'moment-timezone';
+import { SingleSelect, Spinner } from 'pankow';
 import Section from './Section.vue';
 import SystemModel from '../models/SystemModel.js';
 
 const systemModel = SystemModel.create();
 
-let systemMemory = {};
+function trKeyFromPeriod(period) {
+  if (period === 6) return 'app.graphs.period.6h';
+  if (period === 12) return 'app.graphs.period.12h';
+  if (period === 24) return 'app.graphs.period.24h';
+  if (period === 24*7) return 'app.graphs.period.7d';
+  if (period === 24*30) return 'app.graphs.period.30d';
+
+  return '';
+}
+
+const periods = [
+  { id: 6,     label: t(trKeyFromPeriod(6)) },
+  { id: 12,    label: t(trKeyFromPeriod(12)) },
+  { id: 24,    label: t(trKeyFromPeriod(24)) },
+  { id: 24*7,  label: t(trKeyFromPeriod(24*7)) },
+  { id: 24*30, label: t(trKeyFromPeriod(24*30)) },
+];
+
 const graph = useTemplateRef('graph');
 const period = ref(6);
+const busy = ref(true);
+
+let systemMemory = {};
+let gGraph = null;
 
 async function refresh() {
+  busy.value = true;
+
   const [error, result] = await systemModel.graphs({ fromSecs: period.value * 60 * 60, intervalSecs: 300 });
   if (error) return console.error(error);
 
@@ -73,7 +101,10 @@ async function refresh() {
     }
   };
 
-  new Chart(graph.value, { type: 'line', data: graphData, options: options });
+  if (gGraph) gGraph.destroy();
+  gGraph = new Chart(graph.value, { type: 'line', data: graphData, options: options });
+
+  busy.value = false;
 }
 
 onMounted(async () => {
@@ -88,6 +119,13 @@ onMounted(async () => {
 
 <template>
   <Section :title="$t('system.systemMemory.title')">
-    <div style="position: relative; width: 100%; height: 200px;"><canvas ref="graph"></canvas></div>
+    <template #header-buttons>
+      <SingleSelect @select="refresh()" v-model="period" :options="periods" option-key="id" option-label="label"/>
+    </template>
+
+    <div style="position: relative; width: 400px; height: 200px;">
+      <div style="text-align: center" v-if="busy"><Spinner/></div>
+      <canvas v-show="!busy" ref="graph"></canvas>
+    </div>
   </Section>
 </template>
diff --git a/dashboard/src/views/SystemView.vue b/dashboard/src/views/SystemView.vue
index 303a071f9..79ba286fd 100644
--- a/dashboard/src/views/SystemView.vue
+++ b/dashboard/src/views/SystemView.vue
@@ -124,6 +124,7 @@ onMounted(async () => {
 .graphs {
   display: flex;
   gap: 60px;
+  justify-content: space-between;
 }
 
 </style>