Skip to content

Log Viewer UI nits #6952

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

Log Viewer UI nits #6952

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
149 changes: 76 additions & 73 deletions frontend/src/lib/components/LogViewer.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -221,86 +221,89 @@
</Drawer>

<div class="w-full h-full {wrapperClass}">
<div class="w-full h-full relative">
<div
bind:this={div}
class="w-full h-full overflow-auto bg-surface-secondary pt-4 {noMaxH ? '' : 'max-h-screen'}"
data-nav-id={navigationId}
>
<div class="absolute z-10 top-0 right-0 flex flex-row-reverse justify-between text-xs">
<div class="flex gap-2">
{#if jobId && download}
<div class="flex items-center">
<a
class="text-primary pb-0.5"
target="_blank"
href="{base}/api/w/{$workspaceStore}/jobs_u/get_logs/{jobId}"
download="windmill_logs_{jobId}.txt"
><Download size="14" />
</a>
</div>
{/if}
<button onclick={logViewer.openDrawer}><Expand size="12" /></button>
{#if !noAutoScroll}
<label
class="{small
? ''
: 'py-2'} pr-2 text-2xs flex gap-2 font-normal text-primary items-center"
>
Auto scroll
<input class="windmillapp" type="checkbox" bind:checked={scroll} />
</label>
{/if}
</div>
<div
class="w-full flex items-center text-xs bg-surface-secondary rounded-t-md border-b px-2 relative"
>
{#if isLoading}
<div class="flex gap-2 items-center">
<Loader2 class="animate-spin" />
{#if tag}
<div class="flex flex-row items-center gap-1">
<div class="text-primary text-2xs">{tagLabel ?? 'tag'}: {tag}</div>
<NoWorkerWithTagWarning {tagLabel} {tag} />
</div>
{/if}
{#if jobId}
<QueuePosition {jobId} />
{/if}
</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-primary text-2xs">{tagLabel ?? 'tag'}: {tag}</div>
<NoWorkerWithTagWarning {tagLabel} {tag} />
</div>
{/if}
{#if jobId}
<QueuePosition {jobId} />
{/if}
{:else if duration}
<span
class={twMerge(
'text-primary dark:text-gray-400',
small ? '!text-2xs' : '!text-xs',
small ? 'top-0' : 'top-2',
noPadding ? '' : 'left-2'
)}>took {duration}ms</span
>
{/if}
{#if mem}
<span
class="{small ? '!text-2xs' : '!text-xs'} text-primary dark:text-gray-400 {small
? 'top-0'
: 'top-2'} left-24">mem peak: {(mem / 1024).toPrecision(4)}MB</span
>
{/if}
<div class="flex-1"></div>
<div class="flex gap-2">
{#if jobId && download}
<div class="flex items-center">
<a
class="text-primary pb-0.5"
target="_blank"
href="{base}/api/w/{$workspaceStore}/jobs_u/get_logs/{jobId}"
download="windmill_logs_{jobId}.txt"
>
<Download size="14" />
</a>
</div>
{:else if duration}
<span
class={twMerge(
'absolute text-primary dark:text-gray-400',
small ? '!text-2xs' : '!text-xs',
small ? 'top-0' : 'top-2',
noPadding ? '' : 'left-2'
)}>took {duration}ms</span
>
{/if}
{#if mem}
<span
class="absolute {small ? '!text-2xs' : '!text-xs'} text-primary dark:text-gray-400 {small
? 'top-0'
: 'top-2'} left-36">mem peak: {(mem / 1024).toPrecision(4)}MB</span
<button onclick={logViewer.openDrawer}><Expand size="12" /></button>
{#if !noAutoScroll}
<label
class="{small
? ''
: 'py-2'} pr-2 text-2xs flex gap-2 font-normal text-primary items-center"
>
Auto scroll
<input class="windmillapp rounded-md" type="checkbox" bind:checked={scroll} />
</label>
{/if}
<pre
class={twMerge(
'whitespace-pre break-words w-full ',
small ? '!text-2xs' : '!text-xs',
noPadding ? '' : 'p-2'
)}
>{#if content}{@const len =
(content?.length ?? 0) +
(loadedFromObjectStore?.length ?? 0)}{#if downloadStartUrl}<button
onclick={getStoreLogs}
>Show more... &nbsp;<Tooltip>{tooltipText(prefixIndex)}</Tooltip></button
><br />{:else if len > LOG_LIMIT}(truncated to the last {LOG_LIMIT} characters)<br
/><button onclick={() => showMoreTruncate(len)}>Show more..</button><br />{/if}<span
>{@html html}</span
>{:else if !isLoading}<span>{customEmptyMessage}</span>{/if}</pre
>
</div>
</div>
<div
bind:this={div}
class="w-full h-full overflow-auto bg-surface-secondary rounded-b-md relative pt-0 {noMaxH
? ''
: 'max-h-screen'}"
data-nav-id={navigationId}
>
<pre
class={twMerge(
'whitespace-pre break-words w-full ',
small ? '!text-2xs' : '!text-xs',
noPadding ? '' : 'p-2'
)}
>{#if content}{@const len =
(content?.length ?? 0) +
(loadedFromObjectStore?.length ?? 0)}{#if downloadStartUrl}<button onclick={getStoreLogs}
>Show more... &nbsp;<Tooltip>{tooltipText(prefixIndex)}</Tooltip></button
><br />{:else if len > LOG_LIMIT}(truncated to the last {LOG_LIMIT} characters)<br
/><button onclick={() => showMoreTruncate(len)}>Show more..</button><br />{/if}<span
>{@html html}</span
>{:else if !isLoading}<span>{customEmptyMessage}</span>{/if}</pre
>
</div>
</div>

<style global>
Expand Down