minor UX improvements
This commit is contained in:
Ruben Fiszel
@@ -66,63 +66,63 @@
|
||||
|
||||
<ScheduleEditor on:update={() => goto('/schedules')} bind:this={scheduleEditor} />
|
||||
|
||||
<JobPreview {job}>
|
||||
<div class="border border-gray-400 rounded py-4">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-4 w-full gap-4">
|
||||
<div class="flex-col col-span-2">
|
||||
<div class="flex flex-row text-sm">
|
||||
{#if job === undefined}
|
||||
No job found
|
||||
{:else}
|
||||
<div class="block text-center align-middle px-6">
|
||||
{#if 'success' in job && job.success}
|
||||
{#if job.is_skipped}
|
||||
<Icon
|
||||
class="text-green-600"
|
||||
data={faFastForward}
|
||||
scale={SMALL_ICON_SCALE}
|
||||
label="Job completed successfully but was skipped"
|
||||
/>
|
||||
{:else}
|
||||
<Icon
|
||||
class="text-green-600"
|
||||
data={check}
|
||||
scale={SMALL_ICON_SCALE}
|
||||
label="Job completed successfully"
|
||||
/>
|
||||
{/if}
|
||||
{:else if 'success' in job}
|
||||
<div class="border border-gray-400 rounded py-4">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-4 w-full gap-4">
|
||||
<div class="flex-col col-span-2">
|
||||
<div class="flex flex-row text-sm">
|
||||
{#if job === undefined}
|
||||
No job found
|
||||
{:else}
|
||||
<div class="block text-center align-middle px-6">
|
||||
{#if 'success' in job && job.success}
|
||||
{#if job.is_skipped}
|
||||
<Icon
|
||||
class="text-red-700"
|
||||
data={faTimes}
|
||||
class="text-green-600"
|
||||
data={faFastForward}
|
||||
scale={SMALL_ICON_SCALE}
|
||||
label="Job completed with an error"
|
||||
/>
|
||||
{:else if 'running' in job && job.running}
|
||||
<Icon
|
||||
class="text-yellow-500"
|
||||
data={faCircle}
|
||||
scale={SMALL_ICON_SCALE}
|
||||
label="Job is running"
|
||||
/>
|
||||
{:else if job && 'running' in job && job.scheduled_for && forLater(job.scheduled_for)}
|
||||
<Icon
|
||||
class="text-gray-700"
|
||||
data={faCalendar}
|
||||
scale={SMALL_ICON_SCALE}
|
||||
label="Job is scheduled to run at a later time"
|
||||
label="Job completed successfully but was skipped"
|
||||
/>
|
||||
{:else}
|
||||
<Icon
|
||||
class="text-gray-500"
|
||||
data={faHourglassHalf}
|
||||
class="text-green-600"
|
||||
data={check}
|
||||
scale={SMALL_ICON_SCALE}
|
||||
label="Job is waiting for an executor"
|
||||
label="Job completed successfully"
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
{:else if 'success' in job}
|
||||
<Icon
|
||||
class="text-red-700"
|
||||
data={faTimes}
|
||||
scale={SMALL_ICON_SCALE}
|
||||
label="Job completed with an error"
|
||||
/>
|
||||
{:else if 'running' in job && job.running}
|
||||
<Icon
|
||||
class="text-yellow-500"
|
||||
data={faCircle}
|
||||
scale={SMALL_ICON_SCALE}
|
||||
label="Job is running"
|
||||
/>
|
||||
{:else if job && 'running' in job && job.scheduled_for && forLater(job.scheduled_for)}
|
||||
<Icon
|
||||
class="text-gray-700"
|
||||
data={faCalendar}
|
||||
scale={SMALL_ICON_SCALE}
|
||||
label="Job is scheduled to run at a later time"
|
||||
/>
|
||||
{:else}
|
||||
<Icon
|
||||
class="text-gray-500"
|
||||
data={faHourglassHalf}
|
||||
scale={SMALL_ICON_SCALE}
|
||||
label="Job is waiting for an executor"
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row space-x-2">
|
||||
<div class="flex flex-row space-x-2">
|
||||
<JobPreview {job}>
|
||||
<div class="whitespace-nowrap">
|
||||
{#if job.script_path}
|
||||
<a href="/run/{job.id}?workspace={job.workspace_id}">{job.script_path} </a>
|
||||
@@ -142,111 +142,108 @@
|
||||
}}><Badge><Icon scale={0.7} data={faSearch} /></Badge></button
|
||||
>
|
||||
</div>
|
||||
<div class="whitespace-nowrap">
|
||||
{#if 'job_kind' in job}<a href="/run/{job.id}"
|
||||
><Badge color="blue">{job.job_kind}</Badge></a
|
||||
>
|
||||
{/if}
|
||||
{#if job.is_flow_step && (job.job_kind == 'script' || job.job_kind == 'preview')}
|
||||
<a href="/run/{job.parent_job}?workspace={job.workspace_id}"
|
||||
><Badge color="gray">flow step</Badge></a
|
||||
>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="pl-14 italic text-gray-500 text-2xs whitespace-nowrap overflow-hidden"
|
||||
>{truncateRev(job.id, 8, '')}</div
|
||||
>
|
||||
</div>
|
||||
<div class="bg-white grid grid-cols-2 gap-x-2 col-span-2">
|
||||
<div
|
||||
class="w-full text-gray-500 text-xs text-left flex flex-col gap-1 mx-4 overflow-hidden"
|
||||
>
|
||||
<div>
|
||||
<Icon class="text-gray-700" data={faUser} scale={SMALL_ICON_SCALE} /><span class="mx-2">
|
||||
By {job.created_by}</span
|
||||
>
|
||||
</div>
|
||||
{#if job && 'duration_ms' in job && job.duration_ms != undefined}
|
||||
<div>
|
||||
<Icon class="text-gray-700" data={faHourglassHalf} scale={SMALL_ICON_SCALE} /><span
|
||||
class="mx-2"
|
||||
>
|
||||
Ran in {msToSec(job.duration_ms)}s</span
|
||||
>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="text-gray-500 text-xs text-left place-self-start flex flex-col gap-1">
|
||||
{#if 'started_at' in job && job.started_at}
|
||||
<div>
|
||||
<Icon class="text-gray-700" data={faClock} scale={SMALL_ICON_SCALE} /><span
|
||||
class="mx-1.5"
|
||||
>
|
||||
<span>
|
||||
{#if job?.['duration_ms']}
|
||||
Ended {#key time}
|
||||
{endedDate(job.started_at, job?.['duration_ms'])}{/key}
|
||||
{:else}
|
||||
Started {#key time}
|
||||
{displayDaysAgo(job.started_at ?? '')}{/key}
|
||||
{/if}</span
|
||||
>
|
||||
</span></div
|
||||
>
|
||||
{/if}
|
||||
{#if 'scheduled_for' in job && !job.running && job.scheduled_for && forLater(job.scheduled_for)}
|
||||
<div class="inline-flex gap-1">
|
||||
<CalendarClock size={13} class="-ml-0.5" />
|
||||
<span>
|
||||
<span class="bg-blue-200 text-gray-700 text-xs rounded px-1">Scheduled</span>
|
||||
for {displayDate(job.scheduled_for ?? '')}
|
||||
</span>
|
||||
</div>
|
||||
{:else if 'scheduled_for' in job && !job.running}
|
||||
<div>
|
||||
<Icon class="text-gray-700" data={faClock} scale={SMALL_ICON_SCALE} /><span
|
||||
class="mx-2"
|
||||
>
|
||||
<span class="bg-blue-200 text-gray-700 text-xs rounded px-1"
|
||||
>Waiting for an executor</span
|
||||
>
|
||||
</span>
|
||||
</div>
|
||||
{/if}
|
||||
<div>
|
||||
{#if job && job.parent_job}
|
||||
{#if job.is_flow_step}
|
||||
<Icon class="text-gray-700" data={faBarsStaggered} scale={SMALL_ICON_SCALE} /><span
|
||||
class="mx-1"
|
||||
>
|
||||
Step of flow <a href={`/run/${job.parent_job}`}
|
||||
>{truncateRev(job.parent_job, 6)}</a
|
||||
></span
|
||||
>
|
||||
{:else}
|
||||
<Icon class="text-gray-700" data={faRobot} scale={SMALL_ICON_SCALE} /><span
|
||||
class="mx-1"
|
||||
>
|
||||
Parent <a href={`/run/${job.parent_job}`}>{job.parent_job}</a></span
|
||||
</JobPreview>
|
||||
<div class="whitespace-nowrap">
|
||||
{#if 'job_kind' in job}<a href="/run/{job.id}"
|
||||
><Badge color="blue">{job.job_kind}</Badge></a
|
||||
>
|
||||
{/if}
|
||||
{:else if job && job.schedule_path}
|
||||
<Icon class="text-gray-700" data={faCalendar} scale={SMALL_ICON_SCALE} />
|
||||
<span class="mx-1"
|
||||
>Schedule <button
|
||||
class="break-words text-blue-400 font-normal truncate text-xs"
|
||||
on:click={() =>
|
||||
scheduleEditor?.openEdit(job.schedule_path ?? '', job.job_kind == 'flow')}
|
||||
>{job.schedule_path}</button
|
||||
{#if job.is_flow_step && (job.job_kind == 'script' || job.job_kind == 'preview')}
|
||||
<a href="/run/{job.parent_job}?workspace={job.workspace_id}"
|
||||
><Badge color="gray">flow step</Badge></a
|
||||
>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="pl-14 italic text-gray-500 text-2xs whitespace-nowrap overflow-hidden"
|
||||
>{truncateRev(job.id, 8, '')}</div
|
||||
>
|
||||
</div>
|
||||
<div class="bg-white grid grid-cols-2 gap-x-2 col-span-2">
|
||||
<div class="w-full text-gray-500 text-xs text-left flex flex-col gap-1 mx-4 overflow-hidden">
|
||||
<div>
|
||||
<Icon class="text-gray-700" data={faUser} scale={SMALL_ICON_SCALE} /><span class="mx-2">
|
||||
By {job.created_by}</span
|
||||
>
|
||||
</div>
|
||||
{#if job && 'duration_ms' in job && job.duration_ms != undefined}
|
||||
<div>
|
||||
<Icon class="text-gray-700" data={faHourglassHalf} scale={SMALL_ICON_SCALE} /><span
|
||||
class="mx-2"
|
||||
>
|
||||
Ran in {msToSec(job.duration_ms)}s</span
|
||||
>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="text-gray-500 text-xs text-left place-self-start flex flex-col gap-1">
|
||||
{#if 'started_at' in job && job.started_at}
|
||||
<div>
|
||||
<Icon class="text-gray-700" data={faClock} scale={SMALL_ICON_SCALE} /><span
|
||||
class="mx-1.5"
|
||||
>
|
||||
<span>
|
||||
{#if job?.['duration_ms']}
|
||||
Ended {#key time}
|
||||
{endedDate(job.started_at, job?.['duration_ms'])}{/key}
|
||||
{:else}
|
||||
Started {#key time}
|
||||
{displayDaysAgo(job.started_at ?? '')}{/key}
|
||||
{/if}</span
|
||||
>
|
||||
</span></div
|
||||
>
|
||||
{/if}
|
||||
{#if 'scheduled_for' in job && !job.running && job.scheduled_for && forLater(job.scheduled_for)}
|
||||
<div class="inline-flex gap-1">
|
||||
<CalendarClock size={13} class="-ml-0.5" />
|
||||
<span>
|
||||
<span class="bg-blue-200 text-gray-700 text-xs rounded px-1">Scheduled</span>
|
||||
for {displayDate(job.scheduled_for ?? '')}
|
||||
</span>
|
||||
</div>
|
||||
{:else if 'scheduled_for' in job && !job.running}
|
||||
<div>
|
||||
<Icon class="text-gray-700" data={faClock} scale={SMALL_ICON_SCALE} /><span
|
||||
class="mx-2"
|
||||
>
|
||||
<span class="bg-blue-200 text-gray-700 text-xs rounded px-1"
|
||||
>Waiting for an executor</span
|
||||
>
|
||||
</span>
|
||||
</div>
|
||||
{/if}
|
||||
<div>
|
||||
{#if job && job.parent_job}
|
||||
{#if job.is_flow_step}
|
||||
<Icon class="text-gray-700" data={faBarsStaggered} scale={SMALL_ICON_SCALE} /><span
|
||||
class="mx-1"
|
||||
>
|
||||
Step of flow <a href={`/run/${job.parent_job}`}>{truncateRev(job.parent_job, 6)}</a
|
||||
></span
|
||||
>
|
||||
{:else}
|
||||
<Icon class="text-gray-700" data={faRobot} scale={SMALL_ICON_SCALE} /><span
|
||||
class="mx-1"
|
||||
>
|
||||
Parent <a href={`/run/${job.parent_job}`}>{job.parent_job}</a></span
|
||||
>
|
||||
{/if}
|
||||
</div>
|
||||
{:else if job && job.schedule_path}
|
||||
<Icon class="text-gray-700" data={faCalendar} scale={SMALL_ICON_SCALE} />
|
||||
<span class="mx-1"
|
||||
>Schedule <button
|
||||
class="break-words text-blue-400 font-normal truncate text-xs"
|
||||
on:click={() =>
|
||||
scheduleEditor?.openEdit(job.schedule_path ?? '', job.job_kind == 'flow')}
|
||||
>{job.schedule_path}</button
|
||||
></span
|
||||
>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</JobPreview>
|
||||
</div>
|
||||
|
||||
@@ -93,8 +93,8 @@
|
||||
{#if open}
|
||||
<div
|
||||
transition:fade|local={{ duration: 100 }}
|
||||
class="absolute z-50 {popupOnTop ? 'bottom-[65px]' : 'top-[65px]'} left-4 bg-white rounded
|
||||
border border-gray-300 shadow-xl flex justify-start items-start w-[600px] max-w-full h-60
|
||||
class="absolute z-50 {popupOnTop ? 'bottom-[35px]' : 'top-[35px]'} -left-10 bg-white rounded
|
||||
border border-gray-300 shadow-xl flex justify-start items-start w-[600px] h-80
|
||||
overflow-hidden"
|
||||
>
|
||||
<div class="w-1/2 h-full overflow-auto px-2">
|
||||
|
||||
Reference in New Issue
Block a user