Use AccordionGroup to show all possible failures

temporalio · Sep 13, 2024 · 0423d53 · 0423d53
1 parent bd34e6e
commit 0423d53
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 23 deletions.
diff --git a/src/lib/components/lines-and-dots/workflow-error-stack-trace.svelte b/src/lib/components/lines-and-dots/workflow-error-stack-trace.svelte
@@ -0,0 +1,40 @@
+<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 text-danger 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?.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}
diff --git a/src/lib/components/lines-and-dots/workflow-error.svelte b/src/lib/components/lines-and-dots/workflow-error.svelte
@@ -1,4 +1,5 @@
 <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';
@@ -17,6 +18,8 @@
 
   import { CategoryIcon } from './constants';
 
+  import WorkflowErrorStackTrace from './workflow-error-stack-trace.svelte';
+
   export let error: WorkflowTaskFailedEvent;
   export let pendingTask: PendingWorkflowTaskInfo | undefined = undefined;
 
@@ -78,28 +81,21 @@
           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?.source}
+          <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')}
+          />
+        {/if}
+        {#if error.attributes?.failure}
+          <AccordionGroup>
+            <WorkflowErrorStackTrace failure={error.attributes?.failure} />
+          </AccordionGroup>
+        {/if}
       </div>
     </div>
 

diff --git a/src/lib/holocene/accordion/accordion.svelte b/src/lib/holocene/accordion/accordion.svelte
@@ -56,11 +56,12 @@
       on:click={toggleAccordion}
     >
       <div class="space-between flex w-full flex-row items-center">
-        <h3 class="flex w-full items-center gap-2">
+        <h3 class="flex min-w-fit items-center gap-2">
           {#if icon}<Icon name={icon} />{/if}
           {title}
           <slot name="summary" />
         </h3>
+        <slot name="description" />
         <div
           class="flex flex-row items-center gap-2 pr-2"
           on:click|stopPropagation

diff --git a/src/lib/i18n/locales/en/common.ts b/src/lib/i18n/locales/en/common.ts
@@ -178,4 +178,5 @@ export const Strings = {
   url: 'URL',
   state: 'State',
   attempt: 'Attempt',
+  message: 'Message',
 } as const;
diff --git a/src/lib/types/index.ts b/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;