Skip to content

Commit

Permalink
Workflow Relationship Tree (#2487)
Browse files Browse the repository at this point in the history
* Accordion component updates (#2316)

* Fix styling for non-expandable Accordion

* Update padding on Card to match Accordion

* Add AccordionGroup

* Make ring inset on focus-within

* Fix imports and A11y warning

* Highlight active link in nav bar (#2324)

* Add active styling for nav item

* Add isActive check for nav links

* Account for if isActive is undefined

* Add workflow electron

* Add http api port and async update flag (#2314)

* Show all possible failures for WorkflowTaskError (#2328)

* Use AccordionGroup to show all possible failures

* Dont use red text

* Move source to accordion

* Add pending task component and move into accordion group

* Fixes from Laura's review

* Add border

* WIP: filter

* Bump express from 4.19.2 to 4.20.0 (#2323)

Bumps [express](https://github.com/expressjs/express) from 4.19.2 to 4.20.0.
- [Release notes](https://github.com/expressjs/express/releases)
- [Changelog](https://github.com/expressjs/express/blob/master/History.md)
- [Commits](expressjs/express@4.19.2...4.20.0)

---
updated-dependencies:
- dependency-name: express
  dependency-type: direct:development
...

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Bump vite from 5.0.13 to 5.2.14 (#2329)

Bumps [vite](https://github.com/vitejs/vite/tree/HEAD/packages/vite) from 5.0.13 to 5.2.14.
- [Release notes](https://github.com/vitejs/vite/releases)
- [Changelog](https://github.com/vitejs/vite/blob/v5.2.14/packages/vite/CHANGELOG.md)
- [Commits](https://github.com/vitejs/vite/commits/v5.2.14/packages/vite)

---
updated-dependencies:
- dependency-name: vite
  dependency-type: direct:development
...

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Fix the go things

* MVP of electron. Needs some performance tweaks and to add links to each node

* Add icons, clean up

* Remove commented out code

* Update snapshots

* Update go to 1.22.6 (#2334)

* Update go to 1.23

* Use 1.22.6

* Remove work files

* Add go.work to gitignore

* Small UI fixes (#2345)

* Remove unnecessary coerced Boolean

* Pluralize Namespaces badge for Nexus endpoints

* Fix action slot on Accordion component

* Ignore a11y test on Accordion with action

* 2.31.1 (#2346)

Co-authored-by: Temporal Data (cicd) <[email protected]>

* Update version.go to v2.31.0 (#2347)

* Use go 1.23.0 (#2348)

* Use 1.23 (#2349)

* Update go version to 1.23 in update ui-server (#2351)

* Update go version to 1.23 in update ui-server

* Use v4

* Add breadcrumbs for nodes

* Add hover/click state with opacity

* Add back child table

* Fix overfetching issue

* Fix icon type

* WIP Family Tree

* Get math right for tree positions

* I did things but can't remember what

* Remove electron stuff

* Get rid of pane

* Add side panel descriptions

* Better styles and status color

* Better side nav buttons. Better lines to dots. Need to fix the tree node expanding

* Add link, needs a better place

* Better styles on description, add links, fix opening nodes

* Add table of info and link vis/sidenav with open/close

* Add table

* Better description

* fix lines

* Better isActive, isCurrent checks

* isCurrent check

* Make split 50/50

* Fix types

* Better styles for active, better borders.

* Refactor to include root, clean up styles, better basis widths

* Add root child count on node tree

* Make tree sticky on lg screens

* Add CaN tree

* Add schedule tree

* Delete all unused tables

* Delete breadcrumbs

* Use justify-end to move links to far right

* Fix sm screen layout

* Make visual a little shorter at 240px, hide times if small screen

* Add dash and min-w for end time, py-1

* Fix root node click and accessibility issues

* Bump maxZoomOut for a lot of children

* Add back old tables in case api not supported or if we wanna go labs mode route

* Small style updates based on feedback, better responsive padding

* Better count placement

---------

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: Laura Whitaker <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: temporal-cicd[bot] <138905749+temporal-cicd[bot]@users.noreply.github.com>
Co-authored-by: Temporal Data (cicd) <[email protected]>
  • Loading branch information
5 people authored Jan 9, 2025
1 parent 92aa02b commit f978005
Show file tree
Hide file tree
Showing 30 changed files with 1,180 additions and 91 deletions.
2 changes: 1 addition & 1 deletion pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

9 changes: 7 additions & 2 deletions src/lib/components/event/payload-decoder.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
import { page } from '$app/stores';
import { authUser } from '$lib/stores/auth-user';
import type { Memo } from '$lib/types';
import type { EventAttribute, WorkflowEvent } from '$lib/types/events';
import {
cloneAllPotentialPayloadsWithCodec,
Expand All @@ -15,7 +16,11 @@
} from '$lib/utilities/get-codec';
import { stringifyWithBigInt } from '$lib/utilities/parse-with-big-int';
export let value: PotentiallyDecodable | EventAttribute | WorkflowEvent;
export let value:
| PotentiallyDecodable
| EventAttribute
| WorkflowEvent
| Memo;
export let key = '';
export let onDecode: (decodedValue: string) => void | undefined = undefined;
Expand All @@ -36,7 +41,7 @@
};
const decodePayloads = async (
_value: PotentiallyDecodable | EventAttribute | WorkflowEvent,
_value: PotentiallyDecodable | EventAttribute | WorkflowEvent | Memo,
) => {
try {
const convertedAttributes = await cloneAllPotentialPayloadsWithCodec(
Expand Down
6 changes: 4 additions & 2 deletions src/lib/components/lines-and-dots/workflow-details.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
import { translate } from '$lib/i18n/translate';
import { relativeTime, timeFormat } from '$lib/stores/time-format';
import { workflowRun } from '$lib/stores/workflow-run';
import type { WorkflowExecution } from '$lib/types/workflows';
import { formatDate } from '$lib/utilities/format-date';
import { formatDistanceAbbreviated } from '$lib/utilities/format-time';
import {
Expand All @@ -14,8 +14,10 @@
import WorkflowDetail from './workflow-detail.svelte';
export let workflow: WorkflowExecution;
$: ({ namespace } = $page.params);
$: ({ workflow } = $workflowRun);
$: elapsedTime = formatDistanceAbbreviated({
start: workflow?.startTime,
end: workflow?.endTime || Date.now(),
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<script lang="ts">
import type { IconName } from '$lib/holocene/icon';
import Icon from '$lib/holocene/icon/icon.svelte';
import Link from '$lib/holocene/link.svelte';
export let label: string;
export let value: string;
export let href: string | undefined = undefined;
export let icon: IconName | undefined = undefined;
export let current = false;
</script>

<div
class="flex w-full flex-col items-center gap-2 border border-subtle px-1 py-4 text-center text-xs transition-all lg:text-base {current &&
'bg-subtle'} max-w-md"
>
{#if icon}
<Icon name={icon} />
{/if}
<p class="font-mono">{label}</p>
<div class="px-1 lg:px-2">
{#if href}
<Link {href}>
{value}
</Link>
{:else}
<p>{value}</p>
{/if}
</div>
</div>
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
<script lang="ts">
import { translate } from '$lib/i18n/translate';
import { routeForRelationships } from '$lib/utilities/route-for';
import ContinueAsNewNode from './continue-as-new-node.svelte';
export let namespace: string;
export let workflowId: string;
export let first: string;
export let previous: string;
export let current: string;
export let next: string;
</script>

<div
class="flex w-full items-center justify-between overflow-auto bg-primary px-8 py-16 lg:py-36 xl:px-32"
>
{#if first}
<ContinueAsNewNode
label={translate('workflows.first-execution')}
value={first}
href={routeForRelationships({
namespace,
workflow: workflowId,
run: first,
})}
/>
<div
class="border-top border-1 w-full border border-dashed border-subtle"
></div>
{/if}
{#if previous}
<ContinueAsNewNode
label={translate('workflows.previous-execution')}
value={first}
href={routeForRelationships({
namespace,
workflow: workflowId,
run: previous,
})}
/>
<div class="border-top border-1 w-full border border-subtle"></div>
{/if}
<ContinueAsNewNode
label={translate('workflows.current-execution')}
value={current}
href={routeForRelationships({
namespace,
workflow: workflowId,
run: current,
})}
current
/>
{#if next}
<div class="border-top border-1 w-full border border-subtle"></div>
<ContinueAsNewNode
label={translate('workflows.next-execution')}
value={next}
href={routeForRelationships({
namespace,
workflow: workflowId,
run: next,
})}
/>
{/if}
</div>
39 changes: 39 additions & 0 deletions src/lib/components/workflow/relationships/schedule-tree.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
<script lang="ts">
import { translate } from '$lib/i18n/translate';
import {
routeForRelationships,
routeForSchedule,
} from '$lib/utilities/route-for';
import ContinueAsNewNode from './continue-as-new-node.svelte';
export let namespace: string;
export let workflowId: string;
export let scheduleId: string;
export let current: string;
</script>

<div
class="flex w-full flex-col items-center justify-between gap-4 bg-primary px-8 py-12 xl:px-32"
>
<ContinueAsNewNode
label="Schedule"
value={scheduleId}
icon="schedules"
href={routeForSchedule({
namespace: namespace,
scheduleId,
})}
/>
<div class="border-top border-1 h-24 w-0.5 bg-subtle" />
<ContinueAsNewNode
label={translate('workflows.current-execution')}
value={current}
href={routeForRelationships({
namespace,
workflow: workflowId,
run: current,
})}
current
/>
</div>
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
<script lang="ts">
import WorkflowStatus from '$lib/components/workflow-status.svelte';
import Icon from '$lib/holocene/icon/icon.svelte';
import { translate } from '$lib/i18n/translate';
import { relativeTime, timeFormat } from '$lib/stores/time-format';
import type { WorkflowExecution } from '$lib/types/workflows';
import { formatDate } from '$lib/utilities/format-date';
import { formatDistanceAbbreviated } from '$lib/utilities/format-time';
export let workflow: WorkflowExecution;
export let isRootWorkflow = false;
$: elapsedTime = formatDistanceAbbreviated({
start: workflow?.startTime,
end: workflow?.endTime || Date.now(),
includeMilliseconds: true,
});
</script>

<div
class="flex w-full flex-col gap-2 p-1 text-left text-sm lg:flex-row lg:items-center"
>
<div class="flex items-center gap-2 lg:basis-96">
<div class="w-32 leading-3">
<WorkflowStatus status={workflow.status} />
</div>
<div class="w-full leading-3">
{#if isRootWorkflow}
<p class="font-mono text-xs">{translate('common.type')}</p>
{/if}
<p>{workflow.name}</p>
</div>
</div>
<div class="leading-3 lg:basis-[800px]">
{#if isRootWorkflow}
<p class="font-mono text-xs">{translate('common.id')}</p>
{/if}
<p>{workflow.id}</p>
</div>
<div class="hidden items-center gap-4 lg:flex lg:basis-5/12">
<div class="leading-3">
{#if isRootWorkflow}
<p class="font-mono text-xs">
{translate('common.start')}
</p>
{/if}
<p>
{formatDate(workflow?.startTime, $timeFormat, {
relative: $relativeTime,
})}
</p>
</div>
<div class="leading-3">
{#if isRootWorkflow}
<p class="min-w-12 font-mono text-xs">{translate('common.end')}</p>
{/if}
<p>
{formatDate(workflow?.endTime, $timeFormat, {
relative: $relativeTime,
}) || '-'}
</p>
</div>
<div class="leading-3">
{#if isRootWorkflow}
<Icon name="clock" class="h-4 w-3" />
{/if}
<p>{elapsedTime}</p>
</div>
</div>
</div>
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<script lang="ts">
import type { RootNode } from '$lib/services/workflow-service';
import type { WorkflowExecution } from '$lib/types/workflows';
import WorkflowFamilyNodeDescription from './workflow-family-node-description.svelte';
export let root: RootNode;
export let expandAll: boolean;
export let onNodeClick: (node: RootNode, generation: number) => void;
export let activeWorkflow: WorkflowExecution | undefined = undefined;
export let generation = 1;
export let openRuns: Map<number, string>;
</script>

{#each root?.children as child}
<WorkflowFamilyNodeDescription
root={child}
{expandAll}
{onNodeClick}
{activeWorkflow}
{generation}
{openRuns}
/>
{/each}
Loading

0 comments on commit f978005

Please sign in to comment.