Workflow Relationship Tree (#2487)

* 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]>

Author: 5 people

Diff for: pnpm-lock.yaml

@@ -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,
@@ -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;
 
@@ -36,7 +41,7 @@
   };
 
   const decodePayloads = async (
-    _value: PotentiallyDecodable | EventAttribute | WorkflowEvent,
+    _value: PotentiallyDecodable | EventAttribute | WorkflowEvent | Memo,
   ) => {
     try {
       const convertedAttributes = await cloneAllPotentialPayloadsWithCodec(

Diff for: src/lib/components/event/payload-decoder.svelte

@@ -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 {
@@ -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(),

Diff for: src/lib/components/lines-and-dots/workflow-details.svelte

@@ -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>

Diff for: src/lib/components/workflow/relationships/continue-as-new-node.svelte

@@ -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>

Diff for: src/lib/components/workflow/relationships/continue-as-new-tree.svelte

@@ -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>

Diff for: src/lib/components/workflow/relationships/schedule-tree.svelte

@@ -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>

Diff for: src/lib/components/workflow/relationships/workflow-family-node-description-details.svelte

@@ -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}