Nexus Links tab (#2821)

* Add Nexus Links tab and show table of unique links from history

* Fix title of Nexus Links

* Update logic to find requestId from workflowExtendedInfos

* Update outbound table

* Comment out rows for now

* Fix undefined issues, check for nexus type for outbound links

* Fix type imports, update tables

* Update column order and add links

* Remove handler event in inbound table

* Remove console.log

* Use event history for inbound links

* Use more specific attributes for nexus scheduled events

* Remove inspect, add try/catch for links, fix nexus active icon logic to be more precise

Author: Alex-Tideman

src/lib/i18n/locales/en/common.ts

@@ -68,6 +68,9 @@ export const Strings = {
   'workflow-type': 'Workflow Type',
   'workflow-id': 'Workflow ID',
   'run-id': 'Run ID',
+  'event-id': 'Event ID',
+  'event-type': 'Event Type',
+  'request-id': 'Request ID',
   'task-queue': 'Task Queue',
   preview: 'Preview',
   status: 'Status',

src/lib/i18n/locales/en/nexus.ts

@@ -60,7 +60,19 @@ export const Strings = {
   'last-attempt-failure': 'Last Attempt Failure',
   'blocked-reason': 'Blocked Reason',
   link: 'Link',
+  'links-empty-state': 'No Nexus Links found.',
   'link-namespace': 'Link Namespace',
+  'nexus-service': 'Nexus Service',
+  'nexus-endpoint-simple': 'Nexus Endpoint',
+  'nexus-operation': 'Nexus Operation',
+  'caller-event': 'Caller Event',
+  'caller-link': 'Caller Link',
+  'caller-workflow': 'Caller Workflow',
+  'source-event': 'Source Event',
+  'caller-namespace': 'Caller Namespace',
+  'handler-namespace': 'Handler Namespace',
+  'handler-workflow': 'Handler Workflow',
+  'handler-event': 'Handler Event',
   service: 'Service',
   operation: 'Operation',
   'operation-token': 'Operation Token',

src/lib/i18n/locales/en/workflows.ts

@@ -125,6 +125,7 @@ export const Strings = {
   'workflow-history': 'Workflow History',
   'workers-tab': 'Workers',
   'pending-activities-tab': 'Pending Activities',
+  'nexus-links-tab': 'Nexus Links',
   'call-stack-tab': 'Call Stack',
   'queries-tab': 'Queries',
   'metadata-tab': 'Metadata',

src/lib/layouts/workflow-header.svelte

@@ -18,18 +18,23 @@
   import Tab from '$lib/holocene/tab/tab.svelte';
   import Tabs from '$lib/holocene/tab/tabs.svelte';
   import { translate } from '$lib/i18n/translate';
+  import { getInboundNexusLinkEvents } from '$lib/runes/inbound-nexus-links.svelte';
   import { getWorkflowPollersWithVersions } from '$lib/runes/workflow-versions.svelte';
   import { fullEventHistory } from '$lib/stores/events';
   import { namespaces } from '$lib/stores/namespaces';
   import { resetWorkflows } from '$lib/stores/reset-workflows';
   import { workflowRun } from '$lib/stores/workflow-run';
   import { workflowsSearchParams } from '$lib/stores/workflows';
   import { isCancelInProgress } from '$lib/utilities/cancel-in-progress';
-  import { getWorkflowRelationships } from '$lib/utilities/get-workflow-relationships';
+  import {
+    getWorkflowNexusLinksFromHistory,
+    getWorkflowRelationships,
+  } from '$lib/utilities/get-workflow-relationships';
   import { pathMatches } from '$lib/utilities/path-matches';
   import {
     routeForCallStack,
     routeForEventHistory,
+    routeForNexusLinks,
     routeForPendingActivities,
     routeForRelationships,
     routeForWorkers,
@@ -64,6 +69,10 @@
     $fullEventHistory,
     $namespaces,
   );
+  $: outboundLinks =
+    getWorkflowNexusLinksFromHistory($fullEventHistory)?.length || 0;
+  $: inboundLinks = getInboundNexusLinkEvents($fullEventHistory)?.length || 0;
+  $: linkCount = outboundLinks + inboundLinks;
 </script>
 
 <div class="flex items-center justify-between pb-4">
@@ -204,6 +213,21 @@
           {workflowRelationships.relationshipCount}
         </Badge></Tab
       >
+      {#if linkCount > 0}
+        <Tab
+          label={translate('workflows.nexus-links-tab')}
+          id="nexus-links-tab"
+          href={routeForNexusLinks(routeParameters)}
+          active={pathMatches(
+            $page.url.pathname,
+            routeForNexusLinks(routeParameters),
+          )}
+        >
+          <Badge type="primary" class="px-2 py-0">
+            {linkCount}
+          </Badge>
+        </Tab>
+      {/if}
       <Tab
         label={translate('workflows.workers-tab')}
         id="workers-tab"
@@ -232,7 +256,8 @@
           class="px-2 py-0"
         >
           <div class="flex items-center gap-1">
-            {#if activitiesCanceled}<Icon name="canceled" />
+            {#if activitiesCanceled}
+              <Icon name="canceled" />
             {/if}
             {workflow?.pendingActivities?.length}
           </div>

src/lib/models/event-groups/event-groups.d.ts

@@ -1,6 +1,5 @@
-import type { Payload } from '$lib/types';
+import type { EventLink, Payload } from '$lib/types';
 import type {
-  EventLink,
   PendingActivity,
   PendingNexusOperation,
   WorkflowEvent,

src/lib/pages/workflow-history-event.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
-  import { page } from '$app/stores';
+  import { onMount } from 'svelte';
+
+  import { page } from '$app/state';
 
   import EventSummaryRow from '$lib/components/event/event-summary-row.svelte';
   import Button from '$lib/holocene/button.svelte';
@@ -9,16 +11,15 @@
   import { eventFilterSort } from '$lib/stores/event-view';
   import { fullEventHistory } from '$lib/stores/events';
   import { workflowRun } from '$lib/stores/workflow-run';
-  import { isNexusOperationScheduledEvent } from '$lib/utilities/is-event-type';
 
-  $: ({
+  const {
     id: eventId,
     namespace,
     workflow: workflowId,
     run: runId,
-  } = $page.params);
+  } = $derived(page.params);
 
-  $: ids = [eventId];
+  let ids = $derived([eventId]);
 
   const resetFullHistory = () => {
     $fullEventHistory = [];
@@ -39,33 +40,46 @@
     }
   };
 
-  $: fetchEvents(namespace, workflowId, runId);
-
-  $: ({ workflow } = $workflowRun);
-  $: pendingActivities = workflow?.pendingActivities;
-  $: pendingNexusOperations = workflow?.pendingNexusOperations;
-
-  $: ascendingGroups = groupEvents(
-    $fullEventHistory,
-    'ascending',
-    pendingActivities,
-    pendingNexusOperations,
+  onMount(() => {
+    fetchEvents(namespace, workflowId, runId);
+  });
+
+  const { workflow } = $derived($workflowRun);
+  const pendingActivities = $derived(workflow?.pendingActivities);
+  const pendingNexusOperations = $derived(workflow?.pendingNexusOperations);
+
+  const ascendingGroups = $derived(
+    groupEvents(
+      $fullEventHistory,
+      'ascending',
+      pendingActivities,
+      pendingNexusOperations,
+    ),
   );
-  $: groups =
+  const groups = $derived(
     $eventFilterSort === 'ascending'
       ? ascendingGroups
-      : [...ascendingGroups].reverse();
+      : [...ascendingGroups].reverse(),
+  );
 
-  $: initialEvent = $fullEventHistory.find(
-    (e) =>
-      eventId === e.id ||
-      (isNexusOperationScheduledEvent(e) &&
-        eventId === e.attributes?.requestId),
+  const initialEvent = $derived(
+    $fullEventHistory.find(
+      (e) =>
+        e.id === eventId ||
+        e.id ===
+          workflow.workflowExtendedInfo?.requestIdInfos?.[eventId]?.eventId,
+    ),
   );
-  $: visibleItems = $fullEventHistory.filter(
-    (e) => ids.includes(e.id) || e.id === initialEvent?.id,
+
+  const visibleItems = $derived(
+    $fullEventHistory.filter(
+      (e) => ids.includes(e.id) || e.id === initialEvent?.id,
+    ),
+  );
+  const loading = $derived(!visibleItems.length);
+  const lastEventId = $derived(
+    $fullEventHistory[$fullEventHistory.length - 1]?.id,
   );
-  $: loading = !visibleItems.length;
 
   const loadPrevious = () => {
     const firstId = parseInt(ids[0]);
@@ -94,8 +108,6 @@
 
     ids = [...ids, ...nextTen];
   };
-
-  $: lastEventId = $fullEventHistory[$fullEventHistory.length - 1]?.id;
 </script>
 
 <div