Workflow Relationship Tree

src/lib/components/event/payload-decoder.svelte

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

src/lib/components/lines-and-dots/workflow-details.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(),

src/lib/components/workflow/relationships/continue-as-new-node.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>

src/lib/components/workflow/relationships/continue-as-new-tree.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>

src/lib/components/workflow/relationships/schedule-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>

src/lib/components/workflow/relationships/workflow-family-node-description-details.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>

src/lib/components/workflow/relationships/workflow-family-node-description-tree.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}