Skip to content

Commit f2f0e7c

Browse files
Alex-Tidemanlaurakwhit
Alex-Tideman
and
laurakwhit
authored
Event summary table updates (#983)
* Update event summary table to use Table * More css changes * Make filters responsive with icon * Remove unused import * Update workflow-type-error, add updating prop to table * Remove log and import * Update cypress tests * Add border on both sides for th dark table * Use two columns for event type in compact view * Fix spacing and add icon for date & time column * Remove text for expand all for small breakpoint * Fix padding on tr to match th * Fix nav layout for paginated table * Wrap and truncate event details * Fix truncation of copyable links in event details * Wrap code block in event details column Co-authored-by: Laura Whitaker <[email protected]>
1 parent 38c31c0 commit f2f0e7c

13 files changed

+215
-228
lines changed

Diff for: ‎cypress/integration/event-history.spec.js

+13-27
Original file line numberDiff line numberDiff line change
@@ -81,9 +81,7 @@ describe('Workflow Events', () => {
8181
eventsFixtureDescending.history.events.length,
8282
);
8383

84-
cy.get('[data-cy="event-summary-table"]').contains(
85-
firstEventInDescendingOrder.eventId,
86-
);
84+
cy.get('table').contains(firstEventInDescendingOrder.eventId);
8785
});
8886

8987
it('should render event time in various formats', () => {
@@ -96,32 +94,20 @@ describe('Workflow Events', () => {
9694

9795
const dt = new Date(eventsFixtureDescending.history.events[0].eventTime);
9896

99-
cy.get(
100-
'[data-cy="event-summary-table-header-desktop"] [data-cy=event-date-filter-button]',
101-
).click();
102-
cy.get(
103-
'[data-cy="event-summary-table-header-desktop"] [data-cy=event-date-filter-relative]',
104-
).click();
97+
cy.get('[data-cy=event-date-filter-button]').click();
98+
cy.get('[data-cy=event-date-filter-relative]').click();
10599
const relative = formatDistanceToNow(dt);
106-
cy.get('[data-cy="event-summary-table"]').contains(relative);
107-
108-
cy.get(
109-
'[data-cy="event-summary-table-header-desktop"] [data-cy=event-date-filter-button]',
110-
).click();
111-
cy.get(
112-
'[data-cy="event-summary-table-header-desktop"] [data-cy=event-date-filter-UTC]',
113-
).click();
100+
cy.get('table').contains(relative);
101+
102+
cy.get('[data-cy=event-date-filter-button]').click();
103+
cy.get('[data-cy=event-date-filter-UTC]').click();
114104
const utc = dateTz.formatInTimeZone(dt, 'UTC', 'yyyy-MM-dd z HH:mm:ss.SS');
115-
cy.get('[data-cy="event-summary-table"]').contains(utc);
116-
117-
cy.get(
118-
'[data-cy="event-summary-table-header-desktop"] [data-cy=event-date-filter-button]',
119-
).click();
120-
cy.get(
121-
'[data-cy="event-summary-table-header-desktop"] [data-cy=event-date-filter-local]',
122-
).click();
105+
cy.get('table').contains(utc);
106+
107+
cy.get('[data-cy=event-date-filter-button]').click();
108+
cy.get('[data-cy=event-date-filter-local]').click();
123109
const local = dateTz.format(dt, 'yyyy-MM-dd z HH:mm:ss.SS');
124-
cy.get('[data-cy="event-summary-table"]').contains(local);
110+
cy.get('table').contains(local);
125111
});
126112

127113
it('should render events in compact view', () => {
@@ -135,7 +121,7 @@ describe('Workflow Events', () => {
135121
cy.get('[data-cy="event-summary-row"]')
136122
.should('not.have.length', 0)
137123
.should('not.have.length', eventsFixtureDescending.history.events.length);
138-
cy.get('[data-cy="event-summary-table"]').contains('activity.timeout');
124+
cy.get('table').contains('activity.timeout');
139125
});
140126

141127
it('should be viewable as JSON', () => {

Diff for: ‎src/lib/components/dropdown-menu.svelte

+1-1
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@
6262
on:click={disabled ? noop : onClick}
6363
dataCy="{$$props.dataCy}-button"
6464
>
65-
<div class="inline flex items-center gap-1" class:disabled>
65+
<div class="inline flex items-center gap-1 truncate" class:disabled>
6666
<slot name="label" />
6767
<Icon
6868
name={icon ? icon : show ? 'chevron-up' : 'chevron-down'}

Diff for: ‎src/lib/components/event/event-category-filter.svelte

+6-1
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@
1212
1313
export let compact: boolean = false;
1414
15+
$: label = compact ? 'Event Type' : 'Workflow Events';
16+
1517
let parameter = 'category';
1618
let options = compact ? compactEventTypeOptions : allEventTypeOptions;
1719
@@ -30,7 +32,10 @@
3032
};
3133
</script>
3234

33-
<DropdownMenu value={_value} left>
35+
<DropdownMenu value={_value} left icon="filter">
36+
<svelte:fragment slot="label">
37+
{label}
38+
</svelte:fragment>
3439
<div class="w-56">
3540
{#each options as { label, option } (option)}
3641
<div

Diff for: ‎src/lib/components/event/event-date-filter.svelte

+4
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,10 @@
6666
</script>
6767

6868
<DropdownMenu {value} left dataCy="event-date-filter">
69+
<svelte:fragment slot="label">
70+
<span class="hidden md:block">Date & Time</span>
71+
<span class="block md:hidden"><Icon name="clock" /></span>
72+
</svelte:fragment>
6973
<div class="w-56">
7074
{#if $supportsReverseOrder}
7175
{#each sortOptions as { option, label } (option)}

Diff for: ‎src/lib/components/event/event-details-row.svelte

+31-27
Original file line numberDiff line numberDiff line change
@@ -29,22 +29,24 @@
2929
</script>
3030

3131
<article
32-
class="flex flex-row gap-2 border-b-2 border-gray-200 py-2 first:pt-0 last:border-b-0 xl:gap-4 {$$props.class}"
32+
class="flex flex-row items-center gap-2 first:pt-0 last:border-b-0 xl:gap-4 {$$props.class}"
3333
>
3434
{#if typeof value === 'object'}
35-
<p class="min-w-fit items-center text-sm xl:items-start">
36-
{format(key)}
37-
</p>
38-
<CodeBlock content={getCodeBlockValue(value)} class="w-[95%]" {inline} />
35+
<div
36+
class="flex w-full flex-wrap items-center pr-1 xl:flex-nowrap xl:gap-4"
37+
>
38+
<p class="min-w-fit text-sm">
39+
{format(key)}
40+
</p>
41+
<CodeBlock content={getCodeBlockValue(value)} class="w-[95%]" {inline} />
42+
</div>
3943
{:else if shouldDisplayAsExecutionLink(key)}
40-
<div class="xl:3/4 flex w-full items-center xl:items-start">
41-
<p class="mr-3 text-sm">{format(key)}</p>
42-
<div class="text-sm">
43-
<Copyable
44-
content={value}
45-
container-class="flex-row-reverse xl:flex-row"
46-
>
44+
<div class="flex w-full flex-wrap gap-1 pr-1">
45+
<p class="mr-3 truncate text-sm">{format(key)}</p>
46+
<div class="truncate text-sm">
47+
<Copyable content={value} container-class=" xl:flex-row">
4748
<Link
49+
class="truncate"
4850
newTab
4951
href={routeForEventHistory({
5052
view: $eventViewType,
@@ -59,11 +61,12 @@
5961
</div>
6062
</div>
6163
{:else if shouldDisplayChildWorkflowLink(key, attributes)}
62-
<div class="detail-row">
63-
<p class="text-sm">{format(key)}</p>
64-
<div class="text-sm">
64+
<div class="flex w-full flex-wrap gap-1 pr-1">
65+
<p class="truncate text-sm">{format(key)}</p>
66+
<div class="truncate text-sm">
6567
<Copyable content={value} container-class="xl:flex-row">
6668
<Link
69+
class="truncate"
6770
newTab
6871
href={routeForEventHistory({
6972
view: $eventViewType,
@@ -78,25 +81,26 @@
7881
</div>
7982
</div>
8083
{:else if shouldDisplayAsTaskQueueLink(key)}
81-
<div class="xl:3/4 flex w-full items-center xl:items-start">
82-
<p class="mr-3 text-sm">{format(key)}</p>
83-
<div class="text-sm">
84-
<Copyable
85-
content={value}
86-
container-class="flex-row-reverse xl:flex-row"
87-
>
88-
<Link newTab href={routeForTaskQueue({ namespace, queue: value })}>
84+
<div class="flex w-full flex-wrap gap-1 pr-1">
85+
<p class="mr-3 truncate text-sm">{format(key)}</p>
86+
<div class="truncate text-sm ">
87+
<Copyable content={value} container-class="">
88+
<Link
89+
class="truncate"
90+
newTab
91+
href={routeForTaskQueue({ namespace, queue: value })}
92+
>
8993
{value}
9094
</Link>
9195
</Copyable>
9296
</div>
9397
</div>
9498
{:else}
95-
<div class="xl:3/4 flex w-full items-center xl:items-start">
96-
<p class="mr-3 text-sm">{format(key)}</p>
97-
<p class="text-right text-sm xl:text-left">
99+
<div class="flex w-full flex-wrap gap-1 pr-1">
100+
<p class="mr-3 truncate text-sm">{format(key)}</p>
101+
<p class="truncate text-right text-sm xl:text-left">
98102
<span
99-
class="select-all px-2 text-gray-700"
103+
class="w-full select-all text-gray-700"
100104
class:badge={!shouldDisplayAsPlainText(key)}>{value}</span
101105
>
102106
</p>

Diff for: ‎src/lib/components/event/event-group-details.svelte

+10-12
Original file line numberDiff line numberDiff line change
@@ -5,29 +5,29 @@
55
eventOrGroupIsTerminated,
66
} from '$lib/models/event-groups/get-event-in-group';
77
import { isLocalActivityMarkerEvent } from '$lib/utilities/is-event-type';
8+
import Table from '$lib/holocene/table/table.svelte';
89
910
export let eventGroup: EventGroup | null;
1011
export let selectedId: string;
1112
export let onGroupClick: (id: string) => void;
1213
</script>
1314

1415
<div class="w-full border-gray-700 lg:w-1/3 lg:border-r-2">
15-
<table class="w-full table-fixed">
16+
<Table class="w-full table-fixed pb-2">
1617
{#each [...eventGroup.events].reverse() as [id, eventInGroup] (id)}
1718
<tr
1819
class="row"
1920
class:active={id === selectedId}
2021
on:click|preventDefault|stopPropagation={() => onGroupClick(id)}
2122
>
22-
<td class="cell hidden w-12 py-1 px-3 text-left xl:table-cell">
23-
<span class="mx-1 text-sm text-gray-500 md:text-base">{id}</span>
23+
<td class="w-1/12" />
24+
<td class="table-cell w-24 text-left">
25+
<p class="truncate text-sm text-gray-500 md:text-base">{id}</p>
2426
</td>
25-
<td class="cell flex px-3 pt-1 pb-0 text-left xl:table-cell">
26-
<span class="mx-1 text-sm text-gray-500 md:text-base xl:hidden"
27-
>{id}</span
28-
>
27+
<td class="table-cell text-left">
2928
<p
30-
class="m-0 overflow-hidden text-ellipsis whitespace-nowrap text-sm md:text-base"
29+
class="truncate text-sm md:text-base"
30+
class:active={id === selectedId}
3131
class:failure={eventOrGroupIsFailureOrTimedOut(eventInGroup)}
3232
class:canceled={eventOrGroupIsCanceled(eventInGroup)}
3333
class:terminated={eventOrGroupIsTerminated(eventInGroup)}
@@ -37,9 +37,10 @@
3737
: eventInGroup.eventType}
3838
</p>
3939
</td>
40+
<td />
4041
</tr>
4142
{/each}
42-
</table>
43+
</Table>
4344
</div>
4445

4546
<style lang="postcss">
@@ -52,9 +53,6 @@
5253
.active.row {
5354
@apply bg-blue-50;
5455
}
55-
.cell {
56-
@apply border-b-2 border-gray-700 px-3 py-1 leading-4;
57-
}
5856
.failure {
5957
@apply text-red-700;
6058
}

Diff for: ‎src/lib/components/event/event-summary-row.svelte

+39-53
Original file line numberDiff line numberDiff line change
@@ -88,17 +88,14 @@
8888
data-cy="event-summary-row"
8989
on:click|stopPropagation={onLinkClick}
9090
>
91-
<td class="id-cell text-left">
92-
<a class="mx-1 text-sm text-gray-500 md:text-base" href="#{event.id}"
93-
>{event.id}</a
91+
<td />
92+
<td class="table-cell w-24 text-left">
93+
<a class="text-sm text-gray-500 md:text-base" href="#{event.id}"
94+
><p class="truncate">{event.id}</p></a
9495
>
9596
</td>
96-
<td class="cell flex w-1/4 text-left">
97-
<a
98-
class="mx-1 text-sm text-gray-500 md:text-base xl:hidden"
99-
href="#{event.id}">{event.id}</a
100-
>
101-
<p class="m-0 text-sm md:text-base">
97+
<td class="flex table-cell text-left">
98+
<p class="break-word truncate text-sm md:whitespace-normal md:text-base">
10299
{#if showElapsed && event.id !== initialItem.id}
103100
{formatDistanceAbbreviated({
104101
start: initialItem.eventTime,
@@ -110,8 +107,11 @@
110107
{/if}
111108
</p>
112109
</td>
113-
<td class="cell w-10 text-right text-sm font-normal xl:text-left">
114-
<div tabindex="0" class="flex items-center">
110+
<td
111+
colspan={compact ? 2 : null}
112+
class="table-cell text-right text-sm font-normal xl:text-left"
113+
>
114+
<div tabindex="0" class="flex">
115115
{#if compact && failure}
116116
<Icon class="mr-1.5 inline text-red-700" name="clock" />
117117
{/if}
@@ -132,24 +132,34 @@
132132
{/if}
133133
</div>
134134
</td>
135-
<td class="cell links">
136-
{#if !expanded && !compact}
137-
<EventDetailsRow
138-
{...getSingleAttributeForEvent(currentEvent)}
139-
{attributes}
140-
inline
141-
/>
142-
{/if}
143-
</td>
144-
<td class="cell text-right">
145-
{#if !compact}
146-
<Icon class="inline" name={expanded ? 'chevron-up' : 'chevron-down'} />
147-
{/if}
148-
</td>
135+
{#if !compact}
136+
<td class="table-cell overflow-hidden">
137+
<div class="flex w-full items-center justify-between">
138+
<div class="grow truncate">
139+
{#if !expanded}
140+
<EventDetailsRow
141+
{...getSingleAttributeForEvent(currentEvent)}
142+
{attributes}
143+
class="invisible h-0 w-0 md:visible md:h-auto md:w-auto"
144+
inline
145+
/>
146+
{/if}
147+
</div>
148+
<div>
149+
<Icon
150+
class="inline"
151+
name={expanded ? 'chevron-up' : 'chevron-down'}
152+
/>
153+
</div>
154+
</div>
155+
</td>
156+
{/if}
157+
158+
<td class="table-cell" />
149159
</tr>
150160
{#if expanded}
151-
<tr class="expanded-row" class:typedError>
152-
<td class="expanded-cell" colspan="5">
161+
<tr class="table-row" class:typedError>
162+
<td class="expanded-cell" colspan="6">
153163
<EventDetailsFull
154164
event={currentEvent}
155165
{compact}
@@ -162,7 +172,7 @@
162172

163173
<style lang="postcss">
164174
.row {
165-
@apply flex flex-wrap items-center border-b-2 border-gray-700 text-sm no-underline last-of-type:border-b-0 xl:table-row xl:py-3 xl:text-base;
175+
@apply flex table-row flex-wrap items-center border-gray-900 text-sm no-underline xl:py-3 xl:text-base;
166176
}
167177
168178
.row:hover {
@@ -199,27 +209,8 @@
199209
.terminated .event-name {
200210
@apply text-pink-700;
201211
}
202-
203-
.cell {
204-
@apply border-gray-700 px-3 pt-1 pb-0 leading-4 xl:table-cell xl:border-b-2;
205-
flex: 40%;
206-
}
207-
208-
.id-cell {
209-
@apply hidden border-gray-700 py-1 px-3 leading-4 xl:table-cell xl:border-b-2;
210-
}
211-
212-
.row:last-of-type .cell,
213-
.row:last-of-type .id-cell {
214-
@apply border-b-0 first-of-type:rounded-bl-lg last-of-type:rounded-br-lg;
215-
}
216-
217-
.expanded-row {
218-
@apply block xl:table-row xl:border-b-2 xl:border-gray-700;
219-
}
220-
221212
.expanded-cell {
222-
@apply flex w-full flex-wrap border-b-2 border-gray-700 text-sm no-underline xl:table-cell xl:text-base;
213+
@apply flex table-cell w-full flex-wrap text-sm no-underline xl:text-base;
223214
}
224215
225216
.typedError .expanded-cell {
@@ -232,9 +223,4 @@
232223
@apply rounded-b-none;
233224
}
234225
}
235-
236-
.typedError .cell,
237-
.typedError .id-cell {
238-
@apply first-of-type:rounded-tl-lg last-of-type:rounded-tr-lg;
239-
}
240226
</style>

0 commit comments

Comments
 (0)