diff --git a/src/routes/(app)/cloud/[id]/assessments/+page.svelte b/src/routes/(app)/cloud/[id]/assessments/+page.svelte index e216519..15ed2ef 100644 --- a/src/routes/(app)/cloud/[id]/assessments/+page.svelte +++ b/src/routes/(app)/cloud/[id]/assessments/+page.svelte @@ -5,11 +5,14 @@ import { Icon } from '@steeze-ui/svelte-icon'; import type { AssessmentResult } from '$lib/api/assessment'; import Button from '$lib/components/Button.svelte'; + import { page } from '$app/stores'; + import { goto } from '$app/navigation'; export let data: PageData; - let currentPage = 1; + $: currentPage = data.page ? data.page : 1; let rowsPerPage = 9; + $: totalPages = Math.ceil(filteredData.length / rowsPerPage); $: filteredData = data.filterIds === undefined && @@ -24,27 +27,34 @@ ); }); - $: totalPages = Math.ceil(filteredData.length / rowsPerPage); $: currentData = paginate(filteredData, currentPage); function paginate(results: AssessmentResult[], page: number) { const startIndex = (page - 1) * rowsPerPage; const endIndex = startIndex + rowsPerPage; + return results.slice(startIndex, endIndex); } function prevPage() { if (currentPage > 1) { currentPage--; + updatePageQuery(currentPage); } } function nextPage() { if (currentPage < totalPages) { currentPage++; + updatePageQuery(currentPage); } } + function updatePageQuery(currentPage: number) { + $page.url.searchParams.set('page', String(currentPage)); + goto(`?${$page.url.searchParams.toString()}`); + } + let showModalId: string | null = null; function showDetails(id: string) { @@ -62,125 +72,131 @@ {:else}
- - - - {#if showModalId != null} - - {:else} - - - - - - - - - {#each currentData as assessment} - {#if showModalId == assessment.id} +
+
+
- Details - - Compliance - - Time - - Metric - - Resource Name - - Type - - {/if} -
+ -
-
- 
-                    {JSON.stringify(assessment, null, 5)}
-
- -
-
- - {:else} - - - + + - - + Resource Name + + + - {/if} - {/each} - -
- {#if assessment.compliant} - - {:else} - - {/if} - - {new Date(assessment.timestamp).toLocaleString()} + Details + + {:else} + + Compliance + + Time + - - - - - {data.metrics.get(assessment.metricId)?.name ?? assessment.metricId} - - - - {assessment.resourceId.split('/')[ - assessment.resourceId.split('/').length - 1 - ]} + - - - {assessment.resourceTypes[0]} - - - + Type + + {/if}
+ + + {#each currentData as assessment} + {#if showModalId == assessment.id} + +
+
+ 
+                    {JSON.stringify(assessment, null, 5)}
+
+ +
+
+ + {:else} + + + {#if assessment.compliant} + + {:else} + + {/if} + + + {new Date(assessment.timestamp).toLocaleString()} + + + + + {data.metrics.get(assessment.metricId)?.name ?? assessment.metricId} + + + + + {assessment.resourceId.split('/')[ + assessment.resourceId.split('/').length - 1 + ]} + + + {assessment.resourceTypes[0]} + + + + + + {/if} + {/each} + + -
- - {currentPage} / {totalPages} - +
+ + {currentPage} / {totalPages} + +
+
{/if} diff --git a/src/routes/(app)/cloud/[id]/assessments/+page.ts b/src/routes/(app)/cloud/[id]/assessments/+page.ts index 8a5cbbb..02508db 100644 --- a/src/routes/(app)/cloud/[id]/assessments/+page.ts +++ b/src/routes/(app)/cloud/[id]/assessments/+page.ts @@ -11,11 +11,13 @@ export const load = (async ({ fetch, params, url }) => { const filterIds = url.searchParams.get('filterIds')?.split(','); const filterResourceId = url.searchParams.get('filterResourceId'); + const page = Number(url.searchParams.get('page')); const results = await listCloudServiceAssessmentResults(params.id, fetch); return { filterIds, filterResourceId, + page, results }; }) satisfies PageLoad; diff --git a/src/routes/(app)/cloud/[id]/resources/+page.svelte b/src/routes/(app)/cloud/[id]/resources/+page.svelte index ab885bd..db58c67 100644 --- a/src/routes/(app)/cloud/[id]/resources/+page.svelte +++ b/src/routes/(app)/cloud/[id]/resources/+page.svelte @@ -18,43 +18,36 @@ import { Icon } from '@steeze-ui/svelte-icon'; import { goto } from '$app/navigation'; import { listAssessmentResults, listCloudServiceAssessmentResults } from '$lib/api/orchestrator'; + import { page } from '$app/stores'; export let data: PageData; - let currentPage = 1; + $: currentPage = data.page ? data.page : 1; let rowsPerPage = 8; - let totalPages = Math.ceil(data.resources.length / rowsPerPage); - let currentData: Resource[] = []; - let copyingId: string | null = null; - - onMount(() => { - updateCurrentData(); - }); + $: totalPages = Math.ceil(filteredData.length / rowsPerPage); - let searchString = ''; - let filteredData = data.resources; + $: searchString = ''; - let searchActivated = false; + $: searchActivated = false; - let filterOptions: String[] = []; + $: query = searchString.toLowerCase(); + $: filteredData = data.resources.filter((resource) => { + return ( + resource.properties.name.toLowerCase().includes(query) && + (filterOptions.length == 0 || filterOptions.includes(resource.resourceType.split(',')[0])) + ); + }); + $: currentData = paginate(filteredData, currentPage); + let copyingId: string | null = null; - function filter() { - const query = searchString.toLowerCase(); - filteredData = data.resources.filter((resource) => { - return ( - resource.properties.name.toLowerCase().includes(query) && - (filterOptions.includes(resource.resourceType.split(',')[0]) || filterOptions.length == 0) - ); - }); - updateCurrentData(); - } + let filterOptions: string[]; + $: filterOptions = []; function toggleSearch() { searchActivated = !searchActivated; if (!searchActivated) { searchString = ''; filteredData = data.resources; - updateCurrentData(); } } @@ -77,35 +70,46 @@ }); break; } - - updateCurrentData(); + currentData = paginate(filteredData, currentPage); } let types: Set = new Set(); let typeArray: String[] = []; - function updateCurrentData() { - const startIndex = (currentPage - 1) * rowsPerPage; + function paginate(results: Resource[], page: number) { + if (currentPage > totalPages) { + page = totalPages; + currentPage = totalPages; + } + + const startIndex = (page - 1) * rowsPerPage; const endIndex = startIndex + rowsPerPage; - currentData = filteredData.slice(startIndex, endIndex); + types = data.resources.reduce((acc, resource) => { acc.add(resource.resourceType.split(',')[0]); return acc; }, new Set()); typeArray = Array.from(types); + + return results.slice(startIndex, endIndex); + } + + function updatePageQuery(currentPage: number) { + $page.url.searchParams.set('page', String(currentPage)); + goto(`?${$page.url.searchParams.toString()}`); } function prevPage() { if (currentPage > 1) { currentPage--; - updateCurrentData(); + updatePageQuery(currentPage); } } function nextPage() { if (currentPage < totalPages) { currentPage++; - updateCurrentData(); + updatePageQuery(currentPage); } } @@ -152,18 +156,18 @@ Actions
@@ -210,10 +213,10 @@
- - {currentPage} + {currentPage} / {totalPages}