improve settings, add tag to logs

This commit is contained in:
Ruben Fiszel
2023-11-05 23:13:58 +01:00
parent 48e86ac96d
commit d3f983e9ed
12 changed files with 76 additions and 57 deletions
@@ -7,7 +7,7 @@
export let logs: string
export let col: boolean = false
export let noBorder = false
export let loading
export let loading: boolean
export let filename: string | undefined = undefined
export let jobId: string | undefined = undefined
export let workspaceId: string | undefined = undefined
@@ -28,6 +28,6 @@
{/if}
</div>
<div class="overflow-auto {col ? '' : 'max-h-80'} h-full relative">
<LogViewer content={logs ?? ''} {jobId} isLoading={false} />
<LogViewer content={logs ?? ''} {jobId} isLoading={false} tag={undefined} />
</div>
</div>
+7 -1
View File
@@ -11,6 +11,7 @@
export let mem: number | undefined = undefined
export let wrapperClass = ''
export let jobId: string | undefined = undefined
export let tag: string | undefined
// @ts-ignore
const ansi_up = new AnsiUp()
@@ -63,7 +64,12 @@
</div>
</div>
{#if isLoading}
<Loader2 class="animate-spin absolute top-2 left-2" />
<div class="flex gap-2 absolute top-2 left-2 items-center">
<Loader2 class="animate-spin" />
{#if tag}
<div class="text-secondary text-xs">tag: {tag}</div>
{/if}
</div>
{:else if duration}
<span class="absolute text-xs text-tertiary dark:text-gray-400 top-2 left-2"
>took {duration}ms</span
@@ -129,6 +129,7 @@
mem={testJob?.['mem_peak']}
content={testJob?.logs}
isLoading={testIsLoading}
tag={testJob?.tag}
/>
</Pane>
<Pane size={50} minSize={10} class="text-sm text-tertiary">
@@ -88,6 +88,7 @@
mem={testJob?.['mem_peak']}
content={testJob?.logs}
isLoading={testIsLoading}
tag={testJob?.tag}
/>
</div>
</div>
@@ -74,6 +74,7 @@
mem={testJob?.['mem_peak']}
content={testJob?.logs}
isLoading={testIsLoading}
tag={testJob?.tag}
/>
</div>
</div>
@@ -892,6 +892,7 @@
<LogViewer
content={`Logs are avaiable in the browser console directly`}
isLoading={false}
tag={undefined}
/>
</Pane>
<Pane size={90} minSize={10} class="text-sm text-secondary">
@@ -910,6 +911,7 @@
<LogViewer
content={`Logs are avaiable in the browser console directly`}
isLoading={false}
tag={undefined}
/>
</Pane>
<Pane size={90} minSize={10} class="text-sm text-secondary">
@@ -955,6 +957,7 @@
jobId={job?.id}
content={job?.logs}
isLoading={testIsLoading}
tag={job?.tag}
/>
</Pane>
<Pane size={50} minSize={10} class="text-sm text-secondary">
@@ -128,6 +128,7 @@
mem={job?.['mem_peak']}
content={job?.logs}
isLoading
tag={job?.tag}
/>
{/if}
</div>
@@ -108,6 +108,7 @@
mem={job?.['mem_peak']}
isLoading={!(job && 'logs' in job && job.logs)}
content={job?.logs}
tag={job?.tag}
/>
</div>
{:else if viewTab == 'code'}
@@ -147,6 +148,7 @@
mem={job?.['mem_peak']}
content={job?.logs}
isLoading
tag={job?.tag}
/>
{/if}
{/if}
@@ -93,6 +93,7 @@
mem={previewJob?.['mem_peak']}
content={previewJob?.logs}
isLoading={previewIsLoading}
tag={previewJob?.tag}
/>
</Pane>
<Pane>
@@ -2,6 +2,7 @@
import { classNames } from '$lib/utils'
import Icon from 'svelte-awesome'
import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
import Popover from '../Popover.svelte'
export let label: string
export let icon: any | undefined = undefined
@@ -13,53 +14,58 @@
</script>
{#if !disabled}
<button
class={classNames(
'group flex items-center px-2 py-2 font-light rounded-md h-8 gap-3 w-full',
isSelected ? 'bg-[#30404e] hover:bg-[#30404e]' : 'hover:bg-[#34363c]',
'transition-all',
$$props.class
)}
title={label}
>
{#if icon}
<svelte:component
this={icon}
size={16}
class={classNames(
'flex-shrink-0',
isSelected
? 'text-blue-100 group-hover:text-white'
: 'text-gray-100 group-hover:text-white',
'transition-all'
)}
/>
{:else if faIcon}
<Icon
data={faIcon}
class={classNames(
'flex-shrink-0',
isSelected
? 'text-blue-100 group-hover:text-white'
: 'text-gray-100 group-hover:text-white',
'transition-all'
)}
/>
{/if}
<Popover appearTimeout={0} disappearTimeout={0} class="w-full" disablePopup={!isCollapsed}>
<button
class={classNames(
'group flex items-center px-2 py-2 font-light rounded-md h-8 gap-3 w-full',
isSelected ? 'bg-[#30404e] hover:bg-[#30404e]' : 'hover:bg-[#34363c]',
'transition-all',
$$props.class
)}
title={label}
>
{#if icon}
<svelte:component
this={icon}
size={16}
class={classNames(
'flex-shrink-0',
isSelected
? 'text-blue-100 group-hover:text-white'
: 'text-gray-100 group-hover:text-white',
'transition-all'
)}
/>
{:else if faIcon}
<Icon
data={faIcon}
class={classNames(
'flex-shrink-0',
isSelected
? 'text-blue-100 group-hover:text-white'
: 'text-gray-100 group-hover:text-white',
'transition-all'
)}
/>
{/if}
{#if !isCollapsed}
<span
class={classNames(
'whitespace-pre truncate',
isSelected
? 'text-blue-100 group-hover:text-white font-semibold'
: 'text-gray-100 group-hover:text-white',
'transition-all',
$$props.class
)}
>
{label}
</span>
{/if}
</button>
{#if !isCollapsed}
<span
class={classNames(
'whitespace-pre truncate',
isSelected
? 'text-blue-100 group-hover:text-white font-semibold'
: 'text-gray-100 group-hover:text-white',
'transition-all',
$$props.class
)}
>
{label}
</span>
{/if}
</button>
<svelte:fragment slot="text">
{label}
</svelte:fragment>
</Popover>
{/if}
@@ -26,12 +26,7 @@
<Menu>
<div slot="trigger" class="w-full">
<MenuButton
class="!text-xs"
icon={User}
label={String($userStore?.username ?? ($superadmin ? $superadmin : '___'))}
{isCollapsed}
/>
<MenuButton class="!text-xs" icon={User} label={'User'} {isCollapsed} />
</div>
<div class="divide-y">
<div class="px-4 py-3" role="none">
@@ -474,6 +474,7 @@
jobId={job.id}
isLoading={!(job && 'logs' in job && job.logs)}
content={job?.logs}
tag={job?.tag}
/>
</div>
{:else if job?.job_kind !== 'flow' && job?.job_kind !== 'flowpreview'}
@@ -500,6 +501,7 @@
mem={job?.['mem_peak']}
isLoading={!(job && 'logs' in job && job.logs)}
content={job?.logs}
tag={job?.tag}
/>
</div>
{:else if viewTab == 'code'}