kalugin66/windmill
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improve job preview popover layout (#7485)

Browse Source
This commit is contained in:
Guilhem
2026-01-08 06:29:49 +00:00
committed by GitHub
parent 859be6c018
commit cf15ef5795
2 changed files with 49 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
frontend/src/lib/components/jobs/JobPreview.svelte
View File

@@ -16,15 +16,18 @@
import { forLater } from '$lib/forLater'
import DurationMs from '../DurationMs.svelte'
import { workspaceStore } from '$lib/stores'
import { twMerge } from 'tailwind-merge'
const POPUP_HEIGHT = 320 as const
interface Props {
id: string
children?: import('svelte').Snippet<[any]>
class?: string
}
let { id, children }: Props = $props()
let { id, children, class: clazz }: Props = $props()
let job: Job | undefined = $state(undefined)
let hovered = $state(false)
let timeout: number | undefined
@@ -101,11 +104,51 @@
{#if open}
<div
transition:fade|local={{ duration: 50 }}
class="absolute z-50 {popupOnTop ? 'bottom-[35px]' : 'top-[35px]'} -left-10 bg-surface rounded
border shadow-xl flex justify-start items-start w-[600px] h-80
overflow-hidden"
class={twMerge(
'absolute z-50 -left-10 bg-surface rounded border shadow-md flex flex-col gap-4 items-start w-[600px] h-80 overflow-hidden',
popupOnTop ? 'bottom-[35px]' : 'top-[35px]',
clazz
)}
>
<div class="absolute bottom-0 right-1 flex justify-end gap-2 pb-0.5 z-50 bg-surface-primary">
<div class="w-full flex flex-row grow min-h-0 gap-2">
<div class="w-1/2 h-full overflow-auto space-y-1">
<span class="text-xs font-normal text-secondary">Arguments</span>
<JobArgs
id={job?.id}
workspace={job?.workspace_id ?? $workspaceStore ?? 'no_w'}
args={job?.args}
/>
</div>
<div class="w-1/2 h-full overflow-auto space-y-1">
{#if job && 'scheduled_for' in job && !job.running && job.scheduled_for && forLater(job.scheduled_for)}
<div class="text-xs font-semibold text-emphasis mb-1">
<div>Job is scheduled for</div>
<div>{new Date(job?.['scheduled_for']).toLocaleString()}</div>
</div>
{/if}
{#if job?.type === 'CompletedJob'}
<span class="text-xs font-normal text-secondary mb-1">Result</span>
<DisplayResult
workspaceId={job?.workspace_id}
jobId={job?.id}
{result}
disableExpand
language={job?.language}
/>
{:else if job && `running` in job ? job.running : false}
<div class="text-sm font-semibold text-primary mb-1"> Job is still running </div>
<LogViewer
jobId={job?.id}
duration={job?.['duration_ms']}
mem={job?.['mem_peak']}
content={job?.logs}
isLoading={job?.['running'] == false}
tag={job?.tag}
/>
{/if}
</div>
</div>
<div class="flex justify-end gap-2 pb-0.5 z-50 bg-surface-primary">
{#if job?.started_at}
<Badge>{new Date(job?.['started_at']).toLocaleString()}</Badge>
{/if}
@@ -125,40 +168,6 @@
{/each}
{/if}
</div>
<div class="w-1/2 h-full overflow-auto">
<JobArgs
id={job?.id}
workspace={job?.workspace_id ?? $workspaceStore ?? 'no_w'}
args={job?.args}
/>
</div>
<div class="w-1/2 h-full overflow-auto p-2">
{#if job && 'scheduled_for' in job && !job.running && job.scheduled_for && forLater(job.scheduled_for)}
<div class="text-xs font-semibold text-emphasis mb-1">
<div>Job is scheduled for</div>
<div>{new Date(job?.['scheduled_for']).toLocaleString()}</div>
</div>
{/if}
{#if job?.type === 'CompletedJob'}
<DisplayResult
workspaceId={job?.workspace_id}
jobId={job?.id}
{result}
disableExpand
language={job?.language}
/>
{:else if job && `running` in job ? job.running : false}
<div class="text-sm font-semibold text-primary mb-1"> Job is still running </div>
<LogViewer
jobId={job?.id}
duration={job?.['duration_ms']}
mem={job?.['mem_peak']}
content={job?.logs}
isLoading={job?.['running'] == false}
tag={job?.tag}
/>
{/if}
</div>
</div>
{/if}
</div>

2
frontend/src/routes/(root)/(logged)/schedules/+page.svelte
View File

@@ -520,7 +520,7 @@
{#each jobs ?? [] as job}
{@const h = (avg_s ? job.duration_ms / avg_s : 1) * 7 + 3}
<a href="{base}/run/{job.id}?workspace={$workspaceStore}">
<JobPreview id={job.id}>
<JobPreview id={job.id} class="p-4">
<div>
<div
class="{job.success ? 'bg-green-300' : 'bg-red-300'} mx-auto w-1.5"