DT-3655 - add external payload count and size to workflow details (#3276)

* add external payload count and size to workflow details

* update snaps

* fix strict

* update other snaps

* add text-secondary to detail list label

* update detail list components to support new styles for workflow details header

- add class prop to DetailListTextValue and DetailListValue to pass through font-mono
- make DetailListLabel text-secondary
- add link to SDK developer guides next to SDK logo
- replace SDK logos with our own colorblock versions

* fix tooltip font

* fix typo and remove rust link, there is no developer guide in docs for rust

Author: rossedfort

src/lib/components/detail-list/detail-list-label.svelte

@@ -13,7 +13,7 @@
   const { children, href, class: className = '' }: Props = $props();
 </script>
 
-<dd class={twMerge('col-[1]', className)}>
+<dd class={twMerge('col-[1] text-secondary', className)}>
   {#if href}
     <Link {href} newTab>{@render children()}</Link>
   {:else}

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

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import type { ClassNameValue } from 'tailwind-merge';
+
   import Badge, { type BadgeType } from '$lib/holocene/badge.svelte';
   import type { IconName } from '$lib/holocene/icon';
   import Icon from '$lib/holocene/icon/icon.svelte';
@@ -11,19 +13,25 @@
     copyableText?: string;
     text: string;
     tooltipText?: string;
+    tooltipWidth?: number;
     isBadge?: boolean;
     badgeType?: BadgeType;
     iconName?: IconName | undefined;
+    iconPosition?: 'leading' | 'trailing';
+    class?: ClassNameValue;
   }
 
   let {
     copyable,
     text,
     copyableText = text,
     tooltipText,
+    tooltipWidth = 256,
     iconName,
+    iconPosition = 'leading',
     isBadge = false,
     badgeType = 'default',
+    class: className = '',
   }: Props = $props();
 </script>
 
@@ -34,17 +42,25 @@
     </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}>
+<DetailListValue class={className} {copyable} {copyableText}>
   {#if tooltipText}
-    <Tooltip text={tooltipText} top class="min-w-0">
+    <Tooltip
+      text={tooltipText}
+      top
+      width={tooltipWidth}
+      class="min-w-0 font-sans"
+    >
       {@render content()}
     </Tooltip>
   {:else}

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

@@ -31,7 +31,7 @@
   </div>
 {/snippet}
 
-<DetailListValue>
+<DetailListValue class="font-mono">
   <Tooltip
     hide={!t}
     text={$relativeTime ? formattedTimestamp : relativeTimestamp}

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

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
+  import { type ClassNameValue, twMerge } from 'tailwind-merge';
 
   import CopyButton from '$lib/holocene/copyable/button.svelte';
   import { translate } from '$lib/i18n/translate';
@@ -9,17 +10,23 @@
     copyable?: boolean;
     copyableText?: string;
     children: Snippet;
+    class?: ClassNameValue;
   }
 
-  const { children, copyable, copyableText }: Props = $props();
+  const {
+    children,
+    copyable,
+    copyableText,
+    class: className = '',
+  }: Props = $props();
   const { copy, copied } = copyToClipboard();
 
   const handleCopy = (e: Event) => {
     copy(e, copyableText);
   };
 </script>
 
-<dt class="col-[2] flex">
+<dt class={twMerge('col-[2] flex', className)}>
   {@render children()}
   {#if copyable}
     <!-- 

src/lib/components/lines-and-dots/sdk-logo.svelte

@@ -1,12 +1,14 @@
 <script lang="ts">
-  import dotNet from '$lib/vendor/sdk-logos/dot-net-logo.png';
-  import go from '$lib/vendor/sdk-logos/go-logo.png';
-  import java from '$lib/vendor/sdk-logos/java-logo.png';
-  import php from '$lib/vendor/sdk-logos/php-logo.png';
-  import python from '$lib/vendor/sdk-logos/python-logo.png';
-  import ruby from '$lib/vendor/sdk-logos/ruby-logo.png';
-  import rust from '$lib/vendor/sdk-logos/rust-logo.png';
-  import typescript from '$lib/vendor/sdk-logos/ts-logo.png';
+  import Icon from '$lib/holocene/icon/icon.svelte';
+  import Link from '$lib/holocene/link.svelte';
+  import dotNet from '$lib/vendor/sdk-logos/dotnet-colorblock.svg';
+  import go from '$lib/vendor/sdk-logos/go-colorblock.svg';
+  import java from '$lib/vendor/sdk-logos/java-colorblock.svg';
+  import php from '$lib/vendor/sdk-logos/php-colorblock.svg';
+  import python from '$lib/vendor/sdk-logos/python-colorblock.svg';
+  import ruby from '$lib/vendor/sdk-logos/ruby-colorblock.svg';
+  import rust from '$lib/vendor/sdk-logos/rust-colorblock.svg';
+  import typescript from '$lib/vendor/sdk-logos/typescript-colorblock.svg';
 
   const sdkLogos: Record<string, string> = {
     go,
@@ -19,16 +21,31 @@
     rust,
   };
 
+  const sdkToDocsSlug: Record<string, string> = {
+    Ruby: 'ruby',
+    Go: 'go',
+    Java: 'java',
+    Python: 'python',
+    '.NET': 'dotnet',
+    PHP: 'php',
+    Typescript: 'typescript',
+  };
+
   interface Props {
     sdk: string;
     version: string;
   }
 
   let { sdk, version }: Props = $props();
   const logo = $derived(sdkLogos[sdk.toLowerCase()]);
+  const href = $derived(
+    sdkToDocsSlug[sdk]
+      ? `https://docs.temporal.io/develop/${sdkToDocsSlug[sdk]}`
+      : undefined,
+  );
 </script>
 
-<p class="flex w-full items-center gap-1">
+<p class="flex w-full items-center gap-2">
   {#if logo}
     <span class="relative flex w-6 shrink-0 items-center" aria-hidden="true">
       <img src={logo} alt="SDK Icon" class="absolute h-6 w-6" />
@@ -38,4 +55,8 @@
     {sdk}
     {version}
   </span>
+  {#if href}
+    <Link {href} newTab>Docs</Link>
+    <Icon name="book" />
+  {/if}
 </p>

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

@@ -1,20 +1,13 @@
 <script lang="ts">
   import { page } from '$app/state';
 
-  import { timestamp } from '$lib/components/timestamp.svelte';
   import Tooltip from '$lib/holocene/tooltip.svelte';
   import { translate } from '$lib/i18n/translate';
   import { fetchWorkflow } from '$lib/services/workflow-service';
   import { isCloud } from '$lib/stores/advanced-visibility';
   import { fullEventHistory, sdkInfo } from '$lib/stores/events';
-  import {
-    relativeTime,
-    timeFormat,
-    timestampFormat,
-  } from '$lib/stores/time-format';
   import type { WorkflowExecution } from '$lib/types/workflows';
   import { formatBytes } from '$lib/utilities/format-bytes';
-  import { formatDate } from '$lib/utilities/format-date';
   import {
     formatDistanceAbbreviated,
     formatDuration,
@@ -36,6 +29,7 @@
     DetailListTextValue,
     DetailListValue,
   } from '../detail-list';
+  import DetailListTimestampValue from '../detail-list/detail-list-timestamp-value.svelte';
 
   import SdkLogo from './sdk-logo.svelte';
 
@@ -110,42 +104,25 @@
 
 <DetailList aria-label="workflow details" rowCount={5}>
   <DetailListLabel>{translate('common.start')}</DetailListLabel>
-  <DetailListTextValue
-    text={$timestamp(workflow?.startTime)}
-    tooltipText={formatDate(workflow?.startTime, $timeFormat, {
-      relative: !$relativeTime,
-      format: $timestampFormat,
-    })}
-  />
+  <DetailListTimestampValue timestamp={workflow?.startTime} />
 
   {#if workflow?.startDelay}
     <DetailListLabel>{translate('workflows.execution-start')}</DetailListLabel>
-    <DetailListTextValue
-      text={$timestamp(workflow?.executionTime)}
-      tooltipText={formatDate(workflow?.executionTime, $timeFormat, {
-        relative: !$relativeTime,
-        format: $timestampFormat,
-      })}
-    />
+    <DetailListTimestampValue timestamp={workflow?.executionTime} />
   {/if}
 
   <DetailListLabel>{translate('common.end')}</DetailListLabel>
-  <DetailListTextValue
-    text={workflow?.endTime ? $timestamp(workflow?.endTime) : '-'}
-    tooltipText={formatDate(workflow?.endTime, $timeFormat, {
-      relative: !$relativeTime,
-      format: $timestampFormat,
-    })}
-  />
+  <DetailListTimestampValue timestamp={workflow?.endTime} fallback="-" />
 
   <DetailListLabel>
     {translate('common.duration')}
   </DetailListLabel>
-  <DetailListTextValue text={elapsedTime} />
+  <DetailListTextValue class="font-mono" text={elapsedTime} />
 
   {#if workflow?.workflowExecutionTimeout && workflow?.workflowExecutionTimeout.toString() !== '0s'}
     <DetailListLabel>{translate('workflows.workflow-timeout')}</DetailListLabel>
     <DetailListTextValue
+      class="font-mono"
       text={formatDuration(workflow.workflowExecutionTimeout)}
       tooltipText={formatDuration(workflow.workflowExecutionTimeout)}
     />
@@ -284,13 +261,40 @@
 
   <DetailListColumn>
     <DetailListLabel>{translate('common.history-size')}</DetailListLabel>
-    <DetailListTextValue text={historySizeFormatted} />
+    <DetailListTextValue
+      class="font-mono"
+      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
+        class="font-mono"
+        text={formatBytes(parseInt(workflow.externalPayloadSizeBytes, 10))}
+      />
+      <DetailListLabel
+        >{translate('workflows.external-payload-count')}</DetailListLabel
+      >
+      <DetailListTextValue
+        class="font-mono"
+        text={workflow.externalPayloadCount}
+      />
+    {/if}
 
     {#if !$isCloud}
       <DetailListLabel
         >{translate('workflows.state-transitions')}</DetailListLabel
       >
-      <DetailListTextValue text={workflow?.stateTransitionCount} />
+      <DetailListTextValue
+        class="font-mono"
+        text={workflow?.stateTransitionCount}
+      />
     {:else}
       <Tooltip
         bottomLeft

src/lib/holocene/icon/paths.ts

@@ -115,6 +115,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';
@@ -266,6 +267,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

@@ -349,5 +349,9 @@ 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.',
   sdk: 'Workflow SDK',
 } as const;