From 44a102443d09863c219a0c173c4bed8c0e9af5b3 Mon Sep 17 00:00:00 2001 From: Andras Bacsai Date: Thu, 21 Apr 2022 23:07:54 +0200 Subject: [PATCH] fix: Application logs is not reversed and queried better --- .../applications/[id]/logs/build/index.svelte | 2 +- .../applications/[id]/logs/index.json.ts | 26 ++-- .../applications/[id]/logs/index.svelte | 112 +++++++----------- 3 files changed, 60 insertions(+), 80 deletions(-) diff --git a/src/routes/applications/[id]/logs/build/index.svelte b/src/routes/applications/[id]/logs/build/index.svelte index c9a2ce0bd..8c91a2f7f 100644 --- a/src/routes/applications/[id]/logs/build/index.svelte +++ b/src/routes/applications/[id]/logs/build/index.svelte @@ -88,7 +88,7 @@
- $t('application.build_logs')} + {$t('application.build_logs')}
{application.name}
diff --git a/src/routes/applications/[id]/logs/index.json.ts b/src/routes/applications/[id]/logs/index.json.ts index 3d02c8ea7..9ef7653bc 100644 --- a/src/routes/applications/[id]/logs/index.json.ts +++ b/src/routes/applications/[id]/logs/index.json.ts @@ -10,6 +10,10 @@ export const get: RequestHandler = async (event) => { if (status === 401) return { status, body }; const { id } = event.params; + let since = event.url.searchParams.get('since') || 0; + if (since !== 0) { + since = dayjs(since).unix(); + } try { const { destinationDockerId, destinationDocker } = await db.prisma.application.findUnique({ where: { id }, @@ -20,16 +24,22 @@ export const get: RequestHandler = async (event) => { try { const container = await docker.engine.getContainer(id); if (container) { + const logs = ( + await container.logs({ + stdout: true, + stderr: true, + timestamps: true, + since, + tail: 5000 + }) + ) + .toString() + .split('\n') + .map((l) => l.slice(8)) + .filter((a) => a); return { body: { - logs: ( - await container.logs({ stdout: true, stderr: true, timestamps: true, tail: 5000 }) - ) - .toString() - .split('\n') - .map((l) => l.slice(8)) - .filter((a) => a) - .reverse() + logs } }; } diff --git a/src/routes/applications/[id]/logs/index.svelte b/src/routes/applications/[id]/logs/index.svelte index e770f7e1d..a69bbd928 100644 --- a/src/routes/applications/[id]/logs/index.svelte +++ b/src/routes/applications/[id]/logs/index.svelte @@ -29,15 +29,12 @@ import { t } from '$lib/translations'; let loadLogsInterval = null; - let allLogs = { - logs: [] - }; let logs = []; - let currentPage = 1; - let endOfLogs = false; - let startOfLogs = true; + let lastLog = null; let followingInterval; + let followingLogs; let logsEl; + let position = 0; const { id } = $page.params; onMount(async () => { @@ -53,11 +50,8 @@ async function loadAllLogs() { try { const data: any = await get(`/applications/${id}/logs.json`); - allLogs = data.logs; - logs = data.logs.slice(0, 100); - if (logs.length < 100) { - endOfLogs = true; - } + lastLog = data.logs[data.logs.length - 1]; + logs = data.logs; return; } catch ({ error }) { return errorNotification(error); @@ -65,40 +59,40 @@ } async function loadLogs() { try { - const newLogs = await get(`/applications/${id}/logs.json`); - logs = newLogs.logs.slice(0, 100); + const newLogs: any = await get( + `/applications/${id}/logs.json?since=${lastLog.split(' ')[0]}` + ); + if (newLogs.logs[newLogs.logs.length - 1] !== logs[logs.length - 1]) { + logs = logs.concat(newLogs.logs); + lastLog = newLogs.logs[newLogs.logs.length - 1]; + } + return; } catch ({ error }) { return errorNotification(error); } } - async function loadOlderLogs() { - clearInterval(loadLogsInterval); - loadLogsInterval = null; - logsEl.scrollTop = 0; - if (logs.length < 100) { - endOfLogs = true; - return; - } - startOfLogs = false; - endOfLogs = false; - currentPage += 1; - logs = allLogs.slice(currentPage * 100 - 100, currentPage * 100); - } - async function loadNewerLogs() { - currentPage -= 1; - logsEl.scrollTop = 0; - if (currentPage !== 1) { - clearInterval(loadLogsInterval); - endOfLogs = false; - loadLogsInterval = null; - logs = allLogs.slice(currentPage * 100 - 100, currentPage * 100); + function detect() { + if (position < logsEl.scrollTop) { + position = logsEl.scrollTop; } else { - startOfLogs = true; - loadLogs(); - loadLogsInterval = setInterval(() => { - loadLogs(); + if (followingLogs) { + clearInterval(followingInterval); + followingLogs = false; + } + position = logsEl.scrollTop; + } + } + + function followBuild() { + followingLogs = !followingLogs; + if (followingLogs) { + followingInterval = setInterval(() => { + logsEl.scrollTop = logsEl.scrollHeight; + window.scrollTo(0, document.body.scrollHeight); }, 1000); + } else { + clearInterval(followingInterval); } } @@ -186,12 +180,10 @@ {/if}
-
{#each logs as log}