PayloadDecoder

src/lib/components/codec-endpoint-settings.svelte

@@ -46,9 +46,3 @@
     {/if}
   </div>
 </div>
-
-<style lang="postcss">
-  .error {
-    @apply outline-red-700;
-  }
-</style>

src/lib/components/data-encoder-settings.svelte

@@ -9,7 +9,6 @@
   import Link from '$lib/holocene/link.svelte';
   import { clickOutside } from '$lib/holocene/outside-click';
   import { translate } from '$lib/i18n/translate';
-  import { dataConverterPort } from '$lib/stores/data-converter-config';
   import {
     codecEndpoint,
     includeCredentials,
@@ -20,7 +19,6 @@
   import { validateHttpOrHttps, validateHttps } from '$lib/utilities/is-http';
 
   import CodecEndpointSettings from './codec-endpoint-settings.svelte';
-  import DataConverterPortSettings from './data-converter-port-settings.svelte';
 
   export const viewDataEncoderSettings = writable<boolean>(false);
 </script>
@@ -30,7 +28,6 @@
   import RadioInput from '$lib/holocene/radio-input/radio-input.svelte';
 
   let endpoint = $codecEndpoint ?? '';
-  let port = $dataConverterPort ?? '';
   let passToken = $passAccessToken ?? false;
   let includeCreds = $includeCredentials ?? false;
   let override = writable($overrideRemoteCodecConfiguration);
@@ -56,7 +53,6 @@
 
   const onCancel = () => {
     endpoint = $codecEndpoint;
-    port = $dataConverterPort;
     passToken = $passAccessToken;
     includeCreds = $includeCredentials;
     $override = $overrideRemoteCodecConfiguration;
@@ -68,7 +64,6 @@
     $codecEndpoint = endpoint;
     $passAccessToken = passToken;
     $includeCredentials = includeCreds;
-    $dataConverterPort = port;
     $viewDataEncoderSettings = false;
     $overrideRemoteCodecConfiguration = $override;
 
@@ -139,7 +134,6 @@
         bind:includeCreds
         {error}
       />
-      <DataConverterPortSettings bind:port />
       <div class="flex items-center gap-4">
         <Button
           disabled={Boolean(error)}

src/lib/components/data-encoder-status.svelte

@@ -15,7 +15,7 @@
 </script>
 
 <div class="mx-1 flex items-center">
-  {#if $dataEncoder?.hasEndpointOrPortConfigured}
+  {#if $dataEncoder?.endpoint}
     {#if $dataEncoder?.hasNotRequested}
       <Tooltip
         bottomRight

src/lib/components/event/event-details-row-expanded.svelte

@@ -20,6 +20,8 @@
     routeForTaskQueue,
   } from '$lib/utilities/route-for';
 
+  import PayloadDecoder from './payload-decoder.svelte';
+
   export let key: string;
   export let value: string | Record<string, unknown>;
   export let attributes: CombinedAttributes;
@@ -38,13 +40,27 @@
     >
       <div class="flex flex-col {stackTrace ? 'lg:w-1/2' : ''}">
         <p class="text-sm">{format(key)}</p>
-        <CodeBlock
-          content={codeBlockValue}
-          class="h-auto {stackTrace ? 'mb-2' : ''} max-h-96 overflow-auto"
-          {inline}
-          copyIconTitle={translate('copy-icon-title')}
-          copySuccessIconTitle={translate('copy-success-icon-title')}
-        />
+        {#if value?.payloads}
+          <PayloadDecoder {value} key="payloads" let:decodedValue>
+            <CodeBlock
+              content={decodedValue}
+              class="h-auto {stackTrace ? 'mb-2' : ''} max-h-96 overflow-auto"
+              {inline}
+              copyIconTitle={translate('copy-icon-title')}
+              copySuccessIconTitle={translate('copy-success-icon-title')}
+            />
+          </PayloadDecoder>
+        {:else}
+          <PayloadDecoder value={codeBlockValue} let:decodedValue>
+            <CodeBlock
+              content={decodedValue}
+              class="h-auto {stackTrace ? 'mb-2' : ''} max-h-96 overflow-auto"
+              {inline}
+              copyIconTitle={translate('copy-icon-title')}
+              copySuccessIconTitle={translate('copy-success-icon-title')}
+            />
+          </PayloadDecoder>
+        {/if}
       </div>
       {#if stackTrace && !inline}
         <div class="flex flex-col lg:w-1/2">

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

@@ -5,10 +5,10 @@
   import Copyable from '$lib/holocene/copyable/index.svelte';
   import Link from '$lib/holocene/link.svelte';
   import { translate } from '$lib/i18n/translate';
+  import type { Payloads } from '$lib/types';
   import { format } from '$lib/utilities/format-camel-case';
   import type { CombinedAttributes } from '$lib/utilities/format-event-attributes';
   import {
-    getCodeBlockValue,
     shouldDisplayAsExecutionLink,
     shouldDisplayAsPlainText,
     shouldDisplayAsTaskQueueLink,
@@ -19,8 +19,10 @@
     routeForTaskQueue,
   } from '$lib/utilities/route-for';
 
+  import PayloadDecoder from './payload-decoder.svelte';
+
   export let key: string;
-  export let value: string | Record<string, unknown>;
+  export let value: string | Record<string, unknown> | Payloads;
   export let attributes: CombinedAttributes;
   export let inline = false;
 
@@ -37,12 +39,14 @@
       <p class="min-w-fit text-sm">
         {format(key)}
       </p>
-      <CodeBlock
-        content={getCodeBlockValue(value)}
-        {inline}
-        copyIconTitle={translate('copy-icon-title')}
-        copySuccessIconTitle={translate('copy-success-icon-title')}
-      />
+      <PayloadDecoder {value} key="payloads" let:decodedValue>
+        <CodeBlock
+          content={decodedValue}
+          {inline}
+          copyIconTitle={translate('copy-icon-title')}
+          copySuccessIconTitle={translate('copy-success-icon-title')}
+        />
+      </PayloadDecoder>
     </div>
   {:else if shouldDisplayAsExecutionLink(key)}
     <div class="flex w-full flex-wrap items-center gap-1 pr-1">

src/lib/components/event/event-history-timeline.svelte

@@ -4,6 +4,7 @@
 
   import Accordion from '$lib/holocene/accordion.svelte';
   import Icon from '$lib/holocene/icon/icon.svelte';
+  import Loading from '$lib/holocene/loading.svelte';
   import ToggleButton from '$lib/holocene/toggle-button/toggle-button.svelte';
   import ToggleButtons from '$lib/holocene/toggle-button/toggle-buttons.svelte';
   import { translate } from '$lib/i18n/translate';
@@ -197,12 +198,17 @@
     $workflowRun.workflow &&
     history.length &&
     visualizationRef;
+
+  const drawTimeline = () => {
+    if (timeline) {
+      timeline.destroy();
+    }
+    buildTimeline(category);
+  };
+
   $: {
     if (readyToDraw) {
-      if (timeline) {
-        timeline.destroy();
-      }
-      buildTimeline(category);
+      drawTimeline();
     }
   }
 </script>
@@ -221,20 +227,24 @@
         <ToggleButtons>
           <ToggleButton
             data-testid="zoom-in"
-            on:click={() => timeline.zoomIn(1)}>+</ToggleButton
+            on:click={() => timeline?.zoomIn(1)}>+</ToggleButton
           >
           <ToggleButton
             data-testid="zoom-in"
-            on:click={() => timeline.zoomOut(1)}>-</ToggleButton
+            on:click={() => timeline?.zoomOut(1)}>-</ToggleButton
           >
           <ToggleButton
             data-testid="zoom-in"
-            on:click={() => timeline.focus('workflow')}>Fit</ToggleButton
+            on:click={() => timeline?.focus('workflow')}>Fit</ToggleButton
           >
         </ToggleButtons>
       </div>
     </div>
-    <div class="timeline" bind:this={visualizationRef} />
+    <div class="timeline" bind:this={visualizationRef}>
+      {#if !timeline}
+        <Loading title="Building Timeline..." />
+      {/if}
+    </div>
   </div>
 </Accordion>
 

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

@@ -1,22 +1,13 @@
 <script lang="ts">
-  import { page } from '$app/stores';
-
   import EventSummaryRow from '$lib/components/event/event-summary-row.svelte';
   import EventSummaryTable from '$lib/components/event/event-summary-table.svelte';
   import Pagination from '$lib/holocene/pagination.svelte';
   import { translate } from '$lib/i18n/translate';
   import { groupEvents } from '$lib/models/event-groups';
   import { CATEGORIES } from '$lib/models/event-history/get-event-categorization';
-  import { fetchAllEvents } from '$lib/services/events-service';
-  import { authUser } from '$lib/stores/auth-user';
-  import {
-    eventFilterSort,
-    type EventSortOrder,
-    expandAllEvents,
-  } from '$lib/stores/event-view';
+  import { eventFilterSort, expandAllEvents } from '$lib/stores/event-view';
   import { eventHistory, fullEventHistory } from '$lib/stores/events';
   import { eventCategoryFilter } from '$lib/stores/filters';
-  import { refresh } from '$lib/stores/workflow-run';
   import type {
     CommonHistoryEvent,
     EventTypeCategory,
@@ -28,36 +19,6 @@
 
   export let compact = false;
 
-  $: ({ namespace, workflow: workflowId, run: runId } = $page.params);
-
-  let loading = true;
-
-  const resetFullHistory = () => {
-    $fullEventHistory = [];
-    loading = true;
-  };
-
-  const fetchEvents = async (
-    namespace: string,
-    workflowId: string,
-    runId: string,
-    sort: EventSortOrder,
-  ) => {
-    const { settings } = $page.data;
-    resetFullHistory();
-    $fullEventHistory = await fetchAllEvents({
-      namespace,
-      workflowId,
-      runId,
-      settings,
-      accessToken: $authUser?.accessToken,
-      sort: compact ? 'ascending' : sort,
-    });
-    loading = false;
-  };
-
-  $: $refresh, fetchEvents(namespace, workflowId, runId, $eventFilterSort);
-
   function handleExpandChange(event: CustomEvent) {
     $expandAllEvents = event.detail.expanded;
   }
@@ -116,7 +77,7 @@
         onRowClick={() => setActiveRowIndex(index)}
       />
     {:else}
-      <EventEmptyRow {loading} />
+      <EventEmptyRow loading={!intialEvents.length} />
     {/each}
   </EventSummaryTable>
 </Pagination>

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

@@ -0,0 +1,65 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+
+  import { page } from '$app/stores';
+
+  import { authUser } from '$lib/stores/auth-user';
+  import type { EventAttribute, WorkflowEvent } from '$lib/types/events';
+  import {
+    cloneAllPotentialPayloadsWithCodec,
+    decodePayloadAttributes,
+    type PotentiallyDecodable,
+  } from '$lib/utilities/decode-payload';
+  import {
+    getCodecEndpoint,
+    getCodecIncludeCredentials,
+    getCodecPassAccessToken,
+  } from '$lib/utilities/get-codec';
+  import { stringifyWithBigInt } from '$lib/utilities/parse-with-big-int';
+
+  export let value: PotentiallyDecodable | EventAttribute | WorkflowEvent;
+  export let key = '';
+
+  $: 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,
+    },
+  };
+
+  const decodePayloads = async () => {
+    try {
+      const convertedAttributes = await cloneAllPotentialPayloadsWithCodec(
+        value,
+        $page.params.namespace,
+        settings,
+        $authUser.accessToken,
+      );
+      const decodedAttributes = decodePayloadAttributes(
+        convertedAttributes,
+      ) as object;
+      const keyExists = key && decodedAttributes?.[key];
+      if (keyExists) {
+        decodedValue = stringifyWithBigInt(keyExists);
+      } else {
+        decodedValue = stringifyWithBigInt(decodedAttributes);
+      }
+    } catch (e) {
+      return stringifyWithBigInt(value);
+    }
+  };
+
+  onMount(() => {
+    decodePayloads();
+  });
+
+  let decodedValue = '';
+</script>
+
+<slot {decodedValue} />

src/lib/components/import/event-history-file-import.svelte

@@ -1,12 +1,10 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
-  import { page } from '$app/stores';
 
   import Button from '$lib/holocene/button.svelte';
   import { translate } from '$lib/i18n/translate';
   import { groupEvents } from '$lib/models/event-groups';
   import { toEventHistory } from '$lib/models/event-history';
-  import { authUser } from '$lib/stores/auth-user';
   import { importEventGroups, importEvents } from '$lib/stores/import-events';
   import { lastUsedNamespace } from '$lib/stores/namespaces';
   import { toaster } from '$lib/stores/toaster';
@@ -40,14 +38,10 @@
   };
 
   const onConfirm = async () => {
-    const { settings } = $page.data;
     try {
-      const events = await toEventHistory({
-        response: Array.isArray(rawEvents) ? rawEvents : rawEvents?.events,
-        namespace: $lastUsedNamespace,
-        settings,
-        accessToken: $authUser.accessToken,
-      });
+      const events = await toEventHistory(
+        Array.isArray(rawEvents) ? rawEvents : rawEvents?.events,
+      );
       const eventGroups = groupEvents(events);
       importEvents.set(events);
       importEventGroups.set(eventGroups);