diff --git a/infrastructure/control-panel/src/lib/components/EVaultList.svelte b/infrastructure/control-panel/src/lib/components/EVaultList.svelte index dd9c8ce3..9916d3d3 100644 --- a/infrastructure/control-panel/src/lib/components/EVaultList.svelte +++ b/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); diff --git a/infrastructure/control-panel/src/lib/services/cacheService.ts b/infrastructure/control-panel/src/lib/services/cacheService.ts index 38b2bf65..9448fc9e 100644 --- a/infrastructure/control-panel/src/lib/services/cacheService.ts +++ b/infrastructure/control-panel/src/lib/services/cacheService.ts @@ -53,9 +53,19 @@ class CacheService { async getCachedEVaults(): Promise { 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 { 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 { 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(); diff --git a/infrastructure/control-panel/src/lib/services/evaultService.ts b/infrastructure/control-panel/src/lib/services/evaultService.ts index c332f14c..1d17627f 100644 --- a/infrastructure/control-panel/src/lib/services/evaultService.ts +++ b/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 { - // 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 { - const evaults = await this.fetchEVaultsDirectly(); - await cacheService.updateCache(evaults); - return evaults; + const freshData = await this.fetchEVaultsDirectly(); + await cacheService.updateCache(freshData); + return freshData; } /** @@ -48,21 +45,19 @@ export class EVaultService { } /** - * Refresh cache in background (non-blocking) + * Fetch fresh data in background and update cache */ - private static async refreshCacheInBackground(): Promise { + private static async fetchFreshDataInBackground(): Promise { 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 { try { @@ -70,7 +65,9 @@ export class EVaultService { 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;