Skip to content

Commit dbe3114

Browse files
laurakwhitrossnelsonrossedfort
authored
Fix workflow errors (#3190)
* Add back workflow errors to layout views * Move callstack error below workflow details * fix(workflow): fix sticky header offset and double border - Add md:pt-2 to timeline and history toolbar sticky headers to align with the app navigation bar - Remove border-b from history toolbar to prevent double border with the table container's own border * fix(workflow): reduce z-index on sticky toolbar to z-10 * fix(workflow): make event history toolbar always sticky * fix(workflow): set sticky toolbar z-index to z-[11] Sits above table header (z-10) but below more actions menu (z-20). * Fix event history table border * fix order of tabs when wrapped --------- Co-authored-by: Ross Nelson <axcess1@me.com> Co-authored-by: Ross Edfort <ross.edfort@temporal.io>
1 parent 0ee9b8e commit dbe3114

6 files changed

Lines changed: 64 additions & 12 deletions

File tree

‎src/lib/components/event/event-summary-table.svelte‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,7 @@
8888
items={filteredForStatus(items)}
8989
let:visibleItems
9090
maxHeight="none"
91+
class="border-t-0"
9192
>
9293
<TableHeaderRow slot="headers" class="!h-8">
9394
{#each columns as column, i (`${column.label}:${i}`)}

‎src/lib/components/workflow/workflow-call-stack-error.svelte‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,12 @@
1111
</script>
1212

1313
{#if runningWithNoWorkers}
14-
<div class="mb-4" in:fly={{ duration: 200, delay: 100 }}>
14+
<div in:fly={{ duration: 200, delay: 100 }}>
1515
<Alert
1616
icon="warning"
1717
intent="warning"
1818
title={translate('workflows.workflow-error-no-workers-title')}
19+
class="max-w-screen-lg xl:w-2/3"
1920
>
2021
{translate('workflows.workflow-error-no-workers-description', {
2122
taskQueue: workflow?.taskQueue ?? '',

‎src/lib/holocene/table/paginated-table/paginated.svelte‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
<script lang="ts">
2+
import type { ClassNameValue } from 'tailwind-merge';
3+
24
import { page } from '$app/stores';
35
46
import Button from '$lib/holocene/button.svelte';
@@ -30,6 +32,9 @@
3032
export let pageSizeOptions: string[] = options;
3133
export let fixed = false;
3234
35+
let className: ClassNameValue = '';
36+
export { className as class };
37+
3338
$: url = $page.url;
3439
$: perPageParam = url.searchParams.get(perPageKey) ?? pageSizeOptions[0];
3540
$: currentPageParam = url.searchParams.get(currentPageKey) || '1';
@@ -96,6 +101,7 @@
96101
visibleItems={$store.items}
97102
{fixed}
98103
{id}
104+
class={className}
99105
>
100106
<slot name="caption" slot="caption" />
101107
<slot name="headers" slot="headers" visibleItems={$store.items} />

‎src/lib/layouts/workflow-header.svelte‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
import CodecServerErrorBanner from '$lib/components/codec-server-error-banner.svelte';
77
import WorkflowDetails from '$lib/components/lines-and-dots/workflow-details.svelte';
88
import { timestamp } from '$lib/components/timestamp.svelte';
9+
import WorkflowCallStackError from '$lib/components/workflow/workflow-call-stack-error.svelte';
910
import WorkflowActions from '$lib/components/workflow-actions.svelte';
1011
import WorkflowStatus from '$lib/components/workflow-status.svelte';
1112
import Alert from '$lib/holocene/alert.svelte';
@@ -179,6 +180,7 @@
179180
</div>
180181
<CodecServerErrorBanner />
181182
<WorkflowDetails {workflow} next={workflowRelationships.next} />
183+
<WorkflowCallStackError />
182184
{#if cancelInProgress}
183185
<div in:fly={{ duration: 200, delay: 100 }}>
184186
<Alert

‎src/lib/layouts/workflow-history-layout.svelte‎

Lines changed: 22 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
<script lang="ts">
2-
import { twMerge as merge } from 'tailwind-merge';
3-
42
import { beforeNavigate, goto } from '$app/navigation';
53
import { page } from '$app/state';
64
75
import EventSummaryTable from '$lib/components/event/event-summary-table.svelte';
86
import EventTypeFilter from '$lib/components/lines-and-dots/event-type-filter.svelte';
7+
import WorkflowError from '$lib/components/lines-and-dots/workflow-error.svelte';
98
import DownloadEventHistoryModal from '$lib/components/workflow/download-event-history-modal.svelte';
109
import InputAndResults from '$lib/components/workflow/input-and-results.svelte';
10+
import WorkflowCallbacks from '$lib/components/workflow/workflow-callbacks.svelte';
1111
import TabButton from '$lib/holocene/tab-buttons/tab-button.svelte';
1212
import TabButtons from '$lib/holocene/tab-buttons/tab-buttons.svelte';
1313
import ToggleButton from '$lib/holocene/toggle-button/toggle-button.svelte';
@@ -24,6 +24,7 @@
2424
minimizeEventView,
2525
} from '$lib/stores/event-view';
2626
import {
27+
currentEventHistory,
2728
filteredEventHistory,
2829
fullEventHistory,
2930
pauseLiveUpdates,
@@ -35,6 +36,7 @@
3536
parseEventFilterParams,
3637
updateEventFilterParams,
3738
} from '$lib/utilities/event-filter-params';
39+
import { getWorkflowTaskFailedEvent } from '$lib/utilities/get-workflow-task-failed-event';
3840
3941
const { namespace } = $derived(page.params);
4042
const { workflow } = $derived($workflowRun);
@@ -69,6 +71,10 @@
6971
),
7072
);
7173
74+
const workflowTaskFailedError = $derived(
75+
getWorkflowTaskFailedEvent($currentEventHistory, 'ascending'),
76+
);
77+
7278
let groups = $derived(
7379
reverseSort ? [...ascendingGroups].reverse() : ascendingGroups,
7480
);
@@ -130,18 +136,26 @@
130136
</script>
131137

132138
<InputAndResults />
139+
<div class="flex flex-col gap-2">
140+
{#if workflowTaskFailedError}
141+
<WorkflowError
142+
error={workflowTaskFailedError}
143+
pendingTask={workflow?.pendingWorkflowTask}
144+
/>
145+
{/if}
146+
{#if workflow?.callbacks?.length}
147+
<WorkflowCallbacks callbacks={workflow.callbacks} />
148+
{/if}
149+
</div>
133150
<div class="relative">
134151
<div
135-
class={merge(
136-
'surface-background flex flex-wrap items-center justify-between gap-2 border-b border-subtle xl:gap-8',
137-
!$minimizeEventView && 'sticky top-0 z-30 md:top-12',
138-
)}
152+
class="surface-background sticky top-0 z-[11] flex flex-wrap-reverse items-center justify-between gap-2 border-b border-subtle md:top-12 md:pt-2 xl:gap-8"
139153
>
140-
<div class="items-bottom flex gap-4">
154+
<div class="items-bottom flex gap-4 pt-2">
141155
<h2>
142156
{translate('workflows.history-tab')}
143157
</h2>
144-
<TabButtons class="relative top-[2px]">
158+
<TabButtons class="relative">
145159
<TabButton
146160
active={$eventViewType === 'feed'}
147161
data-testid="feed"

‎src/lib/layouts/workflow-timeline-layout.svelte‎

Lines changed: 31 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,20 +5,27 @@
55
import EventHistoryLegend from '$lib/components/lines-and-dots/event-history-legend.svelte';
66
import EventTypeFilter from '$lib/components/lines-and-dots/event-type-filter.svelte';
77
import TimelineGraph from '$lib/components/lines-and-dots/svg/timeline-graph.svelte';
8+
import WorkflowError from '$lib/components/lines-and-dots/workflow-error.svelte';
89
import DownloadEventHistoryModal from '$lib/components/workflow/download-event-history-modal.svelte';
910
import InputAndResults from '$lib/components/workflow/input-and-results.svelte';
11+
import WorkflowCallbacks from '$lib/components/workflow/workflow-callbacks.svelte';
1012
import ToggleButton from '$lib/holocene/toggle-button/toggle-button.svelte';
1113
import ToggleButtons from '$lib/holocene/toggle-button/toggle-buttons.svelte';
1214
import { translate } from '$lib/i18n/translate';
1315
import { groupEvents } from '$lib/models/event-groups';
1416
import { clearActives } from '$lib/stores/active-events';
1517
import { eventFilterSort } from '$lib/stores/event-view';
16-
import { filteredEventHistory, pauseLiveUpdates } from '$lib/stores/events';
18+
import {
19+
currentEventHistory,
20+
filteredEventHistory,
21+
pauseLiveUpdates,
22+
} from '$lib/stores/events';
1723
import { workflowRun } from '$lib/stores/workflow-run';
1824
import {
1925
parseEventFilterParams,
2026
updateEventFilterParams,
2127
} from '$lib/utilities/event-filter-params';
28+
import { getWorkflowTaskFailedEvent } from '$lib/utilities/get-workflow-task-failed-event';
2229
2330
$: ({ namespace } = $page.params);
2431
$: ({ workflow } = $workflowRun);
@@ -42,6 +49,11 @@
4249
4350
$: groups = reverseSort ? [...ascendingGroups].reverse() : ascendingGroups;
4451
52+
$: workflowTaskFailedError = getWorkflowTaskFailedEvent(
53+
$currentEventHistory,
54+
'ascending',
55+
);
56+
4557
beforeNavigate(() => {
4658
clearActives();
4759
});
@@ -69,9 +81,20 @@
6981
</script>
7082

7183
<InputAndResults />
84+
<div class="flex flex-col gap-2">
85+
{#if workflowTaskFailedError}
86+
<WorkflowError
87+
error={workflowTaskFailedError}
88+
pendingTask={workflow?.pendingWorkflowTask}
89+
/>
90+
{/if}
91+
{#if workflow?.callbacks?.length}
92+
<WorkflowCallbacks callbacks={workflow.callbacks} />
93+
{/if}
94+
</div>
7295
<div class="relative pb-24">
7396
<div
74-
class="surface-background sticky top-0 z-30 flex flex-wrap items-center justify-between gap-2 border-b border-subtle pb-2 md:top-12 xl:gap-8"
97+
class="surface-background sticky top-0 z-[11] flex flex-wrap items-center justify-between gap-2 border-b border-subtle pb-2 md:top-12 md:pt-2 xl:gap-8"
7598
>
7699
<div class="flex items-center gap-2">
77100
<h2>
@@ -117,7 +140,12 @@
117140
</div>
118141
</div>
119142
<div class="flex w-full flex-col">
120-
<TimelineGraph {workflow} {groups} viewportHeight={undefined} />
143+
<TimelineGraph
144+
{workflow}
145+
{groups}
146+
viewportHeight={undefined}
147+
error={Boolean(workflowTaskFailedError)}
148+
/>
121149
</div>
122150
</div>
123151
<DownloadEventHistoryModal

0 commit comments

Comments
 (0)