diskusage: add localStorage cache with 1 hour expiry

dashboard/src/components/DiskUsageItem.vue

@@ -1,6 +1,6 @@
 <script setup>
 
-import { ref, onUnmounted } from 'vue';
+import { ref, watch, onMounted, onUnmounted } from 'vue';
 import { Button, ProgressBar } from '@cloudron/pankow';
 import { prettyDecimalSize } from '@cloudron/pankow/utils';
 import { getColor } from '../utils.js';
@@ -14,13 +14,13 @@ const props = defineProps({
 
 const isExpanded = ref(false);
 const percent = ref(0);
-const contents = ref([]);
-const speed = ref(-1);
+const contents = ref([]); // cached
+const speed = ref(-1); // cached
 const highlight = ref(null);
 
 let eventSource = null;
 
-async function refresh() {
+async function getUsage() {
   const [error, result] = await systemModel.filesystemUsage(props.filesystem.filesystem);
   if (error) return console.error(error);
 
@@ -37,6 +37,11 @@ async function refresh() {
         contents.value.forEach((c, i) => c.color = getColor(contents.value.length, i));
         contents.value.sort((a, b) => b.usage - a.usage);
 
+        const raw = localStorage.getItem('diskUsageCache');
+        const cache = raw ? JSON.parse(raw) : {};
+        cache[props.filesystem.filesystem] = { contents: contents.value, speed: speed.value, ts: Date.now() };
+        localStorage.setItem('diskUsageCache', JSON.stringify(cache));
+
         eventSource.close();
       } else if (payload.type === 'progress') {
         percent.value = payload.percent;
@@ -64,9 +69,31 @@ async function onExpand() {
 
   isExpanded.value = true;
 
-  refresh();
+  getUsage();
 }
 
+function loadFromCache() {
+  const raw = localStorage.getItem('diskUsageCache');
+  const cache = raw ? JSON.parse(raw) : {};
+  const entry = cache[props.filesystem.filesystem];
+
+  if (!entry) return;
+
+  if (Date.now() - entry.ts < 60 * 60 * 1000) { // 1 hour old
+    contents.value = entry.contents;
+    speed.value = entry.speed;
+    percent.value = 100;
+    isExpanded.value = true;
+  } else {
+    delete cache[props.filesystem.filesystem]; // remove obsolete entry
+    localStorage.setItem('diskUsageCache', JSON.stringify(cache));
+  }
+}
+
+onMounted(() => {
+  loadFromCache();
+});
+
 onUnmounted(() => {
   if (eventSource) eventSource.close();
 });
@@ -77,7 +104,7 @@ onUnmounted(() => {
   <div class="disk-item">
     <div class="disk-item-title">
       <div>{{ filesystem.mountpoint }} <small class="text-muted">{{ filesystem.type }}</small></div>
-      <Button v-if="isExpanded" small tool plain icon="fa-solid fa-rotate" :disabled="percent < 100" :loading="percent < 100" @click="refresh()"/>
+      <Button v-if="isExpanded" small tool plain icon="fa-solid fa-rotate" :disabled="percent < 100" :loading="percent < 100" @click="getUsage()"/>
     </div>
     <div class="disk-item-size-and-speed">
       <div>{{ prettyDecimalSize(filesystem.available) }} free of {{ prettyDecimalSize(filesystem.size) }} total</div>