Feat/control panel caching

infrastructure/control-panel/src/lib/components/EVaultList.svelte

@@ -9,27 +9,21 @@
 	let cacheStatus: { lastUpdated: number; isStale: boolean; itemCount: number };
 
 	onMount(async () => {
-		console.log('Component mounted, starting to load eVaults...');
 		try {
 			loading = true;
-			console.log('Loading state set to true');
 			await loadEVaults();
 			cacheStatus = EVaultService.getCacheStatus();
-			console.log('Loaded eVaults:', evaults.length, 'items');
 		} catch (err) {
 			error = 'Failed to load eVaults';
 			console.error('Error in onMount:', err);
 		} finally {
 			loading = false;
-			console.log('Loading state set to false');
 		}
 	});
 
 	async function loadEVaults() {
-		console.log('loadEVaults called');
 		try {
 			evaults = await EVaultService.getEVaults();
-			console.log('EVaultService returned:', evaults.length, 'items');
 			cacheStatus = EVaultService.getCacheStatus();
 		} catch (err) {
 			console.error('Error loading eVaults:', err);

infrastructure/control-panel/src/lib/services/cacheService.ts

@@ -53,9 +53,19 @@ class CacheService {
 
   async getCachedEVaults(): Promise<EVault[]> {
     if (typeof window !== 'undefined') {
-      // In browser, return null to indicate we need to fetch from server
-      // This prevents showing "No eVaults found" prematurely
-      return null as any;
+      // In browser, try to get from localStorage as a simple cache
+      try {
+        const cached = localStorage.getItem('evault-cache');
+        if (cached) {
+          const data = JSON.parse(cached);
+          if (data.evaults && Array.isArray(data.evaults)) {
+            return data.evaults;
+          }
+        }
+      } catch (error) {
+        console.log('No localStorage cache available');
+      }
+      return [];
     }
 
     await this.init();
@@ -77,7 +87,18 @@ class CacheService {
 
   async updateCache(evaults: EVault[]): Promise<void> {
     if (typeof window !== 'undefined') {
-      return; // No-op in browser
+      // In browser, save to localStorage
+      try {
+        const cacheData = {
+          evaults,
+          lastUpdated: Date.now(),
+          isStale: false
+        };
+        localStorage.setItem('evault-cache', JSON.stringify(cacheData));
+      } catch (error) {
+        console.error('Failed to save to localStorage:', error);
+      }
+      return;
     }
 
     await this.init();
@@ -105,6 +126,20 @@ class CacheService {
 
   getCacheStatus(): { lastUpdated: number; isStale: boolean; itemCount: number } {
     if (typeof window !== 'undefined') {
+      // In browser, get from localStorage
+      try {
+        const cached = localStorage.getItem('evault-cache');
+        if (cached) {
+          const data = JSON.parse(cached);
+          return {
+            lastUpdated: data.lastUpdated || 0,
+            isStale: data.isStale || false,
+            itemCount: data.evaults?.length || 0
+          };
+        }
+      } catch (error) {
+        console.log('No localStorage cache available');
+      }
       return { lastUpdated: 0, isStale: true, itemCount: 0 };
     }
 
@@ -121,7 +156,13 @@ class CacheService {
 
   async clearCache(): Promise<void> {
     if (typeof window !== 'undefined') {
-      return; // No-op in browser
+      // In browser, clear localStorage
+      try {
+        localStorage.removeItem('evault-cache');
+      } catch (error) {
+        console.error('Failed to clear localStorage cache:', error);
+      }
+      return;
     }
 
     await this.init();

infrastructure/control-panel/src/lib/services/evaultService.ts

@@ -3,34 +3,31 @@ import { cacheService } from './cacheService';
 
 export class EVaultService {
   /**
-   * Get eVaults with stale-while-revalidate caching
-   * Returns cached data immediately, refreshes in background if stale
+   * Get eVaults - load from cache first, then fetch fresh data
    */
   static async getEVaults(): Promise<EVault[]> {
-    // In browser, always fetch from server since caching doesn't work here
-    if (typeof window !== 'undefined') {
-      return this.fetchEVaultsDirectly();
-    }
-
-    // On server, use caching
-    const isStale = await cacheService.isCacheStale();
-
-    if (isStale) {
-      // Cache is stale, refresh in background
-      this.refreshCacheInBackground();
+    // First, try to get cached data (fast)
+    let cachedData: EVault[] = [];
+    try {
+      cachedData = await cacheService.getCachedEVaults();
+    } catch (error) {
+      console.log('No cached data available');
     }
-
-    // Return cached data immediately (even if stale)
-    return await cacheService.getCachedEVaults();
+
+    // Fire off fresh request in background (don't wait for it)
+    this.fetchFreshDataInBackground();
+
+    // Return cached data immediately (even if empty)
+    return cachedData;
   }
 
   /**
-   * Force refresh the cache with fresh data
+   * Force refresh - get fresh data and update cache
    */
   static async forceRefresh(): Promise<EVault[]> {
-    const evaults = await this.fetchEVaultsDirectly();
-    await cacheService.updateCache(evaults);
-    return evaults;
+    const freshData = await this.fetchEVaultsDirectly();
+    await cacheService.updateCache(freshData);
+    return freshData;
   }
 
   /**
@@ -48,29 +45,29 @@ export class EVaultService {
   }
 
   /**
-   * Refresh cache in background (non-blocking)
+   * Fetch fresh data in background and update cache
    */
-  private static async refreshCacheInBackground(): Promise<void> {
+  private static async fetchFreshDataInBackground(): Promise<void> {
     try {
-      const evaults = await this.fetchEVaultsDirectly();
-      await cacheService.updateCache(evaults);
+      const freshData = await this.fetchEVaultsDirectly();
+      await cacheService.updateCache(freshData);
     } catch (error) {
-      console.error('Background cache refresh failed:', error);
-      // Mark cache as stale so next request will try again
-      await cacheService.markStale();
+      console.error('Background refresh failed:', error);
     }
   }
 
   /**
-   * Fetch eVaults directly from Kubernetes API
+   * Fetch eVaults directly from API
    */
   private static async fetchEVaultsDirectly(): Promise<EVault[]> {
     try {
       const response = await fetch('/api/evaults');
       if (!response.ok) {
         throw new Error(`HTTP error! status: ${response.status}`);
       }
-      return await response.json();
+      const data = await response.json();
+      // The backend returns { evaults: [...] }
+      return data.evaults || [];
     } catch (error) {
       console.error('Failed to fetch eVaults:', error);
       throw error;