Skip to content
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

Jump to bottom

Refactor event details link, add link support for endpointId #2360

Merged
merged 7 commits into from
Oct 3, 2024
Merged

Refactor event details link, add link support for endpointId #2360

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
75ee76e
Refactor event details link, add link support for endpointId.
Alex-Tideman Sep 30, 2024
c1c1ffb
More refactoring
Alex-Tideman Oct 1, 2024
a2d0154
Make reactive with type
Alex-Tideman Oct 1, 2024
d0a3950
Refactor to add link to timeline details
Alex-Tideman Oct 2, 2024
8d065e5
Update based on feedback. Remove max width constraints
Alex-Tideman Oct 2, 2024
2bfdf11
Add shrink-0 to icon
Alex-Tideman Oct 3, 2024
38d7a37
Lots of small styling updates
Alex-Tideman Oct 3, 2024
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
8 changes: 6 additions & 2 deletions src/lib/components/event/event-details-full.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,12 @@
{#each group.eventList as groupEvent}
{@const attributes = formatAttributes(groupEvent)}
{@const details = Object.entries(attributes)}
<div class="w-full border-subtle [&:not(:last-child)]:border-r-2">
<div class="flex w-full justify-between bg-subtle px-2 py-1">
<div
class="w-full border-subtle xl:w-1/3 [&:not(:last-child)]:border-r-2"
>
<div
class="flex w-full flex-wrap justify-between bg-subtle px-2 py-1"
>
<div class="flex gap-2">
{groupEvent.id}
{spaceBetweenCapitalLetters(groupEvent.name)}
Expand Down
45 changes: 45 additions & 0 deletions src/lib/components/event/event-details-link.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
<script lang="ts">
import { page } from '$app/stores';

import Link from '$lib/holocene/link.svelte';
import type { CombinedAttributes } from '$lib/utilities/format-event-attributes';
import { type EventLinkType } from '$lib/utilities/get-single-attribute-for-event';
import {
routeForEventHistory,
routeForNexusEndpoint,
routeForTaskQueue,
} from '$lib/utilities/route-for';

export let value: string;
export let attributes: CombinedAttributes;
export let type: EventLinkType;
export let light = false;

$: ({ workflow, namespace } = $page.params);

$: executionLink = routeForEventHistory({
namespace,
workflow,
run: value,
});
$: taskQueueLink = routeForTaskQueue({ namespace, queue: value });
$: childWorkflowLink = routeForEventHistory({
namespace,
workflow: attributes.workflowExecutionWorkflowId,
run: attributes.workflowExecutionRunId,
});
$: nexusEndpointLink = routeForNexusEndpoint(value);

$: hrefs = {
execution: executionLink,
'task-queue': taskQueueLink,
'child-workflow': childWorkflowLink,
'nexus-endpoint': nexusEndpointLink,
} as Record<Exclude<EventLinkType, 'none'>, string>;

$: href = hrefs[type];
</script>

<Link class="truncate break-all" {href} {light}>
Alex-Tideman marked this conversation as resolved.
Show resolved Hide resolved
{value}
</Link>
69 changes: 20 additions & 49 deletions src/lib/components/event/event-details-row-expanded.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,37 +1,30 @@
<script lang="ts">
import { page } from '$app/stores';

import Badge from '$lib/holocene/badge.svelte';
import CodeBlock from '$lib/holocene/code-block.svelte';
import Link from '$lib/holocene/link.svelte';
import Copyable from '$lib/holocene/copyable/index.svelte';
import { translate } from '$lib/i18n/translate';
import { timeFormat } from '$lib/stores/time-format';
import { format } from '$lib/utilities/format-camel-case';
import { formatDate } from '$lib/utilities/format-date';
import type { CombinedAttributes } from '$lib/utilities/format-event-attributes';
import {
displayLinkType,
getCodeBlockValue,
getStackTrace,
shouldDisplayAsExecutionLink,
shouldDisplayAsTaskQueueLink,
shouldDisplayAsTime,
shouldDisplayChildWorkflowLink,
} from '$lib/utilities/get-single-attribute-for-event';
import {
routeForEventHistory,
routeForTaskQueue,
} from '$lib/utilities/route-for';

import EventDetailsLink from './event-details-link.svelte';
import PayloadDecoder from './payload-decoder.svelte';

export let key: string;
export let value: string | number | Record<string, unknown>;
export let attributes: CombinedAttributes;
export let inline = false;

const { workflow, namespace } = $page.params;
$: codeBlockValue = getCodeBlockValue(value);
$: stackTrace = getStackTrace(codeBlockValue);
$: linkType = displayLinkType(key, attributes);
</script>

<div class="flex {$$props.class}">
Expand Down Expand Up @@ -88,49 +81,27 @@
</div>
{/if}
</div>
{:else if shouldDisplayAsExecutionLink(key)}
<div class="content detail-row">
<p class="text-sm">{format(key)}</p>
<Badge type="subtle">
<Link
href={routeForEventHistory({
namespace,
workflow,
run: value.toString(),
})}
>
{value}
</Link>
</Badge>
</div>
{:else if shouldDisplayChildWorkflowLink(key, attributes)}
{:else if linkType !== 'none'}
<div class="content detail-row">
<p class="text-sm">{format(key)}</p>
<Badge type="subtle">
<Link
href={routeForEventHistory({
namespace: attributes?.namespace || namespace,
workflow: attributes.workflowExecutionWorkflowId,
run: attributes.workflowExecutionRunId,
})}
>
{value}
</Link>
</Badge>
</div>
{:else if shouldDisplayAsTaskQueueLink(key)}
<div class="content detail-row">
<p class="text-sm">{format(key)}</p>
<Badge type="subtle">
<Link href={routeForTaskQueue({ namespace, queue: value.toString() })}>
{value}
</Link>
</Badge>
<Copyable
copyIconTitle={translate('common.copy-icon-title')}
copySuccessIconTitle={translate('common.copy-success-icon-title')}
content={String(value)}
>
<Badge type="subtle" class="select-none">
<EventDetailsLink
value={String(value)}
{attributes}
type={linkType}
/>
</Badge>
</Copyable>
</div>
{:else}
<div class="content detail-row">
<p class="text-sm">{format(key)}</p>
<Badge type="subtle">
<Badge type="subtle" class="inline-block whitespace-pre-wrap">
{shouldDisplayAsTime(key) ? formatDate(value, $timeFormat) : value}
</Badge>
</div>
Expand All @@ -147,6 +118,6 @@
}

.detail-row {
@apply flex w-full items-center gap-4 py-1 text-left xl:flex;
@apply flex w-full items-center gap-2 py-1 text-left;
}
</style>
109 changes: 19 additions & 90 deletions src/lib/components/event/event-details-row.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,127 +1,56 @@
<script lang="ts">
import { page } from '$app/stores';

import Badge from '$lib/holocene/badge.svelte';
import Copyable from '$lib/holocene/copyable/index.svelte';
import Link from '$lib/holocene/link.svelte';
import { translate } from '$lib/i18n/translate';
import type { Payloads } from '$lib/types';
import { format } from '$lib/utilities/format-camel-case';
import type { CombinedAttributes } from '$lib/utilities/format-event-attributes';
import {
shouldDisplayAsExecutionLink,
shouldDisplayAsTaskQueueLink,
shouldDisplayChildWorkflowLink,
} from '$lib/utilities/get-single-attribute-for-event';
import {
routeForEventHistory,
routeForTaskQueue,
} from '$lib/utilities/route-for';
import { displayLinkType } from '$lib/utilities/get-single-attribute-for-event';

import EventDetailsLink from './event-details-link.svelte';
import PayloadDecoder from './payload-decoder.svelte';

export let key: string;
export let value: string | Record<string, unknown> | Payloads;
export let attributes: CombinedAttributes;
export let showKey = true;

const { workflow, namespace } = $page.params;
$: linkType = displayLinkType(key, attributes);
</script>

{#if key}
<div
class="flex max-w-lg flex-row items-center gap-2 overflow-hidden first:pt-0 last:border-b-0 xl:max-w-xl {$$props.class}"
class="invisible flex w-0 items-center gap-2 overflow-hidden first:pt-0 last:border-b-0 md:visible md:w-auto"
>
{#if showKey}
<p class="max-w-fit whitespace-nowrap text-right text-xs">
<p class="truncate whitespace-nowrap text-right text-xs">
{format(key)}
</p>
{/if}
{#if typeof value === 'object'}
<div
class="flex w-full items-center justify-between gap-2 overflow-hidden pr-1 xl:flex-nowrap"
class="flex max-w-sm items-center justify-between gap-2 overflow-hidden pr-1 xl:flex-nowrap"
>
<PayloadDecoder {value} key="payloads" let:decodedValue>
<div class="payload {$$props.class}">
<code><pre>{decodedValue}</pre></code>
</div>
</PayloadDecoder>
</div>
{:else if shouldDisplayAsExecutionLink(key)}
<div class="flex w-full items-center gap-2 pr-1">
<div class="truncate text-sm">
<Copyable
copyIconTitle={translate('common.copy-icon-title')}
copySuccessIconTitle={translate('common.copy-success-icon-title')}
content={value}
container-class="xl:flex-row"
>
<Badge type="subtle" class="select-none">
<Link
class="truncate"
href={routeForEventHistory({
namespace,
workflow,
run: value,
})}
>
{value}
</Link>
</Badge>
</Copyable>
</div>
</div>
{:else if shouldDisplayChildWorkflowLink(key, attributes)}
<div class="flex w-full items-center gap-2 pr-1">
<div class="truncate text-sm">
<Copyable
copyIconTitle={translate('common.copy-icon-title')}
copySuccessIconTitle={translate('common.copy-success-icon-title')}
content={value}
container-class="xl:flex-row"
>
<Badge type="subtle" class="select-none">
<Link
class="truncate"
href={routeForEventHistory({
namespace,
workflow: attributes.workflowExecutionWorkflowId,
run: attributes.workflowExecutionRunId,
})}
>
{value}
</Link>
</Badge>
</Copyable>
</div>
</div>
{:else if shouldDisplayAsTaskQueueLink(key)}
<div class="flex w-full items-center gap-2 pr-1">
<div class="truncate text-sm">
<Copyable
copyIconTitle={translate('common.copy-icon-title')}
copySuccessIconTitle={translate('common.copy-success-icon-title')}
content={value}
>
<Badge type="subtle" class="select-none">
<Link
class="truncate"
href={routeForTaskQueue({ namespace, queue: value })}
>
{value}
</Link>
</Badge>
</Copyable>
</div>
</div>
{:else}
<div class="flex w-full items-center gap-2 pr-1">
<p class="truncate text-right text-sm xl:text-left">
<Badge type="subtle" class="select-none">
{value}
</Badge>
{:else if linkType !== 'none'}
<Copyable
copyIconTitle={translate('common.copy-icon-title')}
copySuccessIconTitle={translate('common.copy-success-icon-title')}
content={value}
>
<p class="select-none truncate">
<EventDetailsLink {value} {attributes} type={linkType} />
</p>
</div>
</Copyable>
{:else}
<Badge type="subtle" class="block min-w-fit select-none truncate">
{value}
</Badge>
{/if}
</div>
{/if}
Expand Down
2 changes: 1 addition & 1 deletion src/lib/components/event/event-link.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
</script>

<div
class="flex max-w-lg flex-row items-center gap-2 overflow-hidden first:pt-0 last:border-b-0 xl:max-w-xl {$$props.class}"
class="flex flex-row items-center gap-2 overflow-hidden first:pt-0 last:border-b-0 xl:max-w-xl {$$props.class}"
>
<p class="max-w-fit whitespace-nowrap text-right text-xs">Link</p>
<div class="overflow-hidden truncate pr-1">
Expand Down
Loading
Loading