Add label for Next Retry on Pending Activities (#2287)

* Add label to next retry, put on right end of row to keep time elements consistent * Always show label * Fix padding, show nextScheduledAttemptTime for pending nexus operation
temporalio · Aug 29, 2024 · 67ab213 · 67ab213
1 parent cbf6f61
commit 67ab213
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 23 deletions.
diff --git a/src/lib/components/event/event-summary-row.svelte b/src/lib/components/event/event-summary-row.svelte
@@ -158,16 +158,6 @@
               / {hasPendingActivity.maximumAttempts || '∞'}
             {/if}
           </div>
-          {#if pendingAttempt > 1 && hasPendingActivity && hasPendingActivity.scheduledTime}
-            <div
-              class="surface-danger flex items-center gap-1 rounded px-1 py-0.5"
-            >
-              {toTimeDifference({
-                date: hasPendingActivity.scheduledTime,
-                negativeDefault: 'None',
-              })}
-            </div>
-          {/if}
         {/if}
         <EventDetailsRow
           {...primaryAttribute}
@@ -203,13 +193,27 @@
           {/each}
         </div>
         {#if duration && duration !== '0ms'}
-          <div class="flex flex-row items-center gap-1 text-sm text-secondary">
+          <div class="flex items-center gap-1 text-sm text-secondary">
             <Icon class="inline" name="clock" />
             <p class="whitespace-noline truncate">
               {duration}
             </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 --git a/src/lib/components/event/pending-activity-summary-row.svelte b/src/lib/components/event/pending-activity-summary-row.svelte
@@ -63,14 +63,6 @@
         <Icon class="mr-1.5 inline" name="retry" />
         {event.attempt} / {event.maximumAttempts || '∞'}
       </div>
-      {#if event.attempt > 1 && event.scheduledTime}
-        <div class="surface-danger flex items-center gap-1 rounded px-1 py-0.5">
-          {toTimeDifference({
-            date: event.scheduledTime,
-            negativeDefault: 'None',
-          })}
-        </div>
-      {/if}
       <EventDetailsRow
         key="activityType"
         value={event.activityType}
@@ -80,7 +72,20 @@
       />
     </div></td
   >
-  <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>
 </tr>
 {#if expanded}
   <tr class="row expanded">

diff --git a/src/lib/components/event/pending-nexus-summary-row.svelte b/src/lib/components/event/pending-nexus-summary-row.svelte
@@ -8,6 +8,7 @@
   import type { EventGroup } from '$lib/models/event-groups/event-groups';
   import type { PendingNexusOperation } from '$lib/types/events';
   import { routeForEventHistoryEvent } from '$lib/utilities/route-for';
+  import { toTimeDifference } from '$lib/utilities/to-time-difference';
 
   import EventDetailsFull from './event-details-full.svelte';
 
@@ -65,7 +66,20 @@
       </div>
     </div>
   </td>
-  <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>
 </tr>
 {#if expanded}
   <tr class="row expanded">

diff --git a/src/lib/utilities/to-time-difference.test.ts b/src/lib/utilities/to-time-difference.test.ts
@@ -14,7 +14,7 @@ describe('toTimeDifference', () => {
   it('should correctly parse a negative difference', () => {
     const now = 1683060815883;
     const date = '2022-04-13T16:29:35.630571Z';
-    expect(toTimeDifference({ date, now })).toEqual('-33193440.253s');
+    expect(toTimeDifference({ date, now })).toEqual('-33193440s');
   });
 
   it('should correctly parse a negative difference with a default', () => {

diff --git a/src/lib/utilities/to-time-difference.ts b/src/lib/utilities/to-time-difference.ts
@@ -20,7 +20,7 @@ export const toTimeDifference = ({
       return negativeDefault;
     }
 
-    return !isNaN(timeFromNow) ? `${timeFromNow}s` : '';
+    return !isNaN(timeFromNow) ? `${timeFromNow.toFixed(0)}s` : '';
   } catch (error) {
     return '';
   }