Skip to content

Commit 3304cd0

Browse files
sosweethamsosweetham
committed
fix: persist evault selections on navigation
1 parent 74da3f3 commit 3304cd0

File tree

3 files changed

+220
-50
lines changed

3 files changed

+220
-50
lines changed

‎infrastructure/control-panel/src/routes/+layout.svelte‎

Lines changed: 32 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131
size="sm"
3232
class="whitespace-nowrap"
3333
variant="solid"
34-
callback={() => {
34+
callback={async () => {
3535
// Get selected items from the current page
3636
const evaultsData = sessionStorage.getItem('selectedEVaults');
3737
const platformsData = sessionStorage.getItem('selectedPlatforms');
@@ -47,6 +47,37 @@
4747
return;
4848
}
4949

50+
// Fetch full objects and store them for monitoring page
51+
try {
52+
// Fetch evaults if we have IDs
53+
if (evaultsData) {
54+
const evaultIds = JSON.parse(evaultsData);
55+
if (Array.isArray(evaultIds) && evaultIds.length > 0 && typeof evaultIds[0] === 'string') {
56+
const { EVaultService } = await import('$lib/services/evaultService');
57+
const allEVaults = await EVaultService.getEVaults();
58+
const evaultObjects = evaultIds
59+
.map((id: string) => allEVaults.find((e: any) => (e.evault || e.ename || e.id) === id))
60+
.filter(Boolean);
61+
sessionStorage.setItem('selectedEVaultsData', JSON.stringify(evaultObjects));
62+
}
63+
}
64+
65+
// Fetch platforms if we have URLs
66+
if (platformsData) {
67+
const platformUrls = JSON.parse(platformsData);
68+
if (Array.isArray(platformUrls) && platformUrls.length > 0 && typeof platformUrls[0] === 'string') {
69+
const { registryService } = await import('$lib/services/registry');
70+
const allPlatforms = await registryService.getPlatforms();
71+
const platformObjects = platformUrls
72+
.map((url: string) => allPlatforms.find((p: any) => p.url === url))
73+
.filter(Boolean);
74+
sessionStorage.setItem('selectedPlatformsData', JSON.stringify(platformObjects));
75+
}
76+
}
77+
} catch (error) {
78+
console.error('Error fetching data for monitoring:', error);
79+
}
80+
5081
// Navigate to monitoring
5182
goto('/monitoring');
5283
}}>Start Monitoring</ButtonAction

‎infrastructure/control-panel/src/routes/+page.svelte‎

Lines changed: 131 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,22 @@
113113
}));
114114
});
115115
116+
// Derived values for selected indices to ensure reactivity
117+
const selectedEVaultIndices = $derived(
118+
paginatedEVaults()
119+
.map((evault, index) => {
120+
const evaultId = evault.evault || evault.ename || evault.id;
121+
return selectedEVaults.includes(evaultId) ? index : -1;
122+
})
123+
.filter((index) => index !== -1)
124+
);
125+
126+
const selectedPlatformIndices = $derived(
127+
filteredPlatforms()
128+
.map((platform, index) => (selectedPlatforms.includes(platform.url) ? index : -1))
129+
.filter((index) => index !== -1)
130+
);
131+
116132
const handlePreviousPage = async () => {
117133
if (currentPage > 1) {
118134
currentPage--;
@@ -146,11 +162,8 @@
146162
selectedEVaults = selectedEVaults.filter((id) => id !== evaultId);
147163
}
148164
149-
// Store selections immediately in sessionStorage
150-
const selectedEVaultData = selectedEVaults
151-
.map((id) => evaults.find((e) => (e.evault || e.ename || e.id) === id))
152-
.filter(Boolean);
153-
sessionStorage.setItem('selectedEVaults', JSON.stringify(selectedEVaultData));
165+
// Store selections immediately in sessionStorage (store as simple array of IDs)
166+
sessionStorage.setItem('selectedEVaults', JSON.stringify(selectedEVaults));
154167
}
155168
156169
// Handle platform selection changes
@@ -167,16 +180,13 @@
167180
}
168181
169182
if (checked) {
170-
selectedPlatforms = [...selectedPlatforms, selectedPlatform.name];
183+
selectedPlatforms = [...selectedPlatforms, selectedPlatform.url];
171184
} else {
172-
selectedPlatforms = selectedPlatforms.filter((name) => name !== selectedPlatform.name);
185+
selectedPlatforms = selectedPlatforms.filter((url) => url !== selectedPlatform.url);
173186
}
174187
175-
// Store selections immediately in sessionStorage
176-
const selectedPlatformData = selectedPlatforms
177-
.map((name) => platforms.find((p) => p.name === name))
178-
.filter(Boolean);
179-
sessionStorage.setItem('selectedPlatforms', JSON.stringify(selectedPlatformData));
188+
// Store selections immediately in sessionStorage (store as simple array of URLs)
189+
sessionStorage.setItem('selectedPlatforms', JSON.stringify(selectedPlatforms));
180190
}
181191
182192
// Handle select all eVaults
@@ -197,12 +207,9 @@
197207
console.log('❌ Deselected all eVaults, selectedEVaults:', selectedEVaults);
198208
}
199209
200-
// Store selections immediately in sessionStorage
201-
const selectedEVaultData = selectedEVaults
202-
.map((id) => evaults.find((e) => e.evaultId === id))
203-
.filter(Boolean);
204-
sessionStorage.setItem('selectedEVaults', JSON.stringify(selectedEVaultData));
205-
console.log('💾 Stored in sessionStorage:', selectedEVaultData);
210+
// Store selections immediately in sessionStorage (store as simple array of IDs)
211+
sessionStorage.setItem('selectedEVaults', JSON.stringify(selectedEVaults));
212+
console.log('💾 Stored in sessionStorage:', selectedEVaults);
206213
}
207214
208215
// Handle select all platforms
@@ -214,8 +221,8 @@
214221
console.log('filtered platforms length:', filtered.length);
215222
216223
if (checked) {
217-
// Select all filtered platforms by their name
218-
selectedPlatforms = filtered.map((platform) => platform.name);
224+
// Select all filtered platforms by their URL
225+
selectedPlatforms = filtered.map((platform) => platform.url);
219226
console.log(
220227
'✅ Selected all filtered platforms, selectedPlatforms:',
221228
selectedPlatforms
@@ -226,38 +233,42 @@
226233
console.log('❌ Deselected all platforms, selectedPlatforms:', selectedPlatforms);
227234
}
228235
229-
// Store selections immediately in sessionStorage
230-
const selectedPlatformData = selectedPlatforms
231-
.map((name) => platforms.find((p) => p.name === name))
232-
.filter(Boolean);
233-
sessionStorage.setItem('selectedPlatforms', JSON.stringify(selectedPlatformData));
234-
console.log('💾 Stored in sessionStorage:', selectedPlatformData);
236+
// Store selections immediately in sessionStorage (store as simple array of URLs)
237+
sessionStorage.setItem('selectedPlatforms', JSON.stringify(selectedPlatforms));
238+
console.log('💾 Stored in sessionStorage:', selectedPlatforms);
235239
}
236240
237241
// Clear eVault selection
238242
function clearEVaultSelection() {
239243
selectedEVaults = [];
240244
sessionStorage.removeItem('selectedEVaults');
245+
sessionStorage.removeItem('selectedEVaultsData');
241246
}
242247
243248
// Clear platform selection
244249
function clearPlatformSelection() {
245250
selectedPlatforms = [];
246251
sessionStorage.removeItem('selectedPlatforms');
252+
sessionStorage.removeItem('selectedPlatformsData');
247253
}
248254
249255
// Navigate to monitoring with selected items
250256
function goToMonitoring() {
257+
// Convert IDs/URLs to full objects for monitoring page
251258
const selectedEVaultData = selectedEVaults
252-
.map((id) => evaults.find((e) => e.evaultId === id))
259+
.map((id) => evaults.find((e) => (e.evault || e.ename || e.id) === id))
253260
.filter(Boolean);
254261
const selectedPlatformData = selectedPlatforms
255-
.map((name) => platforms.find((p) => p.name === name))
262+
.map((url) => platforms.find((p) => p.url === url))
256263
.filter(Boolean);
257264
258-
// Store selected data in sessionStorage to pass to monitoring page
259-
sessionStorage.setItem('selectedEVaults', JSON.stringify(selectedEVaultData));
260-
sessionStorage.setItem('selectedPlatforms', JSON.stringify(selectedPlatformData));
265+
// Store full objects in sessionStorage for monitoring page (it expects objects)
266+
// But also keep the simple arrays for persistence when returning
267+
sessionStorage.setItem('selectedEVaultsData', JSON.stringify(selectedEVaultData));
268+
sessionStorage.setItem('selectedPlatformsData', JSON.stringify(selectedPlatformData));
269+
// Keep simple arrays for persistence
270+
sessionStorage.setItem('selectedEVaults', JSON.stringify(selectedEVaults));
271+
sessionStorage.setItem('selectedPlatforms', JSON.stringify(selectedPlatforms));
261272
262273
goto('/monitoring');
263274
}
@@ -354,6 +365,93 @@
354365
}
355366
}
356367
368+
// Restore selections from sessionStorage
369+
// Use an effect to restore selections when data is loaded
370+
let hasRestoredSelections = $state(false);
371+
$effect(() => {
372+
// Only restore once when both datasets are loaded
373+
// The flag prevents multiple restorations, and will reset on component remount
374+
if (
375+
!isLoading &&
376+
!platformsLoading &&
377+
evaults.length >= 0 &&
378+
platforms.length >= 0 &&
379+
!hasRestoredSelections
380+
) {
381+
hasRestoredSelections = true;
382+
383+
// Restore eVault selections - try simple array first, fallback to object array for backwards compatibility
384+
const storedEVaults = sessionStorage.getItem('selectedEVaults');
385+
if (storedEVaults && evaults.length > 0) {
386+
try {
387+
const storedData = JSON.parse(storedEVaults);
388+
389+
// Check if it's a simple array of IDs or array of objects
390+
if (Array.isArray(storedData) && storedData.length > 0) {
391+
if (typeof storedData[0] === 'string') {
392+
// Simple array of IDs - filter to only include IDs that exist in current evaults
393+
selectedEVaults = storedData.filter((id: string) =>
394+
evaults.some((e) => (e.evault || e.ename || e.id) === id)
395+
);
396+
} else {
397+
// Array of objects (backwards compatibility) - extract IDs
398+
selectedEVaults = storedData
399+
.map((stored: any) => {
400+
const match = evaults.find(
401+
(e) =>
402+
(stored.evault && e.evault === stored.evault) ||
403+
(stored.ename && e.ename === stored.ename) ||
404+
(stored.id && e.id === stored.id) ||
405+
(stored.serviceUrl &&
406+
e.serviceUrl === stored.serviceUrl)
407+
);
408+
return match ? match.evault || match.ename || match.id : null;
409+
})
410+
.filter((id: string | null): id is string => id !== null);
411+
}
412+
}
413+
console.log('✅ Restored eVault selections:', selectedEVaults);
414+
} catch (error) {
415+
console.error('Error restoring eVault selections:', error);
416+
}
417+
}
418+
419+
// Restore platform selections - try simple array first, fallback to object array for backwards compatibility
420+
const storedPlatforms = sessionStorage.getItem('selectedPlatforms');
421+
if (storedPlatforms && platforms.length > 0) {
422+
try {
423+
const storedData = JSON.parse(storedPlatforms);
424+
425+
// Check if it's a simple array of URLs or array of objects
426+
if (Array.isArray(storedData) && storedData.length > 0) {
427+
if (typeof storedData[0] === 'string') {
428+
// Simple array of URLs - filter to only include URLs that exist in current platforms
429+
selectedPlatforms = storedData.filter((url: string) =>
430+
platforms.some((p) => p.url === url)
431+
);
432+
} else {
433+
// Array of objects (backwards compatibility) - extract URLs
434+
selectedPlatforms = storedData
435+
.map((stored: any) => {
436+
// Try to match by URL first, then by name for backwards compatibility
437+
const match = platforms.find(
438+
(p) =>
439+
p.url === stored.url ||
440+
(stored.name && p.name === stored.name)
441+
);
442+
return match ? match.url : null;
443+
})
444+
.filter((url: string | null): url is string => url !== null);
445+
}
446+
}
447+
console.log('✅ Restored platform selections:', selectedPlatforms);
448+
} catch (error) {
449+
console.error('Error restoring platform selections:', error);
450+
}
451+
}
452+
}
453+
});
454+
357455
onMount(() => {
358456
fetchEVaults();
359457
fetchPlatforms();
@@ -403,12 +501,7 @@
403501
handleSelectedRow={handleEVaultRowClick}
404502
onSelectionChange={handleEVaultSelectionChange}
405503
onSelectAllChange={handleSelectAllEVaults}
406-
selectedIndices={paginatedEVaults()
407-
.map((evault, index) => {
408-
const evaultId = evault.evault || evault.ename || evault.id;
409-
return selectedEVaults.includes(evaultId) ? index : -1;
410-
})
411-
.filter((index) => index !== -1)}
504+
selectedIndices={selectedEVaultIndices}
412505
/>
413506

414507
<!-- Pagination Info -->
@@ -480,11 +573,7 @@
480573
withPagination={false}
481574
onSelectionChange={handlePlatformSelectionChange}
482575
onSelectAllChange={handleSelectAllPlatforms}
483-
selectedIndices={filteredPlatforms()
484-
.map((platform, index) =>
485-
selectedPlatforms.includes(platform.name) ? index : -1
486-
)
487-
.filter((index) => index !== -1)}
576+
selectedIndices={selectedPlatformIndices}
488577
/>
489578
{/if}
490579
</TableCard>

‎infrastructure/control-panel/src/routes/monitoring/+page.svelte‎

Lines changed: 57 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,10 @@
88
import { Database01FreeIcons, PauseFreeIcons, PlayFreeIcons } from '@hugeicons/core-free-icons';
99
import { HugeiconsIcon } from '@hugeicons/svelte';
1010
import type { Edge, Node, NodeTypes } from '@xyflow/svelte';
11+
import { EVaultService } from '$lib/services/evaultService';
12+
import { registryService } from '$lib/services/registry';
13+
import type { EVault } from '../api/evaults/+server';
14+
import type { Platform } from '$lib/services/registry';
1115
1216
let SvelteFlowComponent: typeof import('@xyflow/svelte').SvelteFlow | null = $state(null);
1317
@@ -30,19 +34,65 @@
3034
let highlightedNodeId = $state<string | null>(null);
3135
let sequenceStarted = $state(false);
3236
33-
onMount(() => {
37+
async function convertIDsToObjects() {
3438
// Load selected items from sessionStorage
35-
const evaultsData = sessionStorage.getItem('selectedEVaults');
36-
const platformsData = sessionStorage.getItem('selectedPlatforms');
39+
const evaultsData = sessionStorage.getItem('selectedEVaultsData') || sessionStorage.getItem('selectedEVaults');
40+
const platformsData = sessionStorage.getItem('selectedPlatformsData') || sessionStorage.getItem('selectedPlatforms');
3741
42+
// Process eVaults
3843
if (evaultsData) {
39-
selectedEVaults = JSON.parse(evaultsData);
40-
console.log('Loaded selectedEVaults from sessionStorage:', selectedEVaults);
44+
const parsed = JSON.parse(evaultsData);
45+
if (Array.isArray(parsed) && parsed.length > 0) {
46+
if (typeof parsed[0] === 'string') {
47+
// It's an array of IDs - need to fetch and convert
48+
const evaultIds: string[] = parsed;
49+
try {
50+
const allEVaults = await EVaultService.getEVaults();
51+
selectedEVaults = evaultIds
52+
.map((id) => allEVaults.find((e) => (e.evault || e.ename || e.id) === id))
53+
.filter((e): e is EVault => e !== undefined);
54+
console.log('Converted eVault IDs to objects:', selectedEVaults);
55+
} catch (error) {
56+
console.error('Error fetching evaults for conversion:', error);
57+
selectedEVaults = [];
58+
}
59+
} else {
60+
// It's already an array of objects
61+
selectedEVaults = parsed;
62+
console.log('Loaded selectedEVaults from sessionStorage:', selectedEVaults);
63+
}
64+
}
4165
}
66+
67+
// Process Platforms
4268
if (platformsData) {
43-
selectedPlatforms = JSON.parse(platformsData);
44-
console.log('Loaded selectedPlatforms from sessionStorage:', selectedPlatforms);
69+
const parsed = JSON.parse(platformsData);
70+
if (Array.isArray(parsed) && parsed.length > 0) {
71+
if (typeof parsed[0] === 'string') {
72+
// It's an array of URLs - need to fetch and convert
73+
const platformUrls: string[] = parsed;
74+
try {
75+
const allPlatforms = await registryService.getPlatforms();
76+
selectedPlatforms = platformUrls
77+
.map((url) => allPlatforms.find((p) => p.url === url))
78+
.filter((p): p is Platform => p !== undefined);
79+
console.log('Converted platform URLs to objects:', selectedPlatforms);
80+
} catch (error) {
81+
console.error('Error fetching platforms for conversion:', error);
82+
selectedPlatforms = [];
83+
}
84+
} else {
85+
// It's already an array of objects
86+
selectedPlatforms = parsed;
87+
console.log('Loaded selectedPlatforms from sessionStorage:', selectedPlatforms);
88+
}
89+
}
4590
}
91+
}
92+
93+
onMount(async () => {
94+
// Convert IDs/URLs to full objects if needed
95+
await convertIDsToObjects();
4696
4797
// Check if any items are selected, if not show selection interface
4898
if (

0 commit comments

Comments
 (0)