DT-3655 - add external payload count and size to workflow details

src/lib/components/detail-list/detail-list-text-value.svelte

@@ -11,17 +11,21 @@
     copyableText?: string;
     text: string;
     tooltipText?: string;
+    tooltipWidth?: number;
     isBadge?: boolean;
     badgeType?: BadgeType;
     iconName?: IconName | undefined;
+    iconPosition?: 'leading' | 'trailing';
   }
 
   let {
     copyable,
     text,
     copyableText = text,
     tooltipText,
+    tooltipWidth = 256,
     iconName,
+    iconPosition = 'leading',
     isBadge = false,
     badgeType = 'default',
   }: Props = $props();
@@ -34,17 +38,20 @@
     </Badge>
   {:else}
     <div class="flex select-all items-center gap-1 truncate rounded-sm">
-      {#if iconName}
+      {#if iconName && iconPosition === 'leading'}
         <Icon name={iconName} class="shrink-0" />
       {/if}
       <span class="truncate">{text}</span>
+      {#if iconName && iconPosition === 'trailing'}
+        <Icon name={iconName} class="shrink-0" />
+      {/if}
     </div>
   {/if}
 {/snippet}
 
 <DetailListValue {copyable} {copyableText}>
   {#if tooltipText}
-    <Tooltip text={tooltipText} top class="min-w-0">
+    <Tooltip text={tooltipText} top width={tooltipWidth} class="min-w-0">
       {@render content()}
     </Tooltip>
   {:else}

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

@@ -112,6 +112,8 @@
       fetchLatestRun();
     }
   });
+
+  $inspect(workflow);
 </script>
 
 <DetailList aria-label="workflow details" rowCount={5}>
@@ -288,7 +290,26 @@
 
   <DetailListColumn>
     <DetailListLabel>{translate('common.history-size')}</DetailListLabel>
-    <DetailListTextValue text={historySizeFormatted} />
+    <DetailListTextValue
+      tooltipText={workflow.externalPayloadCount
+        ? translate('workflows.external-payload-tooltip')
+        : ''}
+      iconName={workflow.externalPayloadCount ? 'square-info' : undefined}
+      iconPosition="trailing"
+      text={historySizeFormatted}
+    />
+    {#if workflow.externalPayloadCount}
+      <DetailListLabel
+        >{translate('workflows.external-payload-size')}</DetailListLabel
+      >
+      <DetailListTextValue
+        text={formatBytes(parseInt(workflow.externalPayloadSizeBytes, 10))}
+      />
+      <DetailListLabel
+        >{translate('workflows.external-payload-count')}</DetailListLabel
+      >
+      <DetailListTextValue text={workflow.externalPayloadCount} />
+    {/if}
 
     {#if !$isCloud}
       <DetailListLabel

src/lib/holocene/icon/paths.ts

@@ -114,6 +114,7 @@ import signal from './svg/signal.svelte';
 import slashForward from './svg/slash-forward.svelte';
 import sliders from './svg/sliders.svelte';
 import spinner from './svg/spinner.svelte';
+import squareInfo from './svg/square-info.svelte';
 import starEmpty from './svg/star-empty.svelte';
 import starFilled from './svg/star-filled.svelte';
 import summary from './svg/summary.svelte';
@@ -263,6 +264,7 @@ export const icons = {
   'slash-forward': slashForward,
   sliders,
   spinner,
+  'square-info': squareInfo,
   'star-empty': starEmpty,
   'star-filled': starFilled,
   success: checkmark,

src/lib/holocene/icon/svg/square-info.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import Svg from '../svg.svelte';
+  let props = $props();
+</script>
+
+<Svg {...props}>
+  <path
+    d="M 2.5714286,2.5714286 V 21.428571 H 21.428571 V 2.5714286 Z M 0,0 H 2.5714286 21.428571 24 V 2.5714286 21.428571 24 H 21.428571 2.5714286 0 V 21.428571 2.5714286 Z M 9.8571428,16.285714 H 11.142857 V 12.857143 H 9.8571428 8.5714285 v -2.571429 h 1.2857143 2.5714282 1.285715 v 1.285714 4.714286 h 0.428571 1.285714 v 2.571429 H 14.142857 9.8571428 8.5714285 V 16.285714 Z M 13.714286,5.1428571 V 8.5714285 H 10.285714 V 5.1428571 Z"
+    fill="currentcolor"
+  />
+</Svg>

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

@@ -348,4 +348,8 @@ export const Strings = {
   'timeline-minimized':
     'Timeline and Event History are collapsed to minimized height',
   'timeline-expanded': 'Timeline and Event History are expanded to full height',
+  'external-payload-size': 'External Payloads Size',
+  'external-payload-count': 'External Payloads',
+  'external-payload-tooltip':
+    'History Size does not include externally stored payload size.',
 } as const;

src/lib/models/workflow-execution.ts

@@ -145,6 +145,10 @@ export const toWorkflowExecution = (
   const priority = response.workflowExecutionInfo?.priority;
   const workflowExtendedInfo = response.workflowExtendedInfo ?? {};
   const startDelay = getStartDelay({ executionTime, startTime });
+  const externalPayloadCount =
+    response.workflowExecutionInfo?.externalPayloadCount;
+  const externalPayloadSizeBytes =
+    response.workflowExecutionInfo?.externalPayloadSizeBytes;
 
   let summary;
   let details;
@@ -163,6 +167,8 @@ export const toWorkflowExecution = (
     status,
     historyEvents,
     historySizeBytes,
+    externalPayloadCount,
+    externalPayloadSizeBytes,
     searchAttributes,
     memo,
     rootExecution,

src/lib/types/workflows.ts

@@ -38,6 +38,8 @@ export type WorkflowExecutionInfo = Replace<
     closeTime: string;
     executionTime: string;
     historySizeBytes: string;
+    externalPayloadCount?: string;
+    externalPayloadSizeBytes?: string;
     historyLength: string;
     searchAttributes?: WorkflowSearchAttributes;
     memo?: Memo;
@@ -173,6 +175,8 @@ export type WorkflowExecution = {
   taskQueue?: string;
   historyEvents: string;
   historySizeBytes: string;
+  externalPayloadCount: string | undefined;
+  externalPayloadSizeBytes: string | undefined;
   mostRecentWorkerVersionStamp?: MostRecentWOrkflowVersionStamp;
   assignedBuildId?: string;
   searchAttributes?: DecodedWorkflowSearchAttributes;