D2: finalize job-list error display + deploy
- simplify JobErrorLine to compact error-line component (text + buttons) - add JobErrorLine to +page.svelte for all jobs - add coverage/ to gitignore - add test config and job-list-error-display tests - remove local handleRetry from +page.svelte - update app-environment.ts mock
This commit is contained in:
@@ -3,17 +3,48 @@
|
|||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
job: Job;
|
job: Job;
|
||||||
|
accentColor: string;
|
||||||
|
onRetry?: () => void;
|
||||||
|
onDelete?: () => void;
|
||||||
|
retryLabel?: string;
|
||||||
|
deleteLabel?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
let { job }: Props = $props();
|
let {
|
||||||
|
job,
|
||||||
|
accentColor,
|
||||||
|
onRetry,
|
||||||
|
onDelete,
|
||||||
|
retryLabel = 'Retry',
|
||||||
|
deleteLabel = 'Delete',
|
||||||
|
}: Props = $props();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#if job.status === 'failed' && job.error}
|
{#if job.status === 'failed' && job.error}
|
||||||
<div class="recent-err-line" title={job.error}>{job.error}</div>
|
<div class="recent-err-line" role="alert" title={job.error}>
|
||||||
|
<span class="error-text" style="color: {accentColor}">{job.error}</span>
|
||||||
|
{#if onRetry}
|
||||||
|
<button class="retry-btn" onclick={onRetry} aria-label={retryLabel}>{retryLabel}</button>
|
||||||
|
{/if}
|
||||||
|
{#if onDelete}
|
||||||
|
<button class="delete-btn" onclick={onDelete} aria-label={deleteLabel}>{deleteLabel}</button>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
{:else if job.status === 'cancelled'}
|
||||||
|
<div class="recent-err-line" role="status">
|
||||||
|
<span>Job was cancelled</span>
|
||||||
|
</div>
|
||||||
|
{:else if job.status === 'done' && job.segmentsJson}
|
||||||
|
<div class="recent-err-line">
|
||||||
|
<button class="delete-btn" onclick={onDelete} aria-label={deleteLabel}>{deleteLabel}</button>
|
||||||
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.recent-err-line {
|
.recent-err-line {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
font-size: 11.5px;
|
font-size: 11.5px;
|
||||||
color: var(--error-text);
|
color: var(--error-text);
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
@@ -23,4 +54,21 @@
|
|||||||
font-family: var(--font-mono);
|
font-family: var(--font-mono);
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.retry-btn, .delete-btn {
|
||||||
|
font-size: 11.5px;
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
cursor: pointer;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 2px 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.retry-btn {
|
||||||
|
color: var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.delete-btn {
|
||||||
|
color: var(--error-text);
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user