Fix workflow counts and reactive selectedId

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

@@ -46,7 +46,7 @@
   export let active = false;
   export let onRowClick: () => void = noop;
 
-  let selectedId = isEventGroup(event)
+  $: selectedId = isEventGroup(event)
     ? Array.from(event.events.keys()).pop()
     : event.id;
 
@@ -193,7 +193,16 @@
       <div class="flex items-center gap-2 px-2">
         <div class="flex gap-0.5">
           {#each event.eventList as groupEvent}
-            <Link class="truncate" data-testid="link" {href}>
+            <Link
+              class="truncate"
+              data-testid="link"
+              href={routeForEventHistoryEvent({
+                eventId: groupEvent.id,
+                namespace,
+                workflow,
+                run,
+              })}
+            >
               {groupEvent.id}
             </Link>
           {/each}

src/lib/components/workflow/workflow-counts.svelte

@@ -3,18 +3,25 @@
 
   import { page } from '$app/stores';
 
-  import Link from '$lib/holocene/link.svelte';
   import Skeleton from '$lib/holocene/skeleton/index.svelte';
   import { workflowStatuses } from '$lib/models/workflow-status';
   import { fetchWorkflowCountByExecutionStatus } from '$lib/services/workflow-counts';
+  import { workflowFilters } from '$lib/stores/filters';
+  import { currentPageKey } from '$lib/stores/pagination';
   import {
     queryWithParentWorkflowId,
     refresh,
     workflowCount,
   } from '$lib/stores/workflows';
-  import type { WorkflowStatus } from '$lib/types/workflows';
+  import {
+    SEARCH_ATTRIBUTE_TYPE,
+    type WorkflowStatus,
+  } from '$lib/types/workflows';
   import { decodePayload } from '$lib/utilities/decode-payload';
+  import { toListWorkflowQueryFromFilters } from '$lib/utilities/query/filter-workflow-query';
+  import { combineFilters } from '$lib/utilities/query/to-list-workflow-filters';
   import { getExponentialBackoffSeconds } from '$lib/utilities/refresh-rate';
+  import { updateQueryParameters } from '$lib/utilities/update-query-parameters';
 
   import WorkflowCountStatus from './workflow-count-status.svelte';
 
@@ -116,24 +123,43 @@
     }
   };
 
+  const onStatusClick = (status) => {
+    const filter = {
+      attribute: 'ExecutionStatus',
+      type: SEARCH_ATTRIBUTE_TYPE.KEYWORD,
+      value: status,
+      operator: '',
+      conditional: '=',
+      parenthesis: '',
+    };
+    $workflowFilters = [...$workflowFilters, filter];
+    const searchQuery = toListWorkflowQueryFromFilters(
+      combineFilters($workflowFilters),
+    );
+    updateQueryParameters({
+      url: $page.url,
+      parameter: 'query',
+      value: searchQuery,
+      allowEmpty: true,
+      clearParameters: [currentPageKey],
+    });
+  };
+
   $: query, namespace, $refresh, fetchCounts();
 </script>
 
 <div class="flex min-h-[24px] flex-wrap items-center gap-2">
   {#each statusGroups as { count, status } (status)}
     {#if !loading}
-      <Link
-        href={`/namespaces/${namespace}/workflows?query=%60ExecutionStatus%60%3D"${status}"`}
-        role="button"
-      >
+      <button on:click={() => onStatusClick(status)}>
         <WorkflowCountStatus
           {status}
           {count}
           newCount={newStatusGroups.find((g) => g.status === status)
             ? newStatusGroups.find((g) => g.status === status).count - count
             : 0}
         />
-      </Link>
+      </button>
     {:else}
       <Skeleton class="h-6 w-24 rounded" />
     {/if}

src/lib/models/event-groups/create-event-group.ts

@@ -121,8 +121,8 @@ const createGroupFor = <K extends keyof StartingEvents>(
     },
     get isPending() {
       return (
-        this.pendingActivity ||
-        this.pendingNexusOperation ||
+        !!this.pendingActivity ||
+        !!this.pendingNexusOperation ||
         (isTimerStartedEvent(this.initialEvent) &&
           this.eventList.length === 1) ||
         (isStartChildWorkflowExecutionInitiatedEvent(this.initialEvent) &&

src/lib/utilities/get-failed-or-pending.ts

@@ -16,12 +16,13 @@ export const getFailedOrPendingEvents = (
   return items.filter(
     (item) =>
       (isEvent(item) && item.classification === 'Failed') ||
+      (isEvent(item) && item.classification === 'TimedOut') ||
       isPendingActivity(item) ||
       isPendingNexusOperation(item) ||
       (isEventGroup(item) &&
-        (item.pendingActivity ||
-          item.pendingNexusOperation ||
-          item.finalClassification === 'Failed')),
+        (item.isPending ||
+          item.finalClassification === 'Failed' ||
+          item.finalClassification === 'TimedOut')),
   );
 };
 
@@ -33,7 +34,8 @@ export const getFailedOrPendingGroups = (
   return items.filter(
     (item) =>
       isEventGroup(item) &&
-      item.eventList.length > 1 &&
-      (item.isPending || item.finalClassification === 'Failed'),
+      (item.isPending ||
+        item.finalClassification === 'Failed' ||
+        item.finalClassification === 'TimedOut'),
   );
 };