Show all possible failures for WorkflowTaskError

server/go.mod

@@ -1,6 +1,8 @@
 module github.com/temporalio/ui-server/v2
 
-go 1.20
+go 1.21
+
+toolchain go1.23.0
 
 require (
 	github.com/coreos/go-oidc/v3 v3.1.0

src/lib/components/lines-and-dots/workflow-error-stack-trace.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  import Accordion from '$lib/holocene/accordion/accordion.svelte';
+  import CodeBlock from '$lib/holocene/code-block.svelte';
+  import { translate } from '$lib/i18n/translate';
+  import type { Failure } from '$lib/types';
+
+  export let failure: Failure | undefined = undefined;
+</script>
+
+{#if failure}
+  <Accordion title={translate('common.failure')} class="text-sm">
+    <div class="hidden w-full text-right text-xs lg:block" slot="description">
+      {failure?.message}
+    </div>
+    <div class="flex flex-col gap-2">
+      <p>{translate('common.message')}</p>
+      <CodeBlock
+        content={failure?.message || ''}
+        language="text"
+        copyIconTitle={translate('common.copy-icon-title')}
+        copySuccessIconTitle={translate('common.copy-success-icon-title')}
+      />
+      {#if failure?.source}
+        <p>{translate('common.source')}</p>
+        <CodeBlock
+          content={failure.source}
+          language="text"
+          copyIconTitle={translate('common.copy-icon-title')}
+          copySuccessIconTitle={translate('common.copy-success-icon-title')}
+        />
+      {/if}
+      {#if failure?.stackTrace}
+        <p>{translate('common.stack-trace')}</p>
+        <CodeBlock
+          content={failure.stackTrace}
+          language="text"
+          copyIconTitle={translate('common.copy-icon-title')}
+          copySuccessIconTitle={translate('common.copy-success-icon-title')}
+        />
+      {/if}
+    </div>
+  </Accordion>
+{/if}
+{#if failure?.cause}
+  <svelte:self failure={failure.cause} />
+{/if}

src/lib/components/lines-and-dots/workflow-error.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
+  import AccordionGroup from '$lib/holocene/accordion/accordion-group.svelte';
   import Alert from '$lib/holocene/alert.svelte';
-  import CodeBlock from '$lib/holocene/code-block.svelte';
   import Icon from '$lib/holocene/icon/icon.svelte';
   import Link from '$lib/holocene/link.svelte';
   import { translate } from '$lib/i18n/translate';
@@ -17,6 +17,9 @@
 
   import { CategoryIcon } from './constants';
 
+  import WorkflowErrorStackTrace from './workflow-error-stack-trace.svelte';
+  import WorkflowPendingTask from './workflow-pending-task.svelte';
+
   export let error: WorkflowTaskFailedEvent;
   export let pendingTask: PendingWorkflowTaskInfo | undefined = undefined;
 
@@ -66,7 +69,7 @@
     <div
       class="mt-2 flex w-full flex-col gap-0 overflow-hidden rounded-xl border-2 border-danger"
     >
-      <div class="flex items-center justify-between gap-2 bg-danger px-2 py-1">
+      <div class="flex items-center justify-between gap-2 bg-danger px-2 py-2">
         <div class="flex items-center gap-2">
           {error.id}
           <Icon name={CategoryIcon[error.category]} />
@@ -78,61 +81,16 @@
           relative: $relativeTime,
         })}
       </div>
-      <div class="flex flex-col gap-2 bg-space-black p-4 text-white">
-        <p>{translate('common.failure')}</p>
-        <CodeBlock
-          content={error.attributes?.failure?.message || ''}
-          language="text"
-          copyIconTitle={translate('common.copy-icon-title')}
-          copySuccessIconTitle={translate('common.copy-success-icon-title')}
-        />
-        <p>{translate('common.stack-trace')}</p>
-        <CodeBlock
-          content={error.attributes?.failure?.stackTrace || ''}
-          language="text"
-          copyIconTitle={translate('common.copy-icon-title')}
-          copySuccessIconTitle={translate('common.copy-success-icon-title')}
-        />
-        <p>{translate('common.source')}</p>
-        <CodeBlock
-          content={error.attributes?.failure?.source || ''}
-          language="text"
-          copyIconTitle={translate('common.copy-icon-title')}
-          copySuccessIconTitle={translate('common.copy-success-icon-title')}
-        />
+      <div class="flex flex-col gap-2 bg-primary p-4">
+        {#if error.attributes?.failure}
+          <AccordionGroup>
+            <WorkflowErrorStackTrace failure={error.attributes.failure} />
+            {#if pendingTask}
+              <WorkflowPendingTask {pendingTask} />
+            {/if}
+          </AccordionGroup>
+        {/if}
       </div>
     </div>
-
-    {#if pendingTask}
-      <div class="flex flex-col gap-2 pt-4">
-        <h5>Pending Workflow Task Info</h5>
-        <p>
-          {translate('common.state')}
-          <span class="badge">{pendingTask.state}</span>
-        </p>
-        <p>
-          {translate('common.attempt')}
-          <span class="badge">{pendingTask.attempt}</span>
-        </p>
-        <p>
-          <span class="inline-block w-48">Original Scheduled Time</span>
-          <span class="badge"
-            >{formatDate(pendingTask.originalScheduledTime, $timeFormat)}</span
-          >
-        </p>
-        <p>
-          <span class="inline-block w-48">Scheduled Time</span>
-          <span class="badge"
-            >{formatDate(pendingTask.scheduledTime, $timeFormat)}</span
-          >
-        </p>
-        <p>
-          <span class="inline-block w-48">Started Time</span>
-          <span class="badge"
-            >{formatDate(pendingTask.startedTime, $timeFormat)}</span
-          >
-        </p>
-      </div>
-    {/if}
   </Alert>
 {/if}

src/lib/components/lines-and-dots/workflow-pending-task.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import Accordion from '$lib/holocene/accordion/accordion.svelte';
+  import Badge from '$lib/holocene/badge.svelte';
+  import { translate } from '$lib/i18n/translate';
+  import { timeFormat } from '$lib/stores/time-format';
+  import type { PendingWorkflowTaskInfo } from '$lib/types';
+  import { formatDate } from '$lib/utilities/format-date';
+
+  export let pendingTask: PendingWorkflowTaskInfo | undefined = undefined;
+</script>
+
+<Accordion title={translate('workflows.pending-workflow-task')}>
+  <div class="flex flex-col gap-2">
+    <p class="flex items-center gap-4">
+      {translate('common.state')}
+      <Badge>{pendingTask.state}</Badge>
+    </p>
+    <p class="flex items-center gap-4">
+      {translate('common.attempt')}
+      <Badge>{pendingTask.attempt}</Badge>
+    </p>
+    <p class="flex items-center gap-4">
+      {translate('workflows.original-scheduled-time')}
+      <Badge>{formatDate(pendingTask.originalScheduledTime, $timeFormat)}</Badge
+      >
+    </p>
+    <p class="flex items-center gap-4">
+      {translate('workflows.scheduled-time')}
+      <Badge>{formatDate(pendingTask.scheduledTime, $timeFormat)}</Badge>
+    </p>
+    <p class="flex items-center gap-4">
+      {translate('workflows.started-time')}
+      <Badge>{formatDate(pendingTask.startedTime, $timeFormat)}</Badge>
+    </p>
+  </div>
+</Accordion>

src/lib/holocene/accordion/accordion.svelte

@@ -61,6 +61,7 @@
           {title}
           <slot name="summary" />
         </h3>
+        <slot name="description" />
         <div
           class="flex flex-row items-center gap-2 pr-2"
           on:click|stopPropagation

src/lib/i18n/locales/en/common.ts

@@ -178,4 +178,5 @@ export const Strings = {
   url: 'URL',
   state: 'State',
   attempt: 'Attempt',
+  message: 'Message',
 } as const;

src/lib/i18n/locales/en/workflows.ts

@@ -239,4 +239,7 @@ export const Strings = {
   'custom-search-attribute': 'Custom Search Attribute',
   'select-attribute': 'Select Attribute',
   'add-search-attribute': 'Add a Search Attribute',
+  'pending-workflow-task': 'Pending Workflow Task',
+  'original-scheduled-time': 'Original Scheduled Time',
+  'started-time': 'Started Time',
 } as const;

src/lib/types/index.ts

@@ -213,6 +213,9 @@ export type BatchTerminateOperation =
 export type Endpoint = temporal.api.nexus.v1.IEndpoint;
 export type EndpointSpec = temporal.api.nexus.v1.IEndpointSpec;
 
+// api.failure
+export type Failure = temporal.api.failure.v1.IFailure;
+
 // google
 
 export type Timestamp = google.protobuf.ITimestamp;