76 lines
1.9 KiB
Svelte
76 lines
1.9 KiB
Svelte
|
<script context="module" lang="ts">
|
||
|
|
import type { Load } from '@sveltejs/kit';
|
||
|
|
import { onDestroy, onMount } from 'svelte';
|
||
|
|
export const load: Load = async ({ fetch, params, url, stuff }) => {
|
||
|
|
let endpoint = `/applications/${params.id}/logs.json`;
|
||
|
|
const res = await fetch(endpoint);
|
||
|
|
if (res.ok) {
|
||
|
|
return {
|
||
|
|
props: {
|
||
|
|
application: stuff.application,
|
||
|
|
...(await res.json())
|
||
|
|
}
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
return {
|
||
|
|
status: res.status,
|
||
|
|
error: new Error(`Could not load ${url}`)
|
||
|
|
};
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<script lang="ts">
|
||
|
|
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 logs = [];
|
||
|
|
|
||
|
|
const { id } = $page.params;
|
||
|
|
|
||
|
|
onMount(async () => {
|
||
|
|
loadLogs();
|
||
|
|
loadLogsInterval = setInterval(() => {
|
||
|
|
loadLogs();
|
||
|
|
}, 3000);
|
||
|
|
});
|
||
|
|
onDestroy(() => {
|
||
|
|
clearInterval(loadLogsInterval);
|
||
|
|
});
|
||
|
|
async function loadLogs() {
|
||
|
|
try {
|
||
|
|
const newLogs = await get(`/applications/${id}/logs.json`);
|
||
|
|
logs = newLogs.logs;
|
||
|
|
return;
|
||
|
|
} catch ({ error }) {
|
||
|
|
return errorNotification(error);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<div class="flex space-x-1 p-6 font-bold">
|
||
|
|
<div class="mr-4 text-2xl tracking-tight">
|
||
|
|
Application logs of <a href={application.fqdn} target="_blank">{getDomain(application.fqdn)}</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="flex flex-row justify-center space-x-2 px-10 pt-6">
|
||
|
|
{#if logs.length === 0}
|
||
|
|
<div class="text-xl font-bold tracking-tighter">Waiting for the logs...</div>
|
||
|
|
{:else}
|
||
|
|
<div class="relative w-full">
|
||
|
|
<LoadingLogs />
|
||
|
|
<div
|
||
|
|
class="font-mono leading-6 text-left text-md tracking-tighter rounded bg-coolgray-200 p-6 whitespace-pre-wrap break-words w-full"
|
||
|
|
>
|
||
|
|
{#each logs as log}
|
||
|
|
{log + '\n'}
|
||
|
|
{/each}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{/if}
|
||
|
|
</div>
|