Better timeline labels for localActivity (#1827)

temporalio · Jan 26, 2024 · fa7462f · fa7462f
1 parent d22a682
commit fa7462f
Showing 1 changed file with 9 additions and 4 deletions.
diff --git a/src/lib/components/event/event-history-timeline.svelte b/src/lib/components/event/event-history-timeline.svelte
@@ -31,6 +31,7 @@
     EventTypeCategory,
   } from '$lib/types/events';
   import { capitalize } from '$lib/utilities/format-camel-case';
+  import { getSummaryAttribute } from '$lib/utilities/get-single-attribute-for-event';
   import {
     isActivityTaskScheduledEvent,
     isLocalActivityMarkerEvent,
@@ -53,9 +54,10 @@
   }
 
   function renderGroupName(group) {
-    const { label, category, id } = group;
+    const { label, category, name, id } = group;
     const { workflow, run, namespace } = $page.params;
-    const groupName = capitalize(label || category);
+    const isLocalActivity = isLocalActivityMarkerEvent(group.initialEvent);
+    const groupName = capitalize(isLocalActivity ? name : label || category);
     const href = routeForEventGroup({
       eventId: id,
       namespace,
@@ -177,7 +179,7 @@
         );
       if (groupPendingActivity && isRunning) {
         items.add({
-          id: `pending-${groupPendingActivity.activityId}`,
+          id: `pending-${groupPendingActivity.activityId}-${index}`,
           group: `group-${index}`,
           start: initialEvent.eventTime,
           end: Date.now(),
@@ -189,14 +191,17 @@
           editable: false,
         });
       } else {
+        const singleEventName = isLocalActivityMarkerEvent(group.initialEvent)
+          ? getSummaryAttribute(group.initialEvent)?.value ?? group.name
+          : group.name;
         items.add({
           id: `group-${index}-items`,
           group: `group-${index}`,
           start: initialEvent.eventTime,
           data: group,
           content:
             group.eventList.length === 1
-              ? group.name
+              ? singleEventName
               : `<div class="bar-content">${group.name}${getIcon(
                   lastEvent.classification,
                 )}</div>`,