perf: paginate API calls

backend/ciso_assistant/settings.py

@@ -124,7 +124,7 @@ def set_ciso_assistant_url(_, __, event_dict):
 MEDIA_ROOT = LOCAL_STORAGE_DIRECTORY
 MEDIA_URL = ""
 
-PAGINATE_BY = os.environ.get("PAGINATE_BY", default=5000)
+PAGINATE_BY = int(os.environ.get("PAGINATE_BY", default=5000))
 
 # Application definition
 
@@ -211,7 +211,7 @@ def set_ciso_assistant_url(_, __, event_dict):
         "core.permissions.RBACPermissions",
     ],
     "DEFAULT_FILTER_CLASSES": ["django_filters.rest_framework.DjangoFilterBackend"],
-    "DEFAULT_PAGINATION_CLASS": "rest_framework.pagination.PageNumberPagination",
+    "DEFAULT_PAGINATION_CLASS": "rest_framework.pagination.LimitOffsetPagination",
     "PAGE_SIZE": PAGINATE_BY,
     "DEFAULT_SCHEMA_CLASS": "drf_spectacular.openapi.AutoSchema",
     "EXCEPTION_HANDLER": "core.helpers.handle",

enterprise/backend/enterprise_core/settings.py

@@ -127,7 +127,7 @@ def set_ciso_assistant_url(_, __, event_dict):
 MEDIA_ROOT = LOCAL_STORAGE_DIRECTORY
 MEDIA_URL = ""
 
-PAGINATE_BY = os.environ.get("PAGINATE_BY", default=5000)
+PAGINATE_BY = int(os.environ.get("PAGINATE_BY", default=5000))
 
 # Application definition
 
@@ -214,7 +214,7 @@ def set_ciso_assistant_url(_, __, event_dict):
         "enterprise_core.permissions.LicensePermission",
     ],
     "DEFAULT_FILTER_CLASSES": ["django_filters.rest_framework.DjangoFilterBackend"],
-    "DEFAULT_PAGINATION_CLASS": "rest_framework.pagination.PageNumberPagination",
+    "DEFAULT_PAGINATION_CLASS": "rest_framework.pagination.LimitOffsetPagination",
     "PAGE_SIZE": PAGINATE_BY,
     "DEFAULT_SCHEMA_CLASS": "drf_spectacular.openapi.AutoSchema",
     "EXCEPTION_HANDLER": "core.helpers.handle",

frontend/src/lib/components/ModelTable/ModelTable.svelte

@@ -182,6 +182,7 @@
 		}
 	}
 	const rows = handler.getRows();
+
 	const _filters = handler.getFilters();
 
 	function getFilterCount(filters: typeof $_filters): number {

frontend/src/lib/components/ModelTable/Pagination.svelte

@@ -1,60 +1,51 @@
 <script lang="ts">
-	import type { DataHandler } from '@vincjo/datatables';
+	import type { DataHandler } from '@vincjo/datatables/remote';
 	import { page } from '$app/stores';
-	import { onMount } from 'svelte';
 	import * as m from '$paraglide/messages';
-
+	import { afterNavigate } from '$app/navigation';
 	export let handler: DataHandler;
+
 	const pageNumber = handler.getPageNumber();
 	const pageCount = handler.getPageCount();
 	const pages = handler.getPages({ ellipsis: true });
-	let urlModel: string | undefined;
-	let _sessionStorage = null;
-
-	onMount(() => {
-		_sessionStorage = sessionStorage;
-	});
-
-	$: if ($page.url && _sessionStorage) {
-		const pageData = JSON.parse(_sessionStorage.getItem('model_table_page_data') ?? '{}');
-		urlModel = `${$page.url}`.replace('//+$/', '').split('/').pop();
-
-		const currentPage = pageData[urlModel] ?? 1;
-		handler.setPage(currentPage);
-		pageData[urlModel] = currentPage;
 
-		_sessionStorage.setItem('model_table_page_data', JSON.stringify(pageData));
-	}
+	const setPage = (value: 'previous' | 'next' | number) => {
+		handler.setPage(value);
+		handler.invalidate();
+	};
+	$: console.log('$pages', $pages);
 
-	$: if ($pageNumber && urlModel && _sessionStorage) {
-		const pageData = JSON.parse(_sessionStorage.getItem('model_table_page_data') ?? '{}');
-		pageData[urlModel] = $pageNumber;
-		_sessionStorage.setItem('model_table_page_data', JSON.stringify(pageData));
-	}
+	afterNavigate(() => {
+		if ($page.url) {
+			handler.setPage(1);
+		}
+	});
 </script>
 
 <section class="flex">
-	<button
-		type="button"
-		class:disabled={$pageNumber === 1}
-		on:click={() => handler.setPage('previous')}
-	>
+	<button type="button" class:disabled={$pageNumber === 1} on:click={() => setPage('previous')}>
 		{m.previous()}
 	</button>
-	{#each $pages as page}
-		<button
-			type="button"
-			class:active={$pageNumber === page}
-			class:ellipse={page === null}
-			on:click={() => handler.setPage(page)}
-		>
-			{page ?? '...'}
+	{#if $pages === undefined}
+		<button type="button" on:click={() => setPage($pageNumber)}>
+			{$pageNumber}
 		</button>
-	{/each}
+	{:else}
+		{#each $pages as page}
+			<button
+				type="button"
+				class:active={$pageNumber === page}
+				class:ellipse={page === null}
+				on:click={() => setPage(page)}
+			>
+				{page ?? '...'}
+			</button>
+		{/each}
+	{/if}
 	<button
 		type="button"
 		class:disabled={$pageNumber === $pageCount}
-		on:click={() => handler.setPage('next')}
+		on:click={() => setPage('next')}
 	>
 		{m.next()}
 	</button>