129 lines
4.2 KiB
Svelte
129 lines
4.2 KiB
Svelte
<script lang="ts">
|
|
import { ClipboardCopy, Download, Loader2 } from 'lucide-svelte'
|
|
import { Button, Drawer, DrawerContent } from './common'
|
|
import { copyToClipboard } from '$lib/utils'
|
|
import { workspaceStore } from '$lib/stores'
|
|
import AnsiUp from 'ansi_up'
|
|
import NoWorkerWithTagWarning from './runs/NoWorkerWithTagWarning.svelte'
|
|
|
|
export let content: string | undefined
|
|
export let isLoading: boolean
|
|
export let duration: number | undefined = undefined
|
|
export let mem: number | undefined = undefined
|
|
export let wrapperClass = ''
|
|
export let jobId: string | undefined = undefined
|
|
export let tag: string | undefined
|
|
export let small = false
|
|
|
|
// @ts-ignore
|
|
const ansi_up = new AnsiUp()
|
|
|
|
let scroll = true
|
|
let div: HTMLElement | null = null
|
|
|
|
let LOG_INC = 10000
|
|
let LOG_LIMIT = LOG_INC
|
|
|
|
let lastJobId = jobId
|
|
$: if (jobId !== lastJobId) {
|
|
lastJobId = jobId
|
|
LOG_LIMIT = LOG_INC
|
|
}
|
|
$: truncatedContent = content
|
|
? (content.length ?? 0) > LOG_LIMIT
|
|
? content?.slice(-LOG_LIMIT)
|
|
: content
|
|
: ''
|
|
|
|
$: if (content != undefined && isLoading) {
|
|
isLoading = false
|
|
}
|
|
|
|
$: truncatedContent && scrollToBottom()
|
|
|
|
$: html = ansi_up.ansi_to_html(truncatedContent ?? '')
|
|
export function scrollToBottom() {
|
|
scroll && setTimeout(() => div?.scroll({ top: div?.scrollHeight, behavior: 'smooth' }), 100)
|
|
}
|
|
|
|
let logViewer: Drawer
|
|
</script>
|
|
|
|
<Drawer bind:this={logViewer} size="900px">
|
|
<DrawerContent title="Expanded Logs" on:close={logViewer.closeDrawer}>
|
|
<svelte:fragment slot="actions">
|
|
<a
|
|
class="text-sm text-secondary mr-2 inline-flex gap-2 items-center py-2 px-2 hover:bg-surface-hover rounded-lg"
|
|
download="windmill-logs.json"
|
|
href="/api/w/{$workspaceStore}/jobs_u/get_logs/{jobId}">Download <Download size={14} /></a
|
|
>
|
|
<Button on:click={() => copyToClipboard(content)} color="light" size="xs">
|
|
<div class="flex gap-2 items-center">Copy to clipboard <ClipboardCopy /> </div>
|
|
</Button>
|
|
</svelte:fragment>
|
|
<div>
|
|
<pre class="bg-surface-secondary text-secondary text-xs w-full p-2"
|
|
>{#if content}{#if content?.length > LOG_LIMIT}(truncated to the last {LOG_LIMIT} characters)... <button
|
|
on:click={() => {
|
|
scroll = false
|
|
LOG_LIMIT = LOG_LIMIT + Math.min(LOG_INC, content?.length ?? 0 - LOG_LIMIT)
|
|
}}>Show more</button
|
|
>
|
|
{/if}{@html html}{:else if isLoading}Waiting for job to start...{:else}No logs are available yet{/if}</pre
|
|
>
|
|
</div>
|
|
</DrawerContent>
|
|
</Drawer>
|
|
|
|
<div class="relative w-full h-full {wrapperClass}">
|
|
<div bind:this={div} class="w-full h-full overflow-auto relative bg-surface-secondary">
|
|
<div class="sticky z-10 top-0 right-0 w-full flex flex-row-reverse justify-between text-sm">
|
|
<div class="flex gap-1 pl-0.5 bg-surface-secondary">
|
|
<button on:click={logViewer.openDrawer}>Expand</button>
|
|
<div
|
|
class="{small ? '' : 'py-2'} pr-2 {small
|
|
? '!text-2xs'
|
|
: '!text-xs'} flex gap-2 items-center"
|
|
>
|
|
Auto scroll
|
|
<input class="windmillapp" type="checkbox" bind:checked={scroll} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{#if isLoading}
|
|
<div class="flex gap-2 absolute top-2 left-2 items-center z-10">
|
|
<Loader2 class="animate-spin" />
|
|
{#if tag}
|
|
<div class="flex flex-row items-center gap-1">
|
|
<div class="text-secondary {small ? '!text-2xs' : '!text-xs'}">tag: {tag}</div>
|
|
<NoWorkerWithTagWarning {tag} />
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
{:else if duration}
|
|
<span
|
|
class="absolute {small ? '!text-2xs' : '!text-xs'} text-tertiary dark:text-gray-400 {small
|
|
? 'top-0'
|
|
: 'top-2'} left-2">took {duration}ms</span
|
|
>
|
|
{/if}
|
|
{#if mem}
|
|
<span
|
|
class="absolute {small ? '!text-2xs' : '!text-xs'} text-tertiary dark:text-gray-400 {small
|
|
? 'top-0'
|
|
: 'top-2'} left-36">mem peak: {(mem / 1024).toPrecision(4)}MB</span
|
|
>
|
|
{/if}
|
|
<pre class="whitespace-pre-wrap break-words {small ? '!text-2xs' : '!text-xs'} w-full p-2"
|
|
>{#if content}{#if content?.length > LOG_LIMIT}(truncated to the last {LOG_LIMIT} characters)... <button
|
|
on:click={() => {
|
|
scroll = false
|
|
LOG_LIMIT = LOG_LIMIT + Math.min(LOG_INC, content?.length ?? 0 - LOG_LIMIT)
|
|
}}>Show more</button
|
|
>
|
|
{/if}<span>{@html html}</span>{:else if !isLoading}<span>No logs are available yet</span
|
|
>{/if}</pre
|
|
>
|
|
</div>
|
|
</div>
|