Add pending activity attempt count to timeline (#2372)

* Make offset variable in timelineTextPosition

* Add pending activity attempt count to timeline row

* Only show attemps if greater than 1

* Add constants and util func for offsets

* Update retry badge color

* Add retry label

* Move next retry time next to retry attempts

Author: laurakwhit

Diff for: src/lib/components/event/event-summary-row.svelte

@@ -6,6 +6,7 @@
 
   import Icon from '$lib/holocene/icon/icon.svelte';
   import Link from '$lib/holocene/link.svelte';
+  import { translate } from '$lib/i18n/translate';
   import { isEventGroup } from '$lib/models/event-groups';
   import type { EventGroup } from '$lib/models/event-groups/event-groups';
   import {
@@ -147,12 +148,20 @@
     {#if pendingAttempt}
       <div
         class="flex items-center gap-1 {pendingAttempt > 1 &&
-          'surface-danger rounded px-1 py-0.5'}"
+          'surface-retry rounded px-1 py-0.5'}"
       >
         <Icon class="mr-1.5 inline" name="retry" />
+        {translate('workflows.retry')}
         {pendingAttempt}
         {#if hasPendingActivity}
           / {hasPendingActivity.maximumAttempts || '∞'}
+          {#if pendingAttempt > 1}
+            • {translate('workflows.next-retry')}
+            {toTimeDifference({
+              date: hasPendingActivity.scheduledTime,
+              negativeDefault: 'None',
+            })}
+          {/if}
         {/if}
       </div>
     {/if}
@@ -200,20 +209,6 @@
             </p>
           </div>
         {/if}
-        {#if pendingAttempt > 1 && hasPendingActivity}
-          <div class="flex items-center gap-2 text-sm">
-            <p class="max-w-fit whitespace-nowrap text-right text-xs">
-              Next Retry
-            </p>
-            <p class="flex items-center gap-0">
-              <Icon class="mr-1.5 inline" name="clock" />
-              {toTimeDifference({
-                date: hasPendingActivity.scheduledTime,
-                negativeDefault: 'None',
-              })}
-            </p>
-          </div>
-        {/if}
       </div>
     {:else}
       <div class="flex flex-col gap-0 px-2 text-right">

Diff for: src/lib/components/event/pending-activity-summary-row.svelte

@@ -5,6 +5,7 @@
 
   import Icon from '$lib/holocene/icon/icon.svelte';
   import Link from '$lib/holocene/link.svelte';
+  import { translate } from '$lib/i18n/translate';
   import type { EventGroup } from '$lib/models/event-groups/event-groups';
   import type { PendingActivity } from '$lib/types/events';
   import { routeForEventHistoryEvent } from '$lib/utilities/route-for';
@@ -58,10 +59,18 @@
       </p>
       <div
         class="flex items-center gap-1 {event.attempt > 1 &&
-          'surface-danger rounded px-1 py-0.5'}"
+          'surface-retry rounded px-1 py-0.5'}"
       >
         <Icon class="mr-1.5 inline" name="retry" />
+        {translate('workflows.retry')}
         {event.attempt} / {event.maximumAttempts || '∞'}
+        {#if event.attempt > 1}
+          • {translate('workflows.next-retry')}
+          {toTimeDifference({
+            date: event.scheduledTime,
+            negativeDefault: 'None',
+          })}
+        {/if}
       </div>
       <EventDetailsRow
         key="activityType"
@@ -71,20 +80,7 @@
       />
     </div></td
   >
-  <td>
-    {#if event.attempt > 1}
-      <div class="flex items-center gap-2 px-2">
-        <p class="max-w-fit whitespace-nowrap text-right text-xs">Next Retry</p>
-        <p class="flex items-center gap-0">
-          <Icon class="mr-1.5 inline" name="clock" />
-          {toTimeDifference({
-            date: event.scheduledTime,
-            negativeDefault: 'None',
-          })}
-        </p>
-      </div>
-    {/if}
-  </td>
+  <td />
 </tr>
 {#if expanded}
   <tr class="row expanded">

Diff for: src/lib/components/event/pending-nexus-summary-row.svelte

@@ -5,6 +5,7 @@
 
   import Icon from '$lib/holocene/icon/icon.svelte';
   import Link from '$lib/holocene/link.svelte';
+  import { translate } from '$lib/i18n/translate';
   import type { EventGroup } from '$lib/models/event-groups/event-groups';
   import type { PendingNexusOperation } from '$lib/types/events';
   import { routeForEventHistoryEvent } from '$lib/utilities/route-for';
@@ -57,29 +58,24 @@
         {#if event.attempt}
           <div
             class="flex items-center gap-1 {event.attempt > 1 &&
-              'surface-danger rounded px-1 py-0.5'}"
+              'surface-retry rounded px-1 py-0.5'}"
           >
             <Icon class="mr-1.5 inline" name="retry" />
+            {translate('workflows.retry')}
             {event.attempt}
+            {#if event.attempt > 1}
+              • {translate('workflows.next-retry')}
+              {toTimeDifference({
+                date: event.nextAttemptScheduleTime,
+                negativeDefault: 'None',
+              })}
+            {/if}
           </div>
         {/if}
       </div>
     </div>
   </td>
-  <td>
-    {#if event.attempt > 1}
-      <div class="flex items-center gap-2 px-2">
-        <p class="max-w-fit whitespace-nowrap text-right text-xs">Next Retry</p>
-        <p class="flex items-center gap-0">
-          <Icon class="mr-1.5 inline" name="clock" />
-          {toTimeDifference({
-            date: event.nextAttemptScheduleTime,
-            negativeDefault: 'None',
-          })}
-        </p>
-      </div>
-    {/if}
-  </td>
+  <td />
 </tr>
 {#if expanded}
   <tr class="row expanded">

Diff for: src/lib/components/lines-and-dots/constants.ts

@@ -69,6 +69,11 @@ export const CategoryIcon: Record<EventTypeCategory, IconName> = {
   other: 'terminal',
 };
 
+export const textBackdropOffsetWithIcon = 36;
+export const textBackdropOffset = 12;
+
+export const getTextOffset = (radius: number) => 1.5 * radius;
+
 export const timelineTextPosition = (
   points: number[],
   y: number,
@@ -90,21 +95,20 @@ export const timelineTextPosition = (
   if (textToLeft) textAnchor = 'end';
   if (textToRight) textIndex = points.indexOf(lastPoint);
 
-  let textX = textToRight
-    ? lastPoint + 1.5 * radius
-    : firstPoint - 1.5 * radius;
+  const offset = getTextOffset(radius);
+  let textX = textToRight ? lastPoint + offset : firstPoint - offset;
 
   // Pending or long events
   if (!textToRight && !textToLeft) {
     backdrop = true;
     textToRight = true;
-    textX = firstPoint + 1.5 * radius;
+    textX = firstPoint + offset;
 
     if (points.length === 2 && isPending) {
       const gap = points[1] - points[0];
       if (gap < width - points[1]) {
         textIndex = 1;
-        textX = points[1] + 1.5 * radius;
+        textX = points[1] + offset;
       }
     }
 
@@ -113,7 +117,7 @@ export const timelineTextPosition = (
       const gap2 = points[2] - points[1];
       if (gap2 > gap1) {
         textIndex = 1;
-        textX = points[1] + 1.5 * radius;
+        textX = points[1] + offset;
       }
     }
   }

Diff for: src/lib/components/lines-and-dots/svg/line.svelte

@@ -65,11 +65,7 @@
   }
 
   .retry {
-    stroke: #ff4518;
-  }
-
-  .pending.retry {
-    stroke: #ff9b70;
+    stroke: theme('colors.red.300');
   }
 
   .child-workflow {

Diff for: src/lib/components/lines-and-dots/svg/text.svelte

@@ -2,12 +2,18 @@
   import type { IconName } from '$lib/holocene/icon';
   import Icon from '$lib/holocene/icon/icon.svelte';
 
-  import type { GraphConfig } from '../constants';
+  import {
+    getTextOffset,
+    type GraphConfig,
+    textBackdropOffset,
+    textBackdropOffsetWithIcon,
+  } from '../constants';
 
   import Line from './line.svelte';
 
   export let point: [number, number] = [0, 0];
   export let category: string | undefined = undefined;
+  export let status: string | undefined = 'none';
   export let fontSize = '14px';
   export let fontWeight = '400';
   export let textAnchor = 'start';
@@ -16,34 +22,47 @@
   export let icon: IconName | undefined = undefined;
   export let config: GraphConfig | undefined = undefined;
   export let label = false;
+  export let textWidth = 0;
+  export let noOffset = false;
+  export let dark = false;
 
   $: [x, y] = point;
 
   let textElement: SVGTextElement;
 
   $: showIcon = icon && config;
   $: textWidth = textElement?.getBBox()?.width || 0;
-  $: backdropWidth = showIcon ? textWidth + 36 : textWidth + 12;
+  $: backdropWidth =
+    showIcon && !noOffset
+      ? textWidth + textBackdropOffsetWithIcon
+      : textWidth + textBackdropOffset;
   $: textX = showIcon && textAnchor === 'start' ? x + config.radius * 2 : x;
+  $: offset = noOffset ? getTextOffset(config.radius || 0) : 0;
 </script>
 
 {#if backdrop}
   <Line
     startPoint={[x - backdropHeight, y]}
     endPoint={[x + backdropWidth, y]}
-    status="none"
+    {status}
     strokeWidth={backdropHeight}
   />
 {/if}
 {#if showIcon && textAnchor === 'start'}
-  <Icon name={icon} {x} y={y - 8} class="text-white" />
+  <Icon
+    name={icon}
+    x={x - offset}
+    y={y - 8}
+    class={dark ? 'text-black' : 'text-white'}
+  />
 {/if}
 <text
   bind:this={textElement}
   class="cursor-pointer select-none outline-none {category} text-primary"
   class:label
   class:backdrop
-  x={textX}
+  class:dark
+  x={textX - offset}
   {y}
   font-size={fontSize}
   font-weight={fontWeight}
@@ -54,9 +73,9 @@
 {#if showIcon && textAnchor === 'end'}
   <Icon
     name={icon}
-    x={x - textWidth - config.radius * 1.5}
+    x={x - offset}
     y={y - 8}
-    class="text-white"
+    class={dark ? 'text-black' : 'text-white'}
   />
 {/if}
 
@@ -112,7 +131,8 @@
     fill: #ff4518;
   }
 
+  text.dark,
   text.none {
-    fill: #141414;
+    fill: theme('colors.space-black');
   }
 </style>

Diff for: src/lib/components/lines-and-dots/svg/timeline-graph-row.svelte

@@ -1,12 +1,15 @@
 <script lang="ts">
   import type { Timestamp } from '@temporalio/common';
 
+  import { translate } from '$lib/i18n/translate';
   import type { EventGroup } from '$lib/models/event-groups/event-groups';
   import { setActiveGroup } from '$lib/stores/active-events';
   import { getMillisecondDuration } from '$lib/utilities/format-time';
+  import { isPendingActivity } from '$lib/utilities/is-pending-activity';
 
   import {
     CategoryIcon,
+    textBackdropOffsetWithIcon,
     TimelineConfig,
     timelineTextPosition,
   } from '../constants';
@@ -26,8 +29,12 @@
 
   const { height, gutter, radius } = TimelineConfig;
 
+  let textWidth = 0;
+
   $: timelineWidth = canvasWidth - 2 * gutter;
   $: active = !activeGroups.length || activeGroups.includes(group.id);
+  $: ({ pendingActivity } = group);
+  $: hasPendingActivity = isPendingActivity(pendingActivity);
 
   const getDistancePointsAndPositions = (
     endTime: string | Date,
@@ -115,10 +122,30 @@
         {backdrop}
         backdropHeight={radius * 2}
         config={TimelineConfig}
+        bind:textWidth
       >
         {group?.displayName}
       </Text>
     {/if}
+    {#if hasPendingActivity && pendingActivity.attempt > 1}
+      <Text
+        point={[
+          textPosition[0] + textWidth + textBackdropOffsetWithIcon,
+          textPosition[1],
+        ]}
+        textAnchor="start"
+        {backdrop}
+        backdropHeight={radius * 2}
+        config={TimelineConfig}
+        icon="retry"
+        status="retry"
+        noOffset
+        dark
+      >
+        {translate('workflows.retry')}
+        {pendingActivity.attempt} / {pendingActivity.maximumAttempts || '∞'}
+      </Text>
+    {/if}
     <Dot
       point={[x, y]}
       classification={group.eventList[index]?.classification}

Diff for: src/lib/i18n/locales/en/workflows.ts

@@ -155,6 +155,7 @@ export const Strings = {
   'last-heartbeat': 'Last Heartbeat',
   attempt: 'Attempt',
   'attempts-left': 'Attempts Left',
+  retry: 'Retry',
   'next-retry': 'Next Retry',
   expiration: 'Expiration',
   'heartbeat-details': 'Heartbeat Details',

Diff for: src/lib/theme/plugin.ts

@@ -150,6 +150,10 @@ const temporal = plugin(
         backgroundColor: css('--color-surface-black'),
         color: css('--color-text-white'),
       },
+      '.surface-retry': {
+        backgroundColor: colors.red[300],
+        color: css('--color-text-black'),
+      },
     });
   },
   {