User Metadata for Activity and Timers (#2529)

* WIP: decode userMetdata summary

* Add MetadataDecoder for timeline and event summary row

* Smaller timeline text, show only metdata on event summary row

* Use secondary badge, replace primary attribute if it exists

* More type stuff

* Bump text size, use fallback if decoding fails

* Add metadata to expanded row, better layout of expanded timeline view. Need to figure out dynamic height of rest of timeline when expanded

* Finish full refactor of expanded group details

* Set height after decoding

* Don't do array check

* Await tick to set height

* Use WorkflowStatus badge and add 'Pending' | 'Retry' to status

* Fix height for Child Workflows timeline and hide expand button

* Put onLoad in the correct place

* Nvm it was in the right spot

* Use await block in metadata decoder, add Decoding failed fallback

Author: Alex-Tideman

src/lib/components/event/event-details-full.svelte

@@ -9,6 +9,7 @@
 
   import EventDetailsRowExpanded from './event-details-row-expanded.svelte';
   import EventLinksExpanded from './event-links-expanded.svelte';
+  import EventMetadataExpanded from './event-metadata-expanded.svelte';
 
   export let group: EventGroup | undefined = undefined;
   export let event: WorkflowEvent | undefined = undefined;
@@ -45,6 +46,9 @@
               })}
             </div>
           </div>
+          {#if groupEvent?.userMetadata?.summary}
+            <EventMetadataExpanded value={groupEvent.userMetadata.summary} />
+          {/if}
           <EventLinksExpanded links={groupEvent?.links} />
           {#each details as [key, value] (key)}
             <EventDetailsRowExpanded {key} {value} {attributes} />

src/lib/components/event/event-details-link.svelte

@@ -13,7 +13,6 @@
   export let value: string;
   export let attributes: CombinedAttributes;
   export let type: EventLinkType;
-  export let light = false;
 
   $: ({ workflow, namespace } = $page.params);
 
@@ -40,6 +39,6 @@
   $: href = hrefs[type];
 </script>
 
-<Link class={$$restProps.class} {href} {light}>
+<Link class={$$restProps.class} {href}>
   {value}
 </Link>

src/lib/components/event/event-metadata-expanded.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import Badge from '$lib/holocene/badge.svelte';
+  import { translate } from '$lib/i18n/translate';
+  import type { Payload } from '$lib/types';
+
+  import MetadataDecoder from './metadata-decoder.svelte';
+
+  export let value: Payload;
+</script>
+
+<div class="block w-full select-all px-2 py-1 text-left">
+  <p class="text-sm">Summary</p>
+  <MetadataDecoder
+    {value}
+    let:decodedValue
+    fallback={translate('events.decode-failed')}
+  >
+    <Badge type="secondary" class="inline-block whitespace-pre-wrap">
+      {decodedValue}
+    </Badge>
+  </MetadataDecoder>
+</div>

src/lib/components/event/event-summary-row.svelte

@@ -4,6 +4,7 @@
 
   import { page } from '$app/stores';
 
+  import Badge from '$lib/holocene/badge.svelte';
   import Icon from '$lib/holocene/icon/icon.svelte';
   import Link from '$lib/holocene/link.svelte';
   import Tooltip from '$lib/holocene/tooltip.svelte';
@@ -35,6 +36,7 @@
   import EventDetailsFull from './event-details-full.svelte';
   import EventDetailsRow from './event-details-row.svelte';
   import EventLink from './event-link.svelte';
+  import MetadataDecoder from './metadata-decoder.svelte';
 
   export let event: IterableEvent;
   export let group: EventGroup | undefined = undefined;
@@ -198,16 +200,34 @@
         {/if}
       </div>
     {/if}
+    {#if currentEvent?.userMetadata?.summary}
+      <MetadataDecoder
+        value={currentEvent.userMetadata.summary}
+        let:decodedValue
+      >
+        {#if decodedValue}
+          <div
+            class="flex max-w-xl items-center gap-2 first:pt-0 last:border-b-0 md:w-auto"
+          >
+            <p class="whitespace-nowrap text-right text-xs">Summary</p>
+            <Badge type="secondary" class="block select-none truncate">
+              {decodedValue}
+            </Badge>
+          </div>
+        {:else}
+          <EventDetailsRow {...primaryAttribute} {attributes} />
+        {/if}
+      </MetadataDecoder>
+    {:else if primaryAttribute?.key}
+      <EventDetailsRow {...primaryAttribute} {attributes} />
+    {/if}
     {#if currentEvent?.links?.length}
       <EventLink
         link={currentEvent.links[0]}
         class="max-w-xl"
         linkClass="truncate"
       />
     {/if}
-    {#if primaryAttribute?.key}
-      <EventDetailsRow {...primaryAttribute} {attributes} />
-    {/if}
     {#if nonPendingActivityAttempt}
       <EventDetailsRow
         key="attempt"

src/lib/components/event/metadata-decoder.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+  import { page } from '$app/stores';
+
+  import type { Payload } from '$lib/types';
+  import { decodeSingleReadablePayloadWithCodec } from '$lib/utilities/decode-payload';
+  import {
+    getCodecEndpoint,
+    getCodecIncludeCredentials,
+    getCodecPassAccessToken,
+  } from '$lib/utilities/get-codec';
+
+  export let value: Payload | undefined = undefined;
+  export let fallback: string = '';
+  export let onDecode: (decodedValue: string) => void | undefined = undefined;
+
+  $: endpoint = getCodecEndpoint($page.data.settings);
+  $: passAccessToken = getCodecPassAccessToken($page.data.settings);
+  $: includeCredentials = getCodecIncludeCredentials($page.data.settings);
+  $: settings = {
+    ...$page.data.settings,
+    codec: {
+      ...$page.data.settings?.codec,
+      endpoint,
+      passAccessToken,
+      includeCredentials,
+    },
+  };
+
+  $: decodePayload = async (_value: Payload | undefined) => {
+    if (!_value) {
+      return fallback;
+    }
+
+    const metadata = await decodeSingleReadablePayloadWithCodec(
+      _value,
+      settings,
+    );
+
+    if (typeof metadata === 'string') {
+      if (onDecode) {
+        onDecode(metadata);
+      }
+      return metadata;
+    }
+
+    return fallback;
+  };
+</script>
+
+{#await decodePayload(value) then decodedValue}
+  <slot {decodedValue} />
+{:catch}
+  <slot decodedValue={fallback} />
+{/await}

src/lib/components/lines-and-dots/constants.ts

@@ -14,16 +14,10 @@ import type {
 } from '$lib/types/events';
 import type { WorkflowStatus } from '$lib/types/workflows';
 import {
-  formatAttributes,
   formatGroupAttributes,
   formatPendingAttributes,
 } from '$lib/utilities/format-event-attributes';
-import {
-  getGroupForEventOrPendingEvent,
-  isAssociatedPendingActivity,
-} from '$lib/utilities/pending-activities';
-
-export const DetailsChildTimelineHeight = 200;
+import { getGroupForEventOrPendingEvent } from '$lib/utilities/pending-activities';
 
 export type GraphConfig = {
   height: number;
@@ -34,8 +28,6 @@ export type GraphConfig = {
 
 const baseRadius = 6;
 
-export const minCompactWidth = 200;
-
 export const TimelineConfig: GraphConfig = {
   height: baseRadius * 5,
   gutter: baseRadius * 8,
@@ -84,7 +76,7 @@ export const timelineTextPosition = (
   let textAnchor = 'start';
   let textIndex = 0;
 
-  const textToLeft = firstPoint > (1 / 3) * width;
+  const textToLeft = firstPoint > (1 / 2) * width;
   let textToRight = !textToLeft && lastPoint < (2 / 3) * width && !isPending;
 
   if (textToLeft) textAnchor = 'end';
@@ -267,25 +259,6 @@ export const getCategoryColor = (type: EventTypeCategory): string => {
   }
 };
 
-export const activeGroupsHeightAboveGroup = (
-  activeGroups: string[],
-  group: EventGroup,
-  groups: EventGroups,
-  width: number,
-  sort: EventSortOrder,
-) => {
-  return activeGroups
-    .filter((id) => {
-      if (sort === 'ascending') return parseInt(id) < parseInt(group.id);
-      return parseInt(id) > parseInt(group.id);
-    })
-    .map((id) => {
-      const group = groups.find((group) => group.id === id);
-      return getGroupDetailsBoxHeight(group, width);
-    })
-    .reduce((acc, height) => acc + height, 0);
-};
-
 export const mergeEventGroupDetails = (group: EventGroup) => {
   const attributes = formatGroupAttributes(group);
   return group.pendingActivity
@@ -295,55 +268,6 @@ export const mergeEventGroupDetails = (group: EventGroup) => {
 
 export const staticCodeBlockHeight = 200;
 
-export const getGroupDetailsBoxHeight = (group: EventGroup, width: number) => {
-  const isWide = width >= 960;
-  const attributes = mergeEventGroupDetails(group);
-  const codeBlockAttributes = Object.entries(attributes).filter(
-    ([, value]) => typeof value === 'object',
-  );
-  const textAttributes = Object.entries(attributes).filter(
-    ([, value]) => typeof value !== 'object',
-  );
-
-  const codeBlockHeight = codeBlockAttributes.length * staticCodeBlockHeight;
-  const textHeight =
-    (isWide ? 1 : 2) * textAttributes.length * DetailsConfig.fontSizeRatio +
-    DetailsConfig.fontSizeRatio;
-  const totalTextHeight =
-    group.category === 'child-workflow'
-      ? textHeight + DetailsChildTimelineHeight
-      : textHeight;
-  return (
-    Math.max(codeBlockHeight, totalTextHeight) + 3 * DetailsConfig.fontSizeRatio
-  );
-};
-
-export const getEventDetailsBoxHeight = (
-  event: WorkflowEvent,
-  pendingActivity?: PendingActivity,
-) => {
-  const attributes = formatAttributes(event);
-  const codeBlockAttributes = Object.entries(attributes).filter(
-    ([, value]) => typeof value === 'object',
-  );
-  const textAttributes = Object.entries(attributes).filter(
-    ([, value]) => typeof value !== 'object',
-  );
-
-  let pendingActivityHeight = 0;
-  if (isAssociatedPendingActivity(event, pendingActivity)) {
-    pendingActivityHeight = getPendingEventDetailHeight(pendingActivity);
-  }
-  const codeBlockHeight = codeBlockAttributes.length * staticCodeBlockHeight;
-  const textHeight = textAttributes.length * DetailsConfig.fontSizeRatio;
-  return (
-    pendingActivityHeight +
-    codeBlockHeight +
-    textHeight +
-    +2 * DetailsConfig.fontSizeRatio
-  );
-};
-
 export const getPendingEventDetailHeight = (event: PendingActivity) => {
   const textHeight = 5 * DetailsConfig.fontSizeRatio;
   let codeBlockHeight = 0;

src/lib/components/lines-and-dots/event-status-filter.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import Checkbox from '$lib/holocene/checkbox.svelte';
-  import { clearActiveEvents } from '$lib/stores/active-events';
+  import { clearActiveGroups } from '$lib/stores/active-events';
   import { eventStatusFilter } from '$lib/stores/filters';
 
   const options = [
@@ -11,7 +11,7 @@
   ];
 
   const onOptionClick = () => {
-    clearActiveEvents();
+    clearActiveGroups();
     $eventStatusFilter = !$eventStatusFilter;
   };
 </script>

src/lib/components/lines-and-dots/event-type-filter.svelte

@@ -15,7 +15,7 @@
     allEventTypeOptions,
     compactEventTypeOptions,
   } from '$lib/models/event-history/get-event-categorization';
-  import { clearActiveEvents } from '$lib/stores/active-events';
+  import { clearActiveGroups } from '$lib/stores/active-events';
   import { eventTypeFilter } from '$lib/stores/filters';
   import { temporalVersion } from '$lib/stores/versions';
   import { nexusEnabled } from '$lib/utilities/nexus-enabled';
@@ -52,7 +52,7 @@
   }
 
   const onOptionClick = ({ value }) => {
-    clearActiveEvents();
+    clearActiveGroups();
     $eventTypeFilter = $eventTypeFilter.some((type) => type === value)
       ? $eventTypeFilter.filter((type) => type !== value)
       : [...$eventTypeFilter, value];

src/lib/components/lines-and-dots/svg/graph-widget.svelte

@@ -10,7 +10,8 @@
   export let namespace: string;
   export let workflowId: string;
   export let runId = '';
-  export let height = 400;
+  export let viewportHeight = 360;
+  export let onLoad: () => void = () => {};
 
   const getWorkflowAndEventHistory = async () => {
     const [workflow, history] = await Promise.all([
@@ -24,17 +25,16 @@
     workflow: WorkflowExecution,
     history: WorkflowEvents,
   ) => {
+    onLoad();
     const pendingActivities = workflow?.pendingActivities ?? [];
     return groupEvents(history, 'ascending', pendingActivities);
   };
 </script>
 
 {#await getWorkflowAndEventHistory() then { workflow, history }}
-  <div
-    class="cursor-pointer overflow-auto {$$restProps.class}"
-    style="height: {height}px;"
-  >
+  <div class="cursor-pointer overflow-auto {$$restProps.class}">
     <TimelineGraph
+      {viewportHeight}
       {workflow}
       groups={createGroups(workflow, history)}
       readOnly