fix: Application logs paginated

src/routes/applications/[id]/logs/index.json.ts

@@ -27,6 +27,7 @@ export const get: RequestHandler = async (event) => {
 								.split('\n')
 								.map((l) => l.slice(8))
 								.filter((a) => a)
+								.reverse()
 						}
 					};
 				}

src/routes/applications/[id]/logs/index.svelte

@@ -24,19 +24,22 @@
 	export let application;
 	import { page } from '$app/stores';
 	import LoadingLogs from './_Loading.svelte';
-	import { getDomain } from '$lib/components/common';
 	import { get } from '$lib/api';
 	import { errorNotification } from '$lib/form';
 
 	let loadLogsInterval = null;
+	let allLogs = [];
 	let logs = [];
+	let currentPage = 1;
+	let endOfLogs = false;
+	let startOfLogs = true;
 	let followingBuild;
 	let followingInterval;
 	let logsEl;
 
 	const { id } = $page.params;
 	onMount(async () => {
-		loadLogs();
+		loadAllLogs();
 		loadLogsInterval = setInterval(() => {
 			loadLogs();
 		}, 1000);
@@ -45,10 +48,20 @@
 		clearInterval(loadLogsInterval);
 		clearInterval(followingInterval);
 	});
+	async function loadAllLogs() {
+		try {
+			const data = await get(`/applications/${id}/logs.json`);
+			allLogs = data.logs;
+			logs = data.logs.slice(0, 100);
+			return;
+		} catch ({ error }) {
+			return errorNotification(error);
+		}
+	}
 	async function loadLogs() {
 		try {
 			const newLogs = await get(`/applications/${id}/logs.json`);
-			logs = newLogs.logs;
+			logs = newLogs.logs.slice(0, 100);
 			return;
 		} catch ({ error }) {
 			return errorNotification(error);
@@ -66,6 +79,32 @@
 			window.clearInterval(followingInterval);
 		}
 	}
+	async function loadOlderLogs() {
+		clearInterval(loadLogsInterval);
+		loadLogsInterval = null;
+		if (logs.length < 100) {
+			endOfLogs = true;
+			return;
+		}
+		startOfLogs = false;
+		endOfLogs = false;
+		currentPage += 1;
+		logs = allLogs.slice(currentPage * 100 - 100, currentPage * 100);
+	}
+	async function loadNewerLogs() {
+		if (currentPage !== 1) {
+			clearInterval(loadLogsInterval);
+			endOfLogs = false;
+			loadLogsInterval = null;
+			currentPage -= 1;
+			logs = allLogs.slice(currentPage * 100 - 100, currentPage * 100);
+		} else {
+			startOfLogs = true;
+			loadLogsInterval = setInterval(() => {
+				loadLogs();
+			}, 1000);
+		}
+	}
 </script>
 
 <div class="flex items-center space-x-2 p-5 px-6 font-bold">
@@ -145,9 +184,58 @@
 		<div class="text-xl font-bold tracking-tighter">Waiting for the logs...</div>
 	{:else}
 		<div class="relative w-full">
-			<LoadingLogs />
+			<div class="text-right " />
-			<div class="flex justify-end sticky top-0 p-2">
+			{#if loadLogsInterval}
+				<LoadingLogs />
+			{/if}
+			<div class="flex justify-end sticky top-0 p-2 mx-1">
 				<button
+					on:click={loadOlderLogs}
+					class:text-coolgray-100={endOfLogs}
+					class:hover:bg-coolgray-400={!endOfLogs}
+					class="bg-transparent"
+					disabled={endOfLogs}
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="w-6 h-6"
+						viewBox="0 0 24 24"
+						stroke-width="1.5"
+						stroke="currentColor"
+						fill="none"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					>
+						<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+						<path
+							d="M20 15h-8v3.586a1 1 0 0 1 -1.707 .707l-6.586 -6.586a1 1 0 0 1 0 -1.414l6.586 -6.586a1 1 0 0 1 1.707 .707v3.586h8a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1z"
+						/>
+					</svg>
+				</button>
+				<button
+					on:click={loadNewerLogs}
+					class:text-coolgray-100={startOfLogs}
+					class:hover:bg-coolgray-400={!startOfLogs}
+					class="bg-transparent"
+					disabled={startOfLogs}
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="w-6 h-6"
+						viewBox="0 0 24 24"
+						stroke-width="1.5"
+						stroke="currentColor"
+						fill="none"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					>
+						<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+						<path
+							d="M4 9h8v-3.586a1 1 0 0 1 1.707 -.707l6.586 6.586a1 1 0 0 1 0 1.414l-6.586 6.586a1 1 0 0 1 -1.707 -.707v-3.586h-8a1 1 0 0 1 -1 -1v-4a1 1 0 0 1 1 -1z"
+						/>
+					</svg>
+				</button>
+				<!-- <button
 					on:click={followBuild}
 					class="bg-transparent"
 					data-tooltip="Follow logs"
@@ -169,13 +257,13 @@
 						<line x1="12" y1="8" x2="12" y2="16" />
 						<line x1="16" y1="12" x2="12" y2="16" />
 					</svg>
-				</button>
+				</button> -->
 			</div>
 			<div
 				class="font-mono w-full leading-6 text-left text-md tracking-tighter rounded bg-coolgray-200 py-5 px-6 whitespace-pre-wrap break-words overflow-auto max-h-[80vh] -mt-12 overflow-y-scroll scrollbar-w-1 scrollbar-thumb-coollabs scrollbar-track-coolgray-200"
 				bind:this={logsEl}
 			>
-				<div class="px-2">
+				<div class="px-2 pr-14">
 					{#each logs as log}
 						{log + '\n'}
 					{/each}