diskusage: show last updated date when loading from cache

dashboard/src/components/DiskUsageItem.vue

@@ -1,8 +1,8 @@
 <script setup>
 
-import { ref, watch, onMounted, onUnmounted } from 'vue';
+import { ref, onMounted, onUnmounted } from 'vue';
 import { Button, ProgressBar } from '@cloudron/pankow';
-import { prettyDecimalSize } from '@cloudron/pankow/utils';
+import { prettyDecimalSize, prettyDate } from '@cloudron/pankow/utils';
 import { getColor } from '../utils.js';
 import SystemModel from '../models/SystemModel.js';
 
@@ -16,7 +16,9 @@ const isExpanded = ref(false);
 const percent = ref(0);
 const contents = ref([]); // cached
 const speed = ref(-1); // cached
+const ts = ref(0); // cached
 const highlight = ref(null);
+const showingCachedValue = ref(false);
 
 let eventSource = null;
 
@@ -33,13 +35,15 @@ async function getUsage() {
 
       if (payload.type === 'done') {
         percent.value = 100;
+        ts.value = Date.now();
+        showingCachedValue.value = false;
 
         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() };
+        cache[props.filesystem.filesystem] = { contents: contents.value, speed: speed.value, ts: ts.value };
         localStorage.setItem('diskUsageCache', JSON.stringify(cache));
 
         eventSource.close();
@@ -83,7 +87,9 @@ function loadFromCache() {
     contents.value = entry.contents;
     speed.value = entry.speed;
     percent.value = 100;
+    ts.value = entry.ts;
     isExpanded.value = true;
+    showingCachedValue.value = true;
   } else {
     delete cache[props.filesystem.filesystem]; // remove obsolete entry
     localStorage.setItem('diskUsageCache', JSON.stringify(cache));
@@ -107,7 +113,9 @@ onUnmounted(() => {
       <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>
+      <div>{{ prettyDecimalSize(filesystem.available) }} free of {{ prettyDecimalSize(filesystem.size) }} total
+        <span v-if="showingCachedValue">(Last updated {{ prettyDate(ts) }})</span>
+      </div>
       <div v-if="speed !== -1">I/O Rate: {{ prettyDecimalSize(speed * 1000 * 1000) }}/sec</div>
     </div>
     <div v-if="isExpanded" @mouseout="highlight = null">