8000 Event summary table updates by Alex-Tideman · Pull Request #983 · temporalio/ui · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Event summary table updates #983

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 16 commits into from
Dec 8, 2022
Merged

Event summary table updates #983

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
9f677c9
Update event summary table to use Table
Alex-Tideman Dec 7, 2022
453e994
More css changes
Alex-Tideman Dec 7, 2022
58b0293
Make filters responsive with icon
Alex-Tideman Dec 8, 2022
4e10c40
Remove unused import
Alex-Tideman Dec 8, 2022
7029a0e
Update workflow-type-error, add updating prop to table
Alex-Tideman Dec 8, 2022
c9c3bb5
Remove log and import
Alex-Tideman Dec 8, 2022
d89aa72
Update cypress tests
Alex-Tideman Dec 8, 2022
5701956
Add border on both sides for th dark table
Alex-Tideman Dec 8, 2022
7949ec3
Use two columns for event type in compact view
laurakwhit Dec 8, 2022
694880b
Fix spacing and add icon for date & time column
laurakwhit Dec 8, 2022
ffd6b79
Remove text for expand all for small breakpoint
laurakwhit Dec 8, 2022
b7059ac
Fix padding on tr to match th
laurakwhit Dec 8, 2022
f1cc658
Fix nav layout for paginated table
laurakwhit Dec 8, 2022
27b53e6
Wrap and truncate event details
laurakwhit Dec 8, 2022
6e3443c
Fix truncation of copyable links in event details
laurakwhit Dec 8, 2022
796bb69
Wrap code block in event details column
laurakwhit Dec 8, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 13 additions & 27 deletions cypress/integration/event-history.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,9 +81,7 @@ describe('Workflow Events', () => {
eventsFixtureDescending.history.events.length,
);

cy.get('[data-cy="event-summary-table"]').contains(
firstEventInDescendingOrder.eventId,
);
cy.get('table').contains(firstEventInDescendingOrder.eventId);
});

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

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

cy.get(
'[data-cy="event-summary-table-header-desktop"] [data-cy=event-date-filter-button]',
).click();
cy.get(
'[data-cy="event-summary-table-header-desktop"] [data-cy=event-date-filter-relative]',
).click();
cy.get('[data-cy=event-date-filter-button]').click();
cy.get('[data-cy=event-date-filter-relative]').click();
const relative = formatDistanceToNow(dt);
cy.get('[data-cy="event-summary-table"]').contains(relative);

cy.get(
'[data-cy="event-summary-table-header-desktop"] [data-cy=event-date-filter-button]',
).click();
cy.get(
'[data-cy="event-summary-table-header-desktop"] [data-cy=event-date-filter-UTC]',
).click();
cy.get('table').contains(relative);

cy.get('[data-cy=event-date-filter-button]').click();
cy.get('[data-cy=event-date-filter-UTC]').click();
const utc = dateTz.formatInTimeZone(dt, 'UTC', 'yyyy-MM-dd z HH:mm:ss.SS');
cy.get('[data-cy="event-summary-table"]').contains(utc);

cy.get(
'[data-cy="event-summary-table-header-desktop"] [data-cy=event-date-filter-button]',
).click();
cy.get(
'[data-cy="event-summary-table-header-desktop"] [data-cy=event-date-filter-local]',
).click();
cy.get('table').contains(utc);

cy.get('[data-cy=event-date-filter-button]').click();
cy.get('[data-cy=event-date-filter-local]').click();
const local = dateTz.format(dt, 'yyyy-MM-dd z HH:mm:ss.SS');
cy.get('[data-cy="event-summary-table"]').contains(local);
cy.get('table').contains(local);
});

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

it('should be viewable as JSON', () => {
Expand Down
2 changes: 1 addition & 1 deletion src/lib/components/dropdown-menu.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@
on:click={disabled ? noop : onClick}
dataCy="{$$props.dataCy}-button"
>
<div class="inline flex items-center gap-1" class:disabled>
<div class="inline flex items-center gap-1 truncate" class:disabled>
<slot name="label" />
<Icon
name={icon ? icon : show ? 'chevron-up' : 'chevron-down'}
Expand Down
7 changes: 6 additions & 1 deletion src/lib/components/event/event-category-filter.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@

export let compact: boolean = false;

$: label = compact ? 'Event Type' : 'Workflow Events';

let parameter = 'category';
let options = compact ? compactEventTypeOptions : allEventTypeOptions;

Expand All @@ -30,7 +32,10 @@
};
</script>

<DropdownMenu value={_value} left>
<DropdownMenu value={_value} left icon="filter">
<svelte:fragment slot="label">
{label}
</svelte:fragment>
<div class="w-56">
{#each options as { label, option } (option)}
<div
Expand Down
4 changes: 4 additions & 0 deletions src/lib/components/event/event-date-filter.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,10 @@
</script>

<DropdownMenu {value} left dataCy="event-date-filter">
<svelte:fragment slot="label">
<span class="hidden md:block">Date & Time</span>
<span class="block md:hidden"><Icon name="clock" /></span>
</svelte:fragment>
<div class="w-56">
{#if $supportsReverseOrder}
{#each sortOptions as { option, label } (option)}
Expand Down
58 changes: 31 additions & 27 deletions src/lib/components/event/event-details-row.svelte
View file
Open in desktop
9E7A
Original file line number Diff line number Diff line change
Expand Up @@ -29,22 +29,24 @@
</script>

<article
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}"
class="flex flex-row items-center gap-2 first:pt-0 last:border-b-0 xl:gap-4 {$$props.class}"
>
{#if typeof value === 'object'}
<p class="min-w-fit items-center text-sm xl:items-start">
{format(key)}
</p>
<CodeBlock content={getCodeBlockValue(value)} class="w-[95%]" {inline} />
<div
class="flex w-full flex-wrap items-center pr-1 xl:flex-nowrap xl:gap-4"
>
<p class="min-w-fit text-sm">
{format(key)}
</p>
<CodeBlock content={getCodeBlockValue(value)} class="w-[95%]" {inline} />
</div>
{:else if shouldDisplayAsExecutionLink(key)}
<div class="xl:3/4 flex w-full items-center xl:items-start">
<p class="mr-3 text-sm">{format(key)}</p>
<div class="text-sm">
<Copyable
content={value}
container-class="flex-row-reverse xl:flex-row"
>
<div class="flex w-full flex-wrap gap-1 pr-1">
<p class="mr-3 truncate text-sm">{format(key)}</p>
<div class="truncate text-sm">
<Copyable content={value} container-class=" xl:flex-row">
<Link
class="truncate"
newTab
href={routeForEventHistory({
view: $eventViewType,
Expand All @@ -59,11 +61,12 @@
</div>
</div>
{:else if shouldDisplayChildWorkflowLink(key, attributes)}
<div class="detail-row">
<p class="text-sm">{format(key)}</p>
<div class="text-sm">
<div class="flex w-full flex-wrap gap-1 pr-1">
<p class="truncate text-sm">{format(key)}</p>
<div class="truncate text-sm">
<Copyable content={value} container-class="xl:flex-row">
<Link
class="truncate"
newTab
href={routeForEventHistory({
view: $eventViewType,
Expand All @@ -78,25 +81,26 @@
</div>
</div>
{:else if shouldDisplayAsTaskQueueLink(key)}
<div class="xl:3/4 flex w-full items-center xl:items-start">
<p class="mr-3 text-sm">{format(key)}</p>
<div class="text-sm">
<Copyable
content={value}
container-class="flex-row-reverse xl:flex-row"
>
<Link newTab href={routeForTaskQueue({ namespace, queue: value })}>
<div class="flex w-full flex-wrap gap-1 pr-1">
<p class="mr-3 truncate text-sm">{format(key)}</p>
<div class="truncate text-sm ">
<Copyable content={value} container-class="">
<Link
class="truncate"
newTab
href={routeForTaskQueue({ namespace, queue: value })}
>
{value}
</Link>
</Copyable>
</div>
</div>
{:else}
<div class="xl:3/4 flex w-full items-center xl:items-start">
<p class="mr-3 text-sm">{format(key)}</p>
<p class="text-right text-sm xl:text-left">
<div class="flex w-full flex-wrap gap-1 pr-1">
<p class="mr-3 truncate text-sm">{format(key)}</p>
<p class="truncate text-right text-sm xl:text-left">
<span
class="select-all px-2 text-gray-700"
class="w-full select-all text-gray-700"
class:badge={!shouldDisplayAsPlainText(key)}>{value}</span
>
</p>
Expand Down
22 changes: 10 additions & 12 deletions src/lib/components/event/event-group-details.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,29 +5,29 @@
eventOrGroupIsTerminated,
} from '$lib/models/event-groups/get-event-in-group';
import { isLocalActivityMarkerEvent } from '$lib/utilities/is-event-type';
import Table from '$lib/holocene/table/table.svelte';

export let eventGroup: EventGroup | null;
export let selectedId: string;
export let onGroupClick: (id: string) => void;
</script>

<div class="w-full border-gray-700 lg:w-1/3 lg:border-r-2">
<table class="w-full table-fixed">
<Table class="w-full table-fixed pb-2">
{#each [...eventGroup.events].reverse() as [id, eventInGroup] (id)}
<tr
class="row"
class:active={id === selectedId}
on:click|preventDefault|stopPropagation={() => onGroupClick(id)}
>
<td class="cell hidden w-12 py-1 px-3 text-left xl:table-cell">
<span class="mx-1 text-sm text-gray-500 md:text-base">{id}</span>
<td class="w-1/12" />
<td class="table-cell w-24 text-left">
<p class="truncate text-sm text-gray-500 md:text-base">{id}</p>
</td>
<td class="cell flex px-3 pt-1 pb-0 text-left xl:table-cell">
<span class="mx-1 text-sm text-gray-500 md:text-base xl:hidden"
>{id}</span
>
<td class="table-cell text-left">
<p
class="m-0 overflow-hidden text-ellipsis whitespace-nowrap text-sm md:text-base"
class="truncate text-sm md:text-base"
class:active={id === selectedId}
class:failure={eventOrGroupIsFailureOrTimedOut(eventInGroup)}
class:canceled={eventOrGroupIsCanceled(eventInGroup)}
class:terminated={eventOrGroupIsTerminated(eventInGroup)}
Expand All @@ -37,9 +37,10 @@
: eventInGroup.eventType}
</p>
</td>
<td />
</tr>
{/each}
</table>
</Table>
</div>

<style lang="postcss">
Expand All @@ -52,9 +53,6 @@
.active.row {
@apply bg-blue-50;
}
.cell {
@apply border-b-2 border-gray-700 px-3 py-1 leading-4;
}
.failure {
@apply text-red-700;
}
Expand Down
92 changes: 39 additions & 53 deletions src/lib/components/event/event-summary-row.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,17 +88,14 @@
data-cy="event-summary-row"
on:click|stopPropagation={onLinkClick}
>
<td class="id-cell text-left">
<a class="mx-1 text-sm text-gray-500 md:text-base" href="#{event.id}"
>{event.id}</a
<td />
<td class="table-cell w-24 text-left">
<a class="text-sm text-gray-500 md:text-base" href="#{event.id}"
><p class="truncate">{event.id}</p></a
>
</td>
<td class="cell flex w-1/4 text-left">
<a
class="mx-1 text-sm text-gray-500 md:text-base xl:hidden"
href="#{event.id}">{event.id}</a
>
<p class="m-0 text-sm md:text-base">
<td class="flex table-cell text-left">
<p class="break-word truncate text-sm md:whitespace-normal md:text-base">
{#if showElapsed && event.id !== initialItem.id}
{formatDistanceAbbreviated({
start: initialItem.eventTime,
Expand All @@ -110,8 +107,11 @@
{/if}
</p>
</td>
<td class="cell w-10 text-right text-sm font-normal xl:text-left">
<div tabindex="0" class="flex items-center">
<td
colspan={compact ? 2 : null}
class="table-cell text-right text-sm font-normal xl:text-left"
>
<div tabindex="0" class="flex">
{#if compact && failure}
<Icon class="mr-1.5 inline text-red-700" name="clock" />
{/if}
Expand All @@ -132,24 +132,34 @@
{/if}
</div>
</td>
<td class="cell links">
{#if !expanded && !compact}
<EventDetailsRow
{...getSingleAttributeForEvent(currentEvent)}
{attributes}
inline
/>
{/if}
</td>
<td class="cell text-right">
{#if !compact}
<Icon class="inline" name={expanded ? 'chevron-up' : 'chevron-down'} />
{/if}
</td>
{#if !compact}
<td class="table-cell overflow-hidden">
<div class="flex w-full items-center justify-between">
<div class="grow truncate">
{#if !expanded}
<EventDetailsRow
{...getSingleAttributeForEvent(currentEvent)}
{attributes}
class="invisible h-0 w-0 md:visible md:h-auto md:w-auto"
inline
/>
{/if}
</div>
<div>
<Icon
class="inline"
name={expanded ? 'chevron-up' : 'chevron-down'}
/>
</div>
</div>
</td>
{/if}

<td class="table-cell" />
</tr>
{#if expanded}
<tr class="expanded-row" class:typedError>
<td class="expanded-cell" colspan="5">
<tr class="table-row" class:typedError>
<td class="expanded-cell" colspan="6">
<EventDetailsFull
event={currentEvent}
{compact}
Expand All @@ -162,7 +172,7 @@

<style lang="postcss">
.row {
@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;
@apply flex table-row flex-wrap items-center border-gray-900 text-sm no-underline xl:py-3 xl:text-base;
}

.row:hover {
Expand Down Expand Up @@ -199,27 +209,8 @@
.terminated .event-name {
@apply text-pink-700;
}

.cell {
@apply border-gray-700 px-3 pt-1 pb-0 leading-4 xl:table-cell xl:border-b-2;
flex: 40%;
}

.id-cell {
@apply hidden border-gray-700 py-1 px-3 leading-4 xl:table-cell xl:border-b-2;
}

.row:last-of-type .cell,
.row:last-of-type .id-cell {
@apply border-b-0 first-of-type:rounded-bl-lg last-of-type:rounded-br-lg;
}

.expanded-row {
@apply block xl:table-row xl:border-b-2 xl:border-gray-700;
}

.expanded-cell {
@apply flex w-full flex-wrap border-b-2 border-gray-700 text-sm no-underline xl:table-cell xl:text-base;
@apply flex table-cell w-full flex-wrap text-sm no-underline xl:text-base;
}

.typedError .expanded-cell {
Expand All @@ -232,9 +223,4 @@
@apply rounded-b-none;
}
}

.typedError .cell,
.typedError .id-cell {
@apply first-of-type:rounded-tl-lg last-of-type:rounded-tr-lg;
}
</style>
Loading
0