131 lines
4.3 KiB
Svelte
131 lines
4.3 KiB
Svelte
<script lang="ts">
|
|
import { type Job } from '$lib/gen'
|
|
import { base } from '$lib/base'
|
|
import JobStatus from '$lib/components/JobStatus.svelte'
|
|
import { displayDate, truncateRev } from '$lib/utils'
|
|
import ScheduleEditor from '$lib/components/triggers/schedules/ScheduleEditor.svelte'
|
|
import TimeAgo from './TimeAgo.svelte'
|
|
import { workspaceStore } from '$lib/stores'
|
|
import Tooltip from './Tooltip.svelte'
|
|
import { Clock, MemoryStick, Calendar, Bot, User, Code2 } from 'lucide-svelte'
|
|
import BarsStaggered from '$lib/components/icons/BarsStaggered.svelte'
|
|
|
|
const SMALL_ICON_SIZE = 14
|
|
interface Props {
|
|
job: Job
|
|
scheduleEditor: ScheduleEditor
|
|
}
|
|
|
|
let { job, scheduleEditor }: Props = $props()
|
|
</script>
|
|
|
|
<div
|
|
class="rounded-md p-4 bg-surface-secondary overflow-x-auto text-xs text-primary font-normal flex flex-col gap-1"
|
|
style="min-height: 150px;"
|
|
>
|
|
<JobStatus {job} />
|
|
<div class="flex flex-row gap-2 items-center">
|
|
<Clock size={SMALL_ICON_SIZE} class="min-w-3.5" />
|
|
<span class="whitespace-nowrap">
|
|
{#if job['success'] != undefined}
|
|
Received job: {displayDate(job.created_at ?? '')}
|
|
{:else}
|
|
Received job <TimeAgo date={job.created_at ?? ''} />
|
|
{/if}
|
|
<Tooltip small>{job?.created_at}</Tooltip>
|
|
</span>
|
|
</div>
|
|
{#if job && 'started_at' in job && job.started_at}
|
|
<div class="flex flex-row gap-2 items-center">
|
|
<Clock size={SMALL_ICON_SIZE} class="min-w-3.5" />
|
|
<span class="whitespace-nowrap">
|
|
Started <TimeAgo agoOnlyIfRecent date={job.started_at ?? ''} />
|
|
<Tooltip small>{job?.started_at}</Tooltip>
|
|
</span>
|
|
</div>
|
|
{/if}
|
|
{#if job && job['mem_peak']}
|
|
<div class="flex flex-row gap-2 items-center">
|
|
<MemoryStick size={SMALL_ICON_SIZE} class="text-secondary min-w-3.5" />
|
|
<span> Mem peak: {(job['mem_peak'] / 1024).toPrecision(5)}MB</span>
|
|
</div>
|
|
{/if}
|
|
<div class="text-xs text-primary font-normal flex flex-col gap-1">
|
|
{#if job && job.parent_job}
|
|
{#if job.is_flow_step}
|
|
<div class="flex flex-row gap-2 items-center">
|
|
<BarsStaggered size={SMALL_ICON_SIZE} class="min-w-3.5" />
|
|
<span class="whitespace-nowrap">
|
|
Step of flow
|
|
<a href={`${base}/run/${job.parent_job}?workspace=${$workspaceStore}`}>
|
|
{truncateRev(job.parent_job, 18)}
|
|
</a>
|
|
</span>
|
|
</div>
|
|
{:else}
|
|
<div class="flex flex-row gap-2 items-center">
|
|
<Bot size={SMALL_ICON_SIZE} class="min-w-3.5" />
|
|
<span class="whitespace-nowrap">
|
|
Triggered by parent
|
|
<a href={`${base}/run/${job.parent_job}?workspace=${$workspaceStore}`}>
|
|
{job.parent_job}</a
|
|
>
|
|
</span>
|
|
</div>
|
|
{/if}
|
|
{:else if job && job.schedule_path}
|
|
<div class="flex flex-row gap-2 w-full items-center">
|
|
<Calendar size={SMALL_ICON_SIZE} class="min-w-3.5" />
|
|
<span class="whitespace-nowrap">
|
|
Schedule:
|
|
<!-- svelte-ignore a11y_invalid_attribute -->
|
|
<a
|
|
href="#"
|
|
class="break-words text-blue-600 font-normal"
|
|
onclick={() =>
|
|
scheduleEditor?.openEdit(job.schedule_path ?? '', job.job_kind == 'flow')}
|
|
>
|
|
{truncateRev(job.schedule_path, 40)}
|
|
</a>
|
|
</span>
|
|
</div>
|
|
{/if}
|
|
|
|
{#if (job && job.job_kind == 'flow') || job?.job_kind == 'script'}
|
|
{@const stem = `${job?.job_kind}s`}
|
|
{@const isScript = job?.job_kind === 'script'}
|
|
{@const viewHref = `${base}/${stem}/get/${isScript ? job?.script_hash : job?.script_path}`}
|
|
<div class="flex flex-row gap-2 items-center">
|
|
{#if isScript}
|
|
<Code2 size={SMALL_ICON_SIZE} class="min-w-3.5" />
|
|
{:else}
|
|
<BarsStaggered size={SMALL_ICON_SIZE} />
|
|
{/if}
|
|
<span class="truncate">
|
|
<a href={viewHref}>{isScript ? job?.script_hash : job?.script_path}</a>
|
|
</span>
|
|
</div>
|
|
{/if}
|
|
|
|
<div class="flex items-center gap-2">
|
|
<User size={SMALL_ICON_SIZE} class="min-w-3.5" />
|
|
|
|
<span>
|
|
By {truncateRev(
|
|
job.created_by ?? 'unknown',
|
|
40
|
|
)}{#if (job?.created_by?.length ?? 0) > 40}<Tooltip small
|
|
><div class="break-all">{job.created_by}</div></Tooltip
|
|
>{/if}
|
|
{#if job.permissioned_as !== `u/${job.created_by}` && job.permissioned_as != job.created_by}
|
|
but permissioned as {job.permissioned_as}
|
|
{/if}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="text-secondary text-2xs pt-2 whitespace-nowrap">
|
|
run id:
|
|
<a href={`${base}/run/${job.id}?workspace=${job.workspace_id}`}> {job.id} </a>
|
|
</div>
|
|
</div>
|